第一章 什么是微信小程序

1. 小程序介紹

微信小程序是一種全新的連接用戶與服務(wù)的方式，它可以在微信內(nèi)被便捷地獲取和傳播，同時(shí)具有出色的使用體驗(yàn)（微信小程序官方介紹）

2. 微信小程序和app的區(qū)別

(1)下載安裝
微信小程序：通過微信(掃描二維碼缤言、搜索飒筑、分享)即可獲得;
App：從應(yīng)用商店(App Store识窿、應(yīng)用匯等)下載安裝;
(2)內(nèi)存占用
微信小程序：無需安裝礼预，和微信共用內(nèi)存使用，占用內(nèi)存空間忽略不計(jì);
App：安裝于手機(jī)內(nèi)存鸳玩，一直占用內(nèi)存空間阅虫，太多的 App 可能會(huì)導(dǎo)致內(nèi)存不足;
(3)手機(jī)適配
微信小程序：一次開發(fā)，多終端適配;
App：需適配各種主流手機(jī)不跟，開發(fā)成本大;
(4)產(chǎn)品發(fā)布
微信小程序：提交到微信公眾平臺(tái)審核颓帝，云推送;
App：向十幾個(gè)應(yīng)用商店提交審核，且各應(yīng)用商店所需資料不一樣，非常繁瑣;
(5)功能區(qū)別
微信小程序：限于微信平臺(tái)提供的功能;
App：可實(shí)現(xiàn)完整功能 购城。

03吕座、營(yíng)銷推廣區(qū)別
(1)推廣難度
微信小程序：通過二維碼、微信搜索瘪板、朋友分享等方式直接獲得
App：需要用戶主動(dòng)下載十幾M的安裝包吴趴，在沒有Wi-Fi的情況下推廣困難;
(2)消息推送
微信小程序：僅能回復(fù)模版消息，消息推送次數(shù)有限制;
App：可自行設(shè)置推送次數(shù)侮攀。
04锣枝、市場(chǎng)及應(yīng)用場(chǎng)景區(qū)別
(1)面向用戶群
微信小程序：面向所有微信用戶，月活躍用戶超8億人魏身，日使用賬號(hào)5.7億;
App：面向所有智能手機(jī)用戶惊橱，約20億臺(tái);
(2)創(chuàng)業(yè)機(jī)會(huì)
微信小程序：藍(lán)海市場(chǎng)蚪腐，在新的使用場(chǎng)景中可以尋求很多好機(jī)會(huì);
App：市場(chǎng)基本飽和箭昵，幾乎所有的領(lǐng)域均已覆蓋;
(3)應(yīng)用場(chǎng)景
微信小程序：
適合快速場(chǎng)景化服務(wù)，可以快速驗(yàn)證客戶需求
適合初創(chuàng)團(tuán)隊(duì)回季，試錯(cuò)成本低家制，需要較少時(shí)間和資金投入，可以迅速占領(lǐng)空白領(lǐng)域客戶渠道
App：
適合已驗(yàn)證可行的商業(yè)模式
適合產(chǎn)品復(fù)雜度高泡一，功能受限低的產(chǎn)品開發(fā)
適合成熟的商業(yè)大公司颤殴，對(duì)自我品牌要求較高的企業(yè)
具備充裕的開發(fā)時(shí)間和資金儲(chǔ)備

3. 小程序開發(fā)準(zhǔn)備

1. 申請(qǐng)賬號(hào)
   · 在微信公眾平臺(tái)官網(wǎng)首頁（mp.weixin.qq.com）注冊(cè)。
   · 根據(jù)指引填寫信息和提交相應(yīng)的資料鼻忠。
   · 選擇注冊(cè)的主體類型（個(gè)人/企業(yè)）
   企業(yè)類型與個(gè)人類型區(qū)別：
   ·目前個(gè)人類型申請(qǐng)的小程序不支持微信認(rèn)證涵但、微信支付、卡券應(yīng)用帖蔓、獲取用戶綁定的手機(jī)號(hào)碼矮瘟、附近小程序功能。
   ·獲取用戶信息塑娇，上傳下載澈侠，音視頻播放，獲取定位埋酬，map地圖哨啃，發(fā)布等其他基礎(chǔ)功能都是可以用的。
