网站建设

了解最新公司动态及行业资讯

浅谈小程序内嵌网页及内嵌网页跳转分享实现

上个月,小程序开发内嵌web页面的功能,这个对于很多微信开发者都是个重大消息。最近两天,笔者项目中有这样一个需求,支持小程序内嵌网页,并且在内嵌网页中多次跳转,分享后,点开还是在跳转之后的网页。对于这样一个新技术,还是充满好奇,既然老大说了要做,那就尝试去做呗。

首先,当然是参考微信小程序的api。

<web-view src="https://mp.weixin.qq.com/"></web-view>

其实使用起来特别简单,只需在页面中放入这样一个标签即可,其中src一定是要在小程序管理中心配置过的。特别注意一下,web-view会占满整个页面,不管这个页面有什么其它的东西,都不会展示出来。

好了。有了这个可以开始进入需求实现的阶段了。对于分享功能,做过小程序开发的都不会陌生,在需要被分享的页面js中加入onShareAppMessage这样一个事件即可。

在 Page 中定义 onShareAppMessage 函数,设置该页面的转发信息。

只有定义了此事件处理函数,右上角菜单才会显示 “转发” 按钮

用户点击转发按钮的时候会调用

此事件需要 return 一个 Object,用于自定义转发内容

示例代码如下:

  1. Page({
  2. onShareAppMessage: function (res) {
  3. if (res.from === 'button') {
  4. // 来自页面内转发按钮
  5. console.log(res.target)
  6. }
  7. return {
  8. title: '自定义转发标题',
  9. path: '/page/user?id=123',
  10. success: function(res) {
  11. // 转发成功
  12. },
  13. fail: function(res) {
  14. // 转发失败
  15. }
  16. }
  17. }
  18. })


但是存在web-view时,onShareAppMessage回调函数参数res中还会多一个webViewUrl

  1. Page({
  2. onShareAppMessage(options) {
  3. console.log(options.webViewUrl)
  4. }
  5. })


看了这么多api,心里也有数了,就开始愉快的撸代码了。很快,内嵌网页分享的功能就是实现出来了。

  1. onShareAppMessage(options) {
  2. var that = this
  3. var return_url = options.webViewUrl
  4. return {
  5. title: that.data.title,
  6. path: return_url,
  7. success: function (res) {
  8. that.web_url = return_url
  9. // 转发成功
  10. wx.showToast({
  11. title: "转发成功",
  12. icon: 'success',
  13. duration: 2000
  14. })
  15. },
  16. fail: function (res) {
  17. // 转发失败
  18. }
  19. }
  20. },


就在感叹自己是多么牛x,一下子就搞出来的时候,发现离需求还差一点。需要实现内嵌网页内多次跳转分享的功能,这就需要自己想办法了。在小程序分享中又不能保持状态,这个得去记录分享时网页的路径。其实有点开发经验的都能想到这个办法,那就是使用?在url后记录下来,这样在其它用户打开转发小程序的时候,取出其中的参数,将web-view中的src替换成这个就行了。话不多说,直接上代码。

  1. Page({
  2. web_url:"",
  3. data: {
  4. title: '测试内嵌分享',
  5. url:'',
  6. web_src:''
  7. },
  8. onShareAppMessage(options) {
  9. var that = this
  10. var return_url = options.webViewUrl
  11. var path = '/page/test/test?return_url=' + encodeURIComponent(return_url)
  12. console.log(path, options)
  13. return {
  14. title: that.data.title,
  15. path: path,
  16. success: function (res) {
  17. that.web_url = return_url
  18. // 转发成功
  19. wx.showToast({
  20. title: "转发成功",
  21. icon: 'success',
  22. duration: 2000
  23. })
  24. },
  25. fail: function (res) {
  26. // 转发失败
  27. }
  28. }
  29. },
  30. onLoad: function () {
  31. var pages=getCurrentPages();
  32. var currentPage = pages[pages.length - 1];
  33. var web_src = decodeURIComponent(currentPage.options.return_url ||
  34. encodeURIComponent("你的内嵌网页网址"))
  35. this.web_url = web_src
  36. this.setData({
  37. web_src: web_src
  38. }, function () {
  39. });
  40. }
  41. })


写到这里,终于大功告成了。

但是!!!

测试出问题了!!!分享后跳不到想要的页面!!!

找了n小时的bug,也看不出上面代码思路和实现有何问题。由于此项技术也刚发布不久,市面上几乎没有可以参考的文章,只能自己硬着头皮找。

找啊找,终于在今天早上找到了这个坑。

由于内嵌网页是单页面应用,在手机上测试的时候webViewUrl的获取每次都会出现问题,只有换成一般的多页面应用,这个问题才不会发现。

也不知道这是不是个微信的bug,总之需求实现了,还是很开心的。

觉得笔者写得不错,可以点个赞哒!!!

如果此文中有不对的地方,欢迎大家指正交流!!!

Tags: