JB的小程序之旅-小程序基础（登陆受权、请求数据）

时间 2019-11-08

标签程序之旅基础登陆受权请求数据繁體版

原文原文链接

前言

半年前说想学学小程序，当时写了个hello world，算是站在门外了解下，当时也写了篇文章，最终的收获是这么一张图： json

这不，恰好小猪最近也在搞小程序，jb也就照着小猪的笔记顺便弄一波，主要目的是为了熟悉下小程序，初级用法，大神请绕路；小程序

这里先默许，已经了解小程序的代码结构跟基本配置；api

工具信息

须要先安装微信开发者工具、vscode、minapp（直接在vscode里安装）；缓存

配置过程

打开微信开发者工具，建立小程序项目，appid直接点击测试号小程序便可； bash

建立完项目后，长这样的：微信

由于用的是快速模板，因此里面会有默认代码，为了加深理解，手动把index.js、index.wxml、index.wxss都删除掉；网络

首先把小程序的窗口配置一下，是在app.json，修改下标题背景颜色、文字颜色跟文本内容；微信开发

"navigationBarBackgroundColor": "#FFB6C1",
"navigationBarTitleText": "jb",
"navigationBarTextStyle":"white"
复制代码

预览图： app

设置头像

首先先新建assets目录存放静态资源，而后在index.wxml添加一个image控件；xss

<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
复制代码

这样，启动后就会自动显示城市；