2. 小程序信息完善
   · 小程序名稱写妥、頭像拳球、介紹、服務(wù)類目等
   · 配置服務(wù)器域名（小程序可以跟指定的域名與進(jìn)行網(wǎng)絡(luò)通信珍特，發(fā)起請(qǐng)求祝峻、上傳下載等 ）
   · 登錄小程序后臺(tái)，可以在菜單 “設(shè)置”-“開發(fā)設(shè)置” 看到小程序的AppID
3. 開發(fā)
   · 在小程序管理平臺(tái)設(shè)置開發(fā)者權(quán)限
   · 安裝小程序開發(fā)者工具
   · 編寫小程序代碼
4. 發(fā)布小程序
   · 在小程序開發(fā)者工具菜單欄點(diǎn)擊上傳代碼
   · 登錄管理平臺(tái) - 開發(fā)管理 進(jìn)行 提交審核 或者 選為體驗(yàn)版本
   · 選擇提交審核
   項(xiàng)目發(fā)布需要：
   · 項(xiàng)目填寫了AppID（注冊(cè)后在小程序管理平臺(tái) - 設(shè)置 - 開發(fā)設(shè)置中獲取，新建項(xiàng)目時(shí)就得填寫）
   · 已經(jīng)完善了小程序信息（名稱呼猪、頭像画畅、介紹、服務(wù)類目等）

4. 小程序開發(fā)工具介紹

微信開發(fā)者工作是微信官方提供的針對(duì)微信小程序的開發(fā)工具宋距，集中了開發(fā)轴踱，調(diào)試，預(yù)覽谚赎，上傳等功能,幫助開發(fā)者簡(jiǎn)單和高效地開發(fā)微信小程序淫僻。

[小程序開發(fā)工具介紹]（https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html）

第二章 微信小程序開發(fā)基礎(chǔ)

1. 文件目錄和每個(gè)文件的功能

官網(wǎng)-小程序目錄結(jié)構(gòu)

• app全局文件
  app.js 小程序邏輯
  app.json 小程序公共配置
  app.wxss 小程序公共樣式表
• 小程序頁面page
  pages文件夾中每一個(gè)文件夾代表一個(gè)頁面，每個(gè)頁面包含一個(gè).js文件壶唤，一個(gè).wxml文件雳灵，一個(gè).wxss文件以及一個(gè).json文件。
  js 頁面邏輯
  wxml 頁面結(jié)構(gòu)
  json 頁面配置
  wxss 頁面樣式表

• wxml文件
  .wxml文件類似我們寫的.html文件闸盔，但標(biāo)簽上有些不同悯辙。
  使用<view></view>標(biāo)簽代替<div></div>，使用<image></image>代替<img/>迎吵，使用<block></block>標(biāo)簽代替<template></template>躲撰，引入<text></text>標(biāo)簽等等，后續(xù)做項(xiàng)目的時(shí)候會(huì)了解到更多標(biāo)簽击费。

• wxss文件
  .wxss文件就是.css文件拢蛋。在app.wxss中控制全局樣式，在pages文件夾中的頁面文件的.wxss文件中控制局部樣式蔫巩。局部樣式的優(yōu)先級(jí)大于全局樣式谆棱。
  微信小程序?yàn)榱诉m配多種不同屏幕大小的設(shè)備，采取了一種的響應(yīng)式單位rpx圆仔，使用rpx單位就好像使用百分比作為單位一樣實(shí)現(xiàn)響應(yīng)式布局垃瞧。rpx是一種相對(duì)大小，我們使用iphone6的機(jī)型時(shí)荧缘，1px=2rpx皆警，iphone6的大小為375px667px，對(duì)于的rpx為750rpx1334rpx截粗。
  官網(wǎng)-rpx

• json文件
  .json文件是項(xiàng)目的配置文件信姓。app.json文件進(jìn)行全局配置，每個(gè)頁面文件夾下還有一個(gè).json文件用于局部配置绸罗，局部配置只能配置window屬性意推。
  [官網(wǎng)-配置小程序]（https://developers.weixin.qq.com/miniprogram/dev/framework/config.html）

• js文件
  小程序的生命周期分為應(yīng)用聲明周期和頁面生命周期，應(yīng)用聲明周期函數(shù)在app.js中定義珊蟀，且在小程序運(yùn)行過程中一直存在內(nèi)存中處于運(yùn)行狀態(tài)菊值，在這里可以定義應(yīng)用聲明周期函數(shù)以及定義全局變量外驱。每個(gè)頁面中的.js文件中則可以定義頁面聲明周期函數(shù)等。

2. WXML語法

