配置文件
app.json的配置(全局)
{
// 用來配置頁面的路徑
"pages":[
"pages/index/index", // 首頁
"pages/Test/Test" // 跳轉(zhuǎn)的頁面
],
"window":{
"enablePullDownRefresh": true, // 是否支持下拉刷新
"backgroundTextStyle":"dark", // 下拉刷新的字體顏色，支持light
"backgroundColor": "#e04c4c", // 設置下拉刷新的背景顏色
"navigationBarBackgroundColor": "#fff", // 設置微信程序頂部導航欄顏色
"navigationBarTitleText": "yejiawei", // 頂部導航欄文字
"navigationBarTextStyle":"black" // 頂部導航欄文字樣式，black或者white
"onReachBottomDistance": 50 // 設置上拉事件觸發(fā)時距離底部的位置
},
"tabBar": { // 設置tab切換欄的配置
"list": [
{
"pagePath": "pages/index/index", // 跳轉(zhuǎn)的路徑
"text": "首頁", // tab的文字
"iconPath": "/images/t1.jpg" // 設置背景圖路徑
},
{
"pagePath": "pages/Test/Test",
"text": "測試",
"selectedIconPath": "/images/t1.jpg" // 設置選中時圖片的路徑
}
],
"color": "#e04c4c", // 設置tab按鈕字體顏色
"selectedColor": "#000", // 設置按鈕選中的顏色
"backgroundColor": "#1aad16", // 設置tab按鈕的背景顏色
"borderStyle": "black", // 設置tabbar邊框顏色，只支持black/white
"position": "top" // 設置tabbar的位置，設置為top無法顯示圖片
},
"networkTimeout": {
"request": 10000, // request請求的超時時間
"connectSocket": 10000, // connectSocket的超時時間
"downloadFile": 10000, // 下載文件的超時時間
"uploadFile": 1000 // 上傳文件的超時時間
},
"debug": true // 開啟debug模式，在控制臺輸出程序信息
}
page.json的配置(頁面)
設置的配置用來覆蓋app.json中的window配置
{
"navigationBarBackgroundColor": "#ffffff", // 設置微信程序頂部導航欄顏色
"navigationBarTextStyle": "black", // 頂部導航欄文字樣式，black或者white
"navigationBarTitleText": "微信接口功能演示", // 頂部導航欄文字
"backgroundColor": "#eeeeee", // 設置下拉刷新的背景顏色
"backgroundTextStyle": "light", // 下拉刷新的字體顏色，支持light
"enablePullDownRefresh": true, // 是否支持下拉刷新
"disableScroll": true, // 是否支持滾動
"onReachBottomDistance": 50 // 設置上拉事件觸發(fā)時距離底部的位置
}
程序入口函數(shù)(App)
App({
onLaunch: function (options) {
// 程序加載調(diào)用
},
onShow: function (options) {
// 從后臺進入前臺調(diào)用，默認程序第一次加載回調(diào)用
},
onHide: function () {
// 從前臺切換到后臺調(diào)用
},
onError: function (msg) {
// 程序報錯調(diào)用
},
myFunc: function() {
// 自定義函數(shù)
},
globalData: {
// 全局自定義數(shù)據(jù)
userInfo: "yejiawei"
}
})
上面的onLaunch和onShow方法都有options參數(shù)，options參數(shù)里面有如下屬性
{
path: "pages/index/index" // 程序打開的路徑
query: {}, // 當調(diào)用wx.navigateTo可以傳遞query
scene: 1001, // 打開小程序的場景值
referrerInfo: { // 從其他程序中進入到此程序，會返回此字段
appId: ..., // 其他程序的appId
extraData: ... // 其他程序傳遞過來的數(shù)據(jù)
}
}
可以使用 var app = getApp(); 來獲取小程序?qū)嵗琧onsole.log(app.globalData.userInfo)
頁面的入口函數(shù)(Page)
Page({
data: {
msg: "haha" // 頁面的狀態(tài)
},
onLoad: function(options) { // 頁面加載完畢觸發(fā) },
onReady: function() { // 頁面渲染完畢觸發(fā) },
onShow: function() { // 頁面開始渲染觸發(fā) },
onHide: function() { // 頁面切換到后臺觸發(fā) },
onUnload: function() {? // 頁面卸載觸發(fā) },
onPullDownRefresh: function() {? // 頁面下拉刷新觸發(fā)},
onReachBottom: function() { // 頁面上滑觸底觸發(fā) },
onShareAppMessage: function () {
// 頁面點擊轉(zhuǎn)發(fā)觸發(fā)，需要return一個object，只有定義了此方法，才會有轉(zhuǎn)發(fā)的功能
return {
title: "分享的頁面", // 分享頁面的標題
path: "/pages/logs/logs" // 分享的頁面的路徑
}
},
onPageScroll: function(options) { // 頁面滾動觸發(fā) },
myFn: function() { // 自定義函數(shù)
console.log(this.route); // 獲取當前頁面的路徑
this.setData({ // 修改狀態(tài)
msg: "haha"
}, function() {
// 狀態(tài)修改完，調(diào)用此方法
})
console.log(getCurrentPages()); // 獲取當前頁面棧實例
}
customData: { // 自定義屬性 }
})
頁面路由
方法wx.navigateTo(object) 跳轉(zhuǎn)到指定的頁面，無法跳轉(zhuǎn)到tabbar頁面（當前頁保留）
wx.navigateTo({
url: ‘/pages/logs/logs?id=1‘, // 頁面路勁，可以傳遞query參數(shù)
success: function() { // 導航成功執(zhí)行
console.log("跳轉(zhuǎn)成功");
},
fail: function() { // 導航失敗執(zhí)行
console.log("跳轉(zhuǎn)失敗");
},
complete: function() { // 導航完成調(diào)用
console.log("導航結(jié)束");
}
})
方法wx.navigateBack(object) 返回到之前的頁面
wx.navigateBack({
delta: 2 // 后退2步
})
方法wx.redirectTo(object) 銷毀當前頁面，跳轉(zhuǎn)到指定的頁面，不能跳轉(zhuǎn)到tabbar頁面
使用方法和navigateTo一樣
方法wx.reLaunch(object) 銷毀所有頁面，跳轉(zhuǎn)到任意指定的頁面
使用方法和navigateTo一樣
方法wx.switchTab(object) 跳轉(zhuǎn)到tabbar頁面
使用方法和navigateTo一樣
模塊化
js文件可以使用exports和module.exports暴露接口
exports是module.exports的一個引用
function fn () {
console.log("導入的方法執(zhí)行了");
}
exports.fn = fn;
使用文件中的方法
var common? = require(‘../common.js‘);
common.fn();
WXML文件細節(jié)
狀態(tài)綁定
變量使用雙大括號包裹 {{msg}}
標簽的屬性使用雙引號包裹
雙引號里面的內(nèi)容wx都會將其轉(zhuǎn)化成字符串，所以true,false要表達本意需要再包裹雙大括號
綁定對象，不需要對象的花括號
列表遍歷
{{index}}: {{item}}
給index和item取別名
{{myIndex}}: {{myItem}}
渲染多節(jié)點代碼塊
{{index}}:
{{item}}
遍歷字符串
{{item}}
綁定key，當組件重排后根據(jù)id可以復用組件和組件的狀態(tài)
{{index}}:
{{item}}
條件渲染
haha
haha1
haha2
同樣也可以使用block來控制多節(jié)點代碼塊
模板
聲明一個模板
{{a}}: {{b}}
使用此模板 obj: { a: 1, b: 2 }
事件
使用bindtap綁定事件
事件對象
myFn: function(event) {
console.log(event);
// 使用data開頭的自定義屬性，將保存再event.currentTarget.dataset中
}
事件分類
冒泡事件
touchstart 開始觸摸
touchmove 觸摸移動
touchcancel 觸摸打斷
touchend 觸摸離開
tap 瞬間觸摸
longpress 超過350ms的觸摸
transitionend 過渡結(jié)束
animationstart 動畫開始
animationiteration 動畫執(zhí)行一遍后觸發(fā)
animationend 動畫結(jié)束觸發(fā)
非冒泡事件，除了上述事件以外都是非冒泡事件
綁定事件
可以使用bind和catch綁定
bindtap或者bind:tap 不阻止冒泡
catchtap或者catch:tap 阻止冒泡
在WXML文件中導入其他WXML文件
可以將上面講的template代碼，放到一個單獨的wxml文件中，然后在當前文件中使用 導入，就可以立即使用了
而的作用，是將除了template和wxs以外的代碼，都拷貝到include所在的位置
wxs的使用（代碼可以單獨寫在wxs文件中，也可以寫在wxs標簽中）
模塊
wxs的作用其實和js文件的作用是一樣的，只不過提供了另外一種方式來寫js
外界要訪問wxs中定義的代碼需要使用module.exports導出
創(chuàng)建一個wxs文件，定義如下代碼
var message = "你好嗎？";
module.exports.message = message;
在wxml文件中使用
首先使用wxs標簽導入
使用 {{wxsData.message}}
在其他wxs文件中使用
var wxsData = require("../common.wxs");
WXSS文件
尺寸單位使用rpx，一個rpx就代表一個物理像素
導入其他WXSS文件 @import "../common.wxss";
自定義組件（和vue里面的組件類似）
創(chuàng)建自定義組件的步驟
第一步，修改json
修改json文件為 { "component": true }
第二部，WXML文件書寫
{{text}}
slot就是插槽，和vue的一樣
第三步，WXSS中書寫
.demo{ color: red; }
只能使用類選擇器
第四部，js文件中寫
Component({
properties: {
// 組件的屬性，可以指定類型和默認值，和vue的props驗證很像
text: {
type: String,
value: ‘默認值‘,
}
},
data: {
// 組件的狀態(tài)
someData: {}
},
methods: {
// 組件的自定義方法
customMethod: function () { }
}
})
第五步，使用組件
在要使用此自定義組件的page中，修改他的json，插入如下字段
"usingComponents": {
"my-component": "../myComponent/myComponent"
}
在page組件中使用 即可
同時可以使用 傳遞屬性值給組件內(nèi)部
WXML文件的細節(jié)
寫法和一般的WXML文件寫法一致，不過多了slot
沒有名字的slot只能有一個，如果要使用多個slot，需要操作如下幾步
第一步，在js中的Component函數(shù)中，添加如下
options: {
multipleSlots: true
},
第二步，在WXML中寫多個帶名字的slot
{{text}}
第三步，在頁面中使用
我是a
我是b
WXSS文件的細節(jié)
只能使用類選擇器
可以繼承組件外的樣式
app.wxss文件中定義的樣式，對組件無效
另外可以使用:host來定義組件標簽的樣式
:host{ color: black; }
js文件的細節(jié)
Component函數(shù)的使用如下
Component({
properties: { // 設置組件接受的屬性
myProperty1: { // 屬性名
type: String, // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
value: ‘‘, // 屬性初始值（可選），如果未指定則會根據(jù)類型選擇一個
observer: function(newVal, oldVal){ // 監(jiān)聽屬性值改變的函數(shù) }
},
myProperty2: String // 簡化的定義方式
},
data: {}, // 組件狀態(tài)
methods: { // 設置方法
onMyButtonTap: function(){
console.log(this.id); // 組件標簽的id
console.log(this.dataset); // 組件的data自定義屬性集合
console.log(this.data); // 組件的屬性和狀態(tài)的集合
console.log(this.hasBehavior()) // 組件是否有behavior屬性
this.setData({}) // 屬性和狀態(tài)都可以設置
/*
可以手動觸發(fā)組件的自定義事件，比如，組件上綁定了一個自定義事件
要手動觸發(fā)myEvent，需要調(diào)用
this.triggerEvent(‘myEvent‘, {
// 事件參數(shù)
}, {
bubbles: true, // 是否冒泡
composed: true, // 到父組件內(nèi)部尋找同名事件
capturePhase: true // 是否捕獲
}
);
/
}
},
created: function(){}, // 組件在內(nèi)存中創(chuàng)建完畢執(zhí)行
attached: function(){}, // 組件掛載之前執(zhí)行
ready: function() {}, // 組件掛載后執(zhí)行
detached: function(){}, // 組件移除執(zhí)行
moved: function(){}, // 組件移動的時候執(zhí)行
relations: {
/
嵌套的組件需要相互關(guān)聯(lián)就要使用此字段
相同嵌套子節(jié)點的處理方式
假設嵌套的html結(jié)構(gòu)如下
item 1
item 2
則custom-li組件中需要定義如下的relations
‘./custom-ul‘: { // 嵌套父組件的路徑
type: ‘parent‘, // 關(guān)聯(lián)的目標節(jié)點應為父節(jié)點
linked: function(target) { }, // custom-li插入到custom-ul時執(zhí)行，target是custom-ul
linkChanged: function(target) { }, // custom-li被移動后執(zhí)行，target是custom-ul
unlinked: function(target) {? } // custom-li被移除時執(zhí)行，target是custom-ul
}
在custom-ul組件中也要定義此字段，只不過反過來 type 改成 child
不同嵌套子節(jié)點的處理方式
item 1
item 2
此時就要使用behavior作為公共的節(jié)點路徑了，假設custom-span和custom-div都有一個名為customFormControls的behavior
custom-span和custom-div內(nèi)部定義relations的方式和之前一樣，只不過將type改成ancestor
custom-div中定義
‘customFormControls‘: {
type: ‘descendant‘, // 關(guān)聯(lián)的目標節(jié)點應為子孫節(jié)點
target: customFormControls
}
/
},
behaviors: [
/
behaviors的作用就是用來創(chuàng)建一個公用的組件js，內(nèi)部代碼和Component一模一樣
Behavior({ //... })
主要用來和當前的Component代碼合并，同名的屬性以當前組件的為主
*/
]
})
按需加載
實現(xiàn)按需加載的步驟如下
主包中應只包含tabbar
第一步，在項目根目錄下創(chuàng)建分包的文件夾，將分包的page寫在里面
第二步，在app.json中添加如下配置
"subPackages": [
{
"root": "package1", // 分包文件夾根路徑
"pages": [ // 分包中包含的路徑，不能添加到app.json的page中
"pages/Demo/Demo"
]
}
]
在tabbar配置項中，不能應用分包的頁面
第三步，使用分包文件
在tabbar的頁面中，引用分包頁
wx.navigateTo({
url: ‘../../package1/pages/Demo/Demo‘
})
作者：Q軒哥
鏈接：http://www.lxweimin.com/p/4a618a441d1c
來源：簡書
簡書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處。
