《微信小程式開發 入門與實踐》

簡介

最近有看完這本書，閒來無事整理個文件。

整理完成日期：2019/02/27。

並且 《微信小程式開發 入門與實踐》 這本書是2017年4月釋出第一版，時間有點久。特別是微信小程式還不穩定都情況下編寫的，我看到書中有些介面已經有更新過了，所以最好還是參考官方文件介面，以官方介面為主。https://developers.weixin.qq.com/miniprogram/dev/api/

小程式理念

小程式不需要下載，安裝即可使用的應用。來之即用，用之即走。方便快捷。

小程式對比h5

小程式優勢：

• 提供更多手機系統原生介面，彌補h5的不足。

小程式介面：震動、掃碼、陀螺儀、指南針、裝置方向、加速、電話、電量、藍芽、聯絡人、Wi-Fi、裝置、微信運動、二維碼等等。

• 微信使用人數多，易於推廣產品。
  小程式缺點：
• 沒有h5開放和自由，對個人開發不友好。
• 沒有規範、文件不清晰。
• 開發環境和測試環境有相容性問題，不統一，增加測試難度。

開發

小程式中沒有dom,開發時不要有操作dom思想。時刻想著資料繫結、資料驅動檢視。
對於有vue或者angular開發者來說，倒是簡單很多。

對於沒有開發經驗的人

在書中：作者認為，對於沒有開發經驗的人，又想進入前端領域，小程式是很好的入門學習方式。
我持反對觀點：小程式不規範，文件不清晰，還不成熟，對個人開發不友好。也就是說，很多企業都是有企業賬號的，公司內部也是使用企業賬號進行開發，有很多特性都用不上，再說開發完成了，上線和釋出，稽核都是個問題。
這麼多的問題，還不如就學習個h5前端，有標準就有發展。

Native App 、Hybrid App 、Web App

小程式定位

做低頻和業務邏輯不復雜的應用。

pc已死論

pc為生產力（辦公等），還是不可替代的。

常用快捷鍵

