微信小程序调研

微信小程序开发方案
框架选型：Wepy、Mpvue、Taro

官方写法

1. 优点：官方支持、新功能可以马上使用
2. 缺点:官方不提供状态共享 状态共享GitHub地址
3. 语法与 Vue 有一定的差异，不支持less，sass之类的
4. 不完全支持npm，微信开发者工具提供转译
5. 只能支持小程序版的第三方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等标签，见官方文档

    // bindtap 绑定点击事件，data-idx 绑定数据，item，index默认for循环的参数，支持修改
    {{item}}

js文件中

data:{
    list:[1,2,3,4,5,6,7]
},
action(e){
    const idx = e.currentTarget.detail.idx;
    console.log(idx);
}

自定义组件

子组件js 文件，wxml文件没有什么不同 支持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文件

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 为别名

 {{tools.foo}} 
 {{tools.bar(tools.foo)}} 

组件间的代码共享 类似于mixin behaviors

wepy

### 优点
部分支持与小程序混写
promise化了小程序API
优化了小程序，参数传递
最近支持转H5，还没试过
### 缺点
代码包大概大了40kb
学习成本高
需要的技术栈 vue，react，redux，小程序，wepy独有的写法
异步操作中，需要手动调用this.$apply()，更新界面
自己想办法转H5
总结
提供模块化的开发体验

关于 this 的指向 写法不同 this 指向不同

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

// 正确

// 小程序 编译报错

列表循环

// 必须使用WePY定义的辅助标签
// 不支持在 repeat 的组件中去使用 props, computed, watch 等等特性

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的开发体验
兼容性好，直接就能混写小程序