小程序開(kāi)發(fā)說(shuō)明文檔
一铲掐、 目錄結(jié)構(gòu):
-
pages目錄 (小程序頁(yè)面的集合)
-
index 目錄(index頁(yè)面)
-
index.js (頁(yè)面的私有程序)
存在一個(gè)Page對(duì)象, 其指定頁(yè)面的初始數(shù)據(jù)拾弃、生命周期回調(diào)、事件處理函數(shù)等
參數(shù)示例:
data: 頁(yè)面的初始數(shù)據(jù)
onLoad: 監(jiān)聽(tīng)頁(yè)面加載
onShow: 監(jiān)聽(tīng)頁(yè)面顯示
onReady: 監(jiān)聽(tīng)頁(yè)面初次渲染完成
onHide: 監(jiān)聽(tīng)頁(yè)面隱藏
onUnload: 監(jiān)聽(tīng)頁(yè)面卸載
onPullDownRefresh: 監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作
onReachBottom: 頁(yè)面上拉觸底事件的處理函數(shù)
onShareAppMessage: 用戶(hù)點(diǎn)擊右上角轉(zhuǎn)發(fā) -
index.json (頁(yè)面的私有配置)
權(quán)重高于全局配置,在頁(yè)面有特殊需求時(shí),可以覆蓋全局配置
基本參數(shù)與全局配置相同(部分特殊的全局參數(shù)除外) -
index.wxml (頁(yè)面的dom結(jié)構(gòu))
WXML（WeiXin Markup Language）是框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言
- 基本標(biāo)簽:
view與div等價(jià),都是無(wú)意義的盒子容器,但在瀏覽器中還是會(huì)以dv渲染
- 數(shù)據(jù)綁定:
> 小程序的基本語(yǔ)法與vue相似,數(shù)據(jù)綁定也是類(lèi)似- 通過(guò)
{{ }}來(lái)定義,會(huì)直接綁定page對(duì)象中,data里面的值.也可以叫做文本插值 - 在屬性中,即便是
''或""內(nèi)的{{ }},也是可以進(jìn)行數(shù)據(jù)綁定的. - 小程序定義了關(guān)鍵字
true和false,可以在{{ }}內(nèi)直接使用該布爾值 - 可以在
{{ }}中進(jìn)行運(yùn)算,包括:三元運(yùn)算算術(shù)運(yùn)算邏輯判斷字符串運(yùn)算操作數(shù)組操作對(duì)象等
示例代碼:
// .wxml <view> {{message}} </view> <view id="item-{{id}}"> </view> <checkbox checked="{{false}}"> </checkbox> <view hidden="{{flag ? true : false}}"> Hidden </view> // .js Page({ data: { message: 'Hello MINA!', id: 0 } })-
列表渲染:
在組件上使用
wx:for控制屬性綁定一個(gè)數(shù)組摆霉，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件豪椿。示例代碼:
// .wxml 文件 // block是一個(gè)無(wú)意義的盒子,可以承載wx:for等指令,區(qū)別于view,該標(biāo)簽不會(huì)在頁(yè)面中顯示 <block wx:for="{{array}}"> // index是小程序返回的當(dāng)前循環(huán)的索引值, item為當(dāng)前值 <view>{{index}}: {{item.message}}</view> </block> // .js 文件 Page({ data: { array: [ {message: 'foo'}, {message: 'bar'} ] } }) //------------------------------------------------ // .wxml 文件 // wx:for 也可以嵌套，下邊是一個(gè)九九乘法表: // 循環(huán)嵌套會(huì)導(dǎo)致 item名 或 index名 的重復(fù),可以手動(dòng)修改: wx:for-item wx:for-index <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"> <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"> <view wx:if="{{i <= j}}"> {{i}} * {{j}} = {{i * j}} </view> </view> </view> -
條件渲染:
-
wx:if(新增或刪除)
wx:if來(lái)判斷是否需要渲染該代碼塊,具體表現(xiàn)為新增和刪除dom結(jié)構(gòu)示例代碼:
<view wx:if="{{true}}}"> True </view> // wx:if 有額外的 wx:else,和 js里的 if elseif else 一樣 <view wx:if="{{length == 1}}"> 1 </view> <view wx:elif="{{length == 2}}"> 2 </view> <view wx:else> 3 </view> -
hidden(顯示或隱藏)
hidden來(lái)判斷是否需要顯示該代碼塊,具體表現(xiàn)為顯示或隱藏dom結(jié)構(gòu)示例代碼:
<view hidden="{{false}}}"> False </view>
-
-
模板(template):
WXML提供模板功能携栋，可以在模板中定義代碼片段搭盾，然后在不同的地方調(diào)用。
模板擁有自己的作用域婉支，只能使用data傳入的數(shù)據(jù)以及模板定義文件中定義的 <wxs /> 模塊鸯隅。示例代碼:
// 定義模板 // 使用 name 屬性，作為模板的名字,然后在<template/>內(nèi)定義代碼片段 // .wxml <template name="msgItem"> <view> <text> {{index}}: {{msg}} </text> <text> Time: {{time}} </text> </view> </template> // 使用模板 // 使用 is 屬性向挖，聲明需要的使用的模板蝌以，然后將模板所需要的 data 傳入 // .wxml <template is="msgItem" data="{{...item}}"/> // .js Page({ data: { item: { index: 0, msg: 'this is a template', time: '2016-09-15' } } }) -
引用文件:
WXML 提供兩種文件引用方式
import和include-
import:
import可以將整個(gè)文件引入,同時(shí)也就可以在該文件中使用被引入文件定義的模板
但是只能使用被引入文件的模板,如果被引入文件也同時(shí)引入了其他文件及模板,該文件不可以使用示例代碼:
<import src="item.wxml"/> <template is="item" data="{{text: 'forbar'}}"/> -
include:
include可以將被引入文件的dom直接渲染在include標(biāo)簽內(nèi),但是不包括 模板和樣式示例代碼:
// header.wxml <view> header </view> // footer.wxml <view> footer </view> // index.html <include src="header.wxml"/> <view> body </view> <include src="footer.wxml"/> // 渲染后 <view> header </view> <view> body </view> <view> footer </view>
-
- 通過(guò)
-
index.wxss 頁(yè)面的私有樣式表
和css無(wú)區(qū)別
-
-
-
utils 公共函數(shù)目錄(相當(dāng)于公共組件,方法)
-
utils.js 公共函數(shù)文件
常用的公共函數(shù)封裝,例如:
date
-
-
app.js 小程序主體程序(也可以當(dāng)做啟動(dòng)程序)
- App(注冊(cè)小程序)
App對(duì)象指定小程序的生命周期回調(diào)等,必須在app.js中調(diào)用，必須調(diào)用且只能調(diào)用一次何之。不然會(huì)出現(xiàn)無(wú)法預(yù)期的后果跟畅。示例代碼
App({ onLaunch (options) { // 生命周期回調(diào)——監(jiān)聽(tīng)小程序初始化 }, onShow (options) { // 生命周期回調(diào)——監(jiān)聽(tīng)小程序啟動(dòng)或切前臺(tái) }, onHide () { // 生命周期回調(diào)——監(jiān)聽(tīng)小程序切后臺(tái) }, onError (msg) { // 錯(cuò)誤監(jiān)聽(tīng)函數(shù) console.log(msg) } }) -
app.json 小程序主體配置(全局配置,權(quán)重低于私有頁(yè)面配置)
小程序根目錄下的
app.json文件用來(lái)對(duì)微信小程序進(jìn)行全局配置
app.json中不能有注釋,會(huì)報(bào)錯(cuò)-
配置項(xiàng):
-
pages
小程序頁(yè)面的集合數(shù)組,數(shù)組的第一項(xiàng)代表小程序的初始頁(yè)面。
小程序中新增/減少頁(yè)面, 都需要對(duì) pages 數(shù)組進(jìn)行修改溶推。 -
window
用于設(shè)置小程序的狀態(tài)欄徊件、導(dǎo)航條、標(biāo)題悼潭、窗口背景色庇忌。
navigationBarBackgroundColor: 導(dǎo)航欄背景顏色
navigationBarTextStyle: 導(dǎo)航欄標(biāo)題顏色, 僅支持blackwhite
navigationBarTitleText: 導(dǎo)航欄標(biāo)題文字內(nèi)容
navigationStyle: 導(dǎo)航欄樣式,custom為自定義樣式
backgroundColor: 窗口的背景色
backgroundTextStyle: 下拉 loading 的樣式舞箍，僅支持darklight:
onReachBottomDistance: 頁(yè)面上拉觸底事件觸發(fā)時(shí)距頁(yè)面底部距離舰褪，單位為px
-
tabBar
配置項(xiàng)指定 tab 欄的表現(xiàn), 以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁(yè)面
color: 按鈕上的文字默認(rèn)顏色, 僅支持十六進(jìn)制顏色
selectedColor: 按鈕上的文字選中時(shí)的顏色, 僅支持十六進(jìn)制顏色
backgroundColor: 按鈕的背景色，僅支持十六進(jìn)制顏色
borderStyle: 按鈕邊框的顏色, 僅支持blackwhite
-
list (tab的列表)
接受一個(gè)數(shù)組疏橄，只能配置最少 2 個(gè)占拍、最多 5 個(gè) tab, 每個(gè)項(xiàng)都是一個(gè)對(duì)象
pagePath: 頁(yè)面路徑, 必須在pages中先定義
text: 按鈕內(nèi)容
iconPath: 圖片路徑,icon大小限制為40kb,建議尺寸為 81px * 81px,不支持網(wǎng)絡(luò)圖片略就。
selectedIconPath: 選中時(shí)的圖片路徑
position:tabBar的位置, 僅支持 bottom / top
position: 為top時(shí),tab的icon不顯示
custom: 自定義tabBar
-
-
networkTimeout
各類(lèi)網(wǎng)絡(luò)請(qǐng)求的超時(shí)時(shí)間,單位均為毫秒。
- plugins
> 聲明小程序需要使用的插件晃酒。 -
navigateToMiniProgramAppIdList:
當(dāng)小程序需要使用 wx.navigateToMiniProgram 接口跳轉(zhuǎn)到其他小程序時(shí)
需要先在配置文件中聲明需要跳轉(zhuǎn)的小程序 appId 列表表牢，最多允許填寫(xiě) 10 個(gè)。 -
usingComponents:
在此處聲明的自定義組件視為全局自定義組件贝次，
在小程序內(nèi)的頁(yè)面或自定義組件中可以直接使用而無(wú)需再聲明崔兴。 -
PermissionObject:
小程序獲取權(quán)限時(shí)展示的接口用途說(shuō)明。最長(zhǎng) 30 個(gè)字符
-
style:
app.json 中配置 "style": "v2"可表明啟用新版的組件樣式蛔翅。
-
-
配置項(xiàng):
-
app.wxss 小程序公共樣式表
全局樣式表,可以設(shè)置全局的初始樣式
-
package.json 項(xiàng)目描述文件
項(xiàng)目的相關(guān)描述,例如: 項(xiàng)目名稱(chēng),版本號(hào),作者等
-
project.config.json 項(xiàng)目配置文件(微信開(kāi)發(fā)者工具配置文件)
用來(lái)配置小程序及其頁(yè)面是否允許被微信索引敲茄。
二、 數(shù)據(jù)請(qǐng)求(wx.request)
小程序有自帶的請(qǐng)求方法,使用也很簡(jiǎn)單
示例代碼:
// .js
wx.request({
url: 'test.php', //請(qǐng)求地址, 僅為示例山析，并非真實(shí)的接口地址
data: { //請(qǐng)求參數(shù)
x: '',
y: ''
},
header: { //請(qǐng)求頭
'content-type': 'application/json' // 默認(rèn)值
},
success (res) {
// 成功回調(diào)
console.log(res.data)
},
fail (res) {
// 失敗回調(diào)
console.log(res.data)
},
complete () {
// 接口調(diào)用結(jié)束的回調(diào)函數(shù)(只要請(qǐng)求就會(huì)觸發(fā),無(wú)論請(qǐng)求的結(jié)果是成功還是失敗)
// todo...
}
})
三堰燎、請(qǐng)求封裝
-
封裝 wx.request 請(qǐng)求
思路:- 在
utils中,新建request.js文件,用于封裝wx.request - 封裝
request方法,通過(guò)傳參的方式,改變請(qǐng)求的地址:url方法:method參數(shù):data來(lái)滿(mǎn)足不同的請(qǐng)求需求 - 對(duì)請(qǐng)求的
成功回調(diào):success失敗回調(diào):fail進(jìn)行 Promise 操作 - 拋出封裝后的請(qǐng)求,讓
api.js調(diào)用 - 在
utils中,新建api.js文件,所有的請(qǐng)求都在該文件下執(zhí)行 - 在
api.js中引入request.js文件
調(diào)用request.js拋出的封裝方法,傳入對(duì)應(yīng)的參數(shù)
return出請(qǐng)求,將請(qǐng)求拋出給需求頁(yè)面 - 在需求頁(yè)面中引入
api.js文件,以及api.js拋出的方法,進(jìn)行后續(xù)的邏輯處理
示例代碼(request.js):
//封裝請(qǐng)求: 統(tǒng)一調(diào)用request方法,并且將所有api請(qǐng)求放在 api.js 中完成,方便后續(xù)接口維護(hù). //第一步: 定義 baseUrl(項(xiàng)目服務(wù)器域名) const baseUrl = "http://127.0.0.1:7300/mock/5de5fb2e027f08151b7ad1c8/example" //優(yōu)化2: 單次請(qǐng)求未完成,避免用戶(hù)再次請(qǐng)求,此處定義一個(gè) 變量 var hasClick = false; //第二步: 拋出 封裝的請(qǐng)求,傳入基本參數(shù): api(地址), method(請(qǐng)求方式), data(請(qǐng)求參數(shù)) export default function request(api, method, data) { //第三步: return Promise 異步對(duì)象 //Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大笋轨。 //所謂Promise秆剪，簡(jiǎn)單說(shuō)就是一個(gè)容器，里面保存著某個(gè)未來(lái)才會(huì)結(jié)束的事件（通常是一個(gè)異步操作）的結(jié)果爵政。 return new Promise((reslove, reject) => { //優(yōu)化2: 用戶(hù)第一次操作時(shí),變量為 false,繼續(xù)進(jìn)行 if (hasClick) { return } //優(yōu)化2: 此時(shí)將變量改寫(xiě)為 true,如果此時(shí)用戶(hù)再次操作,那么此時(shí)變量為 true,上面的操作會(huì)終止此次請(qǐng)求 hasClick = true //優(yōu)化1: 發(fā)起請(qǐng)求時(shí),彈出 加載框,在請(qǐng)求完成后關(guān)閉 wx.showLoading({ title: '加載中...', mask: true }) //第四步: 調(diào)用小程序內(nèi)置api進(jìn)行數(shù)據(jù)請(qǐng)求 wx.request({ //第五步: 傳入所需參數(shù) url: baseUrl + '/' + api, method: method || 'GET', header: { 'content-type': 'application/json' // 'token': wx.getStorageSync("token") }, data: data || {}, success: (res) => { //第六步: 成功回調(diào):將現(xiàn)有對(duì)象轉(zhuǎn)為 Promise 對(duì)象 reslove(res.data, res) }, fail: (msg) => { //第七步: 失敗回調(diào):返回一個(gè)新的 Promise 實(shí)例 reject('請(qǐng)求失敗'); }, complete: info => { //優(yōu)化1: 請(qǐng)求完成后,關(guān)閉 加載框 wx.hideLoading(); //優(yōu)化2: 當(dāng)請(qǐng)求完成后,將變量還原為 false,使下次可以繼續(xù)請(qǐng)求 hasClick = false } }) }); } //第八步: 根據(jù)請(qǐng)求方式的不同,改變參數(shù) method ,使之對(duì)應(yīng) ['options', 'get', 'post', 'put', 'head', 'delete', 'trace', 'connect'].forEach((method) => { request[method] = (api, data, opt) => request(api, method, data, opt || {}) });示例代碼(api.js):
import request from 'request.js' //獲取首頁(yè)初始化數(shù)據(jù) export function getIndexData() { return request.get("index", {}); }示例代碼(index.js):
// 引入 api.js 中的 getIndexData, other1, other2 方法 import { getIndexData, other1, other2 } from '../../utils/api.js' // 調(diào)用這些方法 getIndexData().then(res => { // 成功回調(diào) console.log(res) }).catch((e) => { // 失敗回調(diào) console.log(e) }) - 在
四仅讽、公共方法庫(kù)的完善
公共方法庫(kù)主要是在根目錄下
utils目錄中的utils.js文件中完成
- date時(shí)間戳處理
// date時(shí)間戳處理 開(kāi)始
const formatTime = date => {
var date = new Date(date)
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
const formatNumber = n => {
n = n.toString()
return n[1] ? n : '0' + n
}
// date時(shí)間戳處理 結(jié)束
- 表單正則驗(yàn)證
