小程序开发内嵌web页面的功能，这个对于很多微信开发者都是个重大消息。看到网上一些开发项目中有这样一个需求，支持小程序内嵌网页，并且在内嵌网页中多次跳转，分享后，点开还是在跳转之后的网页。
首先，当然是参考微信小程序的api。
其实使用起来特别简单，只需在页面中放入这样一个标签即可，其中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)
}
})
内嵌网页分享的功能的实现
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) {
// 转发失败
}
}
}，
需要实现内嵌网页内多次跳转分享的功能，这就需要自己想办法了。在小程序分享中又不能保持状态，这个得去记录分享时网页的路径。其实有点开发经验的都能想到这个办法，那就是使用url后记录下来，这样在其它用户打开转发小程序的时候，取出其中的参数，将web-view中的src替换成这个就行了。由于内嵌网页是单页面应用，在手机上测试的时候webViewUrl的获取每次都会出现问题，只有换成一般的多页面应用，如果不这么做分享后会出现跳不到想要页面的情况。
内嵌网页的开放也是为了方便开发者灵活配置小程序，web-view就是这样一个承载页面内容的组件，会自动铺满整个小程序页面，但目前个人类型与海外类型的小程序暂不支持使用。
推荐阅读：微信小程序开发支付步骤简述
参与讨论
发表评论