评论

小程序与网页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接口列表
});



最后一次编辑于  2024-07-15  
点赞 0
收藏
评论

2 个评论

  • 💤
    💤
    03-19

    你好,我想问一下我走公众号那一套,然后在h5里调用jssdk api 定位、扫码等等,然后再将h5嵌入到taro的webview中转成小程序,这个方案可行吗

    03-19
    赞同
    回复
  • 刻奇
    刻奇
    2024-11-30

    可以用微信小程序的相机组件来实现吗

    2024-11-30
    赞同
    回复 1
    • 同步
      同步
      2024-12-04
      不跟网页H5交互还是可以的哇,如果要交互,你试试效果能不能接受了
      2024-12-04
      回复
登录 后发表内容