原生開發小程序 和 wepy 、 mpvue 對比

時間  2019-11-18
標籤 原生 開發 程序 wepy mpvue 對比 简体版
原文   原文鏈接

1.三者的開發文檔以及介紹：

原生開發小程序文檔：點此進入 
wepy 開發文檔：點此進入 
mpvue 開發文檔：點此進入javascript

2.三者的簡單對比：

如下用一張圖來簡單歸納三者的區別：css

image

小程序支持的是 WXML + WXSS + JS 這樣的組合，因此，wepy 和 mpvue 都是將文件構建到 dist 目錄，轉換爲小程序支持的文件類型，而後將微信開發者工具指向 dist 目錄下，進行調試開發，而且二者都提供了熱更新。html

3.開發中，該選擇哪一種開發方式：

1.開發方式上：

原生開發： 
開發者須要全新學習小程序的抒寫格式，目前版本模板中支持 slot，可是不支持 npm 包。原生不支持 css 預處理器，可是 vsCode 中 Easy WXLESS 插件能夠將 less 文件自動轉換爲 wxss 文件； 
wepy： 
開發者須要熟悉 vue 和 wepy 兩種語法，支持 slot 組件內容分發插槽，支持 npm 包，支持 css 預處理器； 
mpvue： 
開發者須要熟悉 vue ，目前版本（v1.0.5）不支持 slot ，支持 npm 包，支持 css 預處理器；vue

2.應用狀態管理上：

原生開發： 
沒有提供原生的應用狀態管理方式，可是能夠將 Redux or Mobx 引入到項目中。 
小程序原生提供了一種聲明使用全局變量，寫法爲：java

app.js 中配置變量git

1
2
3
4
5
6
7
8
9
10
11
12
13
//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測試github

1
2
3
4
5
6
7
Page({
   onLoad: function (options){
      var  app = getApp();         // Get the app instance.
      console.log(app.BASE_URL);
   }
 
})

 

wepy： vuex

能夠將 Redux or Mobx 引入到項目中。 npm


mpvue： 
能夠直接使用 vuex 作應用狀態管理小程序

3.開發便利上：

原生開發： 
不支持 computed 計算屬性和 watcher 監聽器；模板語法中只支持簡單的 js 表達式。須要寫小程序的 view 標籤等； 


wepy： 
支持 computed 計算屬性和 watcher 監聽器；模板語法中只支持簡單的 js 表達式。須要寫小程序的 view 標籤等； 
computed 的寫法：

1
2
3
4
5
computed = {
   aPlus () {
     return  this .a + 1
   }
}

 

watcher 監聽器的寫法：

// 監聽器函數名必須跟須要被監聽的data對象中的屬性num同名， // 其參數中的newValue爲屬性改變後的新值，oldValue爲改變前的舊值

1
2
3
4
5
watch = {
   num (newValue, oldValue) {
     console.log(`num value: ${oldValue} -> ${newValue}`)
   }
}

 

mpvue： 

支持 computed 計算屬性和 watcher 監聽器；模板語法中只支持簡單的 js 表達式。能夠直接寫 div 、span 等標籤 
computed 的寫法：

1
2
3
4
5
6
7
8
computed: {
     computedClassStr () {
         return  this .isActive ?  'active'  :  ''
     },
     computedClassObject () {
         return  { active:  this .isActive }
     }
}

 

 

watcher 監聽器的寫法：

1
2
3
4
5
watch: {
   num (newValue, oldValue) {
     console.log(`num value: ${oldValue} -> ${newValue}`)
   }
}

4.組件化

mpvue

詳細的不支持列表：

  • 暫不支持在組件引用時，在組件上定義 click 等原生事件、v-show（可用 v-if 代替）和 class style 等樣式屬性(例：<card class="class-name"> </card> 樣式是不會生效的)，由於編譯到 wxml，小程序不會生成節點，建議寫在內部頂級元素上。
  • Slot（scoped 暫時還沒作支持）
  • 動態組件
  • 異步組件
  • inline-template
  • X-Templates
  • keep-alive
  • transition
  • class
  • style

