JB的小程序之旅-小程序基礎（登陸受權、請求數據）

前言

半年前說想學學小程序，當時寫了個hello world，算是站在門外瞭解下，當時也寫了篇文章，最終的收穫是這麼一張圖：

這不，恰好小豬最近也在搞小程序，jb也就照着小豬的筆記順便弄一波，主要目的是爲了熟悉下小程序，初級用法，大神請繞路；

這裏先默許，已經瞭解小程序的代碼結構跟基本配置；

工具信息

須要先安裝微信開發者工具、vscode、minapp（直接在vscode裏安裝）；

配置過程

打開微信開發者工具，建立小程序項目，appid直接點擊測試號小程序便可；

建立完項目後，長這樣的：

由於用的是快速模板，因此裏面會有默認代碼，爲了加深理解，手動把index.js、index.wxml、index.wxss都刪除掉；

首先把小程序的窗口配置一下，是在app.json，修改下標題背景顏色、文字顏色跟文本內容；

"navigationBarBackgroundColor": "#FFB6C1",
"navigationBarTitleText": "jb",
"navigationBarTextStyle":"white"
複製代碼

預覽圖：

設置頭像

首先先新建assets目錄存放靜態資源，而後在index.wxml添加一個image控件；

<image src="../../assets/jb.jpg" />
複製代碼

預覽圖：

正常顯示，可是若是要作頭像，就太大了，調整下樣式，打開index.wxss，添加個選擇器：

.user-icon-image{
    width: 200rpx;
    height: 200rpx;
}
複製代碼

而後在剛剛的image標籤設置下屬性：

<image class="user-icon-image" src="../../assets/jb.jpg" />
複製代碼

預覽圖：

若是想實現寬度100%，高度自適應，有兩種方法：

# 方法1，直接使用百分比
.user-icon-image{
    width: 100%;
    height: 200rpx;
}

# 方法2，屬性裏面新增mode="widthFix"
<image class="user-icon-image" src="../../assets/jb.jpg" mode="widthFix"/>
複製代碼

兩種方法的效果都同樣：

登陸受權獲取頭像

按照通常的習慣，登陸都是要點擊的，所以須要一個按鈕，在index.wxml增長：

<button open-type="getUserInfo">獲取頭像暱稱</button>
複製代碼

預覽圖：

點擊受權便可完成受權，可是受權信息是不會保存起來的，所以須要寫個函數保存下，而button下有一個屬性:bindgetuserinfo，用戶點擊按鈕的時候，會返回獲取到用戶的信息，所以在這裏綁定一個用於保存用戶信息回調方法便可，在index.js中添加代碼:

//index.js
//獲取應用實例
const app = getApp()

Page({
  getUserInfo: function(e) {
    app.globalData.userInfo = e.detail.userInfo
    console.log(app.globalData.userInfo)
  },
})
複製代碼

而後index.wxml中的button綁定下屬性：

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">獲取頭像暱稱</button>
複製代碼

清一波緩存，點擊按鈕，查看Console輸出，發現有打印結果，說明獲取成功；

通常來講，用戶信息獲取到，就須要替換頭像了，所以須要添加兩個變量，在index.js裏面添加如下信息:

