文档介绍：第9章
莫凡商城支付功能及订单
详情页设计
微信小程序开发项目教程（慕课版）
工业和信息化人才培养规划教材
人民邮电出版社
微信小程序只能使用微信支付这一种支付方式。支付是小程序常用的功能，微信小程序提供支付相关API。本章要学****设计支付功能，以及支付功能实现的整个流程。画布组件及画布API 可用来自定义绘制一些页面，如设计分享页面，可以通过页面生成图片然后进行分享，这时就可以使用画布组件及画布API 来实现页面生成图片的功能。
本章导读
The chapter’s introduction
目录导航
　支付API
　项目实战：任务19—实现支付功能
　画布组件及画布API 的应用
　项目实战：任务20—实现支付完成页功能
　项目实战：任务8—实现我的订单功能
　项目实战：任务21—实现订单详情页功能
　小结
支付API
微信小程序支付功能的实现步骤如下。
01
OPTION
02
OPTION
03
OPTION
04
OPTION
方法，获取用户登录凭证code。
微信小程序将用户登录凭证code 传输给自己的开发后台者服务器。
开发者后台服务器根据用户登录凭证code 向微信服务器请求获取唯一标识（openid）。
商户后端服务器获取到唯一标识（openid）后，调用统一下单支付接口，来获取预支付交易会话标识（prepay_id）。
05
OPTION
商户后端服务器调用签名，并返回支付需要使用的参数。
06
OPTION
方法发起微信支付。
07
OPTION
商户后端服务器接收微信服务器的通知并处理微信服务器返回的结果。
支付API
微信小程序提供了微信支付接口，（OBJECT）来进行微信支付。
属性
类型
是否必填
说明
timeStamp
string
是
时间戳从1970 年1 月1 日00 : 00 : 00 至今的秒数，即当前的时间
nonceStr
string
是
随机字符串，长度为32 个字符以下
Package
string
是
统一下单接口返回的prepay_id 参数值，提交格式如prepay_id=*
signType
string
是
签名算法，支持MD5、HMAC-SHA256
paySign
string
是
签名，具体签名方案参见微信公众号支付帮助文档
Success
Function
否
接口调用成功的回调函数
Fail
Function
否
接口调用失败的回调函数
complete
Function
否
接口调用结束的回调函数（调用成功、失败都会执行）
支付API
示例代码如下。
({
'timeStamp': '',
'nonceStr': '',
'package': '',
'signType': 'MD5',
'paySign': '',
'success':function(res){
},
'fail':function(res){
}
})
项目实战：任务19—实现支付功能
通过实现莫凡商城的支付功能，来巩固微信支付功能的相关知识。莫凡商城在提交订单页面和订单详情页面都可以发起商品支付，计算出需要支付的总金额，发起支付。节中实现，本节实现提交订单页发起商品支付功能。
1．任务目标
项目实战：任务19—实现支付功能
2．任务实施
var app = getApp();
var host = ;
Page({
data: {
flag: 0,
addresses: '',
goodsId:'',
goodsDetail:null,
num:1,
addressId:'',
totalPrice:0
},
onLoad: func