ctrl + shift + [ 摺疊程式碼塊
ctrl + alt + f 程式碼格式化
shift + alt + up 向上複製一行
shift + alt + down
ctrl + i 選中當前行

檔案

json 檔案為配置檔案
wxss 樣式檔案
wxml 頁面結構
js 邏輯

MINA 框架

flex

小程式能很好的支援Flex 佈局，也是官方推薦的佈局方式。

rpx

建議 以iPhone 6 width 750 畫素作為標準。

swiper

小程式官方提供來輪播元件。
swiper 子元素只能放置swiper-item，如果放置其他元件，會被自動刪除。

生命週期 5 個

onLoad 載入
onUnload 解除安裝

onShow 顯示，每次開啟頁面都會呼叫
onHide 監聽頁面隱藏

onReady 頁面初次渲染完成， 一個頁面只會呼叫一次，代表頁面已經準備完成，可以和檢視進行互動。

一個頁面必定觸發3過週期：onLoad 、 onShow 、 onReady

3個特定事件處理函式

onPullDownRefresh 監聽頁面下拉動作處理函式
onReachBootm 頁面觸底事件處理函式
onShareAppMessage 使用者點選右上角分享。

單項資料繫結

小程式僅僅實現來單項資料繫結，即只支援從邏輯層到view層的資料繫結。
初始化資料：在page方法中，傳入Data引數：Object 型別引數。
更新資料： 使用this.setData(Object) 方法
setData 是Page 物件的原型鏈上。
setData 執行後會觸發Render，並立刻渲染檢視。

資料繫結

資料繫結使用 {{}}
屬性繫結需要使用 src = “{{}}”

block標籤

block標籤沒有任何意義，不會在頁面渲染。

wx:for = "{{Arr}}"

item, index 為關鍵詞，不用宣告可直接使用

json配置

頁面json檔案只能配置和window相關的屬性。
app.json 可以配置window 還可以配置pages、tabBar 等選項。

事件

事件是 view -> js , 檢視到邏輯層的通訊方式。

頁面跳轉

wx.redirectTo 關閉當前頁面（解除安裝當前頁面）、跳轉到指定頁面
wx.navigateTo 保留當前頁面、跳轉到指定頁面
wx.switchTap 只能跳轉到帶tabbar的頁面

事件冒泡

target元素向父元素進行傳遞，直到頁面頂級元素。

冒泡事件

touchstart
touchmove
touchcancel
touchend
tap
longtap

bing和catch區別

catch不會冒泡
bing會冒泡

模板

使用模板只是為了簡化wxml 的寫法，只是元件，因為沒有邏輯層。

inclue 與import 引入模板的區別。

import 需要先引入template ，然後在使用。
include 在需要的地方直接引入模板在使用。
include 使用方式非常簡單，就是簡單的程式碼替換，不存在作用域，也不能像import一樣可以使用data傳遞變數。
include 檔案中，不能含有template元素。
include 很簡單，就是一個佔位符，只做簡單的程式碼替換。

樣式檔案的引入，使用@import "page.wxss"

App 方法

可以在app.js 檔案中使用App(object) 來註冊小程式。object 可指定生命週期函式。
onLaunch 小程式初始化完成，會觸發該函式。
onShow 小程式啟動 會觸發該函式。
onHide 小程式隱藏
onError 小程式錯誤

快取

快取一直存在，沒有過期概念，如果不清楚，則一直存在。
快取上限10M。
快取操作方法存在同步和非同步兩種，Sync 結尾為同步方法。
快取資料：使用wx.setStorage({})
清除資料：wx.removeStorage 清除單個key 資料。 wx.clearStorage 清除所有資料。
獲取資料：wx.getStorageSync

if (!wx.getStorageSync) {wx.setStorage}

template 和block 元素註冊事件?

在template 和block 上註冊事件都是無效的。

頁面間傳遞引數

1 使用全域性變數
2 使用快取
3 通過頁面間的url 傳參。

獲取3 方式的url 引數：

onLoad:function(query) {
    console.log(query)
}

自定義屬性

和html 自定義屬性一致。 使用data 關鍵詞。
<view data-id = "{{id}}"> </view>

獲取自定義屬性： event.currentTarget.dataSet.id

app.json

如果在app.json 進行配置，則是全域性行為。
如果在頁面json檔案進行配置，則單頁面生效

wxSetNavigationBarTitle(object) 動態設定導航欄標題。

條件渲染

<view wx:if="{{true}}"> </view>
<view wx:else> </view>

實現圖片預覽

小程式提供了圖片預覽視窗。 wx.previewImage(object)

hidden 和 wx:if

使用方式類似。
wx:if 元素會銷燬或者重新渲染。
hidden 元素只是簡單的進行顯示和隱藏。

input 元素4個事件

bindinput 輸入
bindfocus 獲取焦點
bindblur 失去焦點
bindconfirm 鍵盤事件

從相簿選擇圖片或者拍照

使用wx.chooseImage(object)

音樂

歌曲只能是網路流媒體，不能播放本地檔案。

全域性變數

宣告：

App({
    globalData:{
        key: value
    }
})

獲取和使用：

// 獲取
let App = getApp();
let global = App.globalData

分享

微信小程式只能分享給好友，不能分享到朋友圈。
每個頁面都可以呼叫分享功能，並配置每個頁面引數。

使用：

page({
    onShareAppMessage: function() {
        return {
            title: '',
            desc: '',
            path: ''
        }
    }
})

書中說分享圖片是不能自定義的，但目前已經可以指定分享圖片了，時間：2019/02/28

event.target 和event.currentDarget

在冒泡事件中，event.target指的是觸發事件的元素。
event.currentTarget 指的是普獲事件的元素。

小程式動畫

建立例項，wx.createAnimation(object)

將動畫也當作一個變數，動畫對所有配置都完善時，動畫變數繫結到頁面中。

<image animation="{{animationUP}}"></image>
this.setData({
    animationUp: this.animationUp.export();
})

小程式tab

小程式有實現tab切換，只需要在json檔案中進行簡單的配置就能直接使用。

推薦直接使用小程式對tab切換。因為tab會涉及到導航介面。redirctTo 和 navigateTo，
如果自己使用view來實現，是使用redirctTo還是使用navigateTo？。

我在開發中這兩種方式都有使用，使用navigateTo帶來對缺點是，小程式頁面不會解除安裝，當不停的切換tab時，你會發現，點選多次後，tab將不能工作，這是因為，小程式對隱藏頁面對數量有作控制。如果使用redirctTo ，則不能使用返回操作返回到上一個頁面，而是直接推出來小程式。

小程式tab切換提供了自己的介面：wx.switchTab(object)

app.json網路連線配置

可以配置網路請求對超時時間。

小程式只提供了非同步傳送http請求的方法。

小程式強制要求使用https，且所有地址域名需要配置到可信域名中。

小程式提供了下拉重新整理api

小程式實現了上滑載入更多資料。

input 元件的輸入文字是無法設定字型的，字型必須使用系統字型。所以無法設定font-family。

wx.login

這個話題要講明白需要很多演示。等有時間，詳細得用一篇文章來寫。

簡單對描述：前後端如果需要互動，並需要帶有使用者狀態時。就需使用要登入。前後端互動並不使用session，而是使用code來進互動，並且每次互動的code都是不一樣的。 code 由wx.login 返回。