火了 超赞的功能!小程序开发内嵌web页面的功能,今天学习了吗

小程序开发内嵌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

that.web_url = return_url // 转发成功

fail: function (res) { // 转发失败 } } },

需要实现内嵌网页内多次跳转分享的功能,这就需要自己想办法了。在小程序分享中又不能保持状态,这个得去记录分享时网页的路径。其实有点开发经验的都能想到这个办法,那就是使用?在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)

that.web_url = return_url // 转发成功

fail: function (res) { // 转发失败 } } },

onLoad: function () {

var pages=getCurrentPages();

var currentPage = pages[pages.length - 1];

this.setData({ web_src: web_src },

function () { }); } })

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

但是!!!

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

终于找到了这个坑。

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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171224A09OK300?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券