微信小程序開發

1、基本的準備工做

一、工具安裝

工具是有微信官方提供。

二、下載地址：

windows32位：https://servicewechat.com/wxa-dev-logic/download_redirect?type=ia32&from=mpwiki&t=1475052055457

windows64位：https://servicewechat.com/wxa-dev-logic/download_redirect?type=x64&from=mpwiki&t=1475052055457

macOS：https://servicewechat.com/wxa-dev-logic/download_redirect?type=darwin&from=mpwiki&t=1475052055457

三、安裝過程：

對於Windows用戶直接雙擊下一步的方式安裝便可，此處注意咱們使用的版本是官方最新的版本（不須要破解），能夠不用AppID，也就是說沒有資格的開發者也能夠測試。

下載好以後，雙擊進行安裝-》下一步-》我接受-》選擇安裝路徑-》下一步便可

安裝好以後，使用本身的微信號進行掃描登陸。

4. 建立項目

• 咱們須要經過開發者工具，來完成小程序建立和代碼編輯。
• 開發者工具安裝完成後，打開並使用微信掃碼登陸。選擇建立「項目」，填入上文獲取到的 AppID ，設置一個本地項目的名稱（非小程序名稱），好比「個人第一個項目」，並選擇一個本地的文件夾做爲代碼存儲的目錄，點擊「新建項目」就能夠了。
• 在建立過程當中，若是選擇的本地文件夾是個空文件夾，開發者工具會提示，是否須要建立一個 quick start 項目。選擇「是」，開發者工具會幫助咱們在開發目錄裏生成一個簡單的 demo。

五、參數說明

• AppID：點擊右下角無AppID
• 項目名稱：隨便填寫，由於不涉及到部署，因此無所謂
• 項目目錄：選擇項目所在的文件夾
• 點擊添加項目

項目建立成功後，咱們就能夠點擊該項目，進入並看到完整的開發者工具界面，點擊左側導航，在「編輯」裏能夠查看和編輯咱們的代碼，在「調試」裏能夠測試代碼並模擬小程序在微信客戶端效果，在「項目」裏能夠發送到手機裏預覽實際效果。

六、能夠選擇在微信Web開放者工具中編碼（也可選擇你喜歡的編輯器）

七、編寫代碼

a、建立小程序實例

點擊開發者工具左側導航的「編輯」，咱們能夠看到這個項目，已經初始化幷包含了一些簡單的代碼文件。最關鍵也是必不可少的，是 app.js、app.json、app.wxss 這三個。其中，.js後綴的是腳本文件，.json後綴的文件是配置文件，.wxss後綴的是樣式表文件。微信小程序會讀取這些文件，並生成小程序實例。

下面咱們簡單瞭解這三個文件的功能，方便修改以及從頭開發本身的微信小程序。

app.js是小程序的腳本代碼。咱們能夠在這個文件中監聽並處理小程序的生命週期函數、聲明全局變量。調用框架提供的豐富的 API，如本例的同步存儲及同步讀取本地數據。

//app.js App({ onLaunch: function () { // 展現本地存儲能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) // 登陸 wx.login({ success: res => { // 發送 res.code 到後臺換取 openId, sessionKey, unionId } }) // 獲取用戶信息 wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { // 已經受權，能夠直接調用 getUserInfo 獲取頭像暱稱，不會彈框 wx.getUserInfo({ success: res => { // 能夠將 res 發送給後臺解碼出 unionId this.globalData.userInfo = res.userInfo // 因爲 getUserInfo 是網絡請求，可能會在 Page.onLoad 以後才返回 // 因此此處加入 callback 以防止這種狀況 if (this.userInfoReadyCallback) { this.userInfoReadyCallback(res) } } }) } } }) }, globalData: { userInfo: null } })

b、app.json 是對整個小程序的全局配置。

咱們能夠在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口背景色，配置導航條樣式，配置默認標題。注意該文件不可添加任何註釋。

pages

接受一個數組，每一項都是字符串，來指定小程序由哪些頁面組成。每一項表明對應頁面的【路徑+文件名】信息，數組的第一項表明小程序的初始頁面。小程序中新增/減小頁面，都須要對 pages 數組進行修改。

文件名不須要寫文件後綴，由於框架會自動去尋找路徑.json,.js,.wxml,.wxss的四個文件進行整合。

如開發目錄爲：

pages/

pages/index/index.wxml

pages/index/index.js

pages/index/index.wxss

pages/logs/logs.wxml

pages/logs/logs.js

app.js

app.json

app.wxss

則，咱們須要在 app.json 中寫

{ "pages":[ "pages/index/index" "pages/logs/logs" ] }

window

用於設置小程序的狀態欄、導航條、標題、窗口背景色。

tabBar

若是咱們的小程序是一個多 tab 應用（客戶端窗口的底部或頂部有 tab 欄能夠切換頁面），那麼咱們能夠經過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。

Tip：

　　一、當設置 position 爲 top 時，將不會顯示 icon

　　二、tabBar 中的 list 是一個數組，只能配置最少2個、最多5個 tab，tab 按數組的順序排序。

 其中 list 接受一個數組，數組中的每一個項都是一個對象，其屬性值以下：

networkTimeout

能夠設置各類網絡請求的超時時間。

屬性說明：

debug

能夠在開發者工具中開啓 debug 模式，在開發者工具的控制檯面板，調試信息以 info 的形式給出，其信息有Page的註冊，頁面路由，數據更新，事件觸發 。 能夠幫助開發者快速定位一些常見的問題。

page.json

每個小程序頁面也可使用.json文件來對本頁面的窗口表現進行配置。 頁面的配置比app.json全局配置簡單得多，只是設置 app.json 中的 window 配置項的內容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。

頁面的.json只能設置 window 相關的配置項，以決定本頁面的窗口表現，因此無需寫 window 這個鍵，如：

2、開發體驗階段

一、理解微信小程序的架構

通常都是根據這個平臺的hello word示例

項目結構

二、項目的配置

• 在項目下的app.json中配置
• 在pages/下建立每個頁面，每一個頁面都是一個文件夾包含3個文件JS  WXML  WXSS
• 接下來須要在項目下的app.json中配置pages
• pages中的第一項會做爲默認頁面呈現。

三、頁面結構

文件結構

• 小程序包含一個描述總體程序的 app 和多個描述各自頁面的 page。
• 一個小程序主體部分由三個文件組成，必須放在項目的根目錄，以下：

一個頁面是由多個文件組成。js：定義頁面的邏輯。json：頁面配置。wxml：頁面結構。wxss：頁面樣式表

注意：爲了方便開發者減小配置項，咱們規定描述頁面的這四個文件必須具備相同的路徑與文件名。

四、頁面與頁面之間跳轉可使用navigator組件

<view class="btn-area"> <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳轉到新頁面</navigator> <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在當前頁打開</navigator> <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切換 Tab</navigator> </view>

頁面與頁面之間傳值方式：相似於web開發的方式：?參數

跳轉到的頁面經過onLoad方法的參數拿到