mpvue 能夠支持小程序的原生組件，好比： picker,map 等，須要注意的是原生組件上的事件綁定，須要以 vue 的事件綁定語法來綁定，如 bindchange="eventName" 事件，須要寫成 @change="eventName"

 

wepy

props 傳值

props傳值在WePY中屬於父子組件之間傳值的一種機制，包括靜態傳值與動態傳值。靜態傳值和VUE相似

動態傳值是指父組件向子組件傳遞動態數據內容，父子組件數據徹底獨立互不干擾。但能夠經過使用.sync修飾符來達到父組件數據綁定至子組件的效果，也能夠經過設置子組件props的twoWay: true來達到子組件數據綁定至父組件的效果

支持雙向綁定！！而vue是一種自上而下的數據傳遞方式！！

wepy.component基類提供$broadcast、$emit、$invoke三個方法用於組件之間的通訊和交互

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import wepy from  'wepy'
 
export  default  class Com extends wepy.component {
     components = {};
 
     data = {};
 
     methods = {};
 
     // events對象中所聲明的函數爲用於監聽組件之間的通訊與交互事件的事件處理函數
     events = {
         'some-event' : (p1, p2, p3, $event) => {
                console.log(`${ this .$name} receive ${$event.name} from ${$event.source.$name}`);
         }
     };
     // Other properties
}

 

不一樣的是組件自定義的事件定義在events對象中。

$broadcast事件是由父組件發起，全部子組件都會收到此廣播事件，除非事件被手動取消。

$emit

$emit與$broadcast正好相反，事件發起組件的全部祖先組件會依次接收到$emit事件。

$invoke

$invoke是一個頁面或組件對另外一個組件中的方法的直接調用，經過傳入組件路徑找到相應的組件，而後再調用其方法。

 

組件自定義事件處理函數

能夠經過使用.user修飾符爲自定義組件綁定事件，如：@customEvent.user="myFn"

其中，@表示事件修飾符，customEvent 表示事件名稱，.user表示事件後綴。

目前總共有三種事件後綴：

  • .default: 綁定小程序冒泡型事件，如bindtap，.default後綴可省略不寫；

  • .stop: 綁定小程序捕獲型事件，如catchtap；

  • .user: 綁定用戶自定義組件事件，經過$emit觸發。注意，若是用了自定義事件，則events中對應的監聽函數不會再執行。

 

 

5.參數獲取

原生開發： 

APP 中

 

