微信小程序实战-第5章 API应用案例(上)
5.1 【案例1】用户登录
5.1.1案例分析
用户登录是微信小程序必不可少的环节,一个完整的登录功能还包括用户的信息获取、登录的状态判定等。下图为未登录和已登录页面效果图。
5.1.2前导知识
用户登录流程需要小程序、开发者服务器和微信接口服务3个角色的参与,下面介绍这3个角色的作用:
- 小程序:用户使用的客户端,由于小程序运行在微信之上,因此小程序可以通过API获取微信用户的身份信息。
- 开发者服务器:小程序的后端服务器,用于为小程序用户提供服务。
- 微信接口服务:微信为开发者服务器提供的接口。
登录流程具体细节:
- 小程序获取code。
- 小程序将code发送给开发者服务器。
- 开发者服务器通过微信接口服务校验登录凭证。
- 开发者服务器自定义登录态。
保存数据缓存示例代码如下:
// 保存数据缓存
wx.setStorage({
key: 'key', // 本地缓存中指定的key
data: 'value', // 需要存储的内容(支持对象或字符串)
success: res => {}, // 接口调用成功的回调函数
fail: res => {} // 接口调用失败的回调函数
})
获取缓存数据示例代码如下:
// 获取数据缓存
wx.getStorage({
key: 'key', // 本地缓存中指定的 key
success: res => { // 接口调用成功的回调函数
console.log(res.data)
},
fail: res => {} // 接口调用失败的回调函数
})
5.1.3搭建开发者服务器
本节选择使用Node.js搭建开发者服务器,安装Node.js,创建项目:
- 初始化项目,将会自动创建package.json配置文件。
npm init –y
- 安装Express框架和request模块。
npm install express –save
npm install request --save
- 安装nodemon监控文件修改(如果已经安装则跳过此步)。
npm install nodemon -g
执行上述命令后,在项目目录下创建index.js文件,编写代码如下:
- 引入Express框架和request模块,配置appid和secret。
const express = require('express')
const bodyParser = require('body-parser')
const request = require('request')
const app = express()
app.use(bodyParser.json())
const wx = {
appid: '', // 需要填写开发者的AppID
secret: '' // 需要填写开发者的AppSecret
}
- 模拟数据库。
var db = { // 模拟数据库
session: {}, // 保存openid和session_key的会话信息
user: {} // 保存用户记录,如用户名、积分等数据
}
- 请求登录接口,校验登录凭证的微信接口URL地址。
app.post('/login', (req, res) => {
var url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' +
wx.appid + '&secret=' + wx.secret + '&js_code=' + req.body.code +
'&grant_type=authorization_code'
request(url, (err, response, body) => {
if(){ // 此处代码判断session.openid是否存在}
}
res.json({token: token})
})
})
- 处理判断语句代码。
var session = JSON.parse(body)
if (session.openid) {
// 用于生成token
var token = 'token_' + new Date().getTime()
db.session[token] = session
}
- 暴露对外访问接口地址。
app.listen(3000, () => {
console.log('server running at http://127.0.0.1:3000')
})
保存上述代码后,执行如下命令,启动开发者服务器。
nodemon index.js
5.1.4实现用户登录
创建一个空白项目,在app.js文件中编写代码,实现小程序启动时自动执行登录操作。
login: function() {
wx.login({
success: res => {
console.log('login code: ' + res.code)
wx.request({ // 请求login登录接口 })
}
})
},
请求login登录接口。
url: 'http://127.0.0.1:3000/login',
method: 'post',
data: { code: res.code },
success: res => {
console.log('token: ' + res.data.token)
// 将token保存为公共数据(用于在多页面中访问)
this.globalData.token = res.data.token
// 将token保存到数据缓存(下次打开小程序无需重新获取token)
wx.setStorage({ key: 'token', data: res.data.token })
}
执行上述代码,控制台中打印出login code和token的值。
在开发者服务器的控制台中,打印出login code和session的值。
5.1.5检查用户是否已经登录
- 进入app.js中编写checkLogin()函数,判断token是否存在。
checkLogin: function(callback) {
var token = this.globalData.token
if (!token) {
token = wx.getStorageSync('token') // 从数据缓存中获取token
if (token) {this.globalData.token = token}
else { callback({ is_login: false })
return
}}
// 如果token存在,请求服务器,判断是否有效
}
- 如果token存在,判断token是否有效。
wx.request({
url: 'http://127.0.0.1:3000/checklogin',
data: { token: token },
success: res => {
callback({ is_login: res.data.is_login })
}
})
- 修改app.js中onLaunch()函数,用于在小程序启动后检查用户是否已经登录,如果没有登录则执行登录操作。
onLaunch: function() {
this.checkLogin(res => {
console.log('is_login: ', res.is_login)
if (!res.is_login) {
this.login()
}
})
}
5.1.6获取用户信息
获取用户信息的两种常用方式如下:
-
使用组件的方式。
-
单击按钮提示授权的方式。
-
使用组件来获取
特点:不需要用户授权,可以直接显示用户的头像、昵称、性别等,适合只用来展示信息的情况。
// 示例代码:
<!-- 用户头像 -->
<open-data type="userAvatarUrl"></open-data>
<!-- 用户昵称 -->
<open-data type="userNickName"></open-data>
<!-- 用户性别 -->
<open-data type="userGender" lang="zh_CN"></open-data>
- 单击按钮提示授权的方式
用法:如果“!hasUserInfo”值为true,表示没有获取到用户信息,显示“获取头像昵称”按钮;如果值为false,则将用户信息显示在页面中。
<button wx:if="{{!hasUserInfo}}"
bindtap="getUserInfo"> 获取头像昵称 </button>
index.js
data: { userInfo: {}, hasUserInfo: false },
getUserInfo: function() {
wx.getUserProfile({
desc: '展示用户信息', // 声明获取用户个人信息后的用途
success: res => {
console.log(res.userInfo)
wx.setStorage({ key: 'userInfo', data: res.userInfo })
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
用法:在app.js文件的onLaunch()函数中,编写如下代码,在下次启动时判断是否已经授权。
this.globalData.userInfo = wx.getStorageSync('userInfo')
用法:在app.js文件的globalData中增加userInfo,编写如下代码。
globalData: {
userInfo: null, // 增加代码
token: null
}
调用:在其他页面通过app.globalData.userInfo获取到用户信息。
在pages/index/index.js文件中判断:
onload: function () {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
}
},
5.1.7开放数据校验和解密
使用场景:开发者服务器想要获取用户信息,需要在小程序端通过
wx.request()请求来获取。
使用弊端:无法辨别数据的真伪。
解决办法:利用小程序提供的开放数据的校验和解密机制。
5.2 【案例2】个人中心
5.2.1案例分析
个人中心案例设计了两个标签页,“首页”展示个人的基本信息及简单的自我介绍;“个人中心”底部标签页任务需求如下:
- 展示个人资料:展示头像、昵称、性别等信息。
- 订单物流查询:输入订单号和快递公司查询物流信息。
- 选择收货地址:调用开放接口,访问系统收货地址,进行选择。
- 客服联系电话:调用开放接口, 访问通讯录,拨打客服电话。
个人中心案例设计了两个标签页,通过这两个标签页来实现页面之间的跳转。
任务需求如下:
- 实现标签页与标签页之间的跳转。
- 实现标签页与非标签页之间的跳转。
- 实现非标签页与非标签页之间的跳转。
5.2.2前导知识
5.2.3实现底部标签页切换
在“首页”中单击头像上方提示语“点我跳转”,进入到 “个人中心页面”;这两个页面都属于tabBar页面,所以使用wx.swichTab或者wx.reLaunch方式。
// 第一种方式:只能跳转到tabbar 页面
wx.switchTab({ url: '/pages/person/person‘ })
// 第二种方式:可以跳转到tabbar或者非tabbar页面
wx.reLaunch({ url: '/pages/person/person‘ })
5.2.4编辑个人资料
person.wxml
<view class="data" bindtap="info">个人资料</view>
person.js
info: function(e) {
// 第一种方式:保留当前页面,点击页面左上角箭头,返回上一个页面
wx.navigateTo({ url: '../detail/detail'})
// 第二种方式:关闭当前页,左上角没有返回箭头,不能返回上一个页面
wx.redirectTo({ url: '/pages/detail/detail', })
}
detail.js
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
this.setData({ imgUrl: res.tempFilePaths })
} })
detail.js
data: {},
onLoad: function(options) {} }
jump: function(e) {
wx.navigateTo({
url: '/pages/modify/modify?username=' + encodeURIComponent(this.data.username) + '&gender=' + encodeURIComponent(this.data.gender)
})
}
modify.wxml
<form bindsubmit="formSubmit" report-submit="true">
… // 此处填写需要修改的姓名、性别信息
<button formType="submit" type="primary">保存</button>
</form>
modify.js
formSubmit: function(e) {
……获取表单数据formData、当前页面栈pages、获取上一个页面对象prevPage
prevPage.setData({ // 把数据存到上一个页面中 })
wx.navigateBack() // 返回到上一个页面
}
5.2.5订单物流查询
在本任务中,将会实现订单物流查询功能,在“个人中心”页单击“订单物流查询”跳转到 pages/order/order“订单查询”页面。
功能需求如下:
- 选择快递公司。
- 输入运单号。
- 单击查询按钮,在页面下方展示物流信息。
person.wxml
<view class="data" bindtap="order">订单物流查询</view>
person.js
order: function(e) {
// 保留当前页面,跳转到应用内的订单查询页面
wx.redirectTo({
url: '/pages/order/order',
})
}
5.2.6选择收货地址
在本任务中,将会实现选择收货地址功能,在“个人中心”页单击“选择收货地址”跳转到 pages/address/address “收货地址”页面。
功能需求如下:
- 单击“获取收货地址”按钮,进行地址选择。
- 在收货地址表单中会渲染数据。
5.2.7客服联系电话
在本任务中,将会实现拨打电话功能。
功能需求如下:
- 在“个人中心”页单击“客服联系方式”。
- 绑定拨打电话事件。
- 调用拨打电话API(wx.makePhoneCall)。
5.3 【案例3】天气预报查询
5.3.1案例分析
天气查询小程序,可以查询今日的天气状况,实时温度等信息。
功能需求如下:
- 设置input输入框,在搜索框中输入要查询的城市名称。
- 设置button按钮,单击搜索图标调用接口进行查询。
- 将查询数据展示在页面中。
5.3.2前导知识
wx.request 发起HTTPS网络请求,一个小程序,同时只能有5个网络请求连接
// 示例代码
wx.request({
url: 'test.php', // 仅为示例,并非真实的接口地址
data: { x: '', y: ''},
header: {
'content-type': 'application/json' // 默认值
},
success (res) { console.log(res.data) }
})
5.3.3动态获取输入的城市名
5.3.4请求天气接口数据
5.3.5渲染界面展示数据
weather.wxml
<view class="city">{{city}}</view>
<view class="today">{{date}}</view>
<image src="{{pic}}" mode="aspectFit"></image>
<view class="weather"><text>{{weather}}</text></view>
<view class="temp"><text>{{temp}}</text></view>
<view class="wind"><text>{{wind}}</text></view>
5.4 【案例4】查看附近美食餐厅
5.4.1案例分析
该案例使用腾讯地图SDK,配合地图组件和API进行调用,实现查看附近的美食餐厅小程序。
功能需求如下:
- 初始化地图组件。
- 单击banner图跳转到优惠券页面。
- 触发图标回到中心点位置。
- 页面中用图标标记搜索到的附近餐厅。
5.4.2前导知识
wx.getSystemInfo({
success: function(res) {
console.log(res.model) // 手机型号
console.log(res.pixelRatio) // 设备像素比
console.log(res.windowWidth) // 可使用窗口宽度
console.log(res.windowHeight) // 可使用窗口高度
console.log(res.language) // 微信设置的语言
console.log(res.version) // 微信版本号
console.log(res.platform) // 客户端平台
} })
markers: {
iconPath: "/resources/others.png", // 图标资源路径
id: 0,
latitude: 23.099994, // 纬度
longitude: 113.324520, // 经度
width: 50, // 图标宽度
height: 50 // 图标高度
}
controls: [{
id: 1, // 在控件点击事件回调返回此id
iconPath: ‘***', // 图标路径资源
position: { // 控件相当于地图的定位
left: 0, // 默认为0
top: 10, // 默认为0
width: 375, // 默认为图片宽度
height: 71 }, // 默认为图片高度
clickable: true // 为true可以点击
}]
5.4.3设计地图界面
map.wxml
<map id="map" bindcontroltap="bindcontroltap" bindregionchange="bindregionchange" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" controls="{{controls}}" style="width:{{mapw}}; height: {{maph}};" scale="{{scale}}" show-location>
</map>
map.js
var QQMapWX = require('../libs/qqmap-wx-jssdk.js')
Page({
qqmapsdk: new QQMapWX({
key: '' // 注册后获得的key值
}),
data:{ …… // 定义数据}
onLoad: function(options){ wx.getSystemInfo({}) }, // 获取窗口的宽高
onReady: function(){ wx.getLocation({}) }, // 获取当前位置
getfood:function(longitude, latitude){ } // 请求接口,查找附近餐厅
})
5.4.4单击控件回到中心点
5.4.5视野变化获取中心点坐标
本章总结
本章介绍了微信小程序中的API功能,包括使用小程序开放接口获取用户的信息、授权登录、添加用户收货地址,调起相机、相册选择图片等,同时也使用腾讯地图插件SDK定位附近的美食餐厅。根据POST和GET两种请求方式,介绍了不同数据类型之间的转换规则。学习本章后,读者需要掌握小程序中常用的API方法,熟练地进行与服务器的数据交互,实现项目产品需求。