初探小程式之mpvue 以及 iView Weapp 的使用
前言：mpvue —— 美團開源的小程式開發框架。自開源依賴獲得了大量star並一躍成為了小程式開發的新寵。如果說wepy是類vue開發，那mpvue是無限接近vue開發。
mpvue：繼承自vue.js，其技術規範和語法特點與 vue.js 保持一致。
名稱由來：mp：mini program 的縮寫
mpvue：Vue.js in mini program
框架原理：mpvue 保留了 vue.runtime 核心方法，無縫繼承了 Vue.js 的基礎能力
mpvue-template-compiler 提供了將 vue 的模板語法轉換到小程式的 wxml 語法的能力
修改了 vue 的建構配置，使之構建出符合小程式專案結構的程式碼格式： json/wxml/wxss/js 檔案
常見使用：
-
元件傳參：===>>注意：微信小程式官方的路由API傳參時只能傳遞 字串型別 的資料
傳遞：wx.navigateTo({url : "url地址?引數1=值1&引數2=值3..." });
接收：this.$root.$mp.query.引數名 ==>>小程式page onLoad生命週期內，即監聽頁面載入
this.$root.$mp.appOptions.引數名 ==>>小程式app onLaunch/onShow
例項：wx.navigateTo({url : '../addAddress/main?editItem=' + JSON.stringify(item)});
if(this.$root.$mp.query.editItem){ //mounted 生命週期內
console.log(JSON.parse(this.$root.$mp.query.editItem));
}
- 小程式的路由API
wx.redirectTo({ url : '' } { success / fail / complete的回撥函式 }); ==>> 重定向
wx.reLaunch({ url : '' } { success / fail / complete的回撥函式 }); ==>> 關閉所有頁面，開啟到應用內的某個頁面
wx.navigateTo({ url : '' } { success / fail / complete的回撥函式 }); ==>> 調整頁面
wx.switchTab({ url : '' } { success / fail / complete的回撥函式 }); ==>> 調整tabBar 頁面
wx.navigateBack({ url : '' } { success / fail / complete的回撥函式 }); ==>> 返回上一頁
- .stop 的使用會阻止冒泡，但是同時綁定了一個非冒泡事件，會導致該元素上的 catchEventName 失效！
eg: <div @click = "click1">
<p @click.stop = "click2">點選子元素</p>
</div>
.prevent可以直接幹掉，因為小程式裡沒有什麼預設事件，比如submit並不會跳轉頁面.self沒有可以判斷的標識.once也不能做，因為小程式沒有 removeEventListener, 雖然可以直接在 handleProxy 中處理，但非常的不優雅，違背了原意，暫不考慮
專案目錄程式碼解釋：
pages資料夾中的每一個頁面中的檔案：index.vue、main.js、main.json
index.vue ==>> 通過vue.js、小程式元件和API、UI框架iview以及JavaScript寫頁面佈局和邏輯處理
main.js ==>> 例項化vue元件並掛載元件；固定寫法
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()main.json ==>> 該頁面的頁面配置；如頁面標題欄的文字，需要用的UI元件引入
{
"navigationBarTitleText": "我的",
"navigationBarBackgroundColor": "#fcc",
"navigationBarTextStyle": "black",
"usingComponents": {
"i-button": "/static/iview/button/index",
"i-icon": "/static/iview/icon/index"
}
}
微信小程式的配置可以閱讀官方文件：
iview Weapp元件的使用方法：
1. 下載小程式元件庫 (前提是你已經有了專案目錄）
你可以直接去github把iView Weapp的程式碼下載下來，也可以用過npm來下載。
github地址：https://github.com/TalkingData/iview-weapp
2. 將元件庫複製到工程的static目錄下
下載完成後，到它的目錄中尋找名為dist的目錄並複製到你的mpvue工程下的static目錄下（記得一定要是static目錄，否則這些程式碼會被mpvue編譯器錯誤的進行處理），然後給這個dist目錄改個名字，比如叫iview。
如：
3. 為需要使用自定義元件的Page進行配置
在頁面對應的配置檔案（main.json)中引入元件
4. 在Page中使用自定義元件；即在index.vue中使用
注意：iView Weapp給我的感覺好像是沒有開發完成（畢竟是2018-05才出來的）；很多元件提供的屬性根本沒有作用，甚至於暴露出來的屬性在他們的原始碼裡面根本就沒有定義（但就算是這樣的情況，iView Weapp也是比較好的UI框架了）。所以請大家在使用時注意，前方高能，注意填坑！！！
最後：總結一下可能用到的官方文件
mpvue：http://mpvue.com/
微信小程式：https://developers.weixin.qq.com/miniprogram/dev/
iView Weapp：https://weapp.iviewui.com/docs/guide/start
vue.js：https://cn.vuejs.org/v2/guide/
iView Weapp GitHub下載：https://github.com/TalkingData/iview-weapp
文章僅為本人學習過程的一個記錄，僅供參考，如有問題，歡迎指出！