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