uni-app与原生小程序、vue的区别

微信小程序和 uniapp 的区别

触摸事件名称：
①微信小程序：bindtap
②uni-app：@click
函数传参方式：
①微信小程序：<view bindtap="click" data-id="id"></view>
②uni-app：<view @click="click(id)"></view>
函数接收参数：
①微信小程序：function(e){this.setData(currentId:e.currentTarget.dataset.id)}
②uni-app：function(id){ this.currentId = id}
for 循环：
①微信小程序：<view wx:for="{ {currentList}}" wx:for-index="s_index" wx:for-item="s_item"></view>
②uni-app：<view v-for="(s_item,s_index) in currentList"></view>
if 判断：
①微信小程序：<view wx:if="{ {isShow}}"></view>
②uni-app：<view v-if="isShow"></view>
属性绑定：
①微信小程序：<image src="{ {item.img}}"></image>
②uni-app：<image :src="$util.img(item.img)"></image>
页面传参：
①微信小程序：<navigator url="/pages/live?id={ {item.room_id}}"></navigator>
②uni-app：<navigator :url="'/pages/live?id=' + item.room_id"></navigator>
input的value值绑定并监听

①微信小程序：<input value='{ {sex}}' bindinput='getInput'></input>

getInput(e){ //实时监听 console.log(e.detail.value) }
②uni-app：<input v-model='sex'></input>

微信小程序和 uniapp 的相同点

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.navigateo、wx.setStorageSync等等

uniapp写法：uni.request，uni.showModal、uni.showToast、uni.showLoading、uni.chooseImage、uni.switchTab、uni..navigateo、uni.setStorageSync等等

3、生命周期函数相同

onLoad，onShow，onPullDownRefresh、onReachBotton、onShareAppMessage等等

那么如何开发一款小程序那？你有两种选择，原生开发和uniapp开发。

1.原生开发

首页我们来看一下原生开发的优点：

①官方文档清晰明了，更接近手机服务的底层逻辑，开发者可以更有针对性的对小程序进行深度开发。

②使用原生开发可以紧随官方的版本，更新响应速度快，让项目达到最优状态。

再来看一下缺点：

开发不同平台下的小程序，需要不同的开发工具及语法，如微信开发者工具、阿里开发工具、字节跳动开发工具、QQ开发工具等等，如果项目只做单平台的小程序，原生无疑是最优的选择，但如果同时开发多平台小程序，同样的项目需要写多套代码，后期维护起来工作量大成本高。

2.uniapp开发

然后看一下uniapp开发的优点：

①一套代码可以打包14个不同类型的平台，能生成各种小程序H5及APP应用，开发者不需来回切换各种开发工具，使用HBuild一款编辑器全搞定。

可以配合hbuilderx编辑器封装生成小程序、h5、app等

②方便入手，使用vue的语法结合小程序api，有vue基础可以看文档直接上手，没有vue基础可以通过uniapp掌握vue开发，毕竟vue是前端开发的扛把子。

③uniapp多终端支持而且生态更好一些，如果项目要求不高，基本不用写太多代码，就能速成一款应用。

再来看一下缺点：

uniapp打包出来的小程序可能会存在平台兼容问题，同样的代码会在不同平台下存在差异，官方版本更新活跃，相信这些问题逐渐都会得到解决的。