微信小程序开发项目实战（微课版）课件 项目8 个人信息模块开发

项目八个人信息模块开发Userinformationpage任务一用户信息页面在小程序开发中，用户信息模块一般包括用户登录、退出登录、购物信息统计、购物金额统计等，小程序提供了各类API和组件为实现用户信息模块提供了便利。通过本项目的讲解，让同学们了解小程序用户登录的API接口、小程序与Echart.js中的柱状图、饼图和折线图相结合的使用方式等。项目八个人信息模块开发任务描述登录退出操作提供用户登录以及维护用户的登录状态，是一个拥有用户系统的小程序应用必不可少的功能模块。小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系。用户登录流程

在微信小程序中，涉及到以下三类登录方式：自有的账号注册和登录。使用其他第三方平台账号登录。使用微信账号登录（即直接使用当前已登录的微信账号来作为小程序的用户进行登录）。用户登录流程登录中的三个角色小程序：用户使用的客户端，由于小程序运行在微信之上，因此小程序可以通过API获取微信用户的身份信息。开发者服务器：小程序的后端服务器，用于为小程序用户提供服务。微信接口服务：微信为开发者服务器提供的接口。用户登录流程（1）小程序端调用wx.login函数获取code，发送给开发者服务器调用wx.login函数获取临时登录凭证code

，并回传到开发者服务器。code是临时登录凭证，每次调用wx.login函数，都会返回不同的code。用户登录流程（2）小程序将code发送给开发者服务器在获取code后，使用wx.request()将code发送给开发者服务器。wx.request的超时时间默认为60秒，为了避免用户因网络异常或服务器问题等待回包太久，可以在app.json设置wx.request的超时时间，超时则触发fail回调。可以在开发者后台设备服务器域名，如下图所示。用户登录流程（3）开发者服务器通过微信接口服务校验登录凭证开发者服务器将appid、appsecret、code发送给微信接口服务校验登录凭证，如果校验成功，返回session_key和openid等。图appid和appsecret用户登录流程（4）

开发者服务器自定义登录态自定义登录态与openid和session_key相关联，并把自定义登录态返回给小程序端。服务器端验证通过之后，会向客户端返回一个token，登录状态。客户端会把token保存起来。用户登录流程

wx.login(Objectobject)调用接口获取登录凭证（code）。wx.login({success(res){if(res.code){//发起网络请求wx.request({url:'/onLogin',data:{

code:res.code

}})}else{

console.log('登录失败！'+res.errMsg)

}}})实现用户授权登录图

未登录状态图

已登录状态实现用户授权登录

打开pages/profile/profile.js文件的data对象中定义基础数据userInfo，用于获得个人信息。代码如下所示。Page({

data:

{

userInfo:''}})退出登录

在日常使用小程序的过程中，不可避免地需要退出当前登录的帐号，小程序提供了退出登录的便利。退出登录的做法可以是用户头像或者使用“退出登录”按钮，找到并点击退出登录或注销账号的选项。确认退出登录操作，系统将会清除登录信息，并返回到登录前的状态。loginOut:function(){

var

that=this

wx.setStorageSync('userInfo','')

that.setData({

userInfo:''

})

}打开pages/profile/profile.js文件，实现loginOut函数，使用wx.setStorageSync函数将缓存中的userInfo的值设置为空。代码如下所示。感

谢

观

看THANK项目八个人信息模块开发Useoftemplates任务二模板的使用在实际开发过程中，经常会有代码复用的情况，即在不同的页面中会经常使用结构类似的代码。微信小程序模板是一种快速开发小程序的方式，使用小程序模板，可以减少从零开始开发的代码量，加快小程序开发的速度。项目八个人信息模块开发任务描述template模板语法-模版创建

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。可以使用name属性，作为模板的名字。然后在<template/>内定义代码片段。通过一个案例说明模板的使用方法。首先在pages文件夹中新建一个template文件夹，文件夹中新建一个template.wxml文件，在页面实现如下代码。<template

name="temp">

<view><text

class="info">这是一个模板文件！</text>

</view></template>接下来我们就给模板增加样式文件，在pages/template文件夹中新建一个template.wxss文件，然后对模板文件，添加一个简单样式。.info{font-size:50rpx;}template模板语法-模版使用

在需要使用的wxml加载模板。例如，在index.wxml页面加载模板，需要使用import语句引入文件路径，通过<template>标签使用模板，template标签的is属性与模板的name属性对应。<import

src

="../template/template.wxml"/><view>This

is

index.wxml</view><template

is="temp"/>

除了引入模板WXML页面之外，还需要在index.wxml页面使用import引入模板样式文件。@import

"../template/template.wxss";template模板语法-数据传递

有时候模版需要加载的页面传递参数，这时需要在模板中定义参数。template.wxml文件代码如下所示。<template

name="temp">

<view><text

class="info">这是一个模板文件</text></view>

<view>

<text>{{index}}:{{msg}}</text>

<text>Time:{{time}}</text>

</view></template>

接下来在index.wxml中传递模板中所需要的参数，修改后的代码如下：<import

src

="../template/template.wxml"/><view>This

is

index.wxml</view><template

is="temp"

data="{{...item}}"/>template模板语法-数据传递