官網(wǎng)-wxml語法參考

3. 事件

小程序中不使用click事件腻窒，而用tab（觸摸）事件代替昵宇，事件的前綴有兩種分別是bind和catch，bind:tab表示冒泡事件儿子，即事件觸發(fā)后繼續(xù)冒泡觸發(fā)后續(xù)事件瓦哎，catch:tab表示非冒泡事件，即事件觸發(fā)后不再冒泡柔逼，類似執(zhí)行了event.stopPropagation()方法蒋譬。

//實(shí)現(xiàn)一個(gè)點(diǎn)擊加一的計(jì)數(shù)器
//wxml
<view>
    <text bind:tab="addNumber">{{count}}</text>
</view>

//js
Component({
    //調(diào)用組件傳來的變量
    properties:{
    },
    //內(nèi)部變量
    data() {
        return {
            count:0
        }
    },
    //內(nèi)部方法
    methods:{
        //點(diǎn)擊加一
        addNumber() {
            this.setData({
               count:count+1 
            });
        }
    }
});

4. 小程序的生命周期

小程序的聲明周期分為整個(gè)應(yīng)用的聲明周期以及單個(gè)頁面的聲明周期以及自定義組件的生命周期。生命周期不用馬上弄明白愉适，但是以后會(huì)有幫助犯助。

應(yīng)用生命周期回調(diào)函數(shù)

在app.js中，可以設(shè)置應(yīng)用生命周期的回調(diào)函數(shù)维咸。

App({
  onLaunch (options) {
    //初始化完成后執(zhí)行
  },
  onShow (options) {
    //進(jìn)入小程序后執(zhí)行
  },
  onHide () {
    //離開小程序后執(zhí)行剂买，注意不是銷毀，如切換其他App時(shí)腰湾，微信處于后臺(tái)中雷恃，這時(shí)調(diào)用onHide
  },
  onError (msg) {
    //小程序出錯(cuò)時(shí)執(zhí)行
  }
});

頁面上生命周期回調(diào)函數(shù)

Page({
  onLoad: function(options) {
    //頁面初始化后執(zhí)行
  },
  onReady: function() {
    //初次渲染結(jié)束執(zhí)行
  },
  onShow: function() {
    //進(jìn)入頁面執(zhí)行
  },
  onHide: function() {
    //頁面隱藏/切入后臺(tái)時(shí)觸發(fā)疆股，如 wx.navigateTo 或底部 tab 切換到其他頁面费坊，小程序切入后臺(tái)等  
  },
  onUnload: function() {
    //頁面卸載時(shí)觸發(fā)。如wx.redirectTo或wx.navigateBack到其他頁面時(shí)旬痹。
  },
  onPullDownRefresh: function() {
    // 監(jiān)聽下拉刷新事件,必須開啟enablePullDownRefresh
  },
  onReachBottom: function() {
    // 監(jiān)聽用戶上拉觸底事件
  },
  onShareAppMessage: function () {
    // 點(diǎn)擊轉(zhuǎn)發(fā)按鈕
  },
  onPageScroll: function() {
    // 頁面滾動(dòng)事件
  },
  onResize: function() {
    // 旋轉(zhuǎn)屏幕觸發(fā)
  }
})

組件生命周期函數(shù)

官網(wǎng)-組件生命周期

Component({
  lifetimes: {
    created:function() {
        //組件實(shí)例化的時(shí)候執(zhí)行附井，此時(shí)不能調(diào)用setData()
    }
    attached: function() {
      // 在組件實(shí)例進(jìn)入頁面節(jié)點(diǎn)樹時(shí)執(zhí)行
    },
    detached: function() {
      // 在組件實(shí)例被從頁面節(jié)點(diǎn)樹移除時(shí)執(zhí)行
    },
  },
});

第三章 小程序的模板和自定義組件

1. template模板

相對(duì)于component而言，template更加輕量級(jí)两残，它的功能有限永毅，主要是用于展示。模板只有兩個(gè)以.wxml 和.wxss結(jié)尾的文件

1. 定義模板
   新建一個(gè)與pages同級(jí)的文件夾 => templates,在templates下創(chuàng)建templateItem文件夾人弓，然后在這個(gè)文件夾里創(chuàng)建同名的.wxml和.wxss的文件
   使用name屬性作為模板的名字沼死，然后在<template><template/>標(biāo)簽內(nèi)定義代碼片段

// templateItem.wxml
<template name="msgItem">    
    <view class="content">我是模板的內(nèi)容</view>
