微信小程序实战-第5章 API应用案例(上)

原创已于 2024-07-16 00:09:29 修改 · 1.5k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #notepad++ #小程序

于 2024-07-16 00:06:25 首次发布

微信小程序实战专栏收录该内容

8 篇文章

订阅专栏

微信小程序实战-第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方法，熟练地进行与服务器的数据交互，实现项目产品需求。
在这里插入图片描述