分享好友 教程首页 教程搜索 频道列表

DESTOON微信小程序,实现网页分享打开分享页

2020-02-06 00:5020870
+关注2
核心提示:自从微信小程序支持内嵌网页之后,呼声高涨得不得了。的确,这个确实让我开发我们...
自从微信小程序支持内嵌网页之后,呼声高涨得不得了。的确,这个确实让我开发我们公司的小程序高效了很多,主要是可以引入现有的功能完整的普通网页。

需求是这样子的:小程序启动授权等操作成功后直接跳转到内嵌网页,内嵌的网址也就是公司的官网产品项目,而后,产品项目里面的各个网页都能支持分享操作,当然,对方打开的一定是你分享的那个页面而不是整个小程序初始页面。

解决思路:官方提供的转发接口 onShareAppMessage 中自定义路径即可转发指定的页面。使用 web-view 存放内嵌网页,路径以参数的形式传递,但初始化加载页面的时候再填充路径。



<web-view src="web_src"></web-view>


一开始是想着既然内嵌网页的路径可以动态添加,那我转发时再重新跳转回内嵌网页,附上我转发的这个地址就好了,但是,但是,打开转发了的页面时,竟然提示找不到路径,可谓愁死人了。控制台打印检查发现,onShareAppMessage(options) 中 options 携带了一个参数 webViewUrl,即当前转发的文件的路径,在转发成功之后,通过


this.setData({
    web_src: options.webViewUrl
})


赋值后,打开的转发页面依旧提示找不到页面。经仔细研究 onShareAppMessage 接口中各个值的含义和功能后,得出以下结论


onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123',
      success: function(res) {
        // 转发成功
      },
      fail: function(res) {
        // 转发失败
      }
    }
  }


个人对这个 path 的理解是这样子的,微信小程序接口里面的path,是不是 指代微信小程序里跳转到其他页面的路径,如果一个内嵌路径无法实现转载操作页面和分享页面,那我就分开好了,再加一个内嵌路径来专门存放转发的结果。果不其然,这样子一处理,还真能实现了需求,话不多说,上代码:

步骤1:准备工作,在 app.js里 定义一个全局变量,用于存放 内嵌网页的地址,如,


globaldata: {
    userInfo: null,
    ctxPath: 'https://xxxxxx', //你的封装网址
}


步骤2:使用 web-view 加载内嵌网页


<web-view src="{{web_src}}"></web-view>


对应的事件为:


//生命周期函数--监听页面加载
onLoad: function (options) {  //初始化页面的时候加载补充内嵌网页的路径
    let that = this;
    that.setData({
        web_src: ctxPath  
    })
  },


备注:因为内嵌网页网址之前存放成全局变量在app.js里,故我们要先引入全局变量


var app = getApp();
var ctxPath = app.globalData.ctxPath;  //内嵌网页的路径
分享操作实现:
onShareAppMessage: function (options) {
      let that = this
      let return_url = options.webViewUrl        //分享的当前页面的路径
      var path = 'pages/sharepage/sharepage?shareUrl=' + return_url   //小程序存放分享页面的内嵌网页路径
      console.log(path, options)
      return {
          title: '内嵌网页分享',
          path: path,
          success: function (res) {
              // 转发成功
              wx.showToast({
                  title: "转发成功",
                  icon: 'success',
                  duration: 2000
              })
          },
          fail: function (res) {
              // 转发失败
          }
      }
  },


步骤3:定义存放分享页面的内嵌网页路径,即 sharepage.wxml,附上如下代码:


<web-view src="{{share_src}}"></web-view>    //share_src:分享后的路径


定义事件:


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


打开分享的页面时获取之前分享操作时传递的参数,即路径,并在打开分享的初始化函数中填充路径值options.shareUrl ,

同样,倘若想要在打开分享的页面中进行分享操作的话,然后需要补充分享事件,只是这次跳转的路径指向本身,

并且分享成功时将分享时的路径再次赋值给share_src,


onShareAppMessage(options) {
        var that = this
        var return_url = options.webViewUrl
        var path = 'pages/sharepage/sharepage?shareUrl=' + return_url   //分享成功后跳转回本页面
        console.log(path, options)
        return {
            title: '内嵌网页分享',
            path: path,
            success: function (res) {
                // 转发成功
                wx.showToast({
                    title: "转发成功",
                    icon: 'success',
                    duration: 2000
                })
                that.setData({              
                    share_src: return_url    //再次赋值分享内嵌网页的路径
                }) 
            },
            fail: function (res) {
                // 转发失败
            }
        }
    },


至此,小程序内嵌网页的分享就完成了。

总结:当本页面执行操作受阻了,不妨添加个页面时候,也许就会有不一样的收获。


如果看不懂就去 Github微信小程序内嵌网页分享项目地址:https://github.com/sennyla/WebchatShare.git



本文标签: #微信 #小程序 #分享 #封装
整理员:网络
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

微信公众号后台基本配置点击保存总是提示请求url超时,监测网络包发现微信并没有将请求提交到服务后台?

    遇到这个问题,检查一下服务器的防火墙,防火墙误把腾讯进来的IP识别成国外IP,导致调不通,在服务器上关闭防火墙即可

小黑 随手记2023-12-17

修复DESTOON9.0微信扫码和支付宝扫码付款页面空白的问题

    函数有错误,导致后台填写了扫码付款通知手机或者邮箱发生页面空白

小黑 开发技术2023-11-03

关于规范公众号模板消息的再次公告

    根据用户的反馈与建议,同时为了给予开发者更充裕的时间,平台现对原计划3月30日生效的模板消息内容规范措施(详情见《关于规范公众号模板消息的公告》)进行调整。2023年5月4日1)去除自定义颜色、表情符号;(表情

小黑 开发技术 12023-05-19

DESTOON9.0以下的版本如何修复电脑版微信小程序跳转到电脑版

    按照9.0的代码去修改

小黑 destoon程序2023-04-13

下一篇
我来说两句
抢沙发