玩转微信小程序之获取用户信息以及玩转基本列表渲染（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("获取用户信息成功")// 拿到用户登录信息，更新 userInfothis.setData({// 如何确定数据被更新？调试器中 AppDatauserInfo: 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.userInfothis.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.jslet 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 文件下拷贝即可）

演示效果如下：

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

个人公众号

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

参考资料

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