微信小程序设置web-view的业务域名

傷城~ 2021-09-17 07:50 354阅读 0赞

![标题图][1240]

> 微信小程序设置`web-view`的业务域名

![效果][1240 1]

> 域名必备

![效果][1240 2]

你的域名必须要备案过

你的域名必须是`https`，而不能是`http`

`web-view`

在小程序后台添加业务域名,只解析业务域名中的`url`网页地址的.

域名是需要ICP进行备案的.

![效果][1240 3]

用`ftp`上传文件验证域名的所有权

登录官方小程序后台,选择设置,选择开发设置,中间有个业务域名,添加业务域名后,小程序才能调用组件打开限定域名内的网页.

![效果][1240 4]

<web-view src="页面地址">名称（可省略）</web-view>

`web-view` 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>src</code></td> 
   <td><code>string</code></td> 
   <td><code>webview</code> 指向网页的链接</td> 
  </tr> 
  <tr> 
   <td><code>bindmessage</code></td> 
   <td><code>EventHandler</code></td> 
   <td><code>e.detail = { data }</code></td> 
  </tr> 
  <tr> 
   <td><code>bindload</code></td> 
   <td><code>EventHandler</code></td> 
   <td>网页加载成功时触发的事件</td> 
  </tr> 
  <tr> 
   <td><code>binderror</code></td> 
   <td><code>EventHandler</code></td> 
   <td>网页加载失败时触发的事件</td> 
  </tr> 
 </tbody> 
</table>

<web-view src="https://www.jianshu.com/u/c785ece603d1"></web-view>

![效果][1240 5]

> 内嵌网页(`webview`)-设置权限

![效果][1240 6]

点击“开始配置”按钮,弹出一个窗口,添加一个或多个你要在小程序中访问的域名.

并不是随便一个备案过的`https`就可以的,并不是所有域名都可以访问,有的是需要在这个窗口里下载“校验文件”,并把这个校验文件上传到你的网站的根目录，供小程序平台进行验证，只有通过了,才能添加域名成功(验证通过后才能配置成功)。

![效果][1240 7]

使用`web-view`组件显示`HTML`页面-外部页面

有的需要下载校检文件上传至服务器指定目录,进行保存.校验文件 `###.txt` 文件下载.上传到域名根目录.点击保存即可.还要注意的是新域名备案`24`小时后即可配置，域名不支持`IP`地址及端口号.

> 校验文件验证失败，请下载校验文件，上传到服务器指定的目录.

原因: `https`证书过期,校验文件内容错误,使用`url` 测试链接. -> “将文件放置在域名根目录下”, 注意: 基础裤`1.6.4`以上版本支持这个组件，低版本需要做兼容.

将文件放置在域名根目录下-> 网址参考

https://blog.csdn.net/m0_37852553/article/details/80368415

`web-view` 组件是一个可以用来承载网页的容器，会自动铺满整个页面,类似于`html`中的`iframe`框架.

小程序提供了`webview`网页中使用的`JSSDK`文件,网页跳转小程序:

// HTML
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
     
    // javascript
    wx.miniProgram.navigateTo({url: '/path/to/page'})

> 达叔小生：往后余生，唯独有你  
> You and me, we are family !  
> 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通  
> 简书博客： 达叔小生  
> [https://www.jianshu.com/u/c785ece603d1][https_www.jianshu.com_u_c785ece603d1]

## 结语 ##

*  下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
 *  小礼物走一走 or 点赞

[1240]: /images/20210724/8d974212f262486aa61e64e30c6b339e.png
[1240 1]: /images/20210724/a7075afbad714c809dad99e93a885d0f.png
[1240 2]: /images/20210724/35d0850ef75d49caad5af0b5bb94acae.png
[1240 3]: /images/20210724/c3376d4183aa4af6bf5fd6f665ffd5d2.png
[1240 4]: /images/20210724/186528b671be4db2a52103d101732d3c.png
[1240 5]: /images/20210724/4324bafac48b4d729ad6a0e2b4c8f51b.png
[1240 6]: /images/20210724/6f6aa207e3144ca0acc5be0a96986209.png
[1240 7]: /images/20210724/ba0a9099eeff4ea49eaeb244f569c0f7.png
[https_www.jianshu.com_u_c785ece603d1]: https://www.jianshu.com/u/c785ece603d1