功能介绍
第一次开发小程序，不知道如何下手，当前公司需要开发小程序，但是我们现在项目已经有h5页面web端,跟微信公众号，从网上查询自17年11月可以用webview插件直接嵌套，省去开发的环节，简直是福利。像我们公司开发需求设计发布基本都在一个人身上，没有时间从零开发小程序了。
开始
- 申请小程序步骤，详细看此处
- 下载开发者工具,微信登录小程序。不过多描述
-
简单快速开始
image.png
之后发现微信支付无法使用，这可能是无法一个卡点了。
开始百度搜索好多说webview实现微信原生支付，以为是真的，但是试了好多方式都不行，开始时间跟成本都在这里摆着呢，不可能重新开发小程序不用webview，只好继续想办法。
实现
做过微信公众号的童鞋应该都知道，在公众号里商家H5页面内调用JSSDK就可以实现微信支付功能。但是看过webview组件的API的文档的童鞋应该知道：webview 里面的网页（公众号迁移的网页）是调用不了外部的微信支付what… 虽然微信支付也确实是提供了小程序的微信支付API，但是因为我们整个小程序的内容就是一个webview嵌入公众号内容的网页，在网页内下订单的过程中是无法通过webview的api接口通知小程序调起微信支付的。 查看微信支付小程序的支付文档，我们小程序如果要调用微信支付只需要得到以下参数就可以。
image.png
wx.requestPayment({
timeStamp: '',
nonceStr: '',
package: '',
signType: 'MD5',
paySign: '',
success (res) { },
fail (res) { }
})
上边我们最无法获取的是paySIgn
具体业务流程查看微信支付接口
获取方式
image.png
第一步获取用户openid
但是我们主程序在webview里边无法获取code并获得openid
我的思路如下
image.png
具体代码实现
所有webview与小程序交互的页面必须引入以下js
1.assemblyRequestString我写的组装参数的方法,
var path = "/pages/getcode/tempcode?"+$.assemblyRequestString(temp.payFormParams);
wx.miniProgram.navigateTo({url: path});
2
// pages/getcode/tempcode.js
//获取应用实例
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var temp = this;
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
console.log("tempcode,wx.login")
console.log(res.code)
console.log(options)
temp.topayview(options,res.code);
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
topayview: function (options, code){
//定义小程序页面集合
var pages = getCurrentPages();
//当前页面 (wxpay page)
var currPage = pages[pages.length - 1];
//上一个页面 （index page）
var prevPage = pages[pages.length - 2];
//通过page.setData方法使index的webview 重新加载url 有点类似于后台刷新页面
//此处有点类似小程序通过加载URL的方式回调通知后端 该订单支付成功。后端逻辑不做赘述。
prevPage.setData({
url: 你的跳转后台地址?orderNo=" + options.orderNo + '&payMethod=' +'wxmn'+ '&code=' + code,
}),
//小程序主动返回到上一个页面。即从wxpay page到index page。此时index page的webview已经重新加载了url 了
//微信小程序的page 也有栈的概念navigateBack 相当于页面出栈的操作
wx.navigateBack();
}
})
3 带着code请求后台
获取用户openid地址
https://api.weixin.qq.com/sns/jscode2session?appid="+appid+"&secret="+secret+"&js_code="+code+"&grant_type=authorization_code
生成微信支付订单接口
https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1&index=1
4
var resultMap = JSON.parse(data.result.er.resultMessage);
//点击微信支付后，调取统一下单接口生成微信小程序支付需要的支付参数
var params = '?timestamp='+resultMap.timeStamp+'&nonceStr='+resultMap.nonceStr
+'&package='+resultMap.package.replace('=','%3D')+'&signType='+resultMap.signType
+'&paySign='+resultMap.paySign + "&orderNo="+temp.params.orderNo;
//定义path 与小程序的支付页面的路径相对应
var path = '/pages/wxpay/wxpay'+params;
//通过JSSDK的api使小程序跳转到指定的小程序页面
wx.miniProgram.navigateTo({url: path});
// pages/wxpay/wxpay.js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
console.log(options)
//页面加载调取微信支付（原则上应该对options的携带的参数进行校验）
that.requestPayment(options);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
//根据 obj 的参数请求wx 支付
requestPayment: function (obj) {
//获取options的订单Id
var orderNo = obj.orderNo;
//调起微信支付
wx.requestPayment({
//相关支付参数
'timeStamp': obj.timestamp,
'nonceStr': obj.nonceStr,
'package': obj.package.replace('%3D','='),
'signType': obj.signType,
'paySign': obj.paySign,
//小程序微信支付成功的回调通知
'success': function (res) {
console.log('支付成功')
//定义小程序页面集合
var pages = getCurrentPages();
//当前页面 (wxpay page)
var currPage = pages[pages.length - 1];
//上一个页面 （index page）
var prevPage = pages[pages.length - 2];
//通过page.setData方法使index的webview 重新加载url 有点类似于后台刷新页面
//此处有点类似小程序通过加载URL的方式回调通知后端 该订单支付成功。后端逻辑不做赘述。
//支付成功跳转支付结果页面
prevPage.setData({
url: "你的成功地址" ,
}),
//小程序主动返回到上一个页面。即从wxpay page到index page。此时index page的webview已经重新加载了url 了
//微信小程序的page 也有栈的概念navigateBack 相当于页面出栈的操作
wx.navigateBack();
},
//小程序支付失败的回调通知
'fail': function (res) {
console.log("支付失败"),
console.log(res)
var pages = getCurrentPages();
var currPage = pages[pages.length - 1];
var prevPage = pages[pages.length - 2];
console.log("准备修改数据")
//支付失败继续跳转支付页
prevPage.setData({
url: "你的失败地址",
}),
console.log("准备结束页面")
wx.navigateBack();
}
})
},
})
