微信小程式來了，你準備好了嗎？

阿新 • • 發佈：2018-12-13

1.小程式是基於webView的開發

2.小程式的伺服器域名一定要支援https

3.單個小程式最多不能超過2MB,小程式可以分包，最多分4個包，所以說小長鬚最大不超過8MB

4.目錄結構

app.js js邏輯程式碼

app.json 配置檔案

app.wxss 樣式檔案

app.wxml 結構檔案

5.onLaunch 生命週期鉤子

6.window用來配置全域性的特性

7.navigationBarTextStyle 文字顏色只有黑色和白色

8.安卓手機設定中的開發者選項，顯示佈局邊界，可以檢視應用是原生的還是webView

9."enablePullDownRefresh":true 開啟下拉重新整理

10.borderStyle tabbar上邊框的顏色，僅支援 black / white

position tabBar的位置，僅支援 bottom / top

其中 list 接受一個數組，只能配置最少2個、最多5個 tab。tab 按陣列的順序排序，每個項都是一個物件

iconPath 圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px，不支援網路圖片。

當 postion 為 top 時，不顯示 icon。

selectedIconPath 選中時的圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px，不支援網路圖片。
當 postion 為 top 時，不顯示 icon。

11."debug":true 顯示生命週期呼叫日誌

12.註冊程式

onLaunch 生命週期回撥—監聽小程式初始化小程式初始化完成時（全域性只觸發一次）

onShow 生命週期回撥—監聽小程式顯示小程式啟動，或從後臺進入前臺顯示時
onHide 生命週期回撥—監聽小程式隱藏小程式從前臺進入後臺時

App中既可以定義方法，又可以定義屬性

13.小插曲

vue例項中不可以隨便定義函式，在methods裡面可以

react中可以隨便定義

14.註冊頁面

onLoad 生命週期回撥—監聽頁面載入

onReady 生命週期回撥—監聽頁面初次渲染完成

onPullDownRefresh 監聽使用者下拉動作

onReachBottom 頁面上拉觸底事件的處理函式

onShareAppMessage 使用者點選右上角轉發

onPageScroll 頁面滾動觸發事件的處理函式

onTabItemTap(Object) 點選 tab 時觸發

15.點選事件 bindtap

修改值 this.setData

16.路由（分兩大類，程式設計式導航和路由元件）

navigateTo, redirectTo 只能開啟非 tabBar 頁面。
switchTab 只能開啟 tabBar 頁面。

有tabBar時

wx.switchTab({ url: '/pages/index/index', }) 無tabBar時 wx.navigateTo({ url: '/pages/index/index', }) 此方法會在路由棧中儲存一條記錄 wx.redirectTo({ url: '/pages/index/index', }) 此方法不會在路由棧中儲存一條記錄返回操作 back () { wx.navigateBack({ }) } relaunch 重新載入 <navigator open-type='navigateTo' url='/pages/index/index'> <button bindtap="handleBtnTap"> click </button> </navigator> 路由傳參&&接受引數

17.模組化方式一：定義並暴露模組 module.exports = 'hello' 引用模組 const m1 = require('../cookbook/views/m1.js') Page({ onReady() { console.log(m1) } }) 方式二：定義並暴露模組 export default 'hello world' 引用模組 import m1 from '../cookbook/views/m1.js' Page({ onReady() { console.log(m1) } }) 18.增加了npm的支援 loadsh underscore 19.API(API文件) 20.檢視層（wxml+wxss）迴圈