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

微信提供了專(zhuān)屬的API接口,用于網(wǎng)絡(luò)請(qǐng)求: wx.request(Object object)

Page({ // 一般在onLoad中發(fā)送一些網(wǎng)絡(luò)數(shù)據(jù) onLoad() { // 發(fā)送網(wǎng)絡(luò)請(qǐng)求 可以使用微信內(nèi)置api -> wx.request // 參數(shù)為一個(gè)配置對(duì)象，配置對(duì)象中的url是必傳的 // url必須是在微信后臺(tái)白名單中的地址，或者在測(cè)試的時(shí)候關(guān)閉地址校驗(yàn) wx.request({ url: 'http://api.example.com/api/home/houselist', // data用于設(shè)置參數(shù)  // 無(wú)論是post請(qǐng)求的參數(shù)還是get請(qǐng)求的參數(shù)都設(shè)置在data配置項(xiàng)中 data: { page: 1 }, // 成功時(shí)候的回調(diào) // 寫(xiě)成箭頭函數(shù)是因?yàn)榉矫鎯?nèi)部在調(diào)用this.setData的時(shí)候可以使用正確的this success: res => { console.log(res.data.data)
      }, fail: err => console.log(err)
    })
  }
}) 復(fù)制代碼

簡(jiǎn)單封裝

import { BASE_URL } from './env' class API {
  #BASE_URL = '' constructor(BASE_URL) { this.#BASE_URL = BASE_URL } // 傳入options是為了方便進(jìn)行更多的配置，例如 header request(url, data = {},  options = { method: 'get' }) { return new Promise((resolve, reject) => {
      wx.request({ url: `${this.#BASE_URL}${url}`,
        data,
        ...options, success: res => { resolve(res.data.data)
        }, fail: reject
      })
    })
  } get(url, query, options = {}) { return this.request(url, query, {
      ...options, method: 'get' })
  } post(url, data, options = {}) { return this.request(url, data, {
      ...options, method: 'post' })
  }
} export default new API(BASE_URL) 復(fù)制代碼

使用

// 小程序在引入外部模塊的時(shí)候，不支持以/開(kāi)頭的絕對(duì)路徑 // 也不支持自動(dòng)查找index文件，只支持省略后綴名 import api from '../../utils/api' Page({ data: { homeList: [], page: 1 }, onLoad() { this.fetchList()
  }, onReachBottom() { this.data.page += 1 this.fetchList()
  }, async fetchList() { try { const res = await api.get('/home/houselist', { page: this.data.page ?? 1 }) this.setData({ homeList: [...this.data.homeList, ...res]
      })
    } catch(e) { console.error(e.message)
    }
  }
}) 復(fù)制代碼

域名配置

每個(gè)微信小程序需要事先設(shè)置通訊域名，小程序只可以跟指定的域名進(jìn)行網(wǎng)絡(luò)通信

服務(wù)器域名請(qǐng)?jiān)?「小程序后臺(tái) - 開(kāi)發(fā) - 開(kāi)發(fā)設(shè)置 - 服務(wù)器域名」 中進(jìn)行配置，配置時(shí)需要注意

1. 域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 協(xié)議
2. 域名不能使用 IP 地址(小程序的局域網(wǎng) IP 除外)或 localhost， 且域名必須經(jīng)過(guò) ICP 備案
3. 可以配置端口， 但請(qǐng)求的時(shí)候必須攜帶端口號(hào)，如果沒(méi)有配置端口，則在請(qǐng)求的時(shí)候，不可以配置端口號(hào)，即使是默認(rèn)的也不可以

彈窗

小程序中展示彈窗有四種方式: showToast、showModal、showLoading、showActionSheet

showToast

wx.showToast({ title: 'toast', icon: "success", duration: 3000 }) 復(fù)制代碼

showLoading的功能和showToasd是類(lèi)似的，其相當(dāng)于設(shè)置了icon的值為loading的toast

只不過(guò)showModal的關(guān)閉是通過(guò)duration屬性，而showLoading需主動(dòng)調(diào)用 wx.hideLoading 才能關(guān)閉提示框

showModal

wx.showModal({ title: '我是title', content: '我是內(nèi)容', success: res => { if (res.cancel) { console.log('用戶(hù)退出了彈框')
    } if (res.confirm) { console.log('用戶(hù)點(diǎn)擊了確定')
    }
  }, fail: err => console.log(err)
}) 復(fù)制代碼

showActionSheet

wx.showActionSheet({ itemList: ['從相冊(cè)中選取', '拍照'], // 具體點(diǎn)擊了那一項(xiàng)  可以通過(guò)res.tapindex來(lái)獲取 success: res => console.log(res), fail: err => console.log(err)
}) 復(fù)制代碼

分享

分享是小程序擴(kuò)散的一種重要方式，小程序中有兩種分享方式:

1. 點(diǎn)擊右上角的菜單按鈕，之后點(diǎn)擊轉(zhuǎn)發(fā)
2. 點(diǎn)擊某一個(gè)按鈕，直接轉(zhuǎn)發(fā)

