玩转微信小程序 之 获取用户信息以及玩转基本列表渲染（2019/04/14）

LZ-Says：总是要各种颠沛流离，才能换得片刻安宁。努力让自己变得更好，加油～

前言

前几天，完成了微信小程序的首章，学习起来，还是多多少少有点坑，不舒服。

今天我们继续开启微信小程序 Study 之路～

脑图预览

本章目标

跟我走完本章，你会 get 如下技能：

• 获取用户信息；
• Swiper 组件使用；
• 模版定义以及使用；
• 如何加载显示一个列表以及如何处理列表点击;
• 简单了解全局配置以及单独配置.

上文说过，本次将分批发布，第一批文章，主要就是微信小程序简单了解，顺便练习几个页面效果，而第二批，则主要记录 LZ 从零开始，开发一个 wanAndroid 小程序。

启程，嗷呜～

微信小程序微信官网一直在优化、更新中，小伙伴可以查看官网获取第一手资料，以官方为主～

随后，我们一起来看一下今天我们要实现的效果演示图：

一、获取用户信息

官方地址：
https://developers.weixin.qq.com/miniprogram/dev/api/wx.getUserInfo.html
https://developers.weixin.qq.com/miniprogram/dev/component/button.html

首先，我们先来简单搭建一个页面效果：

简单说一下：

启动时，默认显示“点击获取用户信息”，点击按钮后，弹出授权框，点击允许显示当前已授权用户的头像以及昵称。

<!--index.wxml-->
<view class="container">
  <image src='图片地址'></image>
  <text>名称</text>
  <button>点击获取用户信息</button>
</view>

随后我们查看官方，看下如果想要获取用户信息，我们应该如何操作？

这里顺带提个好玩的事儿，地址如下，有兴趣的小伙伴可以看下：

https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01

放个趣图：

getUserInfo 这个接口，微信改过一次版，曾经可以通过此提示用户进行授权，而如今，却只能通过 Button 点击事件获取用户信息。

好啦，具体细节大家自行查看官网，这里附上获取用户信息步骤如下：

• Step 1： Button 设置 open-type，并且监听用户点击请求授权框按钮 bindgetuserinfo；
• Step 2： 通过 wx.getSetting 判断用户是否授权；
• Step 3： 通过 wx.getUserInfo 获取用户信息，并绑定 userInfo；
• Step 4： 通过 bindgetuserinfo 回调监听用户是否允许授权；
• Step 5： 根据授权状态动态显示授权按钮或者用户信息。

以上五步便是 LZ 操作过程，下面附上实际代码：

首先来看我们的页面：

<!--index.wxml-->
<view class="container">
  <image src='{{ userInfo.avatarUrl }}'></image>
  <text>{{ userInfo.nickName }}</text>
  <button bindgetuserinfo='handleGetUserInfo' bindtap='getUserInfo' open-type='getUserInfo' style='display:{{ isShow ? "block" : "none" }}'>点击获取用户信息</button>
</view>

以下附上关键点以及描述：

• open-type ： 微信开放能力，例如我们现在的获取用户信息；
• open-type=‘getUserInfo’ ： 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息；
• bindgetuserinfo： 获取用户是否允许授权。
• userInfo： 是我们在 js 中定义用于接收获取到的用户信息，页面中展示语法 {{ userInfo.属性即可 }}

随后，我们查看 js 代码：

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    userInfo: {},
    isShow: true
  },
  handleGetUserInfo: function(data) {
    // 判断用户是否点击允许
    if (data.detail.rawData) {
      // 判断用户是否点击允许
      this.getWxUserInfo();
    } else {
      console.log("用户点击拒绝，MMP")
    }
  },
  getUserInfo: function() {
    this.getWxUserInfo();
  },
  /**
   * 获取用户信息
   */
  getWxUserInfo() {
    // 判断用户是否授权
    wx.getSetting({
      success: (data) => {
        console.log(data);
        if (data.authSetting['scope.userInfo']) {
          // 用户已授权
          this.setData({
            isShow: false
          })
        } else {
          // 用户未授权
          this.setData({
            isShow: true
          })
        }
      }
    })

    // 获取用户登录信息
    wx.getUserInfo({
      success: (data) => { // 此处注意 回调中的 this 和 当前页面 this 不一样 解决方案，1：使用 ES 6 语法，也就是现在写法 : => 2：定义 that（let that = this 然后 that.data）
        console.log("获取用户信息成功")
        // 拿到用户登录信息，更新 userInfo
        this.setData({
          // 如何确定数据被更新？调试器中 AppData
          userInfo: data.userInfo
        })
      },
      fail: () => {
        console.log("fail ==> 获取用户信息失败")
      }
    })
  },
  …
})

而最后则是简单的样式文件，也一并附上：

.content{
  display: flex;
  flex-direction: column;
}

这里面重点则是关于授权，如何请求授权、如何检测授权，其他的，则主要看各位实际需求了。

