需求:小程序嵌入H5网页,H5网页需要用到扫码功能。
思路1:
1、小程序使用 web-view 组件打开 H5 网页,方法可查阅 https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html#Bug-Tip
2、H5 网页扫码界面,扫码按钮调用接口 wx.miniProgram.redirectTo 跳转到小程序 scanCode 界面
3、小程序 scanCode 的 onLoad 中调用小程序API wx.scanCode
// 只允许从相机扫码
wx.scanCode({
onlyFromCamera: true,
success(res) {
console.log(res)
let result = res.result;
wx.redirectTo({
url: `/pages/webView/webView?id=` + result
})
}
})
4、网页H5 通过 id 拿到 第三步获取的 id 数据,即为H5扫码通过小程序传递过来的数据,可以获取成功。
5、如上思路1,可参考代码片段:https://developers.weixin.qq.com/s/NMFRgHmr7OSX 。这种思路可以快速完成接口交互,纯前端独自可以完成。建议使用一些简单的交互运用上
思路2:
1、web-view 引入 JSSDK 的方式
2、wx.ready 方式,该方式需要对接公众号相关接口开发,引用后的运用场景可以更复杂化,但是一般需要后端支持
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的JS接口列表
});