• 注册
    • 回帖总排行
    • 采纳总排行
    • 财富排行榜
    • 等级排行榜
  • learner
    We are the best gift for each other
    3002511金币
    关注
  • admintest
    We are the best gift for each other
    25金币
    关注
  • 讓歷史重演
    We are the best gift for each other
    2金币
    关注
  • 冰冷
    We are the best gift for each other
    2金币
    关注
  • 扬子江
    We are the best gift for each other
    2金币
    关注
  • 空白格‭
    We are the best gift for each other
    2金币
    关注
  • 相似的清风
    We are the best gift for each other
    2金币
    关注
  • 神经蛙
    We are the best gift for each other
    2金币
    关注
  • 高谈
    We are the best gift for each other
    2金币
    关注
  • 低调
    We are the best gift for each other
    2金币
    关注
  • learner
    We are the best gift for each other
    老铁/ 443 经验
    关注
  • admintest
    We are the best gift for each other
    小兵/ 7 经验
    关注
  • 讓歷史重演
    We are the best gift for each other
    小兵/ 0 经验
    关注
  • 冰冷
    We are the best gift for each other
    小兵/ 0 经验
    关注
  • 扬子江
    We are the best gift for each other
    小兵/ 0 经验
    关注
  • 空白格‭
    We are the best gift for each other
    小兵/ 0 经验
    关注
  • 相似的清风
    We are the best gift for each other
    小兵/ 0 经验
    关注
  • 神经蛙
    We are the best gift for each other
    小兵/ 0 经验
    关注
  • 高谈
    We are the best gift for each other
    小兵/ 0 经验
    关注
  • 低调
    We are the best gift for each other
    小兵/ 0 经验
    关注
  • 默认板块 关注:1 内容:12

    小程序webview页面分享后打开分享页面url并显示页面title和简介的方法

  • 查看作者
  • 打赏作者
  • 拉黑名单
    • 现在做小程序的用户越来越多,有时候用户需要电脑端、手机端、小程序端、3端内容同步的时候,我们往往通过小程序的webview标签来直接把移动端打包小程序是最方便快捷的。但是在使用小程序一些小的组件时会遇到一些问题。

      今天就来说说H5页面通过webview打包成小程序后,小程序页面分享出去后,别人打开仍然显示你分享时候的页面,并且显示分享页面title和简介的实现方法。

      首先我们用webview标签打包我们的移动网址,看下面wml代码;

      这里注意需要给web-view组件上绑定bindmessage事件。

      接下来看分享组件的使用,看下面js代码;

      Page({
      data: {
      url: ' https://www.12564.cn'   //h5地址
      },
      bindmessage(e) {                 //接收web-view传递的参数
      if (e.detail.data[e.detail.data – 1].title) {
      this.setData({                       //存储状态
      title: e.detail.data[0].title
      })
      }
      },

      //分享功能部分代码
      onLoad: function (options) {
      options.url ? this.setData({ url: decodeURIComponent(options.url) }) : this.setData({ url: options.url });
      },

      //获取网页标题  
      bindGetMsg: function (e) {
      this.data.shareObj = e.detail.data[e.detail.data.length – 1];
      },

      //分享并返回页面标题和链接  
      onShareAppMessage: function (options) {
      let shareObj = this.data.shareObj;
      if (shareObj) {
      return {
      title: shareObj.shareTitle,
      desc: shareObj.shareDesc,
      path: '/pages/index/index?url=' + encodeURIComponent(options.webViewUrl),
      }
      }
      },
      })

      到这里还没结束,我们还需要在你的html页面里面引入以下代码;
       

       <script type=”text/javascript” src=”https://res.wx.qq.com/open/js/jweixin-1.3.2.js”></script>

       <script type=”text/javascript”>

      var obj = {

      'shareDesc': '{$你的网站简介调用变量}',

      'shareTitle': '{$你的网站标题调用变量}'

      }

      wx.miniProgram.postMessage({

      data: obj

      })

      console.log(getUrlkey_(window.location.href))

      </script>

      你需要登录,才能进行发帖操作
    • 单栏布局 帖子间隔 侧栏位置: