首页 > 编程语言 >uni-app和vue及微信小程序的异同

uni-app和vue及微信小程序的异同

时间:2024-08-12 23:27:59浏览次数:6  
标签:vue 微信 app 组件 uni 写法 wx

 

uni-app和vue的区别
1、目录不同

 

uni-app目录依赖原生小程序风格,比如分包的概念

 

vue中对不同的页面只需要在views文件夹中定义不同组件,然后配置路由跳转就行了,所有页面都是这样,

 

而uni-app只有底部导航栏对应的几个页面才能定义在pages文件夹下,其余的页面都需要定义在subpkg文件夹下

 

2、对页面之间跳转的路由配置不同

 

uni-app在package.json文件中对底部导航栏页面和其他分包页面的路由进行配置

 

而vue统一在router文件夹下进行路由配置,且文件夹名没有限制

 

3、页面使用的标签不同

 

uni-app标签使用小程序使用的<view></view>、<block></block>等

 

uni-app中的部分标签是已经封装好了的功能,例如<swiper>轮播图标签,<scroll>滚动标签,只需要使用这些标签就可以实现对应功能

 

而vue中轮播图功能需要引入组件库使用组件库提供的标签或者自己通过很多代码来实现,滚动功能vue中需要使用better-scroll插件来实现,引入插件之后实现滚动功能包括监听滚动事件,实现上拉刷新等

 

4、生命周期函数不同

 

uni-app使用onLoad()等生命周期函数,且生命周期函数分为三类,而vue一套生命周期函数通用

 

5、一部分api不同

 

比如uni-app使用uni.$navigateTo()等进行页面的跳转,而vue使用this.$router.push()等进行跳转

 

6、接收路由传递参数方式不同

 

uni-app统一在onLoad(options)生命周期函数中携带的options参数获取路由传递的参数,

 

而vue通过this.$route.query获取路由参数

 

7、对组件挂载配置不同

 

vue生成的组件都要在使用的父组件身上引用定义成为局部组件,也可以在main.js中挂载成为全局组件

 

而uni-app只需要在components文件夹下新建组件文件,不需要进行任何挂载,直接使用就行了,组件使用的名字就是components文件夹里定义组件的文件名

 

8、css样式适配单位不一样

 

小程序使用rpx进行适配,vue使用rem/vm进行适配

 

9、用户登录操作的步骤不一样

 

vue:获取用户的用户名和密码等直接发送请求从后端获取数据和token信息完成登录

 

小程序:需要先进行微信通过uni.getUserProfile拉取用户信息,然后再调用uni.login()获取登录凭证code,最后才能通过前面两步获取到的参数向服务器发送请求获取token信息完成登录

uni-app和微信小程序的区别
 

1、页面标签 基本相同

view,text、scroll-view,input、picker、swiper等等

 

2、api基本相同,wx换成uni即可

原生写法:wx.request、wx.showModal、wx.showToast、wx.showLoading、wx.chooseImage、wx.switchTab、wx.navigateTo、wx.setStorageSync等等

uniapp写法:uni.request,uni.showModal、uni.showToast、uni.showLoading、uni.chooseImage、uni.switchTab、uni.navigateTo、uni.setStorageSync等等

3、生命周期函数相同

onLoad,onShow,onPullDownRefresh、onReachBottom、onShareAppMessage等等

 

点击事件写法不同

原生小程序是bindtap

<image bindtap="preview"></image>

uniapp是@click

<image @click="preview"></image>

 

传参方式不同

原生写法是data-xxx

<image bindtap="preview" data-src = '{{item.src}}' ></image>

 

  preview(e) {    console.log( e.currentTarget.dataset.src)   },

uniapp写法

