微信小程序-我的總結

簡介

小程序的運行環境分紅渲染層和邏輯層，其中 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 
使用組件 <navigator url="/page/index/index" open-type="navigateTo"/>
複製代碼

頁面重定向

調用 API wx.redirectTo 
使用組件 <navigator url="/page/index/index" open-type="redirectTo"/>
複製代碼

頁面返回

調用 API wx.navigateBack 
使用組件<navigator url="/page/index/index" open-type="navigateBack">
用戶按左上角返回按鈕
複製代碼

Tab 切換

調用 API wx.switchTab 
使用組件 <navigator open-type="switchTab"/> 
用戶切換 Tab
複製代碼

重啓動

調用 API wx.reLaunch 
使用組件 <navigator open-type="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，使用雙大括號將變量包起來。

<!--wxml-->
<view> {{message}} </view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})
複製代碼

列表渲染

在組件上使用 wx:for 控制屬性綁定一個數組，便可使用數組中各項的數據重複渲染該組件。
默認數組的當前項的下標變量名默認爲 index，數組當前項的變量名默認爲 item。

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>


// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})
複製代碼

條件渲染

在框架中，使用 wx:if="" 來判斷是否須要渲染該代碼塊。
默認數組的當前項的下標變量名默認爲 index，數組當前項的變量名默認爲 item。

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

// 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），能夠在模板中定義代碼片斷，而後在不一樣的地方調用。

<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>
<template is="staffName" data="{{...staffA}}"></template>

// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
  }
})
複製代碼

引用

WXML 提供兩種文件引用方式import和include。

• import

import能夠在該文件中使用目標文件定義的template

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

//引用
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
複製代碼

• include

include 能夠將目標文件除了template,wxs外的整個代碼引入，至關因而拷貝到 include 位置。

<!-- header.wxml -->
<view> header </view>

<!-- footer.wxml -->
<view> footer </view>

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
複製代碼

WXSS

WXSS (WeiXin Style Sheets)是一套樣式語言，用於描述 WXML 的組件樣式。
與 CSS 相比，WXSS 擴展的特性有：
尺寸單位
樣式導入

尺寸單位

rpx（responsive pixel）: 能夠根據屏幕寬度進行自適應。規定屏幕寬爲750rpx。如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

樣式導入

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}
複製代碼

內聯樣式

<view style="color:{{color}};" />
<view class="normal_view" />
複製代碼

選擇器

WXS

WXS（WeiXin Script）是小程序的一套腳本語言，結合 WXML，能夠構建出頁面的結構。

模塊

方式一:wxs標籤

<!-- tools.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";

<!-- page/index/index.wxml -->
<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>

<!--頁面輸出： -->
some msg
'hello world' from tools.wxs
複製代碼

方式二:require函數

<!-- tools.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";

<!--logic.wxs-->
var tools = require("./tools.wxs");
console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);

<!-- /page/index/index.wxml -->
<wxs src="./../logic.wxs" module="logic" />

<!--控制檯輸出：-->
'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）
複製代碼

註釋

<!-- wxml -->
<wxs module="sample">
// 方法一：單行註釋

/*
方法二：多行註釋
*/

/*
方法三：結尾註釋。即從 /* 開始日後的全部 WXS 代碼均被註釋

var a = 1;
var b = 2;
var c = "fake";

</wxs>
複製代碼

事件

事件是視圖層到邏輯層的通信方式。
事件能夠將用戶的行爲反饋到邏輯層進行處理。
事件能夠綁定在組件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函數。
事件對象能夠攜帶額外信息，如 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()
複製代碼

• 樣式判斷

<view class="d-row1-cire {{stpe>=2?'on-2':''}}"></view>
複製代碼

結語

若是文章中有誤的，能夠留言告知。但願這篇文章對你有幫助！一塊兒成長！一塊兒進步！
此篇僅我的總結微信小程序，若是想查看更多的詳情能夠前往 微信小程序官網