Page({
  data: {
    userInfo: {}, //用戶信息
    hasUserInfo: false,//是否有用戶信息
  },
複製代碼

接着onLoad函數中完成初始化：

onLoad: function () {
if (app.globalData.userInfo) {
  this.setData({
    userInfo: app.globalData.userInfo,
    hasUserInfo: true
  })
}
},
# 這裏的意思是，若是userInfo有數據，則set數據；
複製代碼

接着index.wxml判斷下數據是否可用，不可用的話顯示默認圖標和按鈕，可用的話顯示用戶頭像與暱稱，這裏須要說明下，獲取到的信息都保存在userInfo裏，根據上面的截圖，頭像的字段是avatarUrl，用戶名的字段是nickName：

<!--index.wxml-->
<block wx:if="{{!hasUserInfo}}">
    <image class="user-icon-image" src="../../assets/jb.jpg" />
    <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">獲取頭像暱稱</button>
</block>
<block wx:else>
    <image class="user-icon-image" src="{{userInfo.avatarUrl}}" />
    <text>{{userInfo.nickName}}</text>
</block>
複製代碼

預覽圖：

豐富異常狀況的處理，直接貼官網的例子:

//index.js
//獲取應用實例
const app = getApp()

Page({
  data: {
    userInfo: {}, //用戶信息
    hasUserInfo: false,//是否有用戶信息
  },
  onLoad: function () {
    if (app.globalData.city){
        this.setData({
          city: app.globalData.city
        })
      console.log(app.globalData.city)
    }
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 因爲 getUserInfo 是網絡請求，可能會在 Page.onLoad 以後才返回
      // 因此此處加入 callback 以防止這種狀況
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在沒有 open-type=getUserInfo 版本的兼容處理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    console.log(app.globalData.userInfo)
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
})

複製代碼

緊跟着調整樣式：

.user-icon-wrapper{
      display:flex;                 
      justify-content: center; 
      flex-direction: column;
      align-items: center
} 
複製代碼

而後index.wxml作下適配，增長view：

<!--index.wxml-->
<block wx:if="{{!hasUserInfo}}">
    <view class="user-icon-wrapper">
        <image class="user-icon-image" src="../../assets/jb.jpg" />
        <button class="authorize-button" open-type="getUserInfo" bindgetuserinfo="getUserInfo">獲取頭像暱稱</button>
    </view>
</block>
<block wx:else>
    <view class="user-icon-wrapper">
        <image class="user-icon-image" src="{{userInfo.avatarUrl}}" />
        <text>{{userInfo.nickName}}</text>
    </view>

</block>

複製代碼

預覽圖：

請求網絡接口

天氣接口用的是魅族天氣api，接口地址:

http://aider.meizu.com/app/weather/listWeather?cityIds=101280601
複製代碼

內容衆多，直接顯城市便可，index.wxml添加控件：

<button style="margin-top: 50rpx">刷新天氣</button>
<view style="height: 100rpx;flex-direction:column;">
  <text>城市：{{city}}</text>
</view>
複製代碼

請求接口，用的是wx.request，·index.js中新增：

refreshWeather: function () {
        var myThis = this;
        wx.request({
          url: 'http://aider.meizu.com/app/weather/listWeather',
          data: {
            'cityIds': '101280601'
          },
          method: 'GET',
          headers: {
            'User-Agent:': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36',
            'Host':'aider.meizu.com'
          },
          success: function (res) {
            console.log(res.data);
            myThis.setData({
              city: res.data.value[0].city
            })
          },
          fail: function () {
            console.log("請求失敗！");
          },
          complete: function () {
            console.log("請求完成！");
          }
        })
      },

複製代碼

接着按鈕設置下點擊時觸發這個網絡請求：

<button style="margin-top: 50rpx" bindtap="refreshWeather">刷新天氣</button>
複製代碼

小程序開發者工具，右上角詳情，勾選：

點擊下按鈕，這樣就能獲取到數據啦~

啓動小程序時自動請求

這裏有個想法，若是想啓動小程序就直接請求接口顯示數據，怎麼搞？

點擊按鈕是set數據，可是啓動後不容許set數據，所以只能先獲取到數據，賦值，而後再獲取；

首先，打開app.js，找到globalData，新增city全局變量：

globalData: {
    userInfo: null,
    city:null
  }
複製代碼

繼續在app.js新增請求邏輯：

// 設置city變量
    wx.request(
      {
      url: 'http://aider.meizu.com/app/weather/listWeather',
      data: {
        'cityIds': '101280601'
      },
      method: 'GET',
      headers: {
        'User-Agent:': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36',
        'Host':'aider.meizu.com'
      },
      success: function (res) {
        console.log(res.data);
        const appInstance = getApp()
        appInstance.globalData.city = res.data.value[0].city
        console.log(appInstance.globalData.city) // I am global data
      },
      fail: function () {
        console.log("請求失敗！");
      },
      complete: function () {
        console.log("請求完成！");
      }
    })
複製代碼

這裏注意，跟以前不同的是，成功後不是set數據，而是賦值，而全局變量是這樣賦值的：

const appInstance = getApp()
appInstance.globalData.city = res.data.value[0].city
複製代碼

這樣，啓動後就會自動顯示城市；