微信小程序开发项目教程慕课版教案 1812页.docx
- 文档编号:10909086
- 上传时间:2023-05-28
- 格式:DOCX
- 页数:18
- 大小:56.23KB
微信小程序开发项目教程慕课版教案 1812页.docx
《微信小程序开发项目教程慕课版教案 1812页.docx》由会员分享,可在线阅读,更多相关《微信小程序开发项目教程慕课版教案 1812页.docx(18页珍藏版)》请在冰点文库上搜索。
微信小程序开发项目教程慕课版教案1812页
第9章莫凡商城支付功能及订单详情页设计
课时内容
支付API、画布组件及画布API的使用
课时
2
教学目标
掌握支付API的使用
掌握支付功能、支付完成页功能的实现
了解画布组件及画布API的使用
教学重点
支付API的使用
支付功能、支付完成页功能的实现
教学难点
支付API的使用
教学设计
1.教学思路:
通过多媒体演示和实机操作讲解支付API的使用、画布组件及画布API的使用;通过实战实现支付功能。
2.教学手段:
多媒体+计算机
3.教学资料:
教材、多媒体课件
教学内容
9.1支付API
微信小程序支付功能的实现步骤如下。
(1)微信小程序调用wx.login方法,获取用户登录凭证code。
(2)微信小程序将用户登录凭证code传输给自己的开发后台者服务器。
(3)开发者后台服务器根据用户登录凭证code向微信服务器请求获取唯一标识(openid)。
(4)商户后端服务器获取到唯一标识(openid)后,调用统一下单支付接口,来获取预支付交易会话标识(prepay_id)。
(5)商户后端服务器调用签名,并返回支付需要使用的参数。
(6)微信小程序调用wx.requestPayment方法发起微信支付。
(7)商户后端服务器接收微信服务器的通知并处理微信服务器返回的结果。
微信小程序提供了微信支付接口,可以使用wx.requestPayment(OBJECT)来进行微信支付,具体参数说明如表所示。
wx.requestPayment的参数说明
属性
类型
是否必填
说明
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
否
接口调用结束的回调函数(调用成功、失败都会执行)
示例代码如下。
wx.requestPayment({
'timeStamp':
'',
'nonceStr':
'',
'package':
'',
'signType':
'MD5',
'paySign':
'',
'success':
function(res){
},
'fail':
function(res){
}
})
9.2项目实战:
任务19—实现支付功能
1.任务目标
通过实现莫凡商城的支付功能,来巩固微信支付功能的相关知识。
莫凡商城在提交订单页面和订单详情页面都可以发起商品支付,计算出需要支付的总金额,发起支付。
订单详情页支付在9.5节中实现,本节实现提交订单页发起商品支付功能,如图所示。
提交订单
2.任务实施
下面我们一起来实现莫凡商城提交订单页发起商品支付功能。
在buy.js业务逻辑处理文件里发起微信支付,示例代码如下。
varapp=getApp();
varhost=app.globalData.host;
Page({
data:
{
flag:
0,
addresses:
'',
goodsId:
'',
goodsDetail:
null,
num:
1,
addressId:
'',
totalPrice:
0
},
onLoad:
function(e){
console.log(e);
varthat=this;
this.setData({goodsId:
e.goodsId});
this.setData({num:
e.num});
this.setData({addressId:
e.addressId});
this.loadAddress(e.addressId);
this.loadGoods(e.goodsId);
},
loadAddress:
function(id){//获取用户收货地址
varpage=this;
if(id!
=null&&id!
=""){
wx.request({
url:
host+'/api/address/getAddressById',
method:
'GET',
data:
{
"id":
id
},
header:
{
'Content-Type':
'application/json'
},
success:
function(res){
console.log(res);
varcode=res.data.code;
varaddresses=res.data.data;
if(code='0000'){
page.setData({addresses:
addresses});
}
}
})
}
},
loadGoods:
function(goodsId){//获取购买商品列表
varpage=this;
if(goodsId!
=null&&goodsId!
=""){
wx.request({
url:
host+'/api/goods/getGoodsDetail?
goodsId='+goodsId,
method:
'GET',
data:
{
"goodsId":
goodsId
},
header:
{
'Content-Type':
'application/json'
},
success:
function(res){
console.log(res);
varcode=res.data.code;
vargoodsDetail=res.data.data;
if(code='0000'){
page.setData({goodsDetail:
goodsDetail});
varnum=page.data.num;
//计算总价格
vartotalPrice=goodsDetail.goodsPrice*num;
page.setData({totalPrice:
totalPrice.toFixed
(2)});
}
}
})
}
},
selectAddress:
function(){//选择收货地址
wx.navigateTo({
url:
'../address/address?
goodsId='+this.data.goodsId+"&num="+this.data.num
})
},
buy:
function(){//立即购买
varuserId=wx.getStorageSync("userId");
varaddressId=this.data.addressId;
vargoodsId=this.data.goodsId;
varnum=this.data.num;
console.log(addressId+'---'+userId+'---'+goodsId+'---'+num)
if(addressId!
=''&&addressId!
=null){
//保存订单信息
wx.request({
url:
host+'/api/order/saveOrder',
method:
'GET',
data:
{
"goodsId":
goodsId,
"userId":
userId,
"addressId":
addressId,
"num":
num
},
header:
{
'Content-Type':
'application/json'
},
success:
function(res){
console.log(res);
varcode=res.data.code;
varorderId=res.data.data;//订单号
if(code='0000'){
//发起支付
varthat=this;
that.getCode();//动态获取code
varparam={
"fee":
that.data.totalPrice,
"userId":
wx.getStorageSync("userId"),
"orderId":
orderId,
"appId":
'0',
"jsCode":
wx.getStorageSync('jscode')
}
wx.request({
url:
host+'/api/pay/recharge',
method:
'GET',
data:
{'data':
JSON.stringify(param)},
header:
{
'Content-Type':
'application/json'
},
success:
function(res){
varcode=res.data.code;
varret=res.data.data;
if(code=='0000'){
wx.requestPayment({
timeStamp:
ret.timestamp,
nonceStr:
ret.noncestr,
package:
ret.package,
signType:
ret.signType,
paySign:
ret.sign,
success(res){
wx.navigateTo({//支付成功后跳转成功页
url:
'../paySuccess/paySuccess?
orderId='+orderId
})
}
})
}else{
returnfalse;
}
}
})
}
}
})
}else{
wx.showModal({
title:
'提示',
content:
'请选择收货地址',
showCancel:
false,
success(res){
if(res.confirm){
console.log('用户单击确定')
}elseif(res.cancel){
console.log('用户单击取消')
}
}
})
}
},
getCode:
function(){
wx.login({
success:
res=>{
varjscode=res.code
wx.setStorageSync('jscode',jscode)
}
})
}
})
总的来说,发起微信支付,首先微信小程序将登录凭证code和订单相关信息一起提交给后端服务器,后端服务器向微信服务器发起支付,发起支付后微信服务器返回支付参数,后端服务器将支付参数返回给微信小程序,微信小程序使用这些返回参数调用wx.requestPayment小程序支付API,支付成功后跳转到支付页面,来完成微信小程序支付。
9.3画布组件及画布API的应用
利用canvas画布组件可以自定义绘制一些图像或者图形,如绘制正方形、圆形等形状,也可以将页面生成图片。
canvas画布组件默认宽度为300px,高度为225px,在使用时需要有唯一的标识,同一页面中的canvas-id不可重复,如果使用一个已经出现过的canvas-id,该canvas标签对应的画布将被隐藏并不再正常工作。
canvas画布组件有手指触摸动作开始、手指触摸后移动、手指触摸动作结束、手指触摸动作被打断等事件,具体属性如表所示。
canvas画布组件的属性
属性
类型
默认值
说明
type
string
指定canvas的类型,当前仅支持WebGL
canvas-id
string
canvas组件的唯一标识符
disable-scroll
boolean
false
当在canvas中移动时,禁止屏幕滚动及下拉刷新
bindtouchstart
eventHandle
手指触摸动作开始
bindtouchmove
eventHandle
手指触摸后移动
bindtouchend
eventHandle
手指触摸动作结束
bindtouchcancel
eventHandle
手指触摸动作被打断,如来电提醒、弹窗
bindlongtap
eventHandle
手指长按500ms之后触发,触发了长按事件后进行移动不会触发屏幕的滚动
binderror
eventHandle
当发生错误时触发error事件,detail={errMsg:
'somethingwrong'}
canvas画布组件需要和画布API一起使用,微信小程序提供画布相关API供开发者使用。
可以使用wx.createCanvasContext(stringcanvasId,Objectthis)创建canvas的绘图上下文CanvasContext对象,返回CanvasContext对象,CanvasContext对象提供以下方法。
(1)CanvasContext.draw(booleanreserve,functioncallback)将之前在绘图上下文中的描述(路径、变形、样式)画到canvas中。
(2)CanvasGradientCanvasContext.createLinearGradient(numberx0,numbery0,numberx1,numbery1)创建一个线性的渐变颜色。
返回的CanvasGradient对象需要使用CanvasGradient.addColorStop()来指定渐变点,至少要两个。
(3)CanvasGradientCanvasContext.createCircularGradient(numberx,numbery,numberr)创建一个圆形的渐变颜色。
起点在圆心,终点在圆环。
返回的CanvasGradient对象需要使用CanvasGradient.addColorStop()来指定渐变点,至少要两个。
(4)CanvasContext.createPattern(stringimage,stringrepetition)对指定的图像创建模式的方法,可在指定的方向上重复元图像。
(5)ObjectCanvasContext.measureText(stringtext)测量文本尺寸信息,目前仅返回文本宽度,同步接口。
(6)CanvasContext.save()保存绘图上下文。
(7)CanvasContext.restore()恢复之前保存的绘图上下文。
(8)CanvasContext.beginPath()开始创建一个路径。
需要调用fill或者stroke才会使用路径进行填充或描边,在最开始的时候相当于调用了一次beginPath。
同一个路径内的多次setFillStyle、setStrokeStyle、setLineWidth等设置,以最后一次设置为准。
(9)CanvasContext.moveTo(numberx,numbery)把路径移动到画布中的指定点,不创建线条。
用stroke方法来画线条。
(10)CanvasContext.lineTo(numberx,numbery)增加一个新点,然后创建一条从上次指定点到目标点的线。
用stroke方法来画线条。
(11)CanvasContext.quadraticCurveTo(numbercpx,numbercpy,numberx,numbery)创建二次贝塞尔曲线路径。
曲线的起始点为路径中前一个点。
(12)CanvasContext.bezierCurveTo()创建三次贝塞尔曲线路径。
曲线的起始点为路径中前一个点。
(13)CanvasContext.arc(numberx,numbery,numberr,numbersAngle,numbereAngle,booleancounterclockwise)创建一条弧线。
创建一个圆可以指定起始弧度为0,终止弧度为2×Math.PI。
用stroke或者fill方法来在canvas中画弧线。
(14)CanvasContext.rect(numberx,numbery,numberwidth,numberheight)创建一个矩形路径。
需要用fill或者stroke方法将矩形真正地画到canvas中。
(15)CanvasContext.arcTo(numberx1,numbery1,numberx2,numbery2,numberradius)根据控制点和半径绘制圆弧路径。
(16)CanvasContext.clip()从原始画布中剪切任意形状和尺寸。
一旦剪切了某个区域,所有之后的绘图就都会被限制在被剪切的区域内(不能访问画布上的其他区域)。
可以在使用clip方法前通过使用save方法对当前画布区域进行保存,并在以后的任意时间通过restore方法对其进行恢复。
(17)CanvasContext.fillRect(numberx,numbery,numberwidth,numberheight)填充一个矩形。
用setFillStyle设置矩形的填充色,如果未设置则默认为黑色。
(18)CanvasContext.strokeRect(numberx,numbery,numberwidth,numberheight)画一个矩形(非填充)。
用setStrokeStyle设置矩形线条的颜色,如果未设置则默认为黑色。
(19)CanvasContext.clearRect(numberx,numbery,numberwidth,numberheight)清除画布上在该矩形区域内的内容。
(20)CanvasContext.fill()对当前路径中的内容进行填充。
默认填充色为黑色。
(21)CanvasContext.stroke()画出当前路径的边框。
默认颜色为黑色。
(22)CanvasContext.closePath()关闭一个路径,会连接起点和终点。
如果关闭路径后没有调用fill或者stroke并开启了新的路径,那么之前的路径将不会被渲染。
(23)CanvasContext.scale(numberscaleWidth,numberscaleHeight)在调用后,之后创建的路径其横、纵坐标会被缩放。
多次调用倍数会相乘。
(24)CanvasContext.rotate(numberrotate)以原点为中心顺时针旋转当前坐标轴。
多次调用旋转的角度会叠加。
原点可以用translate方法修改。
(25)CanvasContext.translate(numberx,numbery)对当前坐标系的原点(0,0)进行变换。
默认的坐标系原点为页面左上角。
(26)CanvasContext.drawImage(stringimageResource,numbersx,numbersy,numbersWidth,numbersHeight,numberdx,numberdy,numberdWidth,numberdHeight)绘制图像到画布。
(27)CanvasContext.strokeText(stringtext,numberx,numbery,numbermaxWidth)在给定的(x,y)位置绘制文本描边的方法。
(28)CanvasContext.transform(numberscaleX,numberscaleY,numberskewX,numberskewY,numbertranslateX,numbertranslateY)使用矩阵多次叠加当前变换的方法。
(29)CanvasContext.setTransform(numberscaleX,numberscaleY,numberskewX,numberskewY,numbertranslateX,numbertranslateY)使用矩阵重新设置(覆盖)当前变换的方法。
(30)CanvasContext.setFillStyle(string|CanvasGradientcolor)设置填充色。
(31)CanvasContext.setStrokeStyle(stringcolor)设置描边颜色。
(32)CanvasContext.setShadow(numberoffsetX,numberoffsetY,numberblur,stringcolor)设定阴影样式。
(33)CanvasContext.setGlobalAlpha(numberalpha)设置全局画笔透明度。
(34)CanvasContext.setLineWidth(numberlineWidth)设置线条的宽度。
(35)CanvasContext.setLineJoin(stringlineJoin)设置线条的交点样式。
(36)CanvasContext.setLineCap(stringlineCap)设置线条的端点样式。
(37)CanvasContext.setLineDash(Array.
(38)CanvasContext.setMiterLimit(numbermiterLimit)设置最大斜接长度。
斜接长度指的是在两条线交汇处内角和外角之间的距离,当CanvasContext.setLineJoin()为miter时才有效。
(39)CanvasContext.fillText(stringtext,numberx,numbery,numbermaxWidth)在画布上绘制被填充的文本。
(40)CanvasContext.setFontSize(numberfontSize)设置字体的字号。
(41)CanvasContext.setTextAlign(stringalign)设置文字的对齐。
(42)C
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 微信小程序开发项目教程慕课版教案 1812页 微信小 程序 开发 项目 教程 慕课版 教案 1812