</template>

//templateItem.wxss
.content {   
    width: 100%;    
    height: 400rpx;   
    background-color: yellowgreen;    
    display: flex;    
    justify-content: center;    
    align-items: center;
}

2. 使用模板
   要使用模板，首先得在要使用的頁面引入模板崔赌，使用import標(biāo)簽導(dǎo)入意蛀，使用is屬性，聲明需要使用的模板健芭，比如在index.wxml中使用：

// index.wxml
<import src="../../templates/templateItem/templateItem.wxml" />
<view>    
    <template is="msgItem" />
</view>

現(xiàn)在县钥，模板的內(nèi)容可以顯示在頁面上了，但是模板的樣式卻沒有生效慈迈。想要讓樣式生效若贮，必須在index.wxss 中引入模板的樣式文件：

/** index.wxss **/
@import "../../templates/templateItem/templateItem.wxss"

3. 模板傳值
   在index.js中的data中添加一些數(shù)據(jù):

// index.js?
cosnt app = getApp()?;
Page({    
    data: {    
        hero: {  
             name: '蓋倫'，
             profession： '戰(zhàn)士',
             skill: '得瑪西亞正義' 
       }
    }
})

修改一下模板：

<template name="msgItem">
    <view class="content">
        <view class="content">我是模板的內(nèi)容</view>
        <view>            
            <text>{{ name }}</text>---            
            <text>{{ professios }}</text>---            
            <text>{{ skill }}</text>        
         </view>   
    </view>
</template>

修改一下index.wxml中的模板引用：

<template is="msgItem" data="{{...hero}}" />

2. component自定義組件

開發(fā)者可以將頁面內(nèi)的功能模塊抽象成自定義組件，以便在不同的頁面中重復(fù)使用谴麦；也可以將復(fù)雜的頁面拆分成多個(gè)低耦合的模塊蠢沿，有助于代碼維護(hù)。自定義組件在使用時(shí)與基礎(chǔ)組件非常相似匾效。

1. 定義組件
   在pages的同級(jí)目錄下創(chuàng)建components文件夾用來存放所有組件搏予。一個(gè)自定義組件由json wxml wxss js 4個(gè)文件組成，類似于頁面弧轧。

要編寫一個(gè)自定義組件雪侥，首先需要在json文件中進(jìn)行自定義組件聲明（將component字段設(shè)為true)，使用微信開發(fā)者工具精绎，創(chuàng)建component會(huì)自動(dòng)生成速缨。

// componentItem.json
{

    "component": true

}

在組件文件中編寫代碼

// componentItem.wxml
<view class="herocontainer">    
    <view>姓名：{{ hero.name }}</view>    
    <view>職業(yè)：{{ hero.profession }}</view>    
    <view>技能：{{ hero.skill }}</view>
</view>

在自定義組件的js文件中，需要使用 Component 來注冊(cè)組件代乃，并提供組件的屬性定義旬牲、內(nèi)部數(shù)據(jù)和自定義方法。

// componentItem.js
Component({
    //組件傳遞的數(shù)據(jù)   
    properties: {   
        // 這里定義了hero屬性搁吓，可以設(shè)置默認(rèn)值和類型     
        hero: Object   
    }, 
    // 內(nèi)部數(shù)據(jù)   
    data: {   
 
    },   
    // 自定義方法 
    methods： {        
    
    }
})

自定義組件樣式
注意：在組件wxss中不應(yīng)使用ID選擇器原茅、屬性選擇器和標(biāo)簽名選擇器，請(qǐng)使用class選擇器堕仔。

/** componentItem.wxss **/
.herocontainer {    
    width: 750rpx;    
    height: 200rpx;    
    background-color: yellow;    
    color: hotpink;
}

2. 使用自定義組件
   使用自定義組件前擂橘，首先要在要使用的頁面的json文件中進(jìn)行引用聲明，此時(shí)需要提供每個(gè)自定義組件的標(biāo)簽名和對(duì)應(yīng)的自定義組件文件路徑摩骨。

{    

    "usingComponents": {       

         "component-item": "/components/componentItem/componentItem"  

    }

}

這樣通贞，在頁面的wxml 中就可以像使用基礎(chǔ)組件一樣使用自定義組件啦，節(jié)點(diǎn)名就是自定義組件的標(biāo)簽名恼五，節(jié)點(diǎn)屬性就是自定義組件的屬性值

