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