然后看一下微信官方为我们提供的演示代码：

 onLoad: function() {
    console.log("---> Run index onLoad")
    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 => { // ES 6 解决 this 不同
   // 全局赋值
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },

二、Swiper（滑块视图容器/轮播图） 组件使用

官方地址：
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

这里需要注明一点：

Swiper 其中只可放置 swiper-item 组件。

我们首先来看一下实现效果：

简单总结下当前需求：

• 图片自动轮播并有指示器；
• 点击图片可以知道当前点击索引位置。

下面附上实际代码：

  <swiper catchtap='swiperClick' autoplay indicator-dots indicator-color='white' indicator-active-color='black'>
    <swiper-item>
      <image data-index='0' src='http://p1.pstatp.com/large/pgc-image/15225120577560c70c6c433'></image>
    </swiper-item>
    <swiper-item>
      <image data-index='1' src='https://p1.ssl.cdn.btime.com/t0145750c00212591a0.jpg?size=640x360'></image>
    </swiper-item>
    <swiper-item>
      <image data-index='2' src='http://5b0988e595225.cdn.sohucs.com/images/20180528/03d57625517546b38eb27ed3adfe0155.jpeg'></image>
    </swiper-item>
  </swiper>

对应的 js 文件代码如下：

  swiperClick: function (event) {
    let index = event.target.dataset.index;
    console.log("当前点击 index ：" + index);
  },

注意在实现获取当前点击索引，是直接给 image 设置了 data-= ，这里当然可以根据实际项目需求变更 item。

三、模版使用

官方地址：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html

模版，可以理解为我们 Android 中 Adapter 所需要的 item，当然，模版也可以理解为曾经我们在 Android 中 include 等。

那么，下面我们一起来实现微信小程序的模版。

Step 1： 在 Pages 下创建 template 目录

为了省事儿，你可以直接创建 page，但是需要将目录地址在 app.json 中移除。因为我们只是一个模版啊，而一个模版，肯定会包含基本的页面（wxml）、基本样式（wxss）以及可能会有 js 和基本配置（json）。

先来看一个最终完成的演示效果：

使用很 Easy，记住如下俩个要点：

• 使用 name 属性，作为模板的名字。然后在 <template/ > 内定义代码片段；
• 使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入。

好记性不如烂笔头，下面我们一起来实践一波：

首先定义我们的模版内容，如上图，只是一个带有圆角背景框，这里附上关键代码：

<template name='listTmp'> <!-- 此处一定要指定 name 属性 -->
  <view class='itemList'>
    ...
  </view> 
</template>

首先我们要明白，模版也是有脾气有性格有样式的，要使用，也需要将其样式文件引入对应的样式文件中：

/* 倒入模版样式文件 */
@import '/pages/template/list-template.wxss';

调用如下：

<!-- 引入对应的模版文件 -->
<import src="/pages/template/list-template.wxml" />
<!-- 使用模版 通过 is = “模版名称” -->
<template is="listTmp"></template>

So，一个很 Easy 的模版创建以及使用完成咯～

下面一起玩个稍稍牛逼点的吧～

四、列表展示

试想，在咨询类型的 App 中，总是会有很多条 item，那么这些 item 我们当然不可能一条条写，我们通过告诉编辑器一个规范，然后让其帮我们实现绘制渲染。

我们首先查看一下要实现的列表的一个效果：

首先，我们先来简单模拟一段网络返回的数据，以便于我们下面的演示：

let list_data = [
  {
    image: 'http://p1.pstatp.com/large/pgc-image/15225120577560c70c6c433',
    content: '啦啦啦-0'
  },
  {
    image: 'http://p1.pstatp.com/large/pgc-image/15225120577560c70c6c433',
    content: '啦啦啦-1'
  },
  {
image: 'http://p1.pstatp.com/large/pgc-image/15225120577560c70c6c433',
    content: '啦啦啦-2'
  }
];

module.exports = {list_data};

还记得我们在模版中说过的第二点要求么？我们来个回放：

• 使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入。

So，我们开始搞我们的模版：

<template name='listTmp'>
  <view class='itemList'>
    <image src='{{ image }}'></image>
    <text>{{ content }}</text>
  </view>
</template>

而下面，则是我们页面的一个遍历，这里主要用到了：

• 列表渲染 wx:for：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html
• 非冒泡事件 catchtap

很 easy，直接附上代码：

  <!-- 引入对应的模版文件 -->
  <import src="/pages/template/list-template.wxml" />
 <!-- 注意：wx:key 提高列表渲染时的效率 -->
  <view catchtap='itemListClick' data-index='{{ index }}' wx:for='{{ infoList }}' wx:key='{{ index }}'>
    <template is='listTmp' data='{{ ...item }}'/>
  </view>

随后，来到我们重要的 js 逻辑层。

// pages/list/list.js

let listArr = require('../../datas/list-data.js');

Page({

  /**
   * 页面的初始数据
   */
  data: {
    infoList: []
  },

  swiperClick: function(event) {
    let index = event.target.dataset.index;
    console.log("当前点击 index ：" + index);
  },
  /**
   * item 点击事件
   */
  itemListClick: function(event) {
    let index = event.currentTarget.dataset.index;
    wx.navigateTo({
      url: '/pages/detail/details?index=' + index,
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.setData({
      infoList: listArr.list_data
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

Command + S 运行一波～

五、全局配置以及单独配置

关于这个，也是 LZ 突然发现的，感觉挺好玩、挺有用，简单说下：

在我们平时开发原生 App 时，一般来讲都会有一个统一的上方顶部 Title 统一背景色，当然在个别的页面中会有其独特的颜色区分，那么针对以上情况我们又如何实现呢？

• 设置全局状态栏背景色：
  app.json：

{
  "pages": [
    ...
  ],
  "window": {
    "navigationBarBackgroundColor": "#eee",
    ...
  }
}

演示效果如下：

• 局部某个页需要单独显示对应颜色（直接在对应的 json 文件下拷贝即可）
  
  演示效果如下：
  

哦可，点滴积累，希望我们变得越来越好～

个人公众号

不定期发布博文，最近有点忙，感谢老铁理解，欢迎关注～

参考资料

1. 微信小程序：https://mp.weixin.qq.com/cgi-bin/wx