【微信小程序】開發實戰之「配置項」與「邏輯層」

時間 2019-12-12

標籤微信小程序開發實戰配置邏輯简体版

原文原文鏈接

微信小程序做爲微信生態重要的一環，在實際生活、工做、商業中的應用愈來愈普遍。想學習微信小程序開發的朋友也愈來愈多，本文將在小程序框架的基礎上就微信小程序項目開發所必需的基礎知識及語法特色進行了詳細總結和闡述，包括配置、函數、語法、事件及其處理、數據綁定、模塊、樣式等。想開發小程序，這些內容是必須掌握的。html

全文知識結構預覽：json

1、程序配置：
小程序

一、全局配置；二、頁面配置微信小程序

2、邏輯層：api

一、程序註冊：App()方法；二、頁面註冊：Page()方法；三、模塊與調用；四、微信原生API數組

3、視圖層（將在單獨文章中闡述）緩存

1、程序配置

一、全局配置

先來看一個典型的全局配置app.jason文件內容：服務器

{
    "pages":[
        "pages/index/index",
        "pages/logs/logs"
    ],
    "window":{
        "navigationBarTitleText":"Demo",
        "navigationBarTextStyle": "black"
    },
    "tabBar":{
        "list":[{
            "pagePath":"pages/index/index",
            "text":"首頁"
            },{
            "pagePath":"pages/logs/logs",
            "text":"日誌"
            }]
    },
    "networkTimeout":{
        "request":10000,
        "downloadFile":"10000"
    },
    "debug":true 
}

如上所示，小程序的全局配置是保存在app.jason文件中的。微信

從文件內容能夠看出小程序的全局配置局並很少，包括頁面路徑（page）、窗口表現（window）、切換頁籤（tabBar）、網絡超時設定（networkTimeout）、調試模式（debug）。並且並非每一項配置都是必需的。網絡

在詳細介紹每個配置項以前，先說一下小程序裏JSON配置的一些注意事項。

JSON文件都是被包裹在一個大括號中 {}，經過key-value的方式來表達數據。JSON的Key必須包裹在一個「雙引號」中，在實踐中，編寫 JSON 的時候，忘了給 Key 值加雙引號或者是把雙引號寫成單引號是常見錯誤。

JSON的值只能是如下幾種數據格式，其餘任何格式都會觸發報錯，例如 JavaScript 中的 undefined。

數字，包含浮點數和整數
字符串，須要包裹在雙引號中
Bool值，true 或者 false
數組，須要包裹在方括號中 []
對象，須要包裹在大括號中 {}
Null

還須要注意的是 JSON 文件中沒法使用註釋，試圖添加註釋將會引起報錯。

下面咱們詳細說明一下app.jason中每一個配置項的類型及注意事件：

1.1 pages配置項

pages是程序必需的配置項。pages接受一個數組（Array），用來指定小程序由哪些頁面組成。數組的每一項都是字符串類型，表明對應頁面的「路徑+文件名」。

pages配置時須要注意如下三點：

a）數組第一項即小程序的啓動頁，即首頁；

b）小程序新增或減小頁面，都須要修改pages數組；

c）文件名不須要加後綴，如"pages/index/index"，小程序框架會自動尋找路徑下的四類文件（.js/.jason/.wxml/.wxss）進行整合。

1.2 window配置項

window不是必需的配置項。沒有配置時系統將採用默認值。window接受對象值（Object），用來設置小程序的狀態欄、導航欄、標題、窗口等對象的顏色、背景、內容屬性。

window的可配置的對象及其描述以下：

a）navigationBarBackgroundColor，設置導航欄背景顏色，value類型HexColor，默認值#000000；

b）navigationBarTextStyle，設置導航欄標題顏色，value類型String，僅支持black或white；

c）navigationBarTitleText，設置導航欄標題文字內容，value類型String；

d）backgroundColor，設置窗口的背景色，value類型HexColor，默認值#ffffff；

e）backgroundTextStyle，下拉背景字體、loading圖的樣式，value類型String，僅支持dark/light；

f）ebablePullDownRefresh，是否開啓下拉刷新，value類型Boolean，默認值false。

示例：咱們在app.jason中設置以下的window配置：

  "window": {
    "navigationBarBackgroundColor": "#405f80",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "光與影",
    "backgroundColor":"#eeeeee",
    "backgroundTextStyle":"light"
  }

則小程序產生的界面效果如圖：

1.3 tabBar配置項

