《微信小程序開發(fā) 入門與實踐》
簡介
最近有看完這本書味抖，閑來無事整理個文檔。
整理完成日期：2019/02/27。
并且 《微信小程序開發(fā) 入門與實踐》 這本書是2017年4月發(fā)布第一版，時間有點久锌钮。特別是微信小程序還不穩(wěn)定都情況下編寫的，我看到書中有些接口已經(jīng)有更新過了引矩，所以最好還是參考官方文檔接口梁丘，以官方接口為主。https://developers.weixin.qq.com/miniprogram/dev/api/
小程序理念
小程序不需要下載旺韭，安裝即可使用的應(yīng)用氛谜。來之即用，用之即走区端。方便快捷值漫。
小程序?qū)Ρ萮5
小程序優(yōu)勢：
- 提供更多手機系統(tǒng)原生接口，彌補h5的不足织盼。
小程序接口：震動杨何、掃碼、陀螺儀沥邻、指南針危虱、設(shè)備方向、加速唐全、電話埃跷、電量、藍牙邮利、聯(lián)系人弥雹、Wi-Fi、設(shè)備延届、微信運動剪勿、二維碼等等。
- 微信使用人數(shù)多祷愉，易于推廣產(chǎn)品窗宦。
小程序缺點： - 沒有h5開放和自由赦颇，對個人開發(fā)不友好二鳄。
- 沒有規(guī)范、文檔不清晰媒怯。
- 開發(fā)環(huán)境和測試環(huán)境有兼容性問題订讼，不統(tǒng)一，增加測試難度扇苞。
開發(fā)
小程序中沒有dom,開發(fā)時不要有操作dom思想欺殿。時刻想著數(shù)據(jù)綁定寄纵、數(shù)據(jù)驅(qū)動視圖。
對于有vue或者angular開發(fā)者來說脖苏，倒是簡單很多程拭。
對于沒有開發(fā)經(jīng)驗的人
在書中：作者認為，對于沒有開發(fā)經(jīng)驗的人棍潘，又想進入前端領(lǐng)域恃鞋，小程序是很好的入門學習方式。
我持反對觀點：小程序不規(guī)范亦歉，文檔不清晰恤浪，還不成熟，對個人開發(fā)不友好肴楷。也就是說水由，很多企業(yè)都是有企業(yè)賬號的，公司內(nèi)部也是使用企業(yè)賬號進行開發(fā)赛蔫，有很多特性都用不上砂客，再說開發(fā)完成了，上線和發(fā)布呵恢，審核都是個問題鞭盟。
這么多的問題，還不如就學習個h5前端瑰剃，有標準就有發(fā)展齿诉。
Native App 、Hybrid App 晌姚、Web App
小程序定位
做低頻和業(yè)務(wù)邏輯不復(fù)雜的應(yīng)用粤剧。
pc已死論
pc為生產(chǎn)力（辦公等），還是不可替代的挥唠。
常用快捷鍵
ctrl + shift + [ 折疊代碼塊
ctrl + alt + f 代碼格式化
shift + alt + up 向上復(fù)制一行
shift + alt + down
ctrl + i 選中當前行
文件
json 文件為配置文件
wxss 樣式文件
wxml 頁面結(jié)構(gòu)
js 邏輯
MINA 框架
flex
小程序能很好的支持Flex 布局抵恋，也是官方推薦的布局方式。
rpx
建議 以iPhone 6 width 750 像素作為標準宝磨。
swiper
小程序官方提供來輪播組件弧关。
swiper 子元素只能放置swiper-item，如果放置其他組件唤锉，會被自動刪除世囊。
生命周期 5 個
onLoad 加載
onUnload 卸載
onShow 顯示，每次打開頁面都會調(diào)用
onHide 監(jiān)聽頁面隱藏
onReady 頁面初次渲染完成窿祥， 一個頁面只會調(diào)用一次株憾，代表頁面已經(jīng)準備完成，可以和視圖進行交互。
一個頁面必定觸發(fā)3過周期：onLoad 嗤瞎、 onShow 墙歪、 onReady
3個特定事件處理函數(shù)
onPullDownRefresh 監(jiān)聽頁面下拉動作處理函數(shù)
onReachBootm 頁面觸底事件處理函數(shù)
onShareAppMessage 用戶點擊右上角分享。
單項數(shù)據(jù)綁定
小程序僅僅實現(xiàn)來單項數(shù)據(jù)綁定贝奇，即只支持從邏輯層到view層的數(shù)據(jù)綁定虹菲。
初始化數(shù)據(jù)：在page方法中，傳入Data參數(shù)：Object 類型參數(shù)掉瞳。
更新數(shù)據(jù)： 使用this.setData(Object) 方法
setData 是Page 對象的原型鏈上届惋。
setData 執(zhí)行后會觸發(fā)Render，并立刻渲染視圖菠赚。
數(shù)據(jù)綁定
數(shù)據(jù)綁定使用 {{}}
屬性綁定需要使用 src = “{{}}”
block標簽
block標簽沒有任何意義脑豹，不會在頁面渲染。
wx:for = "{{Arr}}"
item, index 為關(guān)鍵詞衡查，不用聲明可直接使用
json配置
頁面json文件只能配置和window相關(guān)的屬性瘩欺。
app.json 可以配置window 還可以配置pages、tabBar 等選項拌牲。
事件
事件是 view -> js , 視圖到邏輯層的通信方式俱饿。
頁面跳轉(zhuǎn)
wx.redirectTo 關(guān)閉當前頁面（卸載當前頁面）、跳轉(zhuǎn)到指定頁面
wx.navigateTo 保留當前頁面塌忽、跳轉(zhuǎn)到指定頁面
wx.switchTap 只能跳轉(zhuǎn)到帶tabbar的頁面
事件冒泡
target元素向父元素進行傳遞拍埠，直到頁面頂級元素。
冒泡事件
touchstart
touchmove
touchcancel
touchend
tap
longtap
bing和catch區(qū)別
catch不會冒泡
bing會冒泡
模板
使用模板只是為了簡化wxml 的寫法土居，只是組件枣购，因為沒有邏輯層。
inclue 與import 引入模板的區(qū)別擦耀。
import 需要先引入template 棉圈，然后在使用。
include 在需要的地方直接引入模板在使用眷蜓。
include 使用方式非常簡單分瘾，就是簡單的代碼替換，不存在作用域吁系，也不能像import一樣可以使用data傳遞變量德召。
include 文件中，不能含有template元素汽纤。
include 很簡單上岗，就是一個占位符，只做簡單的代碼替換冒版。
樣式文件的引入液茎，使用@import "page.wxss"
App 方法
可以在app.js 文件中使用App(object) 來注冊小程序。object 可指定生命周期函數(shù)辞嗡。
onLaunch 小程序初始化完成捆等，會觸發(fā)該函數(shù)。
onShow 小程序啟動 會觸發(fā)該函數(shù)续室。
onHide 小程序隱藏
onError 小程序錯誤
緩存
緩存一直存在栋烤，沒有過期概念，如果不清楚挺狰，則一直存在明郭。
緩存上限10M。
緩存操作方法存在同步和異步兩種丰泊，Sync 結(jié)尾為同步方法薯定。
緩存數(shù)據(jù)：使用wx.setStorage({})
清除數(shù)據(jù)：wx.removeStorage 清除單個key 數(shù)據(jù)。 wx.clearStorage 清除所有數(shù)據(jù)瞳购。
獲取數(shù)據(jù)：wx.getStorageSync
if (!wx.getStorageSync) {wx.setStorage}
template 和block 元素注冊事件?
在template 和block 上注冊事件都是無效的话侄。
頁面間傳遞參數(shù)
1 使用全局變量
2 使用緩存
3 通過頁面間的url 傳參。
獲取3 方式的url 參數(shù)：
onLoad:function(query) {
console.log(query)
}
自定義屬性
和html 自定義屬性一致学赛。 使用data 關(guān)鍵詞年堆。
<view data-id = "{{id}}"> </view>
獲取自定義屬性： event.currentTarget.dataSet.id
app.json
如果在app.json 進行配置，則是全局行為盏浇。
如果在頁面json文件進行配置变丧，則單頁面生效
wxSetNavigationBarTitle(object) 動態(tài)設(shè)置導(dǎo)航欄標題。
條件渲染
<view wx:if="{{true}}"> </view>
<view wx:else> </view>
實現(xiàn)圖片預(yù)覽
小程序提供了圖片預(yù)覽窗口绢掰。 wx.previewImage(object)
hidden 和 wx:if
使用方式類似痒蓬。
wx:if 元素會銷毀或者重新渲染。
hidden 元素只是簡單的進行顯示和隱藏滴劲。
input 元素4個事件
bindinput 輸入
bindfocus 獲取焦點
bindblur 失去焦點
bindconfirm 鍵盤事件
從相冊選擇圖片或者拍照
使用wx.chooseImage(object)
音樂
歌曲只能是網(wǎng)絡(luò)流媒體谊却，不能播放本地文件。
全局變量
聲明：
App({
globalData:{
key: value
}
})
獲取和使用：
// 獲取
let App = getApp();
let global = App.globalData
分享
微信小程序只能分享給好友哑芹，不能分享到朋友圈炎辨。
每個頁面都可以調(diào)用分享功能，并配置每個頁面參數(shù)聪姿。
使用：
page({
onShareAppMessage: function() {
return {
title: '',
desc: '',
path: ''
}
}
})
書中說分享圖片是不能自定義的碴萧，但目前已經(jīng)可以指定分享圖片了，時間：2019/02/28
event.target 和event.currentDarget
在冒泡事件中末购，event.target指的是觸發(fā)事件的元素破喻。
event.currentTarget 指的是普獲事件的元素。
小程序動畫
創(chuàng)建實例盟榴，wx.createAnimation(object)
將動畫也當作一個變量曹质，動畫對所有配置都完善時，動畫變量綁定到頁面中。
<image animation="{{animationUP}}"></image>
this.setData({
animationUp: this.animationUp.export();
})
小程序tab
小程序有實現(xiàn)tab切換羽德，只需要在json文件中進行簡單的配置就能直接使用几莽。
推薦直接使用小程序?qū)ab切換。因為tab會涉及到導(dǎo)航接口宅静。redirctTo 和 navigateTo章蚣，
如果自己使用view來實現(xiàn)，是使用redirctTo還是使用navigateTo姨夹？纤垂。
我在開發(fā)中這兩種方式都有使用，使用navigateTo帶來對缺點是磷账，小程序頁面不會卸載峭沦，當不停的切換tab時，你會發(fā)現(xiàn)逃糟，點擊多次后吼鱼，tab將不能工作，這是因為履磨，小程序?qū)﹄[藏頁面對數(shù)量有作控制蛉抓。如果使用redirctTo ，則不能使用返回操作返回到上一個頁面剃诅，而是直接推出來小程序巷送。
小程序tab切換提供了自己的接口：wx.switchTab(object)
app.json網(wǎng)絡(luò)連接配置
可以配置網(wǎng)絡(luò)請求對超時時間。
小程序只提供了異步發(fā)送http請求的方法矛辕。
小程序強制要求使用https笑跛，且所有地址域名需要配置到可信域名中。
小程序提供了下拉刷新api
小程序?qū)崿F(xiàn)了上滑加載更多數(shù)據(jù)聊品。
input 組件的輸入文本是無法設(shè)置字體的飞蹂，字體必須使用系統(tǒng)字體。所以無法設(shè)置font-family翻屈。
wx.login
這個話題要講明白需要很多演示陈哑。等有時間，詳細得用一篇文章來寫伸眶。
簡單對描述：前后端如果需要交互惊窖，并需要帶有用戶狀態(tài)時。就需使用要登錄厘贼。前后端交互并不使用session界酒，而是使用code來進交互，并且每次交互的code都是不一樣的嘴秸。 code 由wx.login 返回毁欣。