// index.wxml
<view>    
    <component-item hero="{{hero}}" />
</view>

// index.js?
cosnt app = getApp()?;
Page({    
    data: {    
        hero: {  
             name: '蓋倫'昌罩，
             profession： '戰(zhàn)士',
             skill: '得瑪西亞正義' 
       }
    }
})

3. 自定義組件傳值

• 頁面=>組件
  組件中通過proprtties寫上要接受的值，頁面通過屬性名稱和值的方式傳遞灾馒，上面就是頁面?zhèn)髦档浇M件茎用。
• 組件=>頁面
  頁面中寫監(jiān)聽事件，組件中寫觸發(fā)事件睬罗。
  在自定義組件中添加一個(gè)事件：

// componentItem.wxml
<button bind:tap="onTap">點(diǎn)擊按鈕觸發(fā)事件</button>

在組件的js文件methods中添加方法,通過this.triggerEvent()給頁面?zhèn)髦倒旃ΑＴ赿ata中定義一個(gè)數(shù)據(jù)用來傳給頁面。

// componentItem.js
Component({
    //組件傳遞的數(shù)據(jù)   
    properties: {        
        hero: Object,
        userName:{
            type:String,    
            //調(diào)用該組件時(shí)傳入的值的類型傅物，可以是Number夯辖、String、Boolean董饰、Object蒿褂、Aray圆米、Null(任意類型)
            value:"李雷"    //默認(rèn)值，調(diào)用該組件時(shí)未傳入userName時(shí)啄栓，則userName的值為預(yù)設(shè)值李雷
        } 
    }, 
    // 內(nèi)部數(shù)據(jù)   
    data: { 
        message: '歡迎來到英雄聯(lián)盟'  
    },  
    // 自定義方法 
    methods： {        
        onTap(){    
            const message = this.data.message    
            this.triggerEvent('myevent',message)
        }
    }
})

在頁面中綁定事件

// index.wxml
<component-item hero="{{hero}}" bind:myevent="onMyEvent"/>

在頁面的js中娄帖，添加一個(gè)與data同級(jí)的方法，通過事件對(duì)象的e.detail拿到傳過來的值

// index.js
page({    
    onMyEvent(e){ 
       console.log(e.detail)    
    }
})

總結(jié)：
template 和 components 的共性： 不能單獨(dú)呈現(xiàn)出來昙楚，必須依附顯示在頁面
不同點(diǎn)：template比較輕量級(jí)近速，沒有自己的邏輯處理能力，只能來著頁面顯示值
組件要重量級(jí)一些堪旧，它有自己的邏輯處理能力
參考：
官網(wǎng)-自定義組件

第四章 小程序幾個(gè)重要API

1. 小程序網(wǎng)絡(luò)請(qǐng)求

注意事項(xiàng)

1. 服務(wù)器域名配置
   每個(gè)微信小程序需要事先設(shè)置通訊域名削葱，小程序只可以跟指定的域名與進(jìn)行網(wǎng)絡(luò)通信。包括普通 HTTPS 請(qǐng)求（wx.request）淳梦、上傳文件（wx.uploadFile）析砸、下載文件（wx.downloadFile) 和 WebSocket 通信（wx.connectSocket）。

2. 網(wǎng)絡(luò)請(qǐng)求

• 默認(rèn)超時(shí)時(shí)間和最大超時(shí)時(shí)間都是 60s爆袍；
  超時(shí)時(shí)間可以在 app.json 中通過 networktimeout 配置首繁。
• wx.request、wx.uploadFile陨囊、wx.downloadFile 的最大并發(fā)限制是 10 個(gè)弦疮；
  wx.connectSockt 的最大并發(fā)限制是 5 個(gè)。
  小程序進(jìn)入后臺(tái)運(yùn)行后蜘醋，如果 5s 內(nèi)網(wǎng)絡(luò)請(qǐng)求沒有結(jié)束胁塞，會(huì)回調(diào)錯(cuò)誤信息 fail interrupted；在回到前臺(tái)之前堂湖，網(wǎng)絡(luò)請(qǐng)求接口調(diào)用都會(huì)無法調(diào)用闲先。
• 只要成功接收到服務(wù)器返回，無論 statusCode 是多少无蜂，都會(huì)進(jìn)入 success 回調(diào)。請(qǐng)開發(fā)者根據(jù)業(yè)務(wù)邏輯對(duì)返回值進(jìn)行判斷蒙谓。

