原生开发小程序 和 wepy 、 mpvue 对比

原生开发小程序 和 wepy 、 mpvue 对比

本文横向对比、探讨了下原生开发小程序，和目前比较热门的 wepy 、mpvue 开发小程序三种方式的优势和劣势；由于三者的篇幅都比较多，本文只是简单介绍。如有错误，请大神们指正。

三者的开发文档以及介绍：

原生开发小程序文档：点此进入
wepy 开发文档：点此进入
mpvue 开发文档：点此进入

三者的简单对比：

以下用一张图来简单概括三者的区别：

小程序支持的是 WXML + WXSS + JS 这样的组合，所以，wepy 和 mpvue 都是将文件构建到 dist 目录，转换为小程序支持的文件类型，然后将微信开发者工具指向 dist 目录下，进行调试开发，并且两者都提供了热更新。

开发中，该选择哪种开发方式：

个人认为：
如果小程序项目是新项目，没有旧的 h5 项目迁移，则可以考虑用小程序原生开发，好处：相比于第三方框架，坑少。
如果是从老的 h5 项目迁移到小程序，并且 老的 h5 项目是 vue 开发或者既有 h5 项目也需要小程序开发，则比较适合 wepy 或者 mpvue 来做迁移或者开发。

以下提供一些三者的不同点，作为开发者选择开发方式的建议，具体的开发文档请移驾各自的官方文档。。

1.开发方式上：

原生开发：
开发者需要全新学习小程序的抒写格式，目前版本模板中支持 slot，但是不支持 npm 包。原生不支持 css 预处理器，但是 vsCode 中 Easy WXLESS 插件可以将 less 文件自动转换为 wxss 文件；
wepy：
开发者需要熟悉 vue 和 wepy 两种语法，支持 slot 组件内容分发插槽，支持 npm 包，支持 css 预处理器；
mpvue：
开发者需要熟悉 vue ，目前版本（v1.0.5）不支持 slot ，支持 npm 包，支持 css 预处理器；

2.应用状态管理上：

原生开发：
没有提供原生的应用状态管理方式，但是可以将 Redux or Mobx 引入到项目中。
小程序原生提供了一种声明使用全局变量，写法为：

app.js 中配置变量

//App.js
App({
  BASE_URL: 'http://www.1m85.com/api',
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  }
})

通过全局函数 getApp() 可以获取全局的应用实例，然后调用配置常量
/pages/index/index index.js测试

Page({
  onLoad:function(options){
     var app = getApp();        // Get the app instance.
     console.log(app.BASE_URL); 
  }

})

wepy：
可以将 Redux or Mobx 引入到项目中。
mpvue：
可以直接使用 vuex 做应用状态管理

3.开发便利上：

原生开发：
不支持 computed 计算属性和 watcher 监听器；模板语法中只支持简单的 js 表达式。需要写小程序的 view 标签等；
wepy：
支持 computed 计算属性和 watcher 监听器；模板语法中只支持简单的 js 表达式。需要写小程序的 view 标签等；
computed 的写法：

computed = {
  aPlus () {
    return this.a + 1
  }
}

watcher 监听器的写法：

// 监听器函数名必须跟需要被监听的data对象中的属性num同名，
// 其参数中的newValue为属性改变后的新值，oldValue为改变前的旧值
watch = {
  num (newValue, oldValue) {
    console.log(`num value: ${oldValue} -> ${newValue}`)
  }
}

mpvue：
支持 computed 计算属性和 watcher 监听器；模板语法中只支持简单的 js 表达式。可以直接写 div 、span 等标签
computed 的写法：

computed: {
    computedClassStr () {
        return this.isActive ? 'active' : ''
    },
    computedClassObject () {
        return { active: this.isActive }
    }
}

watcher 监听器的写法：

watch: {
  num (newValue, oldValue) {
    console.log(`num value: ${oldValue} -> ${newValue}`)
  }
}

4.对云信 im 的支持性：

原生开发：
云信支持原生小程序开发；
wepy：
云信暂不支持wepy开发；
mpvue：
云信支持mpvue开发；

---

以上为一些简单的对比，具体开发详情请移驾官方文档。