小程序概述
https://baike.baidu.com/item/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/20171697?fr=aladdin
小demo
開發(fā)者工具
解決方案
用webstrom
http://www.itdecent.cn/p/028addf07971
關(guān)于小程序中網(wǎng)絡相關(guān)API的說明
https://developers.weixin.qq.com/miniprogram/dev/api/api-network.html
主流 小程序 JS 框架
騰訊 wepy 、美團 mpvue 、京東 taro
由于現(xiàn)有的 H5 是由 vue 實現(xiàn)的為了更加方便的遷移修改代碼，所以直接 pass 掉 taro
| 原生 | wypy | mpvue | |
|---|---|---|---|
| 作者 | 微信官方 | 騰訊團隊 | 美團 |
| 語法規(guī)范 | 小程序框架 | 類Vue開發(fā)規(guī)范 | Vue 開發(fā)規(guī)范 |
| 標簽 | 小程序標簽 | 小程序標簽 | html + 小程序標簽 |
| 樣式 | wxss | sass、less、postcss | sass、less、styus |
| 組件化 | 自身的組件化做的并不好 | Vue 組件化規(guī)范 + 小程序原生組件化 | Vue 組件化規(guī)范 + 小程序原生組件化 |
| 多端復用 | 不可復用 | 支持轉(zhuǎn)H5 | 支持轉(zhuǎn)H5 |
| 自動構(gòu)建 | 小程序原生代碼無需構(gòu)建 | 框架內(nèi)部構(gòu)建 | webpack 構(gòu)建 |
| 上手成本 | 全新學習 | Vue 和 wepy | 熟悉 Vue 即可 |
| 狀態(tài)分發(fā)管理 | 不支持 | redux | Vuex |
| 包管理 | 基本不支持 | npm | npm |
| github start | 15917 | 15244 | |
| github lssuse | 114 open, 1496 close | 217 open, 1009 close |
生命周期
同為vue規(guī)范的mpvue和wepy的生命周期和各種方法不盡相同
wepy
wepy生命周期基本與原生小程序相同,再此基礎上糅合了一些vue的特性; 對于WePY中的methods屬性，因為與Vue中的使用習慣不一致，非常容易造成誤解，這里需要特別強調(diào)一下：WePY中的methods屬性只能聲明頁面wxml標簽的bind、catch事件，不能聲明自定義方法，這與Vue中的用法是不一致的。
import wepy from 'wepy';
export default class MyPage extends wepy.page {
// export default class MyComponent extends wepy.component {
customData = {} // 自定義數(shù)據(jù)
customFunction () {} //自定義方法
onLoad () {} // 在Page和Component共用的生命周期函數(shù)
onShow () {} // 只在Page中存在的頁面生命周期函數(shù)
config = {}; // 只在Page實例中存在的配置數(shù)據(jù)，對應于原生的page.json文件
data = {}; // 頁面所需數(shù)據(jù)均需在這里聲明，可用于模板數(shù)據(jù)綁定
components = {}; // 聲明頁面中所引用的組件，或聲明組件中所引用的子組件
mixins = []; // 聲明頁面所引用的Mixin實例
computed = {}; // 聲明計算屬性（詳見后文介紹）
watch = {}; // 聲明數(shù)據(jù)watcher（詳見后文介紹）
methods = {}; // 聲明頁面wxml中標簽的事件處理函數(shù)。注意，此處只用于聲明頁面wxml中標簽的bind、catch事件，自定義方法需以自定義方法的方式聲明
events = {}; // 聲明組件之間的事件處理函數(shù)
}
mpvue
mpvue 除了 Vue 本身的生命周期外，還兼容了小程序生命周期，這部分生命周期鉤子的來源于微信小程序的 Page， 除特殊情況外，不建議使用小程序的生命周期 鉤子。
Vue
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
app 部分
onLaunch，初始化
onShow，當小程序啟動，或從后臺進入前臺顯示
onHide，當小程序從前臺進入后臺
page 部分
onLoad，監(jiān)聽頁面加載
onShow，監(jiān)聽頁面顯示
onReady，監(jiān)聽頁面初次渲染完成
onHide，監(jiān)聽頁面隱藏
onUnload，監(jiān)聽頁面卸載
onPullDownRefresh，監(jiān)聽用戶下拉動作
onReachBottom，頁面上拉觸底事件的處理函數(shù)
onShareAppMessage，用戶點擊右上角分享
onPageScroll，頁面滾動
onTabItemTap, 當前是 tab 頁時，點擊 tab 時觸發(fā)
new Vue({
data: {
a: 1
},
created () {
// `this` 指向 vm 實例
console.log('a is: ' + this.a)
},
onShow () {
// `this` 指向 vm 實例
console.log('a is: ' + this.a, '小程序觸發(fā)的 onshow')
}
})
// => "a is: 1"
參考文獻
https://www.cnblogs.com/Smiled/p/9806781.html
http://www.itdecent.cn/p/66ac8d24c670
小程序文檔：https://developers.weixin.qq.com/miniprogram/dev/
mpvue：http://mpvue.com/
wepy：https://tencent.github.io/wepy/