wx.request(Object object) 發(fā)起請(qǐng)求

屬性 類型 默認(rèn)值 必填 說明
url string 是 開發(fā)者服務(wù)器接口地址
data string/object/ArrayBuffer 否 請(qǐng)求的參數(shù)
header Object 否 設(shè)置請(qǐng)求的header斥季，header中不能設(shè)置 Referer。
content-type 默認(rèn)為 application/json
method string GET 否 HTTP 請(qǐng)求方法
dataType string json 否 返回的數(shù)據(jù)格式
responseType string text 否 響應(yīng)的數(shù)據(jù)類型
success function 否 接口調(diào)用成功的回調(diào)函數(shù)
fail function 否 接口調(diào)用失敗的回調(diào)函數(shù)
complete function 否 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功累驮、失敗都會(huì)執(zhí)行）

示例代碼

wx.request({
  url: 'test.php', //僅為示例酣倾，并非真實(shí)的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默認(rèn)值
  },
  success (res) {
    console.log(res.data)
  }
})

RequestTask 網(wǎng)絡(luò)請(qǐng)求任務(wù)對(duì)象

示例代碼

const requestTask = wx.request({
  url: 'test.php', //僅為示例，并非真實(shí)的接口地址
  data: {
    x: '' ,
    y: ''
  },
  header: {
    'content-type': 'application/json'
  },
  success (res) {
    console.log(res.data)
  }
})
requestTask.abort() // 取消請(qǐng)求任務(wù)

方法

RequestTask.abort()
// 中斷請(qǐng)求任務(wù)

RequestTask.onHeadersReceived(function callback)
// 監(jiān)聽 HTTP Response Header 事件谤专。會(huì)比請(qǐng)求完成事件更早

RequestTask.offHeadersReceived(function callback)
// 取消監(jiān)聽 HTTP Response Header 事件

官網(wǎng)-網(wǎng)絡(luò)

2. 小程序路由

路由配置

所有頁面都必須在app.json中注冊(cè),例如：

{
    "pages": [
        "pages/index/index",
        "pages/logs/logs"
    ]
}

路由跳轉(zhuǎn)方式

• 打開新頁面 wx.navigateTo(Object object)
• 注：保留當(dāng)前頁面躁锡，跳轉(zhuǎn)到新頁面；不能跳到 tabbar 頁面
• 進(jìn)棧

wx.navigateTo({
  url: 'test?id=1', 
  success: function(res) {}
})

// test.js 接收參數(shù)
Page({
  onLoad: function(option){
    console.log(option)
  }
})

• 頁面重定向 wx.redirectTo(Object object)
• 注：關(guān)閉當(dāng)前頁面置侍，跳轉(zhuǎn)到新頁面映之，不能返回拦焚；不能跳到 tabbar 頁面
• 當(dāng)期頁面出棧新頁面入棧

wx.redirectTo({
  url: 'test?id=1'
})

• 頁面返回 wx.navigateBack(Object object)
• 注： 關(guān)閉當(dāng)前頁面笼才，返回上一頁面或多級(jí)頁面葛闷。
• 當(dāng)前頁面出棧

wx.navigateBack({
  delta: 2  // 返回的頁面數(shù)，如果 delta 大于現(xiàn)有頁面數(shù)迁央，則返回到首頁蠢甲。
})

• switchTab 切換 wx.switchTab(Object object)
• 跳轉(zhuǎn)到 tabBar 頁面僵刮，并關(guān)閉其他所有非 tabBar 頁面。
• 頁面全部出棧鹦牛，只留下新的 Tab 頁面

// 需在 app.json 的 tabBar 字段定義頁面
{
  "tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "首頁"
    },{
      "pagePath": "other",
      "text": "其他"
    }]
  }
}

// 需要跳轉(zhuǎn)的 tabBar 頁面的路徑搞糕，路徑后不能帶參數(shù)。
wx.switchTab({
  url: '/index'
})

• 重啟動(dòng) wx.reLaunch(Object object)
• 關(guān)閉所有頁面曼追，打開到應(yīng)用內(nèi)的某個(gè)頁面寞宫；可以打開任意頁面。
• 頁面全部出棧保留當(dāng)期頁面棧

// 跳轉(zhuǎn)頁面
wx.reLaunch({
  url: 'test?id=1'  // 需要跳轉(zhuǎn)的應(yīng)用內(nèi)頁面路徑拉鹃，路徑后可以帶參數(shù)
})

