微信小程序的web-view内嵌应用

在微信小程序中使用web-view可以实现内嵌打开外部链接。在公众号的业务域名配置需要外链的域名然后把校验的文件上传的域名的根目录底下进行验证。

在小程序的代码直接用上<web-view></web-view> 里有一个src的属性 这个就可以填写要跳转的域名。域名一定要是https

举个栗子 

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

 web-view这个组件是自动撑满整个屏幕的不能自己设置框高。使用起来特别方便。这样在小程序就可以跳外链 。

在做demo的时候遇到问题如果点击外链二级页面或三级页面分享后是直接打开web-view设置的页面。如果想记录分享时的网页路径的需要调用一个事件。

在有设置web-view的页面 在Page 中定义onShareAppMessage函数回调函数res中会多了一个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) {
          // 转发失败
        }
      }
    },

 

web-view也可以使用参数变量表示定义web_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 () {

        });

    }
})

看这篇文章的同学需要有了解过小程序才看得明白。之前小编是做过一些小程序开发。 今天做了一个web-view 需求记录一下 第一次写文章加油 我会好好努力在前端更进一步。