tabBar配置項能夠實現小程序多頁籤切換的功能。tabBar用來指定標籤頁的樣式以及切換時對應的頁面。

tabBar配置項及其說明：

a）color，設置標籤上的文字默認顏色，value類型HexColor，必填項；

b）selectedColor，設置標籤上的文字選中時的顏色，value類型HexColor，必填項；

c）backgroundColor，標籤頁的背景色，value類型HexColor，必填項；

d）boderStyle，標籤的框線顏色，value類型String，默認值black，僅支持black或white，選填；

e）position，標籤欄的位置，value類型String，默認值bottom，可選值bottom或top，選填；

f）list，標籤頁列表，value類型Array，支持最少2個、最多5個標籤頁。

須要注意的是，list接受的是一個數組值，數組元素的順序就是標籤頁顯示的順序，數組中的每一項也都是一個對象，其類型、功能描述以下（均是必填項）：

a）pagePath，頁面路徑，須要在pages中預約義，value類型String；

b）text，標籤上按鈕文字，value類型String；

c）iconPath，標籤上icon圖標路徑，圖標大小不能超過40KB，value類型String；

d）selectedIconPath，標籤被選中時顯示的icon圖標路徑，圖標大小不能超過40KB，value類型String；

下面的示例設置了2個標籤頁「閱讀」和「電影」，代碼以下：

  "tabBar": {
    "color":"#dddddd",
    "selectedColor":"#3cc51f",
    "borderStyle": "white",
    "backgroundColor":"#ffffff",
    "list": [
      {
        "pagePath": "pages/posts/post",
        "text": "閱讀",
        "iconPath": "/images/tab/yuedu.png",
        "selectedIconPath": "/images/tab/yuedu_hl.png"
      },
      {
        "pagePath": "pages/movies/movies",
        "text": "電影",
        "iconPath": "/images/tab/dianying.png",
        "selectedIconPath": "/images/tab/dianying_hl.png"
      }
    ]
  }

界面的實際效果以下圖所示：

1.4 networkTimeout配置項

networkTimeout用於設置各類網絡請求對象的超時時間，非必須配置項。能夠設置網絡請求超時的相關對象有request、connectSocket、uploadFile、downloadFile。時間單位均爲毫秒。固然，這些超時若沒有設置，則默認使用操做系統內核或遵循服務器WebServer的設定值。

1.5 debug配置項

debug配置項用因而否開啓開發者工具的調試模式。它的value類型是一個boolean值，默認是false。開啓後，頁面page的註冊、頁面路由、數據更新、事件觸發等調試信息將以info的形式，輸出在調試功能的console面板上。開啓配置以下：

{
    "debug":true 
}

顯然開啓後調試模式後，對開發者快速定位一些常見問題頗有幫助，但在正式發佈時應當關閉此配置項開關。

二、頁面配置

小程序中的頁面配置page.jason，只能設置本頁面的窗口表現，也就是隻能設置window配置項的內容。頁面.jason文件中的window配置值將覆蓋app.jason中的配置值。

由於頁面.jason文件中只能設置window配置項，以決定本頁面的窗口表現，因此文件中也無需寫window這個鍵值，直接寫window下的可配置項便可。window的可配置項已在本文（1.2）小節中說明。

2、邏輯層

關於小程序邏輯層的概念和特色，在微信小程序開發框架（MINA）中已作闡述，此處再也不贅述。

一、註冊程序的App()方法

先來看一下App()方法的代碼示例：

App({
    onLaunch:function(){
        //程序啓動時執行的初始化操做
    },
    onShow:function(){
        //程序進入前臺時執行的操做
    },
    onHide:function(){
        //程序進入後臺時執行的操做
    },
    onError:function(msg){
        console.log(msg)
    },
    globalData:'This is global data'
})

PS:前臺、後臺：用戶操做小程序的當前界面稱之爲前臺，當點擊關閉或按HOME鍵離開微信，小程序並無直接銷燬，而是進入後臺；當再次進入微信或再次打開小程序，又會從後臺進入前臺了。

App()方法用來註冊一個程序，且只能註冊一次，存在於app.js中。它接受的參數是object類型：

a）onLaunch，生命週期函數，監聽小程序初始化，當小程序初始化完成時，會觸發onLaunch，且全局只觸發一次；

b）onShow，生命週期函數，監聽小程序顯示，小程序啓動或從後臺進入前臺顯示，會觸發onShow；

c）onHide，生命週期函數，監聽小程序隱藏，小程序從前臺進入後臺會觸發onHide；

