浅谈小程序内嵌网页及内嵌网页跳转分享实现
上个月，小程序开发内嵌web页面的功能，这个对于很多微信开发者都是个重大消息。最近两天，笔者项目中有这样一个需求，支持小程序内嵌网页，并且在内嵌网页中多次跳转，分享后，点开还是在跳转之后的网页。对于这样一个新技术，还是充满好奇，既然老大说了要做，那就尝试去做呗。
首先，当然是参考微信小程序的api。
<web-view src="https://mp.weixin.qq.com/"></web-view>
其实使用起来特别简单，只需在页面中放入这样一个标签即可，其中src一定是要在小程序管理中心配置过的。特别注意一下，web-view会占满整个页面，不管这个页面有什么其它的东西，都不会展示出来。
好了。有了这个可以开始进入需求实现的阶段了。对于分享功能，做过小程序开发的都不会陌生，在需要被分享的页面js中加入onShareAppMessage这样一个事件即可。
在 Page 中定义 onShareAppMessage 函数，设置该页面的转发信息。
只有定义了此事件处理函数，右上角菜单才会显示 “转发” 按钮
用户点击转发按钮的时候会调用
此事件需要 return 一个 Object，用于自定义转发内容
示例代码如下：
Page({
onShareAppMessage: function (res) {
if (res.from === 'button') {
// 来自页面内转发按钮
console.log(res.target)
}
return {
title: '自定义转发标题',
path: '/page/user?id=123',
success: function(res) {
// 转发成功
},
fail: function(res) {
// 转发失败
}
}
}
})
但是存在web-view时，onShareAppMessage回调函数参数res中还会多一个webViewUrl
Page({
onShareAppMessage(options) {
console.log(options.webViewUrl)
}
})
看了这么多api，心里也有数了，就开始愉快的撸代码了。很快，内嵌网页分享的功能就是实现出来了。
onShareAppMessage(options) {
var that = this
var return_url = options.webViewUrl
return {
title: that.data.title,
path: return_url,
success: function (res) {
that.web_url = return_url
// 转发成功
wx.showToast({
title: "转发成功",
icon: 'success',
duration: 2000
})
},
fail: function (res) {
// 转发失败
}
}
},
就在感叹自己是多么牛x，一下子就搞出来的时候，发现离需求还差一点。需要实现内嵌网页内多次跳转分享的功能，这就需要自己想办法了。在小程序分享中又不能保持状态，这个得去记录分享时网页的路径。其实有点开发经验的都能想到这个办法，那就是使用？在url后记录下来，这样在其它用户打开转发小程序的时候，取出其中的参数，将web-view中的src替换成这个就行了。话不多说，直接上代码。
Page({
web_url:"",
data: {
title: '测试内嵌分享',
url:'',
web_src:''
},
onShareAppMessage(options) {
var that = this
var return_url = options.webViewUrl
var path = '/page/test/test?return_url=' + encodeURIComponent(return_url)
console.log(path, options)
return {
title: that.data.title,
path: path,
success: function (res) {
that.web_url = return_url
// 转发成功
wx.showToast({
title: "转发成功",
icon: 'success',
duration: 2000
})
},
fail: function (res) {
// 转发失败
}
}
},
onLoad: function () {
var pages=getCurrentPages();
var currentPage = pages[pages.length - 1];
var web_src = decodeURIComponent(currentPage.options.return_url ||
encodeURIComponent("你的内嵌网页网址"))
this.web_url = web_src
this.setData({
web_src: web_src
}, function () {
});
}
})
写到这里，终于大功告成了。
但是！！！
测试出问题了！！！分享后跳不到想要的页面！！！
找了n小时的bug，也看不出上面代码思路和实现有何问题。由于此项技术也刚发布不久，市面上几乎没有可以参考的文章，只能自己硬着头皮找。
找啊找，终于在今天早上找到了这个坑。
由于内嵌网页是单页面应用，在手机上测试的时候webViewUrl的获取每次都会出现问题，只有换成一般的多页面应用，这个问题才不会发现。
也不知道这是不是个微信的bug，总之需求实现了，还是很开心的。
觉得笔者写得不错，可以点个赞哒！！！
如果此文中有不对的地方，欢迎大家指正交流！！！
本文作者：肖呵呵
原文地址：浅谈小程序内嵌网页及内嵌网页跳转分享实现-教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟
