微信小程序内嵌网页实现分享功能

需求:小程序打开之后跳转到要跳转的地址 ,然后实现所跳转的地址中每个网页都可以分享出去,分享出去的网页打开不再是回到初始化页面,而是分享的页面!
微信提供分享API是一个叫做 onShareAppMessage(options) 的方法
然后管它什么三七二十一的直接ctrl+C 、ctrl+v把示例给拷贝过来,然后把path换成分享的地址!结果 很明显 预览时候提示找不到路径?!!

请注意文档中有一句很重要的话就是:path 必须是 / 开头的完整路径

所以就开始上网找资料,找到一个微信小程序,实现内嵌网页的分享的博客!!!
然后分析了一下总结出来一个思路:
①首先在add.js文件中定义一个全局变量,存放内嵌网页的地址

globalData:{
	userinfo: null,
	ctxPath: "https://xxx"
}

② 然后新建一个 名为sharepage的文件夹,然后里边也是有一个share.js文件、一个sharepage.json文件、一个sharepage.wxml文件、一个sharepage.wxss文件
③ 在index.js文件中

var ctxPath = app.globalData.ctxPath; //内嵌网页的路径
页面加载时,

 onLoad: function (options) {
    let that = this;
    that.setData({
      web_src: ctxPath
    })
  },

分享操作:

onShareAppMessage: function (options) {
    let that = this
    let return_url = options.webViewUrl
    var path = 'pages/sharepage/sharepage?shareUrl=' + encodeURIComponent(return_url)
    // console.log("indexindex", path, options)
    return {
      title: '自定义标题',
      path: path,
      success: function (res) {
        // 转发成功
        wx.showToast({
          title: "转发成功",
          icon: 'success',
          duration: 2000
        })
      },
      fail: function (res) {
        // 转发失败
      }
    }
  },

④ 然后再index.wxml文件中 加载内嵌网页
⑤ 在sharepage.wxml中附上代码
⑥ 在sharepage.js中,页面加载时

onLoad: function (options) {
    let that = this;
    that.setData({
      share_src: decodeURIComponent(options.shareUrl),
    })
  }, 
  

然后如果还想实现把分享出去的页面还可以分享
再在sharepage.js中附加一样的分享操作的代码!

这样就可以实现分享功能了。

不要忘了给sharepage配置路由哦!
该项目的gitHub地址:https://github.com/yuhaifeng6/wxxcx_share.git
如果觉得不错,带个星哦。谢谢!!

本文参考:https://blog.csdn.net/sennyla/article/details/80022187

你可能感兴趣的:(微信小程序)