簡介
小程式的運作環境分成渲染層和邏輯層，其中 WXML 模闆和 WXSS 樣式工作在渲染層，JS 腳本工作在邏輯層。這樣在小程式中不能使用一些前端的架構，如jQuery、Zepto等。而網頁開發者可以使用到各種浏覽器暴露出來的 DOM API，進行DOM選中和操作。
全局配置
小程式根目錄下的 app.json 檔案用來對微信小程式進行全局配置，決定頁面檔案的路徑、視窗表現、設定網絡逾時時間、設定多 tab 等。
常用的配置項
屬性
類型
描述
pages
string[]
頁面路徑清單
window
Object
全局的預設視窗表現
tabBar
Object
底部 tab 欄的表現
networkTimeout
Object
網絡逾時時間
debug
boolean
是否開啟 debug 模式，預設關閉
部分常用配置選項
{
"pages": [ // 第一項為預設首頁
"pages/index/index",
"pages/logs/index"
],
"window": {
"navigationBarBackgroundColor": "#ffffff", //導航欄背景顔色
"navigationBarTextStyle": "black",//導航欄标題顔色
"navigationBarTitleText": "微信", //導航欄标題文字内容
"backgroundColor": "#eeeeee", //視窗的背景色
"backgroundTextStyle": "light" //下拉 loading 的樣式，僅支援 dark / light
},
"tabBar": {
"color": "#666",//未選中的的文字顔色
"selectedColor": "#ff8928",//選中的的文字顔色
"list": [{
"pagePath": "pages/index/index", //頁面路徑
"text": "首頁",//tab 上按鈕文字
"iconPath": "images/tabBar_img2.png", //未選中的圖檔路徑
"selectedIconPath": "images/tabBar_img1.png"//選中時的圖檔路徑
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}]
},
"networkTimeout": {
"request": 10000, //wx.request 的逾時時間
"downloadFile": 10000 //wx.downloadFile 的逾時時間
},
"debug": true,
"navigateToMiniProgramAppIdList": [ //允許跳轉到其他小程式的appId
"wxe5f52902cf4de896"
]
}
複制代碼
頁面配置
每一個小程式頁面也可以使用同名 .json 檔案來對本頁面的視窗表現進行配置，頁面中配置項會覆寫 app.json 的 window 中相同的配置項。
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能示範",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
複制代碼
sitemap 配置
小程式根目錄下的 sitemap.json 檔案用來配置小程式及其頁面是否允許被微信索引。
注冊小程式
整個小程式隻有一個 App 執行個體，是全部頁面共享的。開發者可以通過 getApp 方法擷取到全局唯一的 App 示例，擷取App上的資料或調用開發者注冊在 App 上的函數。
App({
onLaunch (options) { //生命周期回調——監聽小程式初始化
// Do something initial when launch.
},
onShow (options) { //生命周期回調——監聽小程式啟動或切前台
// Do something when show.
},
onHide () { //生命周期回調——監聽小程式切背景
// Do something when hide.
},
onError (msg) { //錯誤監聽函數
console.log(msg)
},
onPageNotFound(res){ //頁面不存在監聽函數
// Do something when page not found.
},
globalData: 'I am global data'
})
複制代碼其他頁面引用:
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data
複制代碼
頁面生命周期
Page({
data: { //頁面的初始資料
text: "This is page data."
},
onLoad: function(options) { //生命周期回調—監聽頁面加載
// Do some initialize when page load.
},
onReady: function() { //生命周期回調—監聽頁面初次渲染完成
// Do something when page ready.
},
onShow: function() { //生命周期回調—監聽頁面顯示
// Do something when page show.
},
onHide: function() { //生命周期回調—監聽頁面隐藏
// Do something when page hide.
},
onUnload: function() { //生命周期回調—監聽頁面解除安裝
// Do something when page close.
},
onPullDownRefresh: function() { //監聽使用者下拉動作
// Do something when pull down.
},
onReachBottom: function() { //頁面上拉觸底事件的處理函數
// Do something when page reach bottom.
},
onShareAppMessage: function (res) { //使用者點選右上角轉發
if (res.from === 'button') {
// 來自頁面内轉發按鈕
console.log(res.target)
}
return {
title: '自定義轉發标題',
path: '/page/user?id=123'
}
},
onPageScroll: function() { // 頁面滾動觸發事件的處理函數
// Do something when page scroll
},
onResize: function() { //頁面尺寸改變時觸發，詳見 響應顯示區域變化
// Do something when page resize
},
onTabItemTap(item) { //點選 tab 時觸發
console.log(item.index); //被點選tabItem的序号，從0開始
console.log(item.pagePath); //被點選tabItem的頁面路徑
console.log(item.text); //被點選tabItem的按鈕文字
}
})
複制代碼
頁面路由
架構以棧的形式維護了目前的所有頁面
打開新頁面
調用 API wx.navigateTo
使用元件
複制代碼
頁面重定向
調用 API wx.redirectTo
使用元件
複制代碼
頁面傳回
調用 API wx.navigateBack
使用元件
使用者按左上角傳回按鈕
複制代碼
Tab 切換
調用 API wx.switchTab
使用元件
使用者切換 Tab
複制代碼
重新開機動
調用 API wx.reLaunch
使用元件
複制代碼
子產品化
可以将一些公共的代碼抽離成為一個單獨的 js 檔案，作為一個子產品。子產品隻有通過 module.exports 或者 exports 才能對外暴露接口。
// common.js
function sayHello(name) {
console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
console.log(`Goodbye ${name} !`)
}
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye
//引入并調用
var common = require('common.js')
Page({
helloMINA: function() {
common.sayHello('MINA')
},
goodbyeMINA: function() {
common.sayGoodbye('MINA')
}
})
複制代碼
常用API
名稱
說明
wx.showToast
顯示消息提示框
wx.showLoading
顯示 loading 提示框
wx.request
發起 HTTPS 網絡請求
wx.uploadFile
将本地資源上傳到伺服器
wx.showShareMenu
顯示目前頁面的轉發按鈕
wx.login
調用接口擷取登入憑證(code)
wx.checkSession
檢查登入态是否過期
wx.getAccountInfoSync
擷取目前帳号資訊
wx.getUserInfo
擷取使用者資訊
wx.UserInfo
使用者資訊
wx.authorize
提前向使用者發起授權請求
wx.setClipboardData
設定系統剪貼闆的内容
wx.getClipboardData
擷取系統剪貼闆的内容
WXML
WXML(WeiXin Markup Language)是架構設計的一套标簽語言，結合基礎元件、事件系統，可以建構出頁面的結構。
資料綁定
WXML 中的動态資料均來自對應 Page 的 data，使用雙大括号将變量包起來。
{{message}}
// page.js
Page({
data: {
message: 'Hello MINA!'
}
})
複制代碼
清單渲染
在元件上使用 wx:for 控制屬性綁定一個數組，即可使用數組中各項的資料重複渲染該元件。
預設數組的目前項的下标變量名預設為 index，數組目前項的變量名預設為 item。
{{item}}
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
複制代碼
條件渲染
在架構中，使用 wx:if="" 來判斷是否需要渲染該代碼塊。
預設數組的目前項的下标變量名預設為 index，數組目前項的變量名預設為 item。
WEBVIEW
APP
MINA
// page.js
Page({
data: {
view: 'MINA'
}
})
複制代碼wx:if vs hidden
因為 wx:if 之中的模闆也可能包含資料綁定，是以當 wx:if的條件值切換時，架構有一個局部渲染的過程，因為它會確定條件塊在切換時銷毀或重新渲染。
同時 wx:if 也是惰性的，如果在初始渲染條件為false，架構什麼也不做，在條件第一次變成真的時候才開始局部渲染。
相比之下，hidden 就簡單的多，元件始終會被渲染，隻是簡單的控制顯示與隐藏。
一般來說，wx:if 有更高的切換消耗而 hidden。有更高的初始渲染消耗。
是以，如果需要頻繁切換的情景下，用 hidden 更好，如果在運作時條件不大可能改變則 wx:if 較好。
模闆
WXML提供模闆(template)，可以在模闆中定義代碼片段，然後在不同的地方調用。
FirstName: {{firstName}}, LastName: {{lastName}}
// page.js
Page({
data: {
staffA: {firstName: 'Hulk', lastName: 'Hu'},
}
})
複制代碼
引用
WXML 提供兩種檔案引用方式import和include。
import
import可以在該檔案中使用目标檔案定義的template
{{text}}
//引用
複制代碼include
include 可以将目标檔案除了template,wxs外的整個代碼引入，相當于是拷貝到 include 位置。
header
footer
body
複制代碼
WXSS
WXSS (WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的元件樣式。
與 CSS 相比，WXSS 擴充的特性有：
尺寸機關
樣式導入
尺寸機關
rpx(responsive pixel): 可以根據螢幕寬度進行自适應。規定螢幕寬為750rpx。如在 iPhone6 上，螢幕寬度為375px，共有750個實體像素，則750rpx = 375px = 750實體像素，1rpx = 0.5px = 1實體像素。
樣式導入
.small-p {
padding:5px;
}
@import "common.wxss";
.middle-p {
padding:15px;
}
複制代碼
内聯樣式
複制代碼
選擇器
WXS
WXS(WeiXin Script)是小程式的一套腳本語言，結合 WXML，可以建構出頁面的結構。
子產品
方式一:wxs标簽
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
return d;
}
module.exports = {
FOO: foo,
bar: bar,
};
module.exports.msg = "some msg";
{{tools.msg}}
{{tools.bar(tools.FOO)}}
some msg
'hello world' from tools.wxs
複制代碼方式二:require函數
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
return d;
}
module.exports = {
FOO: foo,
bar: bar,
};
module.exports.msg = "some msg";
var tools = require("./tools.wxs");
console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);
'hello world' from tools.wxs
logic.wxs
some msg
複制代碼
變量
WXS 中的變量均為值的引用。
沒有聲明的變量直接指派使用，會被定義為全局變量。
如果隻聲明變量而不指派，則預設值為 undefined。
var表現與javascript一緻，會有變量提升。
var foo = 1;
var bar = "hello world";
var i; // i === undefined
變量命名必須符合下面兩個規則：
首字元必須是：字母(a-zA-Z)，下劃線(_)
剩餘字元可以是：字母(a-zA-Z)，下劃線(_)， 數字(0-9)
複制代碼
注釋
// 方法一：單行注釋
/*
方法三：結尾注釋。即從 /* 開始往後的所有 WXS 代碼均被注釋
var a = 1;
var b = 2;
var c = "fake";
複制代碼
事件
事件是視圖層到邏輯層的通訊方式。
事件可以将使用者的行為回報到邏輯層進行處理。
事件可以綁定在元件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。
事件對象可以攜帶額外資訊，如 id, dataset, touches
事件清單
類型
觸發條件
touchstart
手指觸摸動作開始
touchmove
手指觸摸後移動
touchcancel
手指觸摸動作被打斷，如來電提醒，彈窗
touchend
手指觸摸動作結束
tap
手指觸摸後馬上離開
longpress
手指觸摸後，超過350ms再離開，如果指定了事件回調函數并觸發了這個事件，tap事件将不被觸發
longtap
手指觸摸後，超過350ms再離開(推薦使用longpress事件代替)
transitionend
會在 WXSS transition 或 wx.createAnimation 動畫結束後觸發
animationstart
會在一個 WXSS animation 動畫開始時觸發
animationiteration
會在一個 WXSS animation 一次疊代結束時觸發
animationend
會在一個 WXSS animation 動畫完成時觸發
touchforcechange
在支援 3D Touch 的 iPhone 裝置，重按時會觸發
submit
送出表單
scroll
滾動事件
事件綁定的寫法以 key、value 的形式，key以bind或catch開頭，然後跟上事件的類型，如bindtap、catchtouchstart。
bind事件綁定不會阻止冒泡事件向上冒泡
catch事件綁定可以阻止冒泡事件向上冒泡
元件
視圖容器
名稱
功能說明
movable-view
可移動的視圖容器，在頁面中可以拖拽滑動
cover-image
覆寫在原生元件之上的圖檔視圖
cover-view
覆寫在原生元件之上的文本視圖
movable-area
movable-view的可移動區域
scroll-view
可滾動視圖區域
swiper
滑塊視圖容器
swiper-item
僅可放置在swiper元件中，寬高自動設定為100%
view
視圖容器
基礎内容
名稱
功能說明
icon
圖示
progress
進度條
rich-text
富文本
text
文本
表單元件
名稱
功能說明
button
按鈕
checkbox
多選項目
checkbox-group
多項選擇器，内部由多個checkbox組成
editor
富文本編輯器，可以對圖檔、文字進行編輯
form
表單
input
輸入框
label
用來改進表單元件的可用性
picker
從底部彈起的滾動選擇器
picker-view
嵌入頁面的滾動選擇器
picker-view-column
滾動選擇器子項
radio
單選項目
radio-group
單項選擇器，内部由多個 radio 組成
slider
滑動選擇器
switch
開關選擇器
textarea
多行輸入框
導航
名稱
功能說明
functional-page-navigator
僅在插件中有效，用于跳轉到插件功能頁
navigator
頁面連結
媒體元件
名稱
功能說明
audio
音頻
camera
系統相機
image
圖檔
live-player
實時音視訊播放
live-pusher
實時音視訊錄制
video
視訊
地圖
名稱
功能說明
map
地圖
畫布
名稱
功能說明
canvas
畫布
開放能力
名稱
功能說明
web-view
承載網頁的容器
ad
Banner 廣告
official-account
公衆号關注元件
open-data
用于展示微信開放的資料
個人總結
引入子產品-示例代碼
// common.js
function sayHello(name) {
console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
console.log(`Goodbye ${name} !`)
}
module.exports.sayHello = sayHello;
//引用
exports.sayGoodbye = sayGoodbye
var common = require('common.js')
Page({
helloMINA: function() {
common.sayHello('MINA')
},
goodbyeMINA: function() {
common.sayGoodbye('MINA')
}
})
複制代碼跳轉
wx.navigateTo({ //跳轉-保留目前頁面，跳轉到應用内的某個頁面
url: 'test?id=1'
})
wx.redirectTo({ //跳轉-關閉目前頁面
url: 'test?id=1'
})
複制代碼擷取全局資料
var app=getApp()
複制代碼樣式判斷
複制代碼
結語
如果文章中有誤的，可以留言告知。希望這篇文章對你有幫助！一起成長！一起進步！
此篇僅個人總結微信小程式，如果想檢視更多的詳情可以前往 微信小程式官網