站点与小程序相关联 第1篇
写入启动页
启动页的webview地址，src则是注意事项中h5发布的域名以及他访问的入口文件位置
在HBuilderX中 工具->设置->运行设置中配置 微信开发者工具 的安装地址。
微信开发者工具中 设置->安全设置 打开服务端口：
然后在微信开发者工具下会生成项目对应的js文件并可以调试了，界面会在开发者工具中展示出来。
微信开发者工具中调式没有问题，就可以发布版本到小程序公众平台了。
Webview嵌入H5的小程序不支持原有H5的微信支付，需要改造，具体改造地方在：
设置 appSecret小程序秘钥，后面获取用户code的接口需要用到
配置服务器域名 为H5站点域名及相关域名解析地址 (正式发布后需要用到，开发与体验版调试时，因为不校验域名，不会有问题，不配置的话会在正式发布后唤起失败无反应)
这里需要小程序的appid和密钥。
这样做的目的，是不绑定微信用户登录，也可以支付。
注意，不要在HBuilderX中新建再运行到微信开发者工具，不然会覆盖原有代码。
我这里是直接在中onload方法中先获取从H5页面跳转传过来的参数，再调用获取用户临时code，然后通过用该code调用H5统一下单接口以及签名等操作(原H5会有的)。成功后返回5个后续用到的相关参数值，然后调用去请求小程序支付。支付成功后，可以跳转到对应的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 = ''+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];
//通过方法使index的webview 重新加载url 有点类似于后台刷新页面
//此处有点类似小程序通过加载URL的方式回调通知后端 该订单支付成功。后端逻辑不做赘述。
if (bustype=='xxxx'){
('跳转到vreturn');
wx.redirectTo({ url: '/pages/pay/vreturn?order_id='+order_id }); //定义的支付返回页面
}else{
wx.redirectTo({ url: '/pages/pay/return?order_id='+order_id });//定义的支付返回页面
}
({ url: '/pages/order/list' });
//小程序主动返回到上一个页面。即从wxpay page到index page。此时index page的webview已经重新加载了url 了
//微信小程序的page 也有栈的概念navigateBack 相当于页面出栈的操作
();
},
'fail': function (res) {
console.log(_支付失败或取消支付:errMsg=_+res.errMsg);
(res);
var pages = getCurrentPages();
var currPage = pages[pages.length - 1];
var prevPage = pages[pages.length - 2];
(_准备修改数据_);
({ url: '/pages/index/index' });
if (bustype=='xxxx'){
();
wx.redirectTo({ url: '/pages/pay/vreturn?order_id='+order_id });//定义的支付返回页面
}
else{
wx.redirectTo({ url: '/pages/pay/return?order_id='+order_id });//定义的支付返回页面
}
(_准备结束页面_)
// ();
}
})
}
else{
console.log('获取支付参数失败:status='+res.data.status+'msg='+res.data.msg);
}
},
'fail': function (res) {
console.log('获取支付参数请求失败:msg=' + res.data);
}
})
} else {
console.log('登录失败！' + res.errMsg)
}
}
})
},
前端页面需要加载微信插件
调用方法
前端判断是否在小程序环境中
Webview的Src url变量
页面加载方法中setdata 跳转url和传参
小程序中新建页面后，需要配置页面
前面发给微信的数据签名是小程序appid，签名验证时别忘了也同样用小程序的appid。
可模拟器上调试，可真机调试，真机调试时，会生成开发版，扫码后在手机上测试运行结果
模拟运行和真机调试时，应勾选 不校验合法域名 选项。
小程序订单中心如何配置？
需要配置一个小程序的页面path，该页面对应h5的订单中心地址
配置时则输入自己定义的小程序的页面路径 /pages/order/list
站点与小程序相关联 第2篇
智能小程序关联H5站点的前提条件是，智能小程序和H5站点所属主体一致。
（1）站点的主体信息查询：
登陆“去关联”跟随操作完成主体关联。
△注意：百度账号注册主体后暂不支持变更，站点可更改关联的主体，限7天更改1次。
（2）智能小程序的主体信息查询：
登陆H5资源替换】—【关联H5站点】，在页面内可以看到关联的主体信息。
（3）主体一致，关联H5站点
如果H5站点和智能小程序的主体一致，那么在智能小程序开发者平台选择关联H5站点时，系统会展示主体内全部站点，开发者可自己选择要将哪些站点关联到智能小程序。
△注意：单个智能小程序仅可关联单个主域下的站点，如。
如果H5站点和智能小程序主体不一致，目前推荐将站点的主体变更到与智能小程序一致。即：
（1）登陆
（2）在站点基础信息中，解除站点与现在关联的主体，重新关联到与智能小程序相同的主体。
站点与小程序相关联 第3篇
我是小程序小白，之前对小程序毫无概念，最近想把自己的H5站点发布成小程序，各种资料搜索，实践总结如下：
在小程序公众平台中 开发 开发管理 开发设置中配置业务域名为H5站点域名
并且下载校验文件放到H5站点根目录。
使用HBuilder创建一个最简单的uniapp项目，vue版本，2，3都可以