d）onError，錯誤監聽函數，小程序發生腳本錯誤或API調用失敗，會觸發onError並帶出錯誤信息；

e）開發者還能夠添加任意object類型的參數，用this訪問；

可使用全局函數getApp()獲取小程序實例。使用示例以下：

//**.js
var app = getApp() 
console.log(app.globalData) 

//輸出'This is global data'

可是在App()函數中不要使用getApp()，使用this就能夠拿到App()實例。

二、註冊頁面的page()方法

先來看一下page()方法的代碼示例：

Page({
    data：{
        text:"This is page data."
    },

    onLoad:function(){
        //頁面加載時執行的初始化操做
    },
    onReady:function(){
        //頁面初次渲染時執行的操做
    },
    onShow:function(){
        //頁面顯示時執行的操做
    },
    onHide:function(){
        //頁面隱藏時執行的操做
    },
    onUnload:function(){
        //頁面卸載或關閉時執行的操做
    },
    onPullDownRefresh:function(){
        //頁面被用戶下拉時執行的操做
    },
    onReachBottom:function(){
        //頁面到達底部時執行的操做
    },
    onShareAppMessage:function(){
        //用戶分享時返回個性化的分享數據
    },

    //響應wxml綁定事件處理
    viewTap:function(){
    this.setData({
        text:'Set some data for update view'
    })
    }
})

page()方法用來註冊一個頁面。它接受object類型參數，用來指定頁面的初始數據、生命週期函數、事件處理函數等。每一個頁面有且僅有一個page()方法，存在於該頁面的.js文件中。

2.1 初始化數據

data參數提供頁面的初始化數據，做爲頁面的第一次渲染。對象 data 將會以 JASON 的形式由邏輯層傳至視圖層，因此其數據必須是能夠轉成 JASON 的格式：字符串、數字、布爾值、對象、數組。

在視圖層經過WXML對數據進行綁定。示例代碼以下：

<!--wxml-->
//渲染page()的數據
<view>{{text}}</view>

2.2 頁面生命週期函數

頁面的生命週期包括：onLoad、onShow、onReady、onHide、onUnload。

onLoad是頁面加載時執行的初始化操做。一個頁面只會調用一次，參數能夠獲取wx.navigationTo和wx.redirectTo及<navigator />中的query。

onShow是頁面顯示時執行的操做。每次打開頁面都會調用一次。

onReady是頁面渲染完成時執行的操做。一個頁面只會調用一次，表明頁面已經準備穩當，能夠和視圖層進行交互。對頁面的設置（如wx.setNavigationBarTitle）應該在onReady以後。

onHide是頁面隱藏時執行的操做。當進行 navigateTo 或底部進行 tab 切換時調用。

onUnload是頁面卸載時執行的操做。當進行 redirectTo 或 navigateBack 操做時調用。

2.3 頁面相關事件處理函數

onPullDownRefresh是下拉刷新時執行的操做，監聽用戶下拉刷新事件。須要在頁面 .json 文件的window配置項中開啓enablePullDownRefresh。當處理完數據刷新後，wx.stopPullDownRefresh能夠中止當前頁面的下拉刷新。

onShareAppMessage是用戶分享時返回定製的分享內容。只有定義了此事件處理函數，右上角菜單纔會顯示「分享」按鈕。用戶點擊分享按鈕的時候會調用。此事件須要return一個object對象，用於自定義分享內容。

title 是分享的標題，默認值是當前小程序的名稱。

path 是分享路徑，當前頁面的 path，必須是以 / 開頭的完整路徑。

onShareMessage示例代碼以下：

page({
    onShareMessage:function(){
        return{
            title:'分享標題',
            path:'/page/url?id=5'
        }
    }
})

2.4 視圖層綁定的事件處理函數

page()方法除了初始化數據和生命週期函數，還能夠定義一些特殊的事件處理函數。咱們能夠在視圖層經過對組件加入事件綁定，當知足觸發事件時，就會執行page()中定義的事件處理函數。

示例代碼以下：

<!--wxml 綁定tap事件到view組件上，函數名爲viewTap-->
<view bindtap = "viewTap"> click me </view>

//page.js
page({
    //定義 viewTap 事件處理函數
    viewTap:function(){
        console.log('view tap')
    }
})

2.5 頁面數據設置與展示

在page()中咱們使用setData函數來設置數據。改變對應的this.data的值。

this是指包含它的函數做爲方法被調用時所屬的對象，在小程序中通常指調用頁面。

