【微信小程序創(chuàng)作之路】- 小程序遠(yuǎn)程數(shù)據(jù)請(qǐng)求、獲取個(gè)人信息

第七章 小程序遠(yuǎn)程數(shù)據(jù)請(qǐng)求、獲取個(gè)人信息

---

---

前言

本章我們介紹小程序遠(yuǎn)程數(shù)據(jù)請(qǐng)求，通過本地環(huán)境和正式域名兩部分進(jìn)行介紹。還會(huì)介紹小程序如何獲取個(gè)人信息。

---

一、遠(yuǎn)程數(shù)據(jù)請(qǐng)求

小程序可以服務(wù)外部服務(wù)器數(shù)據(jù)，也可以向外部服務(wù)器發(fā)送數(shù)據(jù)。我們將通過本地環(huán)境和使用正式域名方式來測(cè)試一下，小程序怎么接受和發(fā)送數(shù)據(jù)。

1.本地環(huán)境

微信小程序有規(guī)定，必須在后臺(tái)等級(jí)過的服務(wù)器域名才可以進(jìn)行通信。不過，開發(fā)者工具可以放松這個(gè)限制。
點(diǎn)擊微信開發(fā)工具右上角的詳情—>本地設(shè)置—>勾選 不校驗(yàn)合法域名、web-view（業(yè)務(wù)域名）、TLS 版本以及 HTTPS 證書，這個(gè)選項(xiàng)。

🧀我們通過代碼來演示
🏀🏀🏀本地創(chuàng)建springboot服務(wù)，和小程序進(jìn)行通信。

🍉🍉🍉springboot代碼 在云盤
鏈接：https://pan.baidu.com/s/1c5BmSkMWL7fMhhQPR25x2A?pwd=yh8z
提取碼：yh8z

WechatController.java

package com.gcl.springdemo01;import com.google.gson.Gson;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.List;@RestController
@RequestMapping("/wechat")
public class WechatController {@GetMapping("/demo")public String demo(){List<String> list = new ArrayList<>();list.add("a");list.add("b");list.add("c");return new Gson().toJson(list);}}

打開瀏覽器訪問查看數(shù)據(jù) 訪問 ：http://localhost:8081/wechat/demo

contact.wxml

<view>請(qǐng)求后臺(tái)數(shù)據(jù)<text wx:for="{{list1}}">{{index}}, {{item}}</text>
</view>

contact.js

 /*** 生命周期函數(shù)--監(jiān)聽頁(yè)面加載*/onLoad(options) {//請(qǐng)求本地環(huán)境const that = this;wx.request({url: 'http://localhost:8081/wechat/demo',success(res){that.setData({list1: res.data});}});},

我們把請(qǐng)求后臺(tái)的方法直接寫在了onLoad()方法中，會(huì)在頁(yè)面加載后自動(dòng)執(zhí)行，這事就會(huì)執(zhí)行wx.request()方法請(qǐng)求后臺(tái)。如果請(qǐng)求成功，會(huì)執(zhí)行函數(shù)success()，更新全局變量list1。
想詳細(xì)了解請(qǐng)看官方文檔：點(diǎn)擊

結(jié)果：

2.正式域名

🍉🍉🍉注：
小程序官方出于安全性方面考慮，對(duì)請(qǐng)求后臺(tái)接口做了兩個(gè)限制：

• 只能請(qǐng)求HTTPS類型的接口
• 必須將接口的域名添加到自己微信小程序的信任列表中

配置合法域名

①我們查看一下現(xiàn)有的合法域名：現(xiàn)在未設(shè)置

②打開微信公眾平臺(tái)->登錄微信小程序管理后臺(tái) -> 開發(fā)->開發(fā)管理 -> 開發(fā)設(shè)置 -> 開始配置服務(wù)器域名 -> 修改 request 合法域名

🍉🍉🍉注：
注意我們登錄微信小程序管理后臺(tái)時(shí)，需要看看我們登錄的賬號(hào)是否對(duì)應(yīng)小程序登錄的賬號(hào)。

查看小程序登錄賬號(hào)：詳情->基本信息->AppId

查看小程序測(cè)試賬號(hào)的AppID

只有AppID相同時(shí)，我們?cè)O(shè)置的request合法域名才管用。

查看request合法域名：點(diǎn)擊刷新

🧀我們通過代碼來演示
🏀🏀🏀發(fā)起請(qǐng)求查看是否成功訪問

contact.js

   /*** 生命周期函數(shù)--監(jiān)聽頁(yè)面加載*/onLoad(options) {wx.request({url: 'https://www.baidu.com',method:'GET',success: (res)=> {console.log(res.data)}});},

可通過method參數(shù)設(shè)置請(qǐng)求的方式。
結(jié)果：

二、獲取用戶個(gè)人信息

1.展示當(dāng)前用戶的身份信息

我們可以通過<open-data>組件獲取當(dāng)前用戶信息。

獲取方法	方法含義
userNickName	用戶昵稱
userAvatarUrl	用戶頭像
userGender	用戶性別
userCity	用戶所在城市
userProvince	用戶所在省份
userCountry	用戶所在國(guó)家
userLanguage	用戶的語(yǔ)言

🧀我們通過代碼來演示
🏀🏀🏀訪問當(dāng)前用戶昵稱、頭像

contact.wxml

<view><open-data type="userAvatarUrl"></open-data><open-data type="userNickName"></open-data>
</view>

🍉🍉🍉注：
<open-data>不需要用戶授權(quán)，不需要登錄。也正是因?yàn)檫@個(gè)原因，小程序不允許使用腳本讀取<open-data>返回的信息。

2.獲取用戶的個(gè)人信息

想拿到用戶的個(gè)人信息，需要得到官方授權(quán)。官方建議，通過按鈕方式獲取授權(quán)。

🧀我們通過代碼來演示
🏀🏀🏀訪問當(dāng)前用戶昵稱、頭像

contact.wxml

<view><text class="title">hello {{name}}</text><button open-type="getUserInfo" bindtap="getUserProfile" class="userLogin">授權(quán)獲取用戶個(gè)人信息</button>
</view>

contact.js

getUserProfile(e) {wx.getUserProfile({desc: '獲取您的微信個(gè)人信息',success: (res) => {console.log("查看用戶信息" , res.userInfo);this.setData({name: res.userInfo.nickName})},fail: (reason) => {console.log(reason.errMsg)}})},

目前發(fā)現(xiàn)授權(quán)的信息可以展示，但是授權(quán)的提示框沒有展示，后續(xù)解決了更新上！大家也可以看看有啥好的辦法，告訴我哦，謝謝！

---

總結(jié)

提示：這里對(duì)文章進(jìn)行總結(jié)：

例如：以上就是今天要講的內(nèi)容，本文僅僅簡(jiǎn)單介紹了小程序遠(yuǎn)程數(shù)據(jù)請(qǐng)求和小程序獲取個(gè)人信息的使用，下章我們?cè)僖姟?/p>