<image @click="preview(item.src)" ></image>

 

  preview(src) {    console.log(src)   },   input的value值绑定并监听 原生写法是    <input value='{{sex}}' bindinput='jianting'></input> jianting(e){ //实时监听 console.log(e.detail.value) }   uniapp写法是 <input v-model='sex'></input>   属性绑定   原生写法是   <image src='{{src}}' ></image> uniapp写法是 <input :src='src'></input>   更新视图方法   原生写法   this.setData({       data: 1     })   uniapp写法是 this.data = 1   列表循环  原生写法 <view class="flexcost mtb30" wx:for="{{list}}" wx:key='item.goodsOrderId' >{{item.name}}</view> //默认是item  uniapp写法 <view v-for="(item, index) in list" :key="item.goodsOrderId">{{item.name}}</view>

标签:vue,微信,app,组件,uni,写法,wx
From: https://www.cnblogs.com/eminer/p/18355926

相关文章

  • springboot 整合微信公众号--验证码推送(spring boot+测试号)
    一、公众号开发初探这里会使用到自己的域名进行交互,没有域名的小伙伴可以使用  内网穿透(NATAPP), 如果没有使用过的的同学请移步 20秒轻松上手NATAAPP(内网穿透)公众号整体流程:用户扫公众号二维码。然后发一条消息:验证码。我们通过api回复一个随机的验证码,并且存入re......
  • 基于springboot+vue.js+uniapp的宠物健康顾问系统附带文章源码部署视频讲解等
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaits系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • 基于ssm+vue.js+uniapp的基于冲突动态监测算法的健身房预约系统附带文章和源代码部署
    文章目录前言详细视频演示具体实现截图技术栈后端框架SSM前端框架Vue持久层框架MyBaits系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言......
  • Appium IOS启动成功日志
    1.清理了xcode环境,重新安装xcode,appium,xcuitest,删掉钥匙密钥的AppleW……证书,手动配置webdriver,然后appium启动,appiuminspector配置{"platformName":"iOS","appium:platformVersion":"17.5","appium:deviceName":"iPhonezt&q......
  • Java毕业设计 基于SSM vue在线教学质量评价系统
    Java毕业设计基于SSMvue在线教学质量评价系统SSMvue在线教学质量评价系统功能介绍前端学生首页图片轮播展示登录学生注册教师展示教师详情学生评价课程信息课程详情提交选修该课学生选课学生留言个人中心后台管理员管理员登录个人中心学生管理教......
  • uniapp项目-壁纸商城3.0【上面免费下载即可使用】
        ......
  • Java实现微信手机号更新:如何在后台同步客户信息
    文章目录接口说明:更新客户微信手机号码核心逻辑:获取微信手机号并更新客户信息总结在现代数字化生活中,手机号码是我们与外界联系的重要方式之一。特别是微信,作为中国最广泛使用的社交和支付平台,其绑定的手机号更是至关重要。在开发微信相关功能时,经常需要处理用户手......
  • Python中实现微信支付
    Python中实现微信支付一,准备环境1,要有微信公众号,商户平台账号https://pay.weixin.qq.com/wiki/doc/api/index.html2,支持的支付方式有 1540176727044.png3,备案域名选择扫码支付,如果使用模式二则不需要域名,只需要可访问的IP地址就行。一,扫码支付点击“扫码支付”......
  • APP安全评估:开发者的上架通行证
    在应用商城的浩瀚海洋中,每个APP都像一艘航船,而安全评估报告就是你的航海图和通行证。没有它,你的APP可能会在上架的风暴中迷失方向。今天,让我们一起绘制这张至关重要的航海图,确保你的APP能够安全地抵达目的地。一、安全评估报告:APP上架的必备文件一份详尽的安全评估报告不仅......
  • 微信支付 Python
    需求:微信打开商品列表页面->点击商品后直接显示付款页面->点击付款调用微信支付说明微信支付需要你申请了公众号(appid,key-用于签名),商户号(mch_id,AppSecret-用于获取openid,获取code)调起微信支付的页面需要配置授权,如你的页面是http://www.shazuihuo.com/goo......