不能直接修改this.data，這樣沒法改變頁面的狀態，還會形成數據不一致。

儘可能避免一次設置過多的數據，單次不能超過1024KB。

setData函數參數是對象類型。以key、value的形式表示，將this.data中的key對應的值改變成value。其中key無須在this.data中預約義。

示例代碼以下：

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap = "changeText">Change normal data</button>
<view>{{array[0].text}}</view>
<button bindtap = "changeItemInArray">Change Array data</button>
<view>{{object.text}}</view>
<button bindtap = "changeItemInObject">Change Object data</button>
<view>{{newField.text}}</view>
<button bindtap = "addNewField">Add new data</button> 

//index.js
page({
    data:{
        texe:'init data',
        array:[{text:'init data'}],
        object:{
            text:'init data'
        }
    },
    changeText:function(){
        //this.data.text = 'changed data'錯誤設置方法
        this.setData({
            text:'changed data'
        })
    },
    changeItemInArray:function(){
    //注意修改的key是數據路徑的形式（有引號）
        this.setData({
            'array[0].text':'changed data'
        })
    },
    changeItemInObject:function(){
    //注意修改的key是數據路徑的形式（有引號）
        this.setData({
            'object.text':'changed data'
        })
    },
    addNewField:function(){
    //注意添加的key是數據路徑的形式（有引號）
        this.setData({
            'newField.text':'new data'
        })
    }
})

實際效果示例：

2.6 頁面棧及其實例獲取

框架以棧的形式維護了程序的全部頁面。當發生頁面切換的時候，頁面棧的表現以下：

路由方式	頁面棧表現
初始化	新頁面入棧。
打開新頁面	新頁面入棧。
頁面重定向	當前頁面出棧，新頁面入棧。
頁面返回	頁面不斷出棧，直到目標返回，新頁面入棧。
Tab 切換	當前頁面出棧，新頁面入棧。

框架提供了獲取當前頁面棧實例的方法getCurrentPages()，頁面以數組形式按棧的形式給出，第一個元素爲首頁，最後一個元素爲當前頁面。不要嘗試修改頁面棧，會致使路由及頁面狀態錯誤。

2.7 頁面路由

小程序框架管理全部頁面的路由。路由的觸發方式以及頁面的生命週期函數對應關係以下：

路由方式	觸發時機	路由後頁面	路由前頁面
初始化	小程序打開的第一個頁面	onLoad，onShow
打開新頁面	調用API wx.navigateTo 或使用組件<navigator open-type="navigator"/>	onLoad，onShow	onHide
頁面重定向	調用API wx.navigateTo 或使用組件<navigator open-type="navigator"/>	onLoad，onShow	onUnload
頁面返回	調用API wx.navigateTo 或用戶按左上角返回按鈕	onShow	onUnload
Tab 切換	調用API wx.switchTab 或使用組件<navigator open-type="switchTab"/> 或多 Tab 模式下用戶切換Tab	第一次打開 onLoad，onShow；不然 onShow	onHide

三、模塊化與調用

3.1 文件做用域

在頁面的JavaScript腳本文件（.js）中聲明的變量和函數只在該文件中有效，不一樣的文件中能夠聲明相同名字的變量和函數，不會互相影響。

經過全局函數getApp()能夠獲取全局的應用實例，若是須要全局的數據能夠在App()方法中設置，例如：

//app.js 
App（{
    globalData:1
}）

//a.js 
//在a.js中定義變量localValue 
var localValue = 'a' 
//在a.js中獲取App實例
var app = getApp() 
//修改a.js中獲取到的全局數據值
app.globalData++ 

//b.js 
//在b.js中定義變量localValue，不影響a.js中的localValue 
var localValue = 'b' 
//假設a.js在b.js以前運行，那麼下面的語句以後globalData就會是2 
console.log(getApp().globalData)

3.2 模塊化

咱們能夠將一些公共的代碼抽離成爲一個單獨的.js腳本文件，做爲一個模塊。

模塊只有經過 module.exports 才能對外暴露接口以供其餘.js文件引入使用。在須要使用公共模塊的.js文件中，使用 require(path)將公共代碼引入。

示例代碼以下：

//common.js 
function Hello(name) {
    console.log('Hello' + name + '!') 
}

module.exports = {
    sayHello: Hello
}

//下面的call.js使用common.js模塊
//call.js 
var common = require('common.js') 
page({
    helloMINA:function(){
    common.sayHello('MINA')
    }
})