• 小程序中嵌套的h5页面设置分享转发


    场景描述:当在小程序中打开h5页面时,希望小程序的转发出去的标题,图片,跳转link可以通过h5通信实现自定义。

    实现方式:通过h5给小程序通信,发送标题,图片,跳转link等信息,让小程序设置分享。

    1. h5发送给小程序通信代码
      引用微信js1.3.2以上才支持,<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
      判断h5是在小程序环境中打开代码:
        //判断是否是小程序环境
          function doMiniProgram(callback) {
              try {
                  //小程序环境设置分享
                  var ua = window.navigator.userAgent.toLowerCase();
                  //判断是否是微信环境
                  if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                      //微信环境
                      wx.miniProgram.getEnv(function (res) {
                          if (res.miniprogram) {
                              callback();
                          }
                      })
                  }
              }
              catch (ex) {
                  console.log(ex);
              }
          }

      给小程序发送数据设置小程序分享:

      //设置小程序分享
          function setMiniProgramShare(shareTitle, imageUrl, shareUrl) {
              try {
                  doMiniProgram(function () {
                      // 小程序环境下逻辑
                      wx.miniProgram.postMessage({ data: { title: shareTitle, path: shareUrl, imageUrl: imageUrl } })
                  });
              }
              catch (ex) {
                 console.log(ex);
             }
          }
    2. 小程序接收&处理逻辑
      h5页面: <web-view src="{{url}}" bindmessage="message"/>
      js逻辑:
      Page({
        data: {shareData:{}},
        onShareAppMessage(options) {
          return this.shareData
        },
        message (e) {
          var that = this
          console.log(e)
          that.shareData = e.detail.data[0]
        }
      })
  • 相关阅读:
    vue typescript 父子组件间值的传递
    flex 布局列表自动换行
    css文字两端对齐
    webstorm windows 常用快捷键
    vue elmentUi el-scrollbar 美化滚动条样式
    简述在Vue脚手架中,组件以及父子组件(非父子组件)之间的传值
    简述Vue的实例属性、实例方法
    Js基本类型中常用的方法总结
    简述Vue中的过滤器
    简述Vue中的计算属性
  • 原文地址:https://www.cnblogs.com/codeon/p/11510345.html
Copyright © 2020-2023  润新知