已有H5站点，如何用webview嵌入H5来快速制作微信小程序以及对微信小程序支付的修改
我这里是直接在pay.js中onload方法中先获取从H5页面跳转传过来的参数，再调用wx.login获取用户临时code，然后通过wx.request用该code调用H5统一下单接口以及签名等操作(原H5会有的)。支付成功后，可以跳转到对应的H5页面（需要在小程序中定义对应的webview页面）正式发布后需要用到，开发与体验版调试时，因为不校验域名，不会有问题，不配置的话会在正式发布后唤起失败无
前提条件：H5站点及微信支付正常(采用微信公众号支付)。
我是小程序小白，之前对小程序毫无概念，最近想把自己的H5站点发布成小程序，各种资料搜索，实践总结如下：
webview嵌入H5制作微信小程序
第一步：开通小程序公众平台账号，获得小程序appid
第二步：配置业务域名
在小程序公众平台中 开发 开发管理 开发设置中配置业务域名为H5站点域名
并且下载校验文件放到H5站点根目录。
第三步：下载安装HBuilderX和 微信开发者工具。
第四步：创建项目
使用HBuilder创建一个最简单的uniapp项目，vue版本，2，3都可以
第五步：写入webview及配置
写入启动页
启动页的webview地址，src则是注意事项中h5发布的域名以及他访问的入口文件位置
第六步：配置微信小程序appid
第七步：配置调试
在HBuilderX中 工具->设置->运行设置中配置 微信开发者工具 的安装地址。
微信开发者工具中 设置->安全设置 打开服务端口：
第八步：生成项目文件到微信开发者工具
打开微信开发者工具，并且在HBuilderX中 点击 运行->运行到小程序模拟器->微信开发者工具
然后在微信开发者工具下会生成项目对应的js文件并可以调试了，界面会在开发者工具中展示出来。
第九步：发布
微信开发者工具中调式没有问题，就可以发布版本到小程序公众平台了。
将原有H5中的微信支付，改造成小程序支付
Webview嵌入H5的小程序不支持原有H5的微信支付，需要改造，具体改造地方在：
第一：：在小程序公众平台中，开通微信支付功能，关联原有H5已有公众号支付，使用同一主体。
第二：在小程序公众平台中 开发 开发管理 开发设置中
设置 appSecret小程序秘钥，后面获取用户code的接口需要用到
配置服务器域名 为H5站点域名及相关域名解析地址 (正式发布后需要用到，开发与体验版调试时，因为不校验域名，不会有问题，不配置的话会在正式发布后唤起失败无反应)
第三：统一下单前需要获取微信用户的临时code，原有微信公众号获取code的接口需要改成使用微信小程序的接口。可参考微信接口说明。
这里需要小程序的appid和密钥。
这样做的目的，是不绑定微信用户登录，也可以支付。
第四：统一下单需要使用小程序的appid下单。
第五：原有签名需要改用小程序appid参数进行签名。
第六：在微信开发者工具中 新建支付跳转页面，比如pages/pay/pay 。
注意，不要在HBuilderX中新建再运行到微信开发者工具，不然会覆盖原有代码。
第七：小程序中pay.js的onload方法请求小程序支付
我这里是直接在pay.js中onload方法中先获取从H5页面跳转传过来的参数，再调用wx.login获取用户临时code，然后通过wx.request用该code调用H5统一下单接口以及签名等操作(原H5会有的)。成功后返回5个后续用到的相关参数值，然后调用wx.requestPayment去请求小程序支付。支付成功后，可以跳转到对应的H5页面（需要在小程序中定义对应的webview页面）
onLoad(options) {
console.log(options);
var params = JSON.parse(decodeURIComponent(options.param));
console.log('params:'+params);
var order_id = params.order_id;
var payment_id = params.payment_id;
var device = params.device;
var utoken = params.token;
var bustype = params.bus_type;
var apiurl = 'https://www.xxxx.com/api/pay/'+bustype;
console.log('order_id:'+order_id);
console.log('utoken:'+utoken);
wx.login({
success (res) {
if (res.code) {
//获取支付请求参数
console.log(res.code);
wx.request({
url: apiurl,
data: {
order_id: order_id,
payment_id: payment_id,
device: device,
code: res.code,
token: utoken,
},
success: function (res){
console.log(res);
console.log(res.data);
if (res.data.status == 'success'){
var pdata = JSON.parse(decodeURIComponent(res.data.url));
var ptimeStamp = pdata.timeStamp;
var pnonceStr = pdata.nonceStr;
var ppackage = pdata.package;
var psignType = pdata.signType;
var ppaySign = pdata.paySign;
wx.requestPayment({
'timeStamp': ptimeStamp,
'nonceStr': pnonceStr,
'package': ppackage,
'signType': psignType,
'paySign': ppaySign,
'success': function (res) {
//定义小程序页面集合
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的方式回调通知后端 该订单支付成功。后端逻辑不做赘述。
if (bustype=='xxxx'){
//console.log('跳转到vreturn');
wx.redirectTo({ url: '/pages/pay/vreturn?order_id='+order_id }); //定义的支付返回页面
}else{
wx.redirectTo({ url: '/pages/pay/return?order_id='+order_id });//定义的支付返回页面
}
//wx.redirectTo({ url: '/pages/order/list' });
//小程序主动返回到上一个页面。即从wxpay page到index page。此时index page的webview已经重新加载了url 了
//微信小程序的page 也有栈的概念navigateBack 相当于页面出栈的操作
//wx.navigateBack();
},
'fail': function (res) {
console.log("支付失败或取消支付:errMsg="+res.errMsg);
//console.log(res);
var pages = getCurrentPages();
var currPage = pages[pages.length - 1];
var prevPage = pages[pages.length - 2];
//console.log("准备修改数据");
//wx.redirectTo({ url: '/pages/index/index' });
if (bustype=='xxxx'){
//wx.navigateBack();
wx.redirectTo({ url: '/pages/pay/vreturn?order_id='+order_id });//定义的支付返回页面
}
else{
wx.redirectTo({ url: '/pages/pay/return?order_id='+order_id });//定义的支付返回页面
}
//console.log("准备结束页面")
// wx.navigateBack();
}
})
}
else{
console.log('获取支付参数失败:status='+res.data.status+'msg='+res.data.msg);
}
},
'fail': function (res) {
console.log('获取支付参数请求失败:msg=' + res.data);
}
})
} else {
console.log('登录失败！' + res.errMsg)
}
}
})
},
第八：H5跳转到小程序
前端页面需要加载微信插件
调用方法
前端判断是否在小程序环境中
第九：小程序跳转到H5
Webview的Src url变量
页面加载方法中setdata 跳转url和传参
小程序中新建页面后，需要配置页面
第十，支付成功的回调api中的签名验证修改
前面发给微信的数据签名是小程序appid，签名验证时别忘了也同样用小程序的appid。
第十一，调试
可模拟器上调试，可真机调试，真机调试时，会生成开发版，扫码后在手机上测试运行结果
模拟运行和真机调试时，应勾选 不校验合法域名 选项。
第十一，上传发布
备注：
小程序订单中心如何配置？
需要配置一个小程序的页面path，该页面对应h5的订单中心地址
配置时则输入自己定义的小程序的页面路径 /pages/order/list
开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！
更多推荐
28
0- 0
已为社区贡献1条内容
所有评论(0)