微信小程序开发方案
框架选型：Wepy、Mpvue、Taro
官方写法
- 优点：官方支持、新功能可以马上使用
- 缺点:官方不提供状态共享 状态共享GitHub地址
- 语法与 Vue 有一定的差异，不支持less，sass之类的
- 不完全支持npm，微信开发者工具提供转译
- 只能支持小程序版的第三方UI库
page
js 文件
Page({
页面的初始数据
data: {
},
生命周期函数--监听页面加载
onLoad: function(options) {
}
生命周期函数--监听页面初次渲染完成
onReady: function() {
},
生命周期函数--监听页面显示
onShow: function() {
},
生命周期函数--监听页面隐藏
onHide: function() {
},
生命周期函数--监听页面卸载
onUnload: function() {
},
页面相关事件处理函数--监听用户下拉动作
onPullDownRefresh: function() {
},
页面上拉触底事件的处理函数
onReachBottom: function() {
},
用户点击右上角分享
onShareAppMessage: function() {
}
})
修改data
data:{
msg:'hello world'
}
action(){
console.log(this.data.msg);
this.setData({
msg:'微信小程序'
},()=>{
// 执行完成后的 callback
// 类似vue中，nextTick
})
},
绑定事件、数据
wxml文件中
支持div等标签，见官方文档
<view wx:key='{{index}}' wx:for='{{list}}' >
// bindtap 绑定点击事件，data-idx 绑定数据，item，index默认for循环的参数，支持修改
<view bindtap='action' data-idx='{{index}}' >{{item}}</view>
</view>
js文件中
data:{
list:[1,2,3,4,5,6,7]
},
action(e){
const idx = e.currentTarget.detail.idx;
console.log(idx);
}
自定义组件
子组件js 文件，wxml文件没有什么不同 支持slot
<slot name="before"></slot>
Component({
组件的属性列表
properties: {
show: {
type: Boolean, // 类型 必填 ， 更多类型查看官方文档
value: false, // 默认值 可忽略
observer(newVal, oldVal, changedPath) {
// 可选，当传入的参数改变时，执行
}
}
},
options: {
multipleSlots: true //在组件定义时的选项中启用多slot支持
},
//生命周期函数请看官方文档
组件的初始数据
data: {
},
组件的方法列表
methods: {
action(){
// 提交 close 事件到父组件, 带上数据
this.triggerEvent("close",{
msg:'close',
code:0
})
}
}
})
父组件
json文件
{
"usingComponents":{
"carousel": "path" // 定义 组件别名、 路径
}
}
wxml文件<carousel show='{{show}}' bind:close='close'></carousel>
js文件
data:{
show:false
},
close(e){
console.log(e.detail.msg)
console.log(e.detail.code)
}
计算属性
wxs文件
var foo = "'hello world' from comm.wxs";
var bar = function(d) {
return d;
}
module.exports = {
foo: foo,
bar: bar
};
wxml文件
// tools 为别名
<wxs src="path.wxs" module="tools" />
<view> {{tools.foo}} </view>
<view> {{tools.bar(tools.foo)}} </view>
组件间的代码共享 类似于mixin behaviors
wepy
### 优点
部分支持与小程序混写
promise化了小程序API
优化了小程序，参数传递
最近支持转H5，还没试过
### 缺点
代码包大概大了40kb
学习成本高
需要的技术栈 vue，react，redux，小程序，wepy独有的写法
异步操作中，需要手动调用this.$apply()，更新界面
自己想办法转H5
总结
提供模块化的开发体验
关于 this 的指向 写法不同 this 指向不同
扫描二维码关注公众号，回复：
6490630 查看本文章
<template>
<view @tap='action'></view>
</template>
class loading extends wepy.page {
onLoad(){
this.methods.action(flag)
}
methods = {
action(flag){ // 需要使用箭头函数，保证this指向的都是 class loading
if(flag === 1){
// 这里 this 指向 methods
console.log(this,'onload')
}else{
// 这里 this 指向 class loading
console.log(this,'tap')
}
}
}
}
动态绑定class
// 正确
<view class="login-warp flex-h-c {{ showLogin?'active':'' }}"></view>
// 小程序 编译报错
<view class='login-warp flex-h-c {{ showLogin?"active":"" }}'></view>
列表循环
// 必须使用WePY定义的辅助标签<repeat>
// 不支持在 repeat 的组件中去使用 props, computed, watch 等等特性
<template>
<repeat for="{{list}}" key="index" index="index" item="item">
<!-- 插入<script>脚本部分所声明的child组件，同时传入item -->
<child :item="item"></child>
</repeat>
</template>
mpVue
### 优点
语法上，几乎与Vue没区别
扩展并兼容了小程序的生命周期
支持小程序原生组件，能部分混写小程序
### 缺点
转H5困难，需要自己配置webpack，实现跳转路由（小程序不是spa的），对小程序API进行兼容，rpx支持
代码包大概大了70kb
总结
提供了Vue的开发体验
主要是提供了vue语法转小程序语法
与Vue的不同点
不支持过滤器 ，渲染部分会转成 wxml ，wxml 不支持过滤器，所以这部分功能不支持。
小程序里所有的 BOM／DOM 都不能用，也就是说 v-html 指令不能用。
不支持在 template 内使用 methods 中的函数。
不支持 Class 与 Style 绑定 中的 classObject 和 styleObject 语法。
Taro
### 优点
使用react语法。还没有发现不同点
支持Mobx，可以替换react
使用px作为尺寸单位，Taro默认会对所有单位进行转换
支持转H5与react Native(未了解)
以微信小程序组件库为标准，结合 jsx 语法规范，定制了一套自己的UI组件库。
在小程序端，可以直接使用小程序的组件
消息机制，Taro.Events，类似Vue中的bus
promise化了小程序API，大部分支持H5端和小程序端共同使用
完全支持与小程序混写
### 缺点
代码包大概大了150kb
需要学习React
总结
提供react的开发体验
兼容性好，直接就能混写小程序
转载于:https://www.jianshu.com/p/f21d99ab5da4