评论

小程序与网页H5数据交互的运用方案示例

小程序与网页H5数据交互的运用方案示例,快速实现,H5调用微信小程序扫码功能



需求:小程序嵌入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({
      onlyFromCameratrue,
      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接口列表
});



最后一次编辑于  07-15  
点赞 0
收藏
评论
登录 后发表内容