原生開發小程序 和 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')} })

• 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開發；

---

以上為一些簡單的對比，具體開發詳情請移駕官方文檔。

總結

以上是生活随笔為你收集整理的原生开发小程序 和 wepy 、 mpvue 对比的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。