監(jiān)聽(tīng)用戶(hù)點(diǎn)擊頁(yè)面內(nèi)轉(zhuǎn)發(fā)按鈕(button 組件 open-type="share")或右上角菜單“轉(zhuǎn)發(fā)”按鈕的時(shí)

可以通過(guò) onShareAppMessage方法自定義轉(zhuǎn)發(fā)內(nèi)容，此事件處理函數(shù)需要 return 一個(gè) Object，用于自定義轉(zhuǎn)發(fā)內(nèi)容

Page({ onShareAppMessage() { return { title: '設(shè)置分享的標(biāo)題，默認(rèn)是小程序名', path: '/pages/profile/profile', imgUrl: 'https://i1.hdslb.com/bfs/face/7c409a397356632362171fd6a25a8ed44f064e40.jpg' }
  }
}) 復(fù)制代碼

獲取信息

獲取設(shè)備信息

我們可以通過(guò)getSystemInfo方法獲取用戶(hù)當(dāng)前設(shè)備信息，用于收集設(shè)備信息或者進(jìn)行一些適配工作

wx.getSystemInfo({ // res.screenHeight --- 手機(jī)的屏幕高度 // res.windowHeight -- 小程序可視窗口的高度 // 小程序的可視窗口 = 屏幕高度 - 導(dǎo)航欄高度 - 狀態(tài)欄高度 success: res => console.log(res),
}) 復(fù)制代碼

獲取地址位置信息

可以通過(guò)getLocation方法，獲取用戶(hù)的位置信息，以方便給用戶(hù)提供相關(guān)的服務(wù)

對(duì)于用戶(hù)的關(guān)鍵信息，需要獲取用戶(hù)授權(quán)后才能獲得

App.json

{ "permission": { "scope.userLocation": { // 向用戶(hù)申請(qǐng)授權(quán)時(shí)候的描述信息 // 授權(quán)是授權(quán)給appid的，一個(gè)小程序?qū)?yīng)著一個(gè)appid // 也就意味著，用戶(hù)只要授權(quán)一次即可，下次再進(jìn)小程序就都不需要再次授權(quán) "desc": "獲取用戶(hù)地址位置" } } } 復(fù)制代碼

page.js

wx.getLocation({ // 只有用戶(hù)授權(quán)后，小程序才可以獲取用戶(hù)地理位置 success: res => console.log(res),
}) 復(fù)制代碼

存儲(chǔ)

在開(kāi)發(fā)中，某些常見(jiàn)我們需要將一部分?jǐn)?shù)據(jù)存儲(chǔ)在本地:比如token、用戶(hù)信息等， 小程序提供了專(zhuān)門(mén)的Storage用于進(jìn)行本地存儲(chǔ)

同步存取數(shù)據(jù)的方法:

1. wx.setStorageSync(string key, any data)

2. wx.getStorageSync(string key)

3. wx.removeStorageSync(string key)

4. wx.clearStorageSync()

// 小程序中的storage 的key值必須是字符串 // 但是小程序中的value值是any類(lèi)型，也就是任意類(lèi)型都可以被存儲(chǔ) // 添加  wx.setStorageSync('name', 'Klaus') // 獲取 console.log(wx.getStorageSync('name')) // 移除具體某一項(xiàng) wx.removeStorageSync('name') // 清空storage wx.clearStorageSync() 復(fù)制代碼

異步存儲(chǔ)數(shù)據(jù)的方法:

1. wx.setStorage(Object object)
2. wx.getStorage(Object object)
3. wx.removeStorage(Object object)
4. wx.clearStorage(Object object)

所有的異步操作獲取值都需要通過(guò)success屬性監(jiān)聽(tīng)獲取，錯(cuò)誤信息也需要通過(guò)fail屬性來(lái)進(jìn)行監(jiān)聽(tīng)

自小程序V2.21.3開(kāi)始，在異步存儲(chǔ)數(shù)據(jù)API中可以對(duì)存儲(chǔ)的數(shù)據(jù)進(jìn)行加密操作，同步存儲(chǔ)數(shù)據(jù)方法不可以

// 存儲(chǔ) wx.setStorage({ key: 'name', // key data: 'Klaus', // value encrypt: true, // 對(duì)存儲(chǔ)的數(shù)據(jù)進(jìn)行加密 success: () => { // 獲取 wx.getStorage({ key: 'name', // key // 如果存儲(chǔ)的數(shù)據(jù)是加密的，那么獲取數(shù)據(jù)的時(shí)候 也必須開(kāi)啟encrypt 已進(jìn)行正確的加密和解密操作 // 如果存儲(chǔ)的數(shù)據(jù)沒(méi)有加密，獲取數(shù)據(jù)的時(shí)候，是不可以開(kāi)啟encrypt的, 因?yàn)榇藭r(shí)對(duì)明文數(shù)據(jù)進(jìn)行解密操作會(huì)失敗 encrypt: true, success: res => console.log(res), fail: err => console.log(err)
    })
  }
})