微信小程序内嵌网页链接

微信小程序和浏览器的环境不同,微信小程序中的所有外部连接都必须部署业务域名成功后才能实现跳转访问

不管是a标签的超链接,还是iframe等等都需要在微信公众平台部署业务域名才可访问

若是内嵌微信公众号文章的话则不需要部署,但需要关联微信公众号

需要提前注意几点:
1.个人和海外类型的小程序暂不支持使用!
2.使用微信官方组件web-view,此组件会覆盖页面中所有其他组件,铺满整个小程序页面,除了小程序原生的tabbar
3.部署业务域名时要求使用的是https
4.部署业务域名时要求业务域名需经过ICP备案,若是海外域名则无法部署
使用微信官方组件web-view:

下面来介绍具体步骤:

内嵌公众号文章

要求:公众号文章需与小程序需关联

1.关联公众号

2.使用web-view嵌入公众号文章

< !-- html --><!-- 指向关联的公众号文章的地址 -->
<web-view src="https://XXXXXXXXXXXX/"></web-view>

内嵌外部网页

1.下载部署校验文件

登陆微信开放平台小程序页面,在“业务域名”中添加,如下图 :

在此下载校验文件,并将校验文件放入指定位置:

1.业务域名需经过ICP备案,新备案域名需24小时后才可配置。域名格式只支持英文大小写字母、数字及“- ”,不支持IP地址。配置业务域名后,可打开任意合法的子域名。
2.将文件放置在域名根目录下,例如wx.qq.com,并确保可以访问该文件。
例如如果想保存的业务为https://test.com/,下载下来的校验文件为AbC.txt,则需要确保https://test.com/AbC.txt能够访问。

2.添加业务域名

校验文件部署成功后在此添加业务域名

注意几点:

1.业务域名是不需要加前面的https://的
2.业务域名须填写根域名,例如:如果下载下来的校验文件为AbC.txt,并且https://test.com/AbC.txt能够访问 那么只需填写test.com


目前不少开发者在设置业务域名时,发现检查校验文件失败,可先按照如下步骤进行自查:

1.业务域名需经过ICP备案,新备案域名需24小时后才可配置。域名格式只支持英文大小写字母、数字及“- ”,不支持IP地址。配置业务域名后,可打开任意合法的子域名。
2.将文件放置在域名根目录下,例如wx.qq.com,并确保可以访问该文件。
例如如果想保存的业务为https://test.com/,下载下来的校验文件为AbC.txt,则需要确保https://test.com/AbC.txt能够访问。
3.校验文件内容错误。校验文件内容一般是非HTML数据,如果下载下来的校验文件内容为HTML数据,一般为登录态过期。请重新登录小程序下载校验文件。
4.使用4G网络尝试访问链接,确认自身服务器没有拦截请求(常见于设置了白名单或者防火墙的服务器,需开发者自行确认下)
5.https证书过期。请确保https证书处于有效期内。
6.使用curl 测试链接,确保curl能够正常访问链接,且curl出来的内容为校验文件内容。
7.使用time curl https://test.com/abc.txt查看链接时间,建议耗时在1s之内。
8.请确保url中的文件名与下载下来的文件名大小写一致。如下载的文件是AbC.txt,确保url是https://test.com/AbC.txt,不能是https://test.com/abc.txt
9.部分用户的服务器配置较陈旧,安全性差(如配置 768位 的 DH),为了保证通信安全,微信后台不支持,请更新服务器配置。
(1)通过https://cloud.tencent.com/product/tools#userDefined12,检测网址是否支持TLS1.2。
(2)可通过工具 https://www.ssllabs.com/ssltest/analyze.html 检查自己的服务器,对该工具标红的各项漏洞逐项修补,建议更新配置直到该工具打分为 C及以上 。
10. 如上述检查都没有问题,请重新下载校验文件重试,确保上传到服务器的文件内容与新下载的文件内容一致。

3.使用web-view嵌入外部链接

<!-- html -->
<!-- 指向嵌入外部链接的地址 -->
<web-view src="https://XXXXXXXXXXXX/"></web-view>

关闭校验

最后,如果想暂时预览效果,可在开发者工具中设置关闭校验

