已有H5站点，如何用webview嵌入H5来快速制作微信小程序以及对微信小程序支付的修改

前提条件：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的接口需要改成使用微信小程序的接口。可参考微信接口说明。

 https://api.weixin.qq.com/sns/jscode2session?appid=xxxxx&secret=xxxxxx&js_code='获得的用户code'&grant_type=authorization_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