在index.js中定义item为对象类型的数据。Page({data:{

item:{index:0,msg:'thisisatemplate',time:'2016-09-15'}}})创建template模板

is属性可以使用Mustache语法，来动态决定具体需要渲染哪个模板。<templatename="odd">

<view>odd</view></template><templatename="even">

<view>even</view></template><blockwx:for="{{[1,2,3,4,5]}}"><templateis="{{item%2==0?'even':'odd'}}"/></block>

template模板语法-模板的引用

如上都是在同一个wxml文件中定义和引用模板，而模板的定义和引用是可以分开的。即在一个文件中定义模板，而在其他一个或多个文件wxml文件中都可以使用定义好的模板。从外部文件中引用模板，使用importsrc="templateUrl"标签。同样使用is属性来指向要引用的标签。

要在index.wxml中使用template中定义的模板，则需要先在index中利用import来导入该模板：template模板语法-模板的引用s|--index|--index.js|--index.json|--index.wxml|--index.wxss|--template|--template.js|--template.json|--template.wxml|--template.wxss<!--index.wxml--><importsrc="../template/template.wxml"<templateis="msgItem"data={{...indexData}}//使用的是js文件中的数据

在一个项目中需要在多处页面使用类似的模块，就需要创建模板，减少代码量，同时代码高度复用；

在同一个WXML文件中创建多个类似的模板用name属性来区别；

模板WXSS在全局引入和在使用页面引入的区别在于模板的使用量；

使用import引入模板WXML和WXSS；

通过template标签使用模板，template标签的is属性与模板的name属性对应，data属性代表传入模板的数据。template模板使用小结创建template模板

通过上面的template模板示例，了解了模板的实现过程之后，接下来在商城项目中使用模板实现个人信息资料的显示。使用template模板

打开pages/pages/profile.wxml页面，引入模板页面list.wxml。<import

src="../../template/list.wxml"/>

打开pages/pages/profile.wxss页面，引入模板样式list.wxss。@import

"../../template/list.wxss";使用template模板

打开pages/pages/profile.js页面，定义个人信息资料，包括三个数据，url用于跳转地址，title显示信息标题，iconurl用于标题显示的图标。Page({

data:

{

menu:[{

url:'/pages/profile/profile',

title:'个人资料',

iconurl:'/images/others/contract_icon.png'},

{

url:'/pages/profile/profile',

title:'购买记录',

iconurl:'/images/others/icon-Check.png'}

]})使用template模板

打开pages/pages/profile.wxml页面，通过<template>标签使用模板，template标签的is属性与模板的name属性对应。<view>

<template

wx:for="{{menu}}"

is="list"

data="{{item}}"></template>

</view>感

谢

观

看THANK项目八个人信息模块开发TheapplicationofEchartinsmallprograms任务三Echart在小程序中的运用ECharts是一款基于JavaScript的数据可视化图表库，提供直观、生动、可交互和可个性化定制的数据可视化图表。Echarts提供了小程序版本echarts-for-weixin，封装了成了一个名为ec-canvas的自定义组件供开发者直接引用，开发者通过熟悉的ECharts配置方式，快速开发图表，满足各种可视化需求。项目八个人信息模块开发任务描述配置ECharts

ECharts可下载源码自行编译。在创建项目之后，或者仅需拷贝ec-canvas目录到新建的项目下，然后做相应的调整。ec-canvas文件夹整个有将近1M，建议在分包中组织可视化页面。此外，考虑在线定制需要的图表，下载的文件替换掉ec-canvas/echarts.js。打开pages/profile/profile.json文件，配置如下：{"usingComponents":{

"ec-canvas":"../../ec-canvas/ec-canvas"}}配置ECharts

在profile.wxml设计可视图区域，包括柱状图、饼图和折线图区域。打开

pages/profile/profile.wxml文件，编写可视化图表区域布局。<view

class="echarts">

<view

class="data_chart"></view>

<view

class="divide"></view>

<view

class="data_chart"></view>

<view

class="divide"></view>

<view

class="data_chart">

</view></view>配置ECharts

在profile.wxml设计可视图区域，包括柱状图、饼图和折线图区域。打开

pages/profile/profile.wxml文件，编写可视化图表区域布局。<view

class="echarts">

<view

class="data_chart">

<view

class="title">购买商品统计</view>

<ec-canvas

id="mychart-dom-bar"

canvas-id="mychart-bar"

ec="{{

ec

}}"></ec-canvas>

</view>

<view

class="divide"></view>

<view

class="data_chart"></view>

<view

class="divide"></view>

<view

class="data_chart">

</view></view>柱状图的使用

柱状图（或称条形图）是一种通过柱形的长度来表现数据大小的一种常用图表类型。设置柱状图的方式，是将series的type设为bar。在这个示例中，横坐标是类目型的，因此需要在xAxis中指定对应的值；而纵坐标是数值型的，可以根据series中的data，自动生成对应的坐标范围。柱状图的使用

在这个例子中，横坐标是类目型的，因此需要在xAxis中指定对应的值；而纵坐标是数值型的，可以根据series中的data，自动生成对应的坐标范围。option={xAxis:{data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},yAxis:{},series:[{type:'bar',data:[23,24,18,25,27,28,25]}]};饼图的使用

饼图主要用于表现不同类目的数据在总和中的占比，每个的弧度表示数据数量的比例。饼图的配