微信小程序内嵌网页链接相关推荐

  1. 微信小程序嵌套iframe_微信小程序内嵌网页web-view

    web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面.个人类型与海外类型的小程序暂不支持使用. 客户端 6.7.2 版本开始,navigationStyle: custom 对 ...

  2. 微信小程序内嵌H5网页

    微信小程序内嵌网页 1.登录微信公众平台,选择对应的小程序进入(个人类型的小程序暂不支持使用) 2.在小程序后台左侧菜单选择"开发"–"开发管理"–" ...

  3. 微信小程序内嵌webview实现微信登录

    一.调研场景 1, 微信小程序内嵌webview实现微信登录 二.技术实现 1. web-view标签实现链接内嵌 小程序里嵌套web-view页面 (1)src属性:webview 指向网页的链接. ...

  4. 小程序嵌套h5页面_快速小程序开发之微信小程序内嵌 H5

    简介:微信小程序中可以直接运行 web 页面,这一新组件 web-view 的产生,可能直接导致小程序数量迎来一波高峰.本篇博文将从业务选型,微信小程序后台配置,使用 web-view 完成登录业务以 ...

  5. 微信小程序内嵌H5页面实现微信支付

    背景: 在微信H5页面已经实现了微信JSAPI的网页支付,老板要求把整个业务线快速转移到微信小程序中,作为懒惰的程序员来说,直接把页面嵌套到小程序不就行了.说干就干,在小程序中设置好基本信息后,一预览 ...

  6. 微信小程序调试webview_微信小程序内嵌webview相关知识点整理

    前言 随着微信小程序的广泛应用,越来越多的商家选择将营销阵营选择迁移到了小程序中,但受其小程序体积限制的影响,不能够完全满足商户的要求,应运而生的web-view组件很好的解决的这一问题.一方面内嵌w ...

  7. 微信小程序内嵌h5页面或者跳转至外部链接,及在webview页面添加元素

    方法很简单,只需要在wxml里写上 <web-view src="http://www.baidu.com"> //在webview里面添加元素要使用cover-vie ...

  8. 小程序嵌套h5页面_微信小程序内嵌h5页面

    概况 使用 标签能在小程序中打开外部网页,但是要打开的网页的域名必须跟小程序的业务域名(业务域名可以在小程序的后台管理界面添加)一致,否则在真机上是打不开的.如果开发工具上勾选了'不校验域名',在开发 ...

  9. 微信小程序内嵌套网页(webview)

    如何使用呢? 首先设置权限,要在小程序中访问外部的网页,需要先设置允许访问的业务网站的域名,登录小程序平台管理后台页面,进入"设置"->开发设置: " 点击开始配置 ...

  10. 关于微信小程序内嵌的H5页面阿里云点播视频获取视频播放凭证

    后端 Spring Boot 微服务开发 下载  aliyun-java-vod-upload-1.4.14.jar 注意 :aliyun-java-vod-upload-1.4.14.jar  还未 ...

最新文章

  1. jquery 获取Select option 选择的Text和Value
  2. 想法2: 充电性冰袋
  3. 面试官问:如果MySQL的自增 ID 用完了,怎么办?
  4. 3.5.1 插入 3.5.2 修改
  5. POJ1942-Paths on a Grid
  6. 静态static关键字修饰成员方法
  7. Linux : shell基础(慕课网Linux达人养成计划课程笔记)
  8. 女程序员口述:我活最好,年薪35万!
  9. PRML-系列一之1.2.1
  10. 转:漫画 我讨厌阅读别人的代码
  11. C++11 static_assert
  12. Symbian编程总结-基础篇-活动对象正解(1)-理解活动对象
  13. xs资料网-jdpaint编程图档下载_限时下载 | 西门子、三菱、欧姆龙PLC电气设计与编程自学宝典(3册)...
  14. IOS下,利用捏合手势实现图像缩放和显示
  15. 在3D城市模型中添加不同的纹理
  16. 2022年中国手机市场销量vivo第1,小米滑落至第5
  17. 嵌入式开发——程序跑飞原因总结
  18. 本地Windows MIMIC III数据入库
  19. AI在实体零售行业的应用场景
  20. java数据库model,牛刀杀鸡的java数据库生成model小工具

热门文章

  1. 艺不压身和艺多不养家
  2. 4.11交叉验证——K-fold和Stratified k-fold
  3. 论文学习——基于滑动窗口预测的水位时间序列异常检测
  4. 编写可移植 C/C++ 程序的一些要点
  5. spring retry, guava retrying 的整合-sisyphus java 重试
  6. JS实现关闭网页广告弹窗特效
  7. 有才!IT界惊现文豪!
  8. Linux下的C编程(一)你好 世界
  9. Messari:21年第二季度Web3及NFT报告
  10. 服务器搭建免流系统,国内服务器搭建免流