如何在小程序里面放入企业官网

小程序解析html网页标签，有3种方法：
1：使用 wxParse 解析html
2：单独解析 html标签
3：使用最新的小程序组件 web-view

前段时间，微信正式宣布为方便开发者灵活配置小程序，小程序现开放内嵌 Web 页面能力，但这个开放的能力也具有一定的局限性，小程序如果想要内嵌网页，那域名只能是自己公司的，对这个网站拥有控制权才可以。

参考文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/web-view.html

在小程序里面放入企业官网的步骤

1：新建项目

图片.png

2：填写小程序appid和文件在磁盘的位置

图片.png

3：新建一个wxml
加入这段代码：<web-view src="http://www.intmote.com/"></web-view>

图片.png

问题：

小程序设置web-view业务域名，解决“不支持打开非业务域名，请重新配置”问题

原因：我用的是个人的小程序

如果：“ 个人类型与海外类型的小程序暂不支持使用。”
你需要先配置业务域名，但是个人类型的小程序，还不支持这个功能。

图片.png

踩坑完毕
现在开始登陆公司小程序，加入公司小程序appid，重复以上步骤，新建一个wxml
加入这段代码：<web-view src="http://www.intmote.com/"></web-view>

图片.png

无法打开是因为业务域名还没有配置，那么进入平台，开始配置业务域名。

在小程序官方后台设置web-view的业务域名

继续换了公司注册的服务号小程序进行测试
1：设置web-view域名前要做的准备

• 需要小程序管理员扫码验证
• 业务域名需要ICP备案
• ftp或者filezilla上传工具：小程序需要验证你业务域名的所有权，验证方法是，上传验证文件到你域名的根目录。

2： 设置web-view域名流程和方法

1） 登录小程序后台，依次选择‘设置/开发设置’

图片.png

2）在网页中间会看到‘业务域名’板块，小程序业务域名位置，点击‘开始配置’按钮

图片.png

3） 填写小程序业务域名

如果你有多个域名要添加，可以点击 + 号，我填写的是：公司官网：http://www.intmote.com

图片.png

4）填写好后，点击‘下载检验文件’

图片.png

5）然后通过filezilla 把下载的文件上传到前面填写的网站根目录

图片.png

图片.png

6）验证通过后，点击‘保存’按钮，即可完成业务域名配置

具体如下：

业务域名：www.inxxxxxte.com

校验文件名：pN76ECLf7Q.txt

校验文件已经放到域名根目录，且通过http://www.inxxote.com/pN76xxxxf7Q.txt可以访问到文件内容
http://www.intxxxote.com/pNxxECLf7Q.txt

图片.png

7）小程序业务域名添加成功

图片.png

8）引入官网之后的效果图

效果图

注意：

可能会出现以下这样的问题：保存时还是提示校验文件失败。

图片.png

可能原因

1.校验文件内容错误。校验文件内容一般是非HTML数据，如果下载下来的校验文件内容为HTML数据，一般为登录态过期。请重新登录小程序下载校验文件。

2.https证书过期。请确保https证书处于有效期内。

3.使用curl 测试链接，确保curl能够正常访问链接。

4.请确保url中的文件名与下载下来的文件名大小写一致。

如下载的文件是pN76ECLf7Q.txt，确保url是http://www.intmote.com/pN76ECLf7Q.txt，不能是http://www.intmote.com/pn76eclf7q.txt

自荐文章：

进阶攻略|前端最全的框架总结
web开发快速提高工作效率的一些资源
程序员如何利用空闲时间挣零花钱
几款在线脑图制作工具
一个前端妹子的悲欢编程之路
【程序员交友】祈澈姑娘：假装文艺与代码齐飞的前端妹子
进阶攻略|前端完整的学习路线

原文作者：祈澈姑娘
技术博客：https://www.jianshu.com/u/05f416aefbe1

90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家加入群聊，一起探讨交流。