微信小程序打开内嵌 H5 界面碰到的问题

微信小程序

字数统计: 513阅读时长: 1 min

 2019/07/05   Share

最近项目提了个需求：在微信小程序中打开外部 H5 界面

遂翻了下官方文档官方文档给出可使用 web-view 作为承载网页的容器并会自动铺满整个小程序页面

每个页面只能有一个 web-view，web-view 会自动铺满整个页面，并覆盖其他组件

但是个人类型的小程序不支持使用

打开内嵌H5界面

具体使用方法：

1
2
3

<!-- openNewW.wxml -->

<web-view src='{{href}}'></web-view>

src 属性：webview 指向网页的链接可打开关联的公众号的文章其它网页需登录小程序管理后台配置业务域名

关于其他网页要在后台配置业务域名得要自己公司的域名才行因为配置业务域名时需要下载一个校验文件需要放在对应域名下的根目录下才能生效

之前需要打开第三方的 H5 界面想了一个办法在公司域名下写个 HTML 文件里面利用 iframe 嵌入这个第三方界面后面发现还是打不开后面仔细翻了下文档找到如下的tip：

网页内 iframe 的域名也需要配置到域名白名单

后面就只能用关联的公众号的文章相对来说更加简单些

转发后打开内嵌H5界面

打开是没问题了的后面分享之后发现点开竟然是空白一片 [○･｀Д´･ ○]

解决：

H5界面分享进来需要小程序分享界面所在的地址链接 + H5的地址链接才能正常显示

具体代码实现：

小程序分享界面所在链接：pages/onlook/openNewW/openNewW
H5链接：{this.data.href}

// openNewW.js

onShareAppMessage: function() {

    let path = `pages/onlook/openNewW/openNewW?href=${this.data.href}`;

    return {
      path: path,
      success: function(res) {
       // 转发成功
      },
      fail: function(res) {
        // 转发失败
      }
    }

  }

参考文档：

https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

Next Post

VsCode 搭建 flutter 环境
Previous Post

hexo 搭建个人博客

CATALOG

1. 打开内嵌H5界面
2. 转发后打开内嵌H5界面



缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是archer根目录）执行以下命令：
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置：

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: true
    tags: true

微信小程序 打开内嵌 H5 界面碰到的问题

打开内嵌H5界面

转发后打开内嵌H5界面

微信小程序打开内嵌 H5 界面碰到的问题