一. 項目基本配置

1. 項目組成

2. 常見的配置文件解析

• project.config.json：項目配置文件, 比如項目名稱、appid等 ； 配置詳情
• sitemap.json：小程序搜索相關(guān)的；配置詳情
• app.json：全局配置
• page.json：頁面配置；
• app.js 可共享全局屬性值

3. app.json全局的五大配置

• pages: 頁面路徑列表
  • 用于指定小程序由哪些頁面組成，每一項都對應(yīng)一個頁面的 路徑（含文件名） 信息。
  • 小程序中所有的頁面都是必須在pages中進行注冊的。
• window: 全局的默認(rèn)窗口展示
  • 用戶指定窗口如何展示, 其中還包含了很多其他的屬性
• tabBar: 頂部tab欄的展示
• 詳情配置參考

{"pages": ["pages/home/home"],"window": {"backgroundTextStyle": "dark","navigationBarBackgroundColor": "#f6f866","navigationBarTitleText": "Weixin","navigationBarTextStyle": "black"},"tabBar": {"color": "#777","selectedColor": "#1cb9ce","list": [{"pagePath": "pages/home/home","text": "主頁面”},{"pagePath": "pages/day02/day02","text": "home"}]},"style": "v2","sitemapLocation": "sitemap.json"
}

4.單個頁面中的page配置

• 可直接新建page 并回車，自動添加到pages中 或者在pages中直接指定
  

• 同時每一個小程序頁面也可以使用 .json 文件來對本頁面的窗口表現(xiàn)進行配置。

  • 頁面中配置項在當(dāng)前頁面會覆蓋 app.json 的 window 中相同的配置項
  • 具體配置參考官網(wǎng)

{"usingComponents": {},"navigationBarTitleText": "主頁面","backgroundTextStyle": "dark",  背景文字顏色"enablePullDownRefresh": true,  允許下拉刷新"backgroundColor":"#f70", 		背景顏色"onReachBottomDistance": 100     距離底部多少觸發(fā)事件
}

  // 下拉刷新， 獲取最新的數(shù)據(jù)onPullDownRefresh() {console.log('監(jiān)聽下拉刷新');// 停止下拉刷新setTimeout(() => {// 異步請求wx.stopPullDownRefresh({success: (res) => {console.log('停止', res)},})}, 1000)},// 監(jiān)聽頁面滾動到底部onReachBottom() {console.log('滾動到底部多少距離時加載更多~~  100px');this.setData({listCounter: this.data.listCounter + 30})}

5. App函數(shù)

• App()實例可以全局共享的（單例對象），所以可以將一些共享數(shù)據(jù)放在這里；
• App函數(shù)的參數(shù)

作用一：

• 判斷群聊會話中打開、小程序列表中打開、微信掃一掃打開、另一個小程序打開
  • 在onLaunch和onShow生命周期回調(diào)函數(shù)中的options參數(shù)，判斷scene值
  • 文檔參考

作用二：定義全局App的數(shù)據(jù)

• app.js

 // app實例可以共享全局?jǐn)?shù)據(jù)globalData: {userInfo: null,token: 'Afjwt-12mandak-45'}

• home.js

 onLoad() {const {globalData} = getApp() // 全局的app實例console.log(globalData.token);// 拿到token發(fā)送網(wǎng)絡(luò)請求-頁面初始化this.setData({globalData})},

作用三：生命周期函數(shù)

• 在生命周期函數(shù)中，完成應(yīng)用程序啟動后的初始化操作
  • 完成登錄操作，獲取token
    

6.tabBar配置

• tabBar中只能配置最少 2 個、最多 5 個 tab 頁簽
• 當(dāng)渲染頂部 tabBar 時，不顯示 icon，只顯示文本
• 更多配置參考官網(wǎng)
  

{"pages": ["pages/hone/hone","pages/Profile/Profile","pages/experience/experience","pages/skill/skill","pages/index/index","pages/logs/logs"],"tabBar":{"color": "#777","selectedColor": "#1cb9ce","list":[{"pagePath": "pages/hone/hone","text":"簡歷信息","iconPath": "/pages/img/icon08.png","selectedIconPath": "/pages/img/icon08.png"},{"pagePath": "pages/skill/skill","text":"個人技能","iconPath": "/pages/img/icon04.png","selectedIconPath": "/pages/img/icon04.png"},{"pagePath": "pages/experience/experience","text":"項目經(jīng)歷","iconPath": "/pages/img/icon02.png","selectedIconPath": "/pages/img/icon02.png"},{"pagePath": "pages/Profile/Profile","text":"自我評價","iconPath": "/pages/img/icon06.png","selectedIconPath": "/pages/img/icon06.png"}]},"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle": "black"},"style": "v2","sitemapLocation": "sitemap.json"
}

二. 基本語法，事件，單位

1. 語法

參考官網(wǎng)基本語法解釋

• 文本渲染

{{ msg}}可以執(zhí)行簡單的js表達式
{{2+3}}
{{msg.length}}

• 條件渲染

wx:if=""
wx:elif=""
wx:else
hidden   // true 隱藏

• 列表渲染
• wx:key 針對不同的數(shù)組類型有不同的寫法
  • 普通數(shù)組 wx:key="*this"
  • 數(shù)組對象 wx:key="字符串" 表示對象唯一屬性

// 默認(rèn)item就是數(shù)據(jù) ，index是下標(biāo)
wx:for="{{list}}"
wx:key="index"{{item}}{{index}}

• 自定義列表渲染

定義item與index的名稱
wx:for="{{list}}}"
wx:for-item="myitem"
wx:for-index="myidx"
{{myidx}}
{{myitem}}

2. 事件

格式：<元素 bind事件名= “回調(diào)”>

• 示例：<view bindtap="fn1"></view>
• <switch bindchange="fn2"></switch>
• 小程序中綁定事件，通過bind和capture關(guān)鍵字來實現(xiàn)。如 bindtap 和 capture-bind:tap，
• bind 是事件冒泡外傳，capture 是事件捕獲里傳。capture-bind只能用冒號形式。
• 如果想阻止事件冒泡或捕獲可通過catch來綁定事件。如catchtap，capture-catch:tap。

bindInput     表單輸入時
bindconfirm    表單輸入確認(rèn)
bindtap      點擊時候

• 事件傳參

  • 自定義參數(shù) data-*

注意點: <view bindtap="handleTap(100)"></view> 小程序會以為 事件函數(shù)名稱就是 “handleTap(100)” ，那么它就會去找“handleTap(100)” 這個函數(shù) 而不是 “handleTap”

• mask傳參
  

• 表單綁定

<input value="{{s1}}" bindinput="inputHd">
// js.js
inputHd(e){this.setData({s1:e.detail.value})  // 表單的值獲取：e.detail.value
}

• 事件對象屬性

屬性	類型	說明
type	String	事件類型
timeStamp	Integer	頁面打開到觸發(fā)事件所經(jīng)過的毫秒數(shù)
target	Object	觸發(fā)事件的組件的一些屬性值集合
currentTarget	Object	當(dāng)前組件的一些屬性值集合
detail	Object	額外的信息
touches	Array	觸摸事件，當(dāng)前停留在屏幕中的觸摸點信息的數(shù)組
changedTouches	Array	觸摸事件，當(dāng)前變化的觸摸點信息的數(shù)組

• target和currentTarget事件對象屬性

屬性	類型	說明
id	String	當(dāng)前組件的id
dataset	Object	當(dāng)前組件上由data-開頭的自定義屬性組成的集合

• 區(qū)別

taget點擊inter不能拿到dataset數(shù)據(jù)currentTarget可以拿到

3. 單位

• rpx（responsive pixel）: 可以根據(jù)屏幕寬度進行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
• 具體參考官網(wǎng)

三. 數(shù)據(jù)響應(yīng)式修改

1. WXML 模板和 WXSS 樣式工作在渲染層，JS 腳本工作在邏輯層
2. 小程序的渲染層和邏輯層分別由2個線程管理，兩個線程的通信會經(jīng)由微信客戶端做中轉(zhuǎn)

• 數(shù)據(jù)修改必須調(diào)用 this.setData 同react一樣
• setData優(yōu)化

四 . 內(nèi)置組件

• 內(nèi)置組件參考

1. button

• button組件中的 open-type屬性
  • open-type用戶獲取一些特殊性的權(quán)限，可以綁定一些特殊的事件
• 老舊版本獲取用戶信息

<button type="primary" bindgetuserinfo="getUserInfo" size="mini" open-type="getUserInfo">getUserInfo</button>

  getUserInfo(e) {// 不推薦使用getUserInfo獲取用戶信息，預(yù)計自2021年4月13日起，getUserInfo將不再彈出彈窗，并直接返回匿名的用戶個人信息this.setData({userInfo: e.detail.userInfo,hasUserInfo: true})},

• 新版本獲取用戶頭像等信息

   <button bindtap="getUserProfile"> 獲取頭像昵稱 </button>

  getUserProfile(e) {// 推薦使用wx.getUserProfile獲取用戶信息，開發(fā)者每次通過該接口獲取用戶個人信息均需用戶確認(rèn)// 開發(fā)者妥善保管用戶快速填寫的頭像昵稱，避免重復(fù)彈窗wx.getUserProfile({desc: '用于完善會員資料', // 聲明獲取用戶個人信息后的用途，后續(xù)會展示在彈窗中，請謹(jǐn)慎填寫success: (res) => {this.setData({userInfo: res.userInfo,hasUserInfo: true})}})},

• 具體解析參考官網(wǎng)

2. image

• image組件默認(rèn)寬度320px、高度240px
• image支持懶加載
• mode 配置如下

模式	值	說明
縮放	scaleToFill	不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素
縮放	aspectFit	保持縱橫比縮放圖片，直到圖片某一邊碰到邊界。
縮放	aspectFill	保持縱橫比縮放圖片，直到圖片完全鋪滿邊界。
縮放	widthFix	寬度不變，高度自動變化，保持原圖寬高比不變

• wx.chooseMedia獲取本地圖像展示

<button bindtap="hyImageUpload">選擇圖片上傳</button>
<!-- 選擇本地圖片 -->
<image src="{{imageUrl}}"></image>

 hyImageUpload(){wx.chooseMedia({camera: 'image',}).then(res=>{this.setData({imageUrl:res.tempFiles[0].tempFilePath})})}

3. input

• 支持雙向綁定

<input type="text" model:value=" {{message}}"/>

4. 組件共有屬性

• 公共屬性 ：參考官網(wǎng)

  • 屬性名	類型	描述	注解
    id	String	組件的唯一標(biāo)示	保持整個頁面唯一
    class	String	組件的樣式類	在對應(yīng)的 WXSS 中定義的樣式類
    style	String	組件的內(nèi)聯(lián)樣式	可以動態(tài)設(shè)置的內(nèi)聯(lián)樣式
    hidden	Boolean	組件是否顯示	所有組件默認(rèn)顯示
    data-*	Any	自定義屬性	組件上觸發(fā)的事件時，會發(fā)送給事件處理函數(shù)
    bind* / catch*	EventHandler	組件的事件	詳見事件

五 . WXS使用

• WXS（WeiXin Script）是小程序的一套腳本語言，結(jié)合 WXML，可以構(gòu)建出頁面的結(jié)構(gòu)。
• 在WXML中是不能直接調(diào)用Page/Component中定義的函數(shù)的.
• 但是某些情況, 可以使用函數(shù)來處理WXML中的數(shù)據(jù)(類似于Vue中的過濾器)，這個時候就使用WXS了
• 必須利用es5語法

// 
<wxs module="format">function joinTgether(num) {return '￥' + num}// 必須模塊化導(dǎo)出 module.exports={joinTgether:joinTgether}
</wxs><block wx:for="{{wxs}}" wx:key="*this"><button size="mini" type="warn">{{item}}-{{format.joinTgether(item)}}</button>
</block>

• 模塊抽離utils 必須放在.wxs結(jié)尾的文件

<button>模塊抽離wxs</button>
<wxs module="format" src="/utils_wxs/format.wxs"></wxs>
<block wx:for="{{wxs}}" wx:key="*this"><button size="mini" type="warn">{{item}}-{{format.joinTgether(item)}}</button>
</block>

• 每個模塊都有自己獨立的作用域。即在一個模塊里面定義的變量與函數(shù)，默認(rèn)為私有的，對其他模塊不可見；
• 一個模塊要想對外暴露其內(nèi)部的私有變量與函數(shù)，只能通過 module.exports 實現(xiàn)；
• 其他使用參考官網(wǎng)

六，組件

6.1 全局與局部組件注冊使用

• 將頁面拆分成一個個小的、可復(fù)用的組件，這樣更加方便組織和管理，并且擴展性也更強
• 在 .json 文件中進行自定義組件聲明（將component 字段設(shè)為 true 可這一組文件設(shè)為自定義組件）：

• 在需要使用的xx.json 文件中導(dǎo)入

{"usingComponents": {"sel-info": "/components/selection-info/sel-info"}
}

• 自定義組件和頁面所在項目根目錄名 不能以“wx-”為前綴，否則會報錯。
• 全局組件在app.json的usingComponents聲明某個組件，那么所有頁面和組件可以直接使用該組件

6.2 組件樣式

• 組件內(nèi)的樣式 對 外部樣式 的影響

  • 結(jié)論一：組件內(nèi)的class樣式，只對組件wxml內(nèi)的節(jié)點生效, 對于引用組件的Page頁面不生效。
  • 結(jié)論二：組件內(nèi)不能使用id選擇器、屬性選擇器、標(biāo)簽選擇器
    

• 外部樣式 對 組件內(nèi)樣式 的影響

  • 結(jié)論一：外部使用class的樣式，只對外部wxml的class生效，對組件內(nèi)是不生效
  • 結(jié)論二：外部使用了id選擇器、屬性選擇器不會對組件內(nèi)產(chǎn)生影響
  • 結(jié)論三：外部使用了標(biāo)簽選擇器，會對組件內(nèi)產(chǎn)生影響

• 如何讓class可以相互影響

  • 在Component對象中，可以傳入一個options屬性，其中options屬性中有一個styleIsolation（隔離）屬性。
  • styleIsolation有三個取值：
    • isolated 表示啟用樣式隔離，在自定義組件內(nèi)外，使用 class 指定的樣式將不會相互影響（默認(rèn)取值）；
    • apply-shared 表示頁面 wxss 樣式將影響到自定義組件，但自定義組件 wxss 中指定的樣式不會影響頁面；
    • shared 表示頁面 wxss 樣式將影響到自定義組件，自定義組件 wxss 中指定的樣式也會影響頁面和其他設(shè)置 了

  options: {// styleIsolation:"isolated"  // 默認(rèn)值styleIsolation: "apply-shared"},

6.3 組件之間的通信

• 文檔參考
  
  組件傳遞數(shù)據(jù) - properties

1. 定義子組件

<view style="width: 100%;height:80px;background-color: blueviolet;"><button>{{title}}</button><view style="background-color: brown;margin-top: 10px; color: cornsilk;"> {{content}}</view>
</view>

2. 子組件做數(shù)據(jù)接收并默認(rèn)值

 properties: {title: {type: String,value: '默認(rèn)標(biāo)題'},content:{type:String,value:'默認(rèn)內(nèi)容'}},

3. 父組件使用子組件并傳遞值

<props-data />
<view class="styl"><props-data title="通信" content='組件通信-傳遞參數(shù)-動態(tài)數(shù)據(jù)' />
</view>
<props-data title="z組件傳參" content='組件通信-傳遞參數(shù)-動態(tài)數(shù)據(jù)' />

組件傳遞樣式 -externalClasses

• 在Component對象中，定義externalClasses屬性
• 在組件內(nèi)的wxml中使用externalClasses屬性中的class
• 在頁面中傳入對應(yīng)的class，并且給這個class設(shè)置樣式
  
  自定義事件
  
  頁面直接調(diào)用組件方法 相當(dāng)于vue中ref
  • 可在父組件里調(diào)用 this.selectComponent ，獲取子組件的實例對象。
  • 調(diào)用時需要傳入一個匹配選擇器 selector，
    

6.4 單個插槽的使用

• 組件的插槽也是為了讓我們封裝的組件更加具有擴展性

• 注意slot 不支持默認(rèn)值 可以利用兄弟選中器解決

1. 子組件預(yù)留插槽

<view class="myslot"><view class="header">header</view><!-- 小程序插槽不支持默認(rèn)值 --><view class="content"><slot></slot></view><view class="default">兄弟選擇器解決默認(rèn)值</view><view class="footer">footer</view>
</view>

2. 父組件傳遞結(jié)構(gòu)

<my-slot><button>按鈕</button>
</my-slot>
<my-slot><button size="mini" type="primary">default樣式</button>
</my-slot>
<my-slot>
</my-slot>

3. 兄弟選擇器解決默認(rèn)值問題

.default{display: none;
}
.content:empty + .default{display: block;
}

6.5 多個插槽的使用

1. 子組件預(yù)留插槽

<view class="slot"><view class="t"><text >上插槽</text> : <slot name="t"></slot></view><view class="c"><text>中間插槽</text> : <slot name="c"></slot></view><view class="b"><text>下插槽</text> : <slot name="b"></slot></view>
</view>

2. 允許可以定義多個插槽

Component({// 允許定義多個插槽options: {multipleSlots: true},
})

3. 父組件傳遞結(jié)構(gòu)

<more-slot><text slot="t">上插入</text><text slot="c">中間插入</text><text slot="b">下插入</text>
</more-slot>

6.6 混入

• behaviors 是用于組件間代碼共享的特性，類似于Vue中的 “mixins”。
  • 每個 behavior 可以包含一組屬性、數(shù)據(jù)、生命周期函數(shù)和方法；
  • 組件引用它時，它的屬性、數(shù)據(jù)和方法會被合并到組件中，生命周期函數(shù)也會在對應(yīng)時機被調(diào)用；
  • 每個組件可以引用多個 behavior ，behavior 也可以引用其它 behavior ；
  • 文檔參考

1. 編寫混入

export const counterMinxin = Behavior({data: {counter: 100},methods: {add() {//  加一修改 ，不應(yīng)該使用++，這會導(dǎo)致counter在修改this..data.counter也在修改this.setData({counter: this.data.counter + 1})}}
})

2. 使用

import { counterMinxin } from "../../behaviors/counter"
Component({behaviors: [counterMinxin],
})

6.7 組件生命周期

• 組件的的生命周期在 lifetimes 字段內(nèi)進行聲明
• 組件生命周期文檔參考

Component({behaviors: [counterMinxin],lifetimes:{created(){console.log('組件被創(chuàng)建');},attached(){console.log('組件添加到dom樹中');},detached(){console.log('組件被刪除');}}
})

6.8 數(shù)據(jù)偵聽

文檔參考鏈接

七 .生命周期

7.1.應(yīng)用生命周期

應(yīng)用生命周期鉤子函數(shù)

屬性	說明
onLaunch	生命周期回調(diào)——監(jiān)聽小程序初始化。
onShow	生命周期回調(diào)——監(jiān)聽小程序啟動或切前臺。
onHide	生命周期回調(diào)——監(jiān)聽小程序切后臺。
onError	錯誤監(jiān)聽函數(shù)。

• 參數(shù)對象
  • 一般放在生命周期鉤子函數(shù)的第一個參數(shù)。onLaunch鉤子函數(shù)的參數(shù)對象為
    

7.2 頁面生命周期

• 文檔參考

屬性	說明
onLoad	生命周期回調(diào)—監(jiān)聽頁面加載
onShow	生命周期回調(diào)—監(jiān)聽頁面顯示
onReady	生命周期回調(diào)—監(jiān)聽頁面初次渲染完成
onHide	生命周期回調(diào)—監(jiān)聽頁面隱藏
onUnload	生命周期回調(diào)—監(jiān)聽頁面卸載
onPullDownRefresh	監(jiān)聽用戶下拉動作
onReachBottom	頁面上拉觸底事件的處理函數(shù)
onShareAppMessage	用戶點擊右上角轉(zhuǎn)發(fā)
onShareTimeline	用戶點擊右上角轉(zhuǎn)發(fā)到朋友圈
onAddToFavorites	用戶點擊右上角收藏
onPageScroll	頁面滾動觸發(fā)事件的處理函數(shù)
onResize	頁面尺寸改變時觸發(fā)，詳見 響應(yīng)顯示區(qū)域變化

 // 1. 頁面路徑 pages/index/index?id=10086&name='admin'// 2. onLoad 獲取參數(shù)onLoad(query){}

7.3.組件生命周期

• 文檔參考

屬性	說明
created	組件生命周期函數(shù) - 在組件實例剛剛被創(chuàng)建時執(zhí)行，注意此時不能調(diào)用 setData )
attached	組件生命周期函數(shù) - 在組件實例進入頁面節(jié)點樹時執(zhí)行)
ready	組件生命周期函數(shù) - 在組件布局完成后執(zhí)行)
moved	組件生命周期函數(shù) - 在組件實例被移動到節(jié)點樹另一個位置時執(zhí)行)
detached	組件生命周期函數(shù) - 在組件實例被從頁面節(jié)點樹移除時執(zhí)行)

八 . API解析

8.1網(wǎng)絡(luò)請求

• 網(wǎng)絡(luò)請求: wx.request(Object object)
• 官網(wǎng)參考

  wx.request({url: "api",data: {page: 1},success: res => {console.log(res);},fail: err => {}})

• 封裝

//0. 封裝成函數(shù)
export function hyRequest(options) {return new Promise((resolve, reject) => {wx.request({...options,success: res => {resolve(res.data)},fail: reject})})
}//0. 類的方法封裝
class hyService {request(options) {return new Promise((resolve, reject) => {wx.request({...options,success: res => {resolve(res.data)},fail: reject})})}get(options) {return this.request({ ...options, method: 'GET'})}post(options) {return this.request({...options,method: 'POST'})}
}
export const serviceResponse = new hyService()
// 1. 導(dǎo)入
import {hyRequest} from '../../service/request'
// 2. 使用封裝調(diào)用apihyRequest({url:"http://123.207.32.32:1888/api/city/all"}).then(res=>{console.log(res);})

8.2 展示彈窗效果

• 具體配置參考

8.3 獲取設(shè)備|位置信息

• 獲取當(dāng)前設(shè)備的信息，用于手機信息或者進行一些適配工作wx.getSystemInfo(Object object)
• 官網(wǎng)參考

• 獲取用戶的位置信息，以方便給用戶提供相關(guān)的服務(wù)wx.getLocation(Object object)

reqInfo() {// 獲取設(shè)備信息// 我們需要經(jīng)常獲取當(dāng)前設(shè)備的信息，用于手機信息或者進行一些適配工作wx.getSystemInfo({success: arr => {console.log(arr);}}),wx.getLocation({success:err=>{console.log(err);}})}

• 注意獲取位置信息需要相關(guān)權(quán)限
• 配置參考

 "permission": {"scope.userLocation": {"desc": "位置信息將用于小程序位置接口的效果展示"}}

8.4 Storage存儲

• 同步存取數(shù)據(jù)的方法：
  • wx.setStorageSync(string key, any data)
  • wx.getStorageSync(string key)
  • wx.removeStorageSync(string key)
  • wx.clearStorageSync()
• 異步存儲數(shù)據(jù)的方法：
  • wx.setStorage(Object object)
  • wx.getStorage(Object object)
  • wx.removeStorage(Object object)
  • wx.clearStorage(Object object)
• 具體使用參考

8.5 頁面跳轉(zhuǎn)

• 通過navigator組件 和 通過wx的API跳轉(zhuǎn)
• 路由跳轉(zhuǎn)參考配置
  
  頁面跳轉(zhuǎn) - navigateTo
注意 跳轉(zhuǎn)的頁面是tarBar內(nèi)的頁面，需要使用wx.switchTab({})

 navigateTo() {// 跳轉(zhuǎn)的頁面是tarBar內(nèi)的頁面，需要使用wx.switchTab({}) wx.navigateTo({// url: '/navPage/navigateTo/index',// 傳參url: '/navPage/navigateTo/index?name=admin',})}

• 接受頁面跳轉(zhuǎn)的參數(shù)

Page({// options接受路徑參數(shù)onLoad(options) {console.log(options);},
})

8.6 回退頁面?zhèn)鲄?/h3>

• 主頁面

Page({navigateTo() {// 方式二wx.navigateTo({url: '/navPage/navigateTo/index?name=admin',events: {backEvent(data) {console.log('接受跳轉(zhuǎn)的參數(shù)', data);}}})}
})

• 跳轉(zhuǎn)的頁面

Page({up() {wx.navigateBack()// //  傳遞數(shù)據(jù)給上一級// const pages = getCurrentPages()// //讀取最后一個頁面,的實例// const prePage = pages[pages.length - 2]// // 設(shè)置上一個頁面的數(shù)據(jù)// prePage.setData({//   message: 'admin'// })// console.log(pages);const eventChannel = this.getOpenerEventChannel()eventChannel.emit('backEvent', {name: 'admin',pad: 'password'})},// 回退過多可以直接在onLoad里面設(shè)置onUnload() {const pages = getCurrentPages()const prePage = pages[pages.length - 2]prePage.setData({message: 'admin',username: 'password'})},
})

九 .登錄流程

• 配置參考
  
  openid: 用戶唯一標(biāo)識
  session_key: 是對用戶數(shù)據(jù)進行 加密簽名 的密鑰。為了應(yīng)用自身的數(shù)據(jù)安全，開發(fā)者服務(wù)器不應(yīng)該把會話密鑰下發(fā)到小程序，也不應(yīng)該對外提供這個密鑰

// app.js
App({onLaunch() {// 展示本地存儲能力const logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)// 登錄wx.login({success: res => {// 發(fā)送 res.code 到后臺換取 openId, sessionKey, unionIdconst code = res.codewx.request({url: 'url',data: {code},method: 'POST',success: res => {const token = res.data.tokenwx.setStorageSync('token', token)}})}})},
})

• 參考文章
  • 微信小程序開發(fā)（超詳細(xì)保姆式教程）
  • coderwhy