【東網技術大咖帶您走進微信小程序】微信小程序開發初探索
發布時間： 2017-04-26 11:15:58
新東網自2001年成立以來，掌握大數據、云計算、通信、物聯網及區塊鏈等信息技術，擁有一支逾16年經驗的強大IT團隊。為沉淀企業技術實力，繼續發揮行業優勢，《東網快訊》特邀新東網技術大咖帶您走進這些領先信息技術，揭秘新東網16年來的技術成果。
本文將帶你一步步創建完成一個微信小程序，并可以在手機上體驗該小程序的實際效果。這個小程序將調用豆瓣電影資訊接口展示電影熱訊、電影推薦和查詢電影。
網址： https://mp.weixin.qq.com
官方接入指南：
https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html?t=20161107
一、填寫郵箱和密碼
請填寫未注冊過公眾平臺、開放平臺、企業號、未綁定個人號的郵箱。
二、激活郵箱
登錄郵箱，查收激活郵件，點擊激活鏈接
三、填寫主體信息
點擊激活鏈接后，繼續下一步的注冊流程。請選擇主體類型選擇，完善主體信息和管理員信息。
企業類型帳號可選擇兩種主體驗證方式。
方式一：需要用公司的對公賬戶向騰訊公司打款來驗證主體身份。打款信息在提交主體信息后可以查看到。
方式二：通過微信認證驗證主體身份，需支付300元認證費。認證通過前，小程序部分功能暫無法使用。
一、綁定開發者
登錄微信公眾平臺小程序，進入用戶身份- 開發者，新增綁定開發者。
已認證的小程序可以綁定不多于20個開發者。未認證的小程序可以綁定不多于10個開發者。
二、獲取AppID
進入“設置-開發設置”（需要管理員微信掃描登陸獲取），獲取AppID信息。
三、閱讀開發文檔并下載開發者工具
官方開發簡易教程：
https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=20161107
四、微信應用開放的服務和組件：
· 視圖容器：視圖(view)、滾動視圖（scroll-view）、滑動視圖(swiper)
· 基礎內容：圖標、文本、進度條
· 表單組件：按鈕、表單等等
· 操作反饋
· 導航
· 媒體組建：音頻、圖片、視頻。
· 地圖
· 畫布
· 文件操作能力
· 網絡：上傳下載能力、WebSocket
· 數據：數據緩存能力
· 位置：獲取位置、查看位置
· 設備：網絡狀態、系統信息、重力感應、羅盤
· 界面：設置導航條、導航、動畫、繪圖等等
· 開放接口：登錄，包括簽名加密，用戶信息、微信支付、模板消息
一、創建項目
我們需要下載安裝開發者工具
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=20161107
開發者工具安裝完成后，打開并使用微信掃碼登錄。選擇創建“項目”，填入上文獲取到的 AppID ，設置一個本地項目的名稱（非小程序名稱），比如“我的第一個項目”，并選擇一個本地的文件夾作為代碼存儲的目錄，點擊“新建項目”就可以了。
為方便了解微信小程序的基本代碼結構，在創建過程中，如果選擇的本地文件夾是個空文件夾，開發者工具會提示，是否需要創建一個 quick start 項目。選擇“是”，開發者工具會幫助我們在開發目錄里生成一個簡單的 demo。
項目創建成功后，我們就可以點擊該項目，進入并看到完整的開發者工具界面，點擊左側導航，在“編輯”里可以查看和編輯我們的代碼，在“調試”里可以測試代碼并模擬小程序在微信客戶端效果，在“項目”里可以發送到手機里預覽實際效果。
二、文件結構
小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page。
一個小程序主體部分由三個文件組成，必須放在項目的根目錄，如下：
app.js 后綴的是腳本文件
app.json 后綴的文件是配置文件
app.wxss 后綴的是樣式表文件
一個小程序頁面由四個文件組成，分別是：
.js（必須）頁面邏輯
.wxml（必須）頁面結構
.wxss（非必須）頁面樣式表
.json（非必須）頁面配置
注意：小程序規定描述頁面的這四個文件必須具有相同的路徑與文件名
三、配置 app.json
使用app.json文件來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。
app.json 配置項列表
|
屬性 |
類型 |
必填 |
描述 |
|
pages |
String Array |
是 |
設置頁面路徑 |
|
window |
Object |
否 |
設置默認頁面的窗口表現 |
|
tabBar |
Object |
否 |
設置底部 tab 的表現 |
|
networkTimeout |
Object |
否 |
設置網絡超時時間 |
|
debug |
Boolean |
否 |
設置是否開啟 debug 模式 |
pages
項目使用到的頁面都需要在這邊配置聲明，接受一個數組，每一項都是字符串，來指定小程序由哪些頁面組成。每一項代表對應頁面的【路徑+文件名】信息，數組的第一項代表小程序的初始頁面。
文件名不需要寫文件后綴，因為框架會自動去尋找路徑.json,.js,.wxml,.wxss的四個文件進行整合。
tabBar
tabBar （客戶端窗口的底部有tab欄可以切換頁面）是一個數組，只能配置最少2個、最多5個tab，tab 按數組的順序排序。
window
用于設置小程序的狀態欄、導航條、標題、窗口背景色。
四、邏輯層 app.js
小程序開發框架的邏輯層是由JavaScript編寫，邏輯層將數據進行處理后發送給視圖層，同時接受視圖層的事件反饋。由于框架并非運行在瀏覽器中，所以JavaScript 在 web 中一些能力都無法使用，如 document，window 等。造成無法使用JQuery等前臺基于window對象的js框架。
五、視圖層 WXML 與 WXSS
WXML
WXML（WeiXin MarkupLanguage）是框架設計的一套標簽語言，結合基礎組件、事件系統，可以構建出頁面的結構
1、數據綁定
使用雙大括號標簽獲取xxx.js中data值，動態改變data中的值時wxml中實時變化
// page.js
Page({
data: {
message: 'Hello MINA!'
}
})
2、列表渲染
{{item}}
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
3、條件渲染
// page.js
Page({
data: {
view: 'MINA'
}
})
4、模板
FirstName: {{firstName}}, LastName: {{lastName}}
// page.js
Page({
data: {
staffA: {firstName: 'Hulk', lastName: 'Hu'},
staffB: {firstName: 'Shang', lastName: 'You'},
staffC: {firstName: 'Gideon', lastName: 'Lin'}
}
})
5、事件
{{count}}
Page({
data: {
count: 1
},
add: function(e) {
this.setData({
count: this.data.count + 1
})
}
})
WXSS
WXSS(WeiXinStyle Sheets)是一套樣式語言，用于描述 WXML 的組件樣式，具有CSS 大部分特性
尺寸單位：rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
rem（root em）: 規定屏幕寬度為20rem；1rem = (750/20)rpx 。
六、https請求
小程序只支持https協議，一個微信小程序，同時只能有5個網絡請求連接
注意：要微信小程序進行網絡通信，必須先設置域名，不然會出現錯誤：URL 域名不合法
使用管理員登陸：“設置”—“開發設置”—“服務器設置”
閩公網安備 35010202001006號