收藏
回答

web-view的jssdk如何引入vue项目及使用?

大家好,我遇到个难题,由于当前的H5页面是通过uni的HBuilderX 工具把小程序的项目导出为H5页面,目前是想做个功能,从另外一个小程序的webview 来访问 这个H5页面,页面中有个分享按钮,当用户点击的时候要把当前的H5页面的链接分享到用户的微信朋友,目前遇到的难题就是 看到官方的webview 的说明文档,也没介绍怎么在Vue里配置和使用jssdk,h5与小程序的通信案例,希望各位大佬帮助一下,感谢

回答关注问题邀请回答
收藏

6 个回答

  • 晚年的猫
    晚年的猫
    2021-11-08

    有个webview使用的jssdk的npm包:

    npm install weixin-webview-jssdk
    
    ------------------------------
    
    import wx from "weixin-webview-jssdk";
    
    // ...
        wx.miniProgram.navigateTo(...)
    // ...
    
    2021-11-08
    有用 1
    回复 1
    • 晚年的猫
      晚年的猫
      2021-11-08
      不需要任何配置
      2021-11-08
      回复
  • 慕、
    慕、
    2022-12-12

    楼主,你解决了吗?咋解决的?我也遇到了同样的问题, 微信的sdk好像没有npm 包让在vue组件中使用呢!

    2022-12-12
    有用
    回复
  • 俊杰Hiro
    俊杰Hiro
    2021-03-24

    看你的描述,你的核心诉求应该是如何在小程序webview中实现:通过触发H5中按钮把当前H5页面分享对吧?这个目前是无法实现的。只能通过小程序右上角的分享。

    然后再提供一个H5自定义分享的思路给您:首先jssdk跟用不用vue没有关联,然后可以利用jssdk里的postmessage实现与小程序的通讯。小程序端通过监听接收数据,就可以动态更改分享信息了。

    2021-03-24
    有用
    回复 3
    • 郑先森
      郑先森
      2021-03-24
      感谢大佬回复,我现在就是卡在这里呢,就是在当前的 vue 组建里 使用jssdk的wx.miniProgram.postMessage({});方法给小程序通信,没收到消息呢,我也同时注意到了官方说的(向小程序发送消息,会在特定时机(小程序后退、组件销毁、分享)触发组件的message事件),我回退了也没收到,好奇怪
      2021-03-24
      回复
    • 郑先森
      郑先森
      2021-03-24
      我现在应该是卡在h5与webview的通信上面了,因为在当前Vue页面上点击h5的按钮,使用wx.miniProgram.postMessage({}); 方式向小程序发送消息,半天没有接收到呢,我也尝试后退也是没有效果呢
      2021-03-24
      回复
    • 俊杰Hiro
      俊杰Hiro
      2021-03-25回复郑先森
      排查问题建议先用最小模型,就是直接把post逻辑执行,而不要任何判断等逻辑,然后在小程序点分享后打日志看看,不用等半天的,bindmessage触发了有就有没有则没有。
      2021-03-25
      回复
  • จุ๊บ
    จุ๊บ
    2021-03-24

    web-view 支持的 JSSDK 接口只有文档这些

    https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

    2021-03-24
    有用
    回复 2
  • 郑先森
    郑先森
    2021-03-24

    感谢回复,不对呀,大佬,我这个是微信小程序的webview ,不是微信公众号呢,我看它也没说要配置些什么呢

    2021-03-24
    有用
    回复 8
    • 有棱角的胖子
      有棱角的胖子
      2021-03-24
      webview里的H5不能用jssdk的分享接口,只能用小程序右上角的分享
      2021-03-24
      回复
    • 郑先森
      郑先森
      2021-03-24回复有棱角的胖子
      感谢大佬回复,但是那也不对啊,它的文档里说 h5网页可以向 小程序的webview通信呢,我就是困在这里了,点击 h5的分享按钮,然后向小程序的webview通信,在调用 小程序的分享的API,这个功能无法实现吗?
      2021-03-24
      回复
    • 郑先森
      郑先森
      2021-03-24回复有棱角的胖子
      感谢大佬回复,我只是想在h5的页面 使用 微信jssdk 里的wx.miniProgram.postMessage({}); 函数向小程序发送消息,但是半天没有响应,不知道是这个 jssdk 没有引用成功(我引用的方式不对)还是 其它的问题
      2021-03-24
      回复
    • 有棱角的胖子
      有棱角的胖子
      2021-03-24回复郑先森
      特定时机,你试一下postMessage调用后再用小程序右上角的分享,看能不能进bindmessage方法,或者发一下代码片段看看
      2021-03-24
      回复
    • 郑先森
      郑先森
      2021-03-24回复有棱角的胖子
      import wx from "weixin-js-sdk"; // 当前页面引入jssdk


      goMessage() { // h5页面按钮点击函数
          wx.miniProgram.getEnv(function(res) {
           if (res.miniprogram) {
            //如果当前是小程序环境
            wx.miniProgram.postMessage({
             data: {
              data: "HelloWorld";
             }
            })
           }
          })
          }


      bindmessage="getMsg"" // 小程序 webview 组件监听
      getMsg(event){ // 消息函数
           console.log(`接受消息`,event);
        },
      2021-03-24
      回复
    查看更多(3)
  • 有棱角的胖子
    有棱角的胖子
    2021-03-24

    百度一搜一大堆https://www.jianshu.com/p/6eb334fd8730

    2021-03-24
    有用
    回复
登录 后发表内容
问题标签