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

秒速五厘米 2022-05-25 06:36 219阅读 0赞

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

原生开发小程序文档：[点此进入][Link 1]   
wepy 开发文档：[点此进入][Link 2]   
mpvue 开发文档：[点此进入][Link 3]

### 三者的简单对比： ###

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

![image][]

小程序支持的是 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')
      }
    })

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13

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

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

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7

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

#### 3.开发便利上： ####

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

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

*  1
 *  2
 *  3
 *  4
 *  5

watcher 监听器的写法：

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

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7

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

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

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8

watcher 监听器的写法：

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

*  1
 *  2
 *  3
 *  4
 *  5

#### 4.对云信 im 的支持性： ####

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

--------------------

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

[Link 1]: https://mp.weixin.qq.com/debug/wxadoc/dev/quickstart/basic/getting-started.html
[Link 2]: https://tencent.github.io/wepy/document.html#/
[Link 3]: http://mpvue.com/
[image]: https://raw.githubusercontent.com/aYangLi/image-folder/master/youdao/small-programs.jpeg