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

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>