快捷搜索:

原生开发小程序 和 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开拓;

以上为一些简单的比较,详细开拓详情请移驾官方文档。

您可能还会对下面的文章感兴趣: