一. 項(xiàng)目基本配置

1. 項(xiàng)目組成

2. 常見(jiàn)的配置文件解析

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

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

• pages: 頁(yè)面路徑列表
  • 用于指定小程序由哪些頁(yè)面組成，每一項(xiàng)都對(duì)應(yīng)一個(gè)頁(yè)面的 路徑（含文件名） 信息。
  • 小程序中所有的頁(yè)面都是必須在pages中進(jìn)行注冊(cè)的。
• 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": "主頁(yè)面”},{"pagePath": "pages/day02/day02","text": "home"}]},"style": "v2","sitemapLocation": "sitemap.json"
}

4.單個(gè)頁(yè)面中的page配置

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

• 同時(shí)每一個(gè)小程序頁(yè)面也可以使用 .json 文件來(lái)對(duì)本頁(yè)面的窗口表現(xiàn)進(jìn)行配置。

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

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

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

5. App函數(shù)

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

作用一：

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

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

• app.js

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

• home.js

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

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

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

6.tabBar配置

• tabBar中只能配置最少 2 個(gè)、最多 5 個(gè) tab 頁(yè)簽
• 當(dāng)渲染頂部 tabBar 時(shí)，不顯示 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":"簡(jiǎn)歷信息","iconPath": "/pages/img/icon08.png","selectedIconPath": "/pages/img/icon08.png"},{"pagePath": "pages/skill/skill","text":"個(gè)人技能","iconPath": "/pages/img/icon04.png","selectedIconPath": "/pages/img/icon04.png"},{"pagePath": "pages/experience/experience","text":"項(xiàng)目經(jīng)歷","iconPath": "/pages/img/icon02.png","selectedIconPath": "/pages/img/icon02.png"},{"pagePath": "pages/Profile/Profile","text":"自我評(píng)價(jià)","iconPath": "/pages/img/icon06.png","selectedIconPath": "/pages/img/icon06.png"}]},"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle": "black"},"style": "v2","sitemapLocation": "sitemap.json"
}

二. 基本語(yǔ)法，事件，單位

1. 語(yǔ)法

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

• 文本渲染

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

• 條件渲染

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

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

// 默認(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>
• 小程序中綁定事件，通過(guò)bind和capture關(guān)鍵字來(lái)實(shí)現(xiàn)。如 bindtap 和 capture-bind:tap，
• bind 是事件冒泡外傳，capture 是事件捕獲里傳。capture-bind只能用冒號(hào)形式。
• 如果想阻止事件冒泡或捕獲可通過(guò)catch來(lái)綁定事件。如catchtap，capture-catch:tap。

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

• 事件傳參

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

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

• mask傳參
  

• 表單綁定

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

• 事件對(duì)象屬性

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

• target和currentTarget事件對(duì)象屬性

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

• 區(qū)別

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

3. 單位

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

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

1. WXML 模板和 WXSS 樣式工作在渲染層，JS 腳本工作在邏輯層
2. 小程序的渲染層和邏輯層分別由2個(gè)線程管理，兩個(gè)線程的通信會(huì)經(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ù)計(jì)自2021年4月13日起，getUserInfo將不再?gòu)棾鰪棿?#xff0c;并直接返回匿名的用戶個(gè)人信息this.setData({userInfo: e.detail.userInfo,hasUserInfo: true})},

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

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

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

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

2. image

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

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

• 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)示	保持整個(gè)頁(yè)面唯一
    class	String	組件的樣式類	在對(duì)應(yīng)的 WXSS 中定義的樣式類
    style	String	組件的內(nèi)聯(lián)樣式	可以動(dòng)態(tài)設(shè)置的內(nèi)聯(lián)樣式
    hidden	Boolean	組件是否顯示	所有組件默認(rèn)顯示
    data-*	Any	自定義屬性	組件上觸發(fā)的事件時(shí)，會(huì)發(fā)送給事件處理函數(shù)
    bind* / catch*	EventHandler	組件的事件	詳見(jiàn)事件

五 . WXS使用

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

// 
<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>

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

六，組件

6.1 全局與局部組件注冊(cè)使用

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

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

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

• 自定義組件和頁(yè)面所在項(xiàng)目根目錄名 不能以“wx-”為前綴，否則會(huì)報(bào)錯(cuò)。
• 全局組件在app.json的usingComponents聲明某個(gè)組件，那么所有頁(yè)面和組件可以直接使用該組件

6.2 組件樣式

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

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

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

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

• 如何讓class可以相互影響

  • 在Component對(duì)象中，可以傳入一個(gè)options屬性，其中options屬性中有一個(gè)styleIsolation（隔離）屬性。
  • styleIsolation有三個(gè)取值：
    • isolated 表示啟用樣式隔離，在自定義組件內(nèi)外，使用 class 指定的樣式將不會(huì)相互影響（默認(rèn)取值）；
    • apply-shared 表示頁(yè)面 wxss 樣式將影響到自定義組件，但自定義組件 wxss 中指定的樣式不會(huì)影響頁(yè)面；
    • shared 表示頁(yè)面 wxss 樣式將影響到自定義組件，自定義組件 wxss 中指定的樣式也會(huì)影響頁(yè)面和其他設(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ù)-動(dòng)態(tài)數(shù)據(jù)' />
</view>
<props-data title="z組件傳參" content='組件通信-傳遞參數(shù)-動(dòng)態(tài)數(shù)據(jù)' />

組件傳遞樣式 -externalClasses

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

6.4 單個(gè)插槽的使用

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

• 注意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)值問(wèn)題

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

6.5 多個(gè)插槽的使用

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. 允許可以定義多個(gè)插槽

Component({// 允許定義多個(gè)插槽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”。
  • 每個(gè) behavior 可以包含一組屬性、數(shù)據(jù)、生命周期函數(shù)和方法；
  • 組件引用它時(shí)，它的屬性、數(shù)據(jù)和方法會(huì)被合并到組件中，生命周期函數(shù)也會(huì)在對(duì)應(yīng)時(shí)機(jī)被調(diào)用；
  • 每個(gè)組件可以引用多個(gè) behavior ，behavior 也可以引用其它 behavior ；
  • 文檔參考

1. 編寫(xiě)混入

export const counterMinxin = Behavior({data: {counter: 100},methods: {add() {//  加一修改 ，不應(yīng)該使用++，這會(huì)導(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)進(jìn)行聲明
• 組件生命周期文檔參考

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

6.8 數(shù)據(jù)偵聽(tīng)

文檔參考鏈接

七 .生命周期

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

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

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

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

7.2 頁(yè)面生命周期

• 文檔參考

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

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

7.3.組件生命周期

• 文檔參考

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

八 . API解析

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

• 網(wǎng)絡(luò)請(qǐng)求: 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è)備的信息，用于手機(jī)信息或者進(jìn)行一些適配工作wx.getSystemInfo(Object object)
• 官網(wǎng)參考

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

reqInfo() {// 獲取設(shè)備信息// 我們需要經(jīng)常獲取當(dāng)前設(shè)備的信息，用于手機(jī)信息或者進(jìn)行一些適配工作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存儲(chǔ)

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

8.5 頁(yè)面跳轉(zhuǎn)

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

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

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

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

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

• 主頁(yè)面

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

• 跳轉(zhuǎn)的頁(yè)面

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

九 .登錄流程

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

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

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