從零開始學前端第十七講--微信小程式開發入門
修真院Web工程師零基礎全能課
本節課內容
微信小程式開發入門
主講人介紹
沁修，葡萄藤技術總監
專案經驗豐富，擅長H5移動專案開發。
專注技術選型、底層開發、最佳程式碼實踐規範總結與推廣。
直播錄屏版
https://v.qq.com/x/page/n0760yz7r2z.html
文字解析版
小程式的介紹和準備
什麼是小程式
微信之父張小龍是這樣描述的：
小程式是一種不需要下載安裝就可以使用的應用
使用者掃一掃或者搜一下即可開啟應用，也體現了用完即走的理念。
使用者不用關心是否安裝太多應用的問題：
應用將無處不在，隨時可用，但又無需安裝解除安裝。
小程式的優勢
它的優勢體驗上雖然沒法完全媲美原生app，但綜合考慮還是有很多優勢：
省流量省時間；開發成本更低，可以把更多人力物力財力放在運營上，做好內容本身；
總體來說相當於一個精簡版的app
準備工作
1.註冊賬號 （https://mp.weixin.qq.com）
2.啟用郵箱
3.資訊登記
4.登入小程式管理後臺（不完善好資訊是無法釋出小程式的）
5.完善小程式資訊，繫結開發者（尤其是團隊多人開發）
在官網下載安裝開發工具
安裝完成後就可以登入：
微信掃碼登入開發者工具，這裡選小程式專案，進入小程式本地專案進行管理
新建一個專案：
目錄自選本地資料夾，AppID就是登入微信開發平臺後的設定裡能看到的AppID。
如果沒有ID也可以使用官方的測試號
上手第一個小程式新建專案
選擇一個空目錄，使用普通快速啟動模板
然後就可以看到預設的模板和內容了，可以直接檢視或者點選編譯在手機上掃一掃檢視
接下來了解一下小程式的目錄結構：
pages
index
index.js 頁面指令碼邏輯檔案
index.wxml 頁面模板檔案
index.wxss 頁面樣式檔案
index.json 單個頁面的配置資訊，比如頭部底色，頭部title等
utils
app.js 全域性邏輯
app.json 全域性配置資訊，包含了小程式的所有頁面路徑，介面表現，底部tab等基本資訊
app.wxss 設定樣式
project.config.json 開發工具的配置資訊
小程式的啟動過程：
開啟小程式之前，微信會把小程式的程式碼包下到本地。
然後通過app.json的pages欄位知道當前小程式的所有頁面路徑，寫在pages欄位的第一個頁面就是小程式的首頁。
然後微信就把首頁程式碼裝載進來，渲染出首頁。
然後app.js裡App的例項onLaunch回撥就會執行來一段簡單的實戰，為專案增加一個city選擇頁：
首先新增一個新的頁面
1.在pages檔案新增新頁面檔案
2.為city.wxml模板頁面新增選擇器：
picker是一個類似於select的picker元件
bindchange是用於繫結一個change事件的方法
value的值是一個序列號
range則是表示這個選擇器的取值範圍
3.然後在city.js中書寫頁面邏輯：
Page({})是頁面的一個例項
data中的資料用於檢視繫結
bindPickerChange則是繫結的change事件的函式名
可以看到，data中的資料可以在頁面中被直接繫結使用
在js程式碼中想要改變data的值也非常簡單，使用this.setData就可以了
這裡我們傳入了一個index序列號，也就是picker選擇器選擇了country陣列中的元素。
通過這樣的方法，就可以為頁面新增不同的元件。
4.選擇之後如果想要將選中的city的值傳到其他頁面比如首頁
那麼一般來講有3種方法：
第一種是將資料存到全域性的data中，也就是app.js的data中，這樣所有的頁面都能取到這些資料。
但我們並不推薦這樣的用法，就如同我們不推薦使用全域性變數都一樣。
第二種是將資料帶在url路徑後作為引數傳導：
http://local.com/foo?bar=abc。
這樣的做法在傳輸複雜資料的時候並不是太合適。
第三種則是使用本地儲存，在需要的頁面再將其取出就可以了：
// 儲存
wx.setStorageSync('city', {});
// 取出
wx.getStorageSync('city');
這樣就完成了我們的第一個上手小頁面的開發
獲取實戰經驗，自信贏取職位
以上就是上節課的內容解析啦，截止本篇，我們已經完成了前端從零基礎到獨立完成專案的所有課程
大家可以在公眾號選單欄獲取課程全部視訊及文字內容資料
想進一步深入學習及獲取覆盤專案資格的同學，歡迎加入我們的IT交流群565734203共同交流學習！
推薦閱讀：
歡迎加大師姐微信瞭解更多資訊