onLaunch: function(options) { // Do something initial when launch. }, onShow: function(options) { // Do something when show. },
Page中
onLoad: function(options) { // Do some initialize when page load. }

mpvue

在全部 頁面 的組件內能夠經過 this.$root.$mp.query 進行獲取onLoad 時候傳遞的 options。

在全部的組件內能夠經過 this.$root.$mp.appOptions 進行獲取小程序在 app onLaunch/onShow 時候傳遞的 options。

 

 

6.數據更新

原生開發，mpvue

經過this.setData({});

wepy

WePY使用髒數據檢查對setData進行封裝，在函數運行週期結束時執行髒數據檢查，一來能夠不用關心頁面屢次setData是否會有性能上的問題，二來能夠更加簡潔去修改數據實現綁定，不用重複去寫setData方法。

this.title = 'this is title';

需注意的是，在異步函數中更新數據的時候，必須手動調用$apply方法，纔會觸發髒數據檢查流程的運行。如：

1
2
3
4
setTimeout(() => {
     this .title =  'this is title' ;
     this .$apply();
}, 3000);

 

 

7.事件處理

mpvue

// 事件映射表，左側爲 WEB 事件，右側爲 小程序 對應事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
     click:  'tap' ,
     touchstart:  'touchstart' ,
     touchmove:  'touchmove' ,
     touchcancel:  'touchcancel' ,
     touchend:  'touchend' ,
     tap:  'tap' ,
     longtap:  'longtap' ,
     input:  'input' ,
     change:  'change' ,
     submit:  'submit' ,
     blur:  'blur' ,
     focus:  'focus' ,
     reset:  'reset' ,
     confirm:  'confirm' ,
     columnchange:  'columnchange' ,
     linechange:  'linechange' ,
     error:  'error' ,
     scrolltoupper:  'scrolltoupper' ,
     scrolltolower:  'scrolltolower' ,
     scroll:  'scroll'
}

在 input 和 textarea 中 change 事件會被轉爲 blur 事件。

 

8.其它

mpvue

不支持部分複雜的 JavaScript 渲染表達式

template 中的 {{}} 雙花括號的部分，直接編碼到 wxml 文件中，因爲微信小程序的能力限制(數據綁定)，因此沒法支持複雜的 JavaScript 表達式。

不支持過濾器

不支持函數  不支持在 template 內使用 methods 中的函數。

 

wepy

 

interceptor 攔截器

 

可使用WePY提供的全局攔截器對原生API的請求進行攔截。

 

具體方法是配置API的config、fail、success、complete回調函數。參考示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import wepy from  'wepy' ;
 
export  default  class extends wepy.app {
     constructor () {
         // this is not allowed before super()
         super ();
         // 攔截request請求
         this .intercept( 'request' , {
             // 發出請求時的回調函數
             config (p) {
                 // 對全部request請求中的OBJECT參數對象統一附加時間戳屬性
                 p.timestamp = + new  Date();
                 console.log( 'config request: ' , p);
                 // 必須返回OBJECT參數對象，不然沒法發送請求到服務端
                 return  p;
             },
 
             // 請求成功後的回調函數
             success (p) {
                 // 能夠在這裏對收到的響應數據對象進行加工處理
                 console.log( 'request success: ' , p);
                 // 必須返回響應數據對象，不然後續沒法對響應數據進行處理
                 return  p;
             },
 
             //請求失敗後的回調函數
             fail (p) {
                 console.log( 'request fail: ' , p);
                 // 必須返回響應數據對象，不然後續沒法對響應數據進行處理
                 return  p;
             },
 
             // 請求完成時的回調函數(請求成功或失敗都會被執行)
             complete (p) {
                 console.log( 'request complete: ' , p);
             }
         });
     }
}

wpy其它優化細節

 

1. wx.request 接收參數修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 原生代碼:
 
wx.request({
     url:  'xxx' ,
     success:  function  (data) {
         console.log(data);
     }
});
 
// WePY 使用方式, 須要開啓 Promise 支持，參考開發規範章節
wepy.request( 'xxxx' ).then((d) => console.log(d));
 
// async/await 的使用方式, 須要開啓 Promise 和 async/await 支持，參考 WIKI
async  function  request () {
    let d = await wepy.request( 'xxxxx' );
    console.log(d);
}

 

2. 優化事件參數傳遞

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 原生的事件傳參方式:
 
<view data-id= "{{index}}"  data-title= "wepy"  data-other= "otherparams"  bindtap= "tapName" > Click me! </view>
 
Page({
     tapName:  function  (event) {
         console.log(event.currentTarget.dataset.id) // output: 1
         console.log(event.currentTarget.dataset.title) // output: wepy
         console.log(event.currentTarget.dataset.other) // output: otherparams
     }
});
 
// WePY 1.1.8之後的版本，只容許傳string。
 
<view @tap= "tapName({{index}}, 'wepy', 'otherparams')" > Click me! </view>
 
methods: {
     tapName (id, title, other, event) {
         console.log(id, title, other) // output: 1, wepy, otherparams
     }
}

 

 

3. 改變數據綁定方式

保留setData方法，但不建議使用setData執行綁定，修復傳入undefined的bug，而且修改入參支持： this.setData(target, value) this.setData(object)

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程