The difference between WeChat applet and uniapp
- Touch event name:
①WeChat applet:bindtap
②uni-app:@click - Function parameter passing method:
①WeChat applet:<view bindtap="click" data-id="id"></view>
②uni-app:<view @click="click(id)"></view> - The function receives parameters:
①WeChat applet:function(e){this.setData(currentId:e.currentTarget.dataset.id)}
②uni-app:function(id){ this.currentId = id} - for loop:
①WeChat applet:<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 judgment:
①WeChat applet:<view wx:if="{ {isShow}}"></view>
②uni-app:<view v-if="isShow"></view> - Attribute binding:
①WeChat applet:<image src="{ {item.img}}"></image>
②uni-app:<image :src="$util.img(item.img)"></image> - Page parameters:
①WeChat applet:<navigator url="/pages/live?id={ {item.room_id}}"></navigator>
②uni-app:<navigator :url="'/pages/live?id=' + item.room_id"></navigator> - The value of input is bound and listened to
①WeChat applet: <input value='{ { {sex}}' bindinput ='getInput'></input>
getInput(e){ //Real-time monitoring console.log( e.detail.value ) }
②uni-app: < input v-model ='sex'></input>
- Update view method:
①WeChat applet : this.setData ({ data: 1 })
②uni-app: this.data = 1
Similarities between WeChat applets and uniapp
1. The page labels are basically the same
view，text、scroll-view，input、picker、swiper等等
2. The api is basically the same, just replace wx with uni
Native writing: wx.request, wx.showModal, wx.showToast, wx.showLoading, wx.chooseImage, wx.switchTab, wx.navigateo, wx.setStorageSync, etc.
uniapp写法：uni.request，uni.showModal、uni.showToast、uni.showLoading、uni.chooseImage、uni.switchTab、uni..navigateo、uni.setStorageSync etc.
3. The life cycle functions are the same
onLoad, onShow, onPullDownRefresh, onReachBotton, onShareAppMessage, etc.
So how to develop a small program? You have two options, native development and uniapp development.
1. Native development
Let's take a look at the advantages of native development on the homepage:
①The official documents are clear and clear, which is closer to the underlying logic of mobile services, and developers can carry out in-depth development of small programs in a more targeted manner.
②Using native development can closely follow the official version, and the update response speed is fast, so that the project can reach the optimal state.
Let's look at the disadvantages:
Developing small programs on different platforms requires different development tools and syntax, such as WeChat developer tools, Ali development tools, ByteDance development tools, QQ development tools, etc. If the project is only a single-platform small program, it is undoubtedly native It is the best choice, but if you develop multi-platform applets at the same time, you need to write multiple sets of codes for the same project, and the later maintenance will be a lot of work and costly.
2. uniapp development
Then look at the advantages of uniapp development:
①One set of code can package 14 different types of platforms, and can generate various small programs H5 and APP applications. Developers do not need to switch back and forth between various development tools, and use HBuild to get everything done.
It can cooperate with the hbuilderx editor to package and generate applets, h5, app, etc.
②Easy to get started, using the syntax of vue combined with the small program api, if you have a vue foundation, you can read the document and get started directly. If you don't have a vue foundation, you can master vue development through uniapp. After all, vue is the handle of front-end development.
③uniapp supports multiple terminals and has a better ecology. If the project requirements are not high, you can quickly create an application without writing too much code.
Let's look at the disadvantages:
The small programs packaged by uniapp may have platform compatibility issues. The same code will be different on different platforms. The official version is actively updated. I believe these issues will be resolved gradually.