// test.js 接收參數(shù)
Page({
  onLoad: function(option){
    console.log(option)
  }
})

• 獲取當(dāng)前頁面棧 getCurrentPages()
• 該函數(shù)用于獲取當(dāng)前頁面棧的實(shí)例辈赋，以數(shù)組形式按棧的順序給出，第一個(gè)元素為首頁膏燕，最后一個(gè)元素為當(dāng)前頁面钥屈。在小程序中棧最多只能維護(hù)10個(gè)數(shù)據(jù)
• 也可以在某個(gè)頁面修改另一個(gè)頁面的data或者調(diào)用另一個(gè)頁面的方法。

var pages = getCurrentPages();
var currentPage = pages[pages.length - 1]坝辫； // 當(dāng)前頁面
var prevPage = pages[pages.length - 2]; // 當(dāng)前頁面的上一個(gè)頁面

// 修改另一個(gè)頁面的data
prevPage.setData({
    Flag: true
})

// 調(diào)用另一個(gè)頁面的方法實(shí)現(xiàn)頁面重新加載
prevPage.onLoad();

// 應(yīng)用場(chǎng)景：調(diào)用wx.navigateBack()的方法篷就，返回到上級(jí)頁面并刷新數(shù)據(jù)

• 使用 navigator 組件跳轉(zhuǎn)
  示例代碼

// 頁面導(dǎo)航元素
<view class="btn-area">
  <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳轉(zhuǎn)到新頁面</navigator>

  <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在當(dāng)前頁打開</navigator>

  <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切換 Tab</navigator>

</view>

// 新頁面接收參數(shù)
Page({
  onLoad: function(options) {
    this.setData({
      title: options.title
    })
  }
})

• url 當(dāng)前小程序內(nèi)的跳轉(zhuǎn)鏈接
• open-type 跳轉(zhuǎn)方式，默認(rèn)navigate
  navigate 打開新頁面 redirect 重定向頁面 switchTab 打開Tab頁
  navigateBack 返回頁面 reLaunch 重啟動(dòng)頁面 exit 退出小程序
• hover-class 指定點(diǎn)擊時(shí)的樣式類

3. 小程序本地緩存

本地緩存操作接口

操作 異步方法 同步方法
設(shè)置緩存 wx.setStorage wx.setStorageSync
獲取緩存 wx.getStorage wx.getStorageSync
刪除緩存 wx.removeStorage wx.removeStorageSync
清空緩存 wx.clearStorage wx.clearStorageSync
獲取緩存信息 wx.getStorageInfo wx.getStorageInfoSync

• 以Sync結(jié)尾都是同步方法近忙。同步方法和異步方法的區(qū)別是：
  同步方法會(huì)堵塞當(dāng)前任務(wù)竭业，直到同步方法處理返回。
  異步方法不會(huì)堵塞當(dāng)前任務(wù)及舍。

• 使用同步還是異步未辆？
  同步寫入緩存時(shí)，如果緩存太大锯玛，會(huì)阻塞整個(gè)JS的運(yùn)行咐柜，有時(shí)候會(huì)出現(xiàn)報(bào)錯(cuò)的情況。一般情況下建議使用異步寫入緩存的方法攘残，少用同步方法拙友。
  但是如果有些場(chǎng)景，異步緩存不適合歼郭，必須同步去寫入緩存遗契。此時(shí)，并沒有萬全之策病曾，最好的辦法牍蜂，是加一個(gè)try catch漾根。

• 緩存數(shù)據(jù)類型
  小程序的數(shù)據(jù)緩存，最大支持10M捷兰，可以寫入多種類型數(shù)據(jù)立叛，number、boolean贡茅、array秘蛇、string、object等顶考，基本上赁还，小程序支持的JS數(shù)據(jù)類型，都支持寫入驹沿。

示例代碼

// 異步設(shè)置緩存
wx.setStorage({
  key:"key",
  data:"value"
})

// 同步設(shè)置緩存 
try {
  wx.setStorageSync('key', 'value')
} catch (e) { }

// 異步獲取緩存
wx.getStorage({
  key: 'key',
  success (res) {
    console.log(res.data)
  }
})

// 同步獲取緩存
try {
  var value = wx.getStorageSync('key')
  if (value) {
    // Do something with return value
  }
} catch (e) {
  // Do something when catch error
}

// 其它省略 ... ...

官網(wǎng)-數(shù)據(jù)緩存

第四章 小程序Demo實(shí)例

1. 小程序授權(quán)登錄實(shí)現(xiàn)

步驟

1. 調(diào)用 wx.login 獲取 code艘策。
2. 使用 wx.getSetting 獲取用戶的授權(quán)情況
   如果用戶已經(jīng)授權(quán)，直接調(diào)用 API wx.getUserInfo 獲取用戶最新的信息渊季；
   用戶未授權(quán)朋蔫，在界面中顯示一個(gè)按鈕提示用戶登入，當(dāng)用戶點(diǎn)擊并授權(quán)后就獲取到用戶的最新信息却汉。
3. 將獲取到的用戶數(shù)據(jù)連同wx.login返回的code一同傳給后端

index.wxml

<view wx:if="{{isHide}}">
    <view wx:if="{{canIUse}}" >
        <view class='header'>
            <image src='/images/wx_login.png'></image>
        </view>
 
        <view class='content'>
            <view>申請(qǐng)獲取以下權(quán)限</view>
            <text>獲得你的公開信息(昵稱驯妄，頭像等)</text>
        </view>
 
        <button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
            授權(quán)登錄
        </button>
    </view>
    <view wx:else>請(qǐng)升級(jí)微信版本</view>
</view>
 
<view wx:else>
    <view>我的首頁內(nèi)容</view>
</view>

index.js

Page({
    data: {
        //判斷小程序的API，回調(diào)合砂，參數(shù)青扔，組件等是否在當(dāng)前版本可用。
        canIUse: wx.canIUse('button.open-type.getUserInfo'),
        isHide: false
    },
 
    onLoad: function() {
        var that = this;
        // 1. wx.getSetting 獲取用戶的授權(quán)情況
        wx.getSetting({
            success: function(res) {
                if (res.authSetting['scope.userInfo']) {
                    wx.getUserInfo({
                        success: function(res) {
                            // 用戶已經(jīng)授權(quán)過,不需要顯示授權(quán)頁面,所以不需要改變 isHide 的值
                            // 根據(jù)自己的需求有其他操作再補(bǔ)充
                            // 我這里實(shí)現(xiàn)的是在用戶授權(quán)成功后翩伪，調(diào)用微信的 wx.login 接口微猖，從而獲取code
                            wx.login({
                                success: res => {
                                    // 獲取到用戶的 code 之后：res.code
                                    console.log("用戶的code:" + res.code);
                                    // 可以傳給后臺(tái)，再經(jīng)過解析獲取用戶的 openid
                                    // 或者可以直接使用微信的提供的接口直接獲取 openid 缘屹，方法如下：
                                    // wx.request({
                                    //     // 自行補(bǔ)上自己的 APPID 和 SECRET
                                    //     url: 'https://api.weixin.qq.com/sns/jscode2session?appid=自己的APPID&secret=自己的SECRET&js_code=' + res.code + '&grant_type=authorization_code',
                                    //     success: res => {
                                    //         // 獲取到用戶的 openid
                                    //         console.log("用戶的openid:" + res.data.openid);
                                    //     }
                                    // });
                                }
                            });
                        }
                    });
                } else {
                    // 用戶沒有授權(quán)
                    // 改變 isHide 的值凛剥，顯示授權(quán)頁面
                    that.setData({
                        isHide: true
                    });
                }
            }
        });
    },
 
    bindGetUserInfo: function(e) {
        if (e.detail.userInfo) {
            //用戶按了允許授權(quán)按鈕
            var that = this;
            // 獲取到用戶的信息了，打印到控制臺(tái)上看下
            console.log("用戶的信息如下：");
            console.log(e.detail.userInfo);
            //授權(quán)成功后,通過改變 isHide 的值囊颅，讓實(shí)現(xiàn)頁面顯示出來当悔，把授權(quán)頁面隱藏起來
            that.setData({
                isHide: false
            });
        } else {
            //用戶按了拒絕按鈕
            wx.showModal({
                title: '警告',
                content: '您點(diǎn)擊了拒絕授權(quán)，將無法進(jìn)入小程序踢代，請(qǐng)授權(quán)之后再進(jìn)入!!!',
                showCancel: false,
                confirmText: '返回授權(quán)',
                success: function(res) {
                    // 用戶沒有授權(quán)成功，不需要改變 isHide 的值
                    if (res.confirm) {
                        console.log('用戶點(diǎn)擊了“返回授權(quán)”');
                    }
                }
            });
        }
    }
})