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

域名必备

你的域名必须要备案过

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

web-view

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

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

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

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

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

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

属性名 类型 说明
src string webview 指向网页的链接
bindmessage EventHandler e.detail = { data }
bindload EventHandler 网页加载成功时触发的事件
binderror EventHandler 网页加载失败时触发的事件
<web-view src="https://www.jianshu.com/u/c785ece603d1"></web-view>

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

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

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

使用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

结语

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

微信小程序设置web-view的业务域名的更多相关文章

  1. 说说 PWA 和微信小程序--Progressive Web App

    作者:云图图链接:https://zhuanlan.zhihu.com/p/22578965来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 利益相关:微信小用户,谷歌小 ...

  2. 微信小程序的Web API接口设计及常见接口实现

    微信小程序给我们提供了一个很好的开发平台,可以用于展现各种数据和实现丰富的功能,通过小程序的请求Web API 平台获取JSON数据后,可以在小程序界面上进行数据的动态展示.在数据的关键 一环中,我们 ...

  3. 微信小程序设置全局字体

    微信小程序设置全局css,需要在app.wxss文件中设置page的样式 page { font-family:"PingFangSC-Thin"; font-size:32rpx ...

  4. 整合微信小程序的Web API接口层的架构设计

    在我前面有很多篇随笔介绍了Web API 接口层的架构设计,以及对微信公众号.企业号.小程序等模块的分类划分.例如在<C#开发微信门户及应用(43)--微信各个项目模块的定义和相互关系>介 ...

  5. 微信小程序设置控件权重

    项目中最常用的两种布局方式,水平布局和垂直布局,在微信小程序中实现起来也比较简单.       1.横向水平布局:         实现水平布局,需要四个view容器组件,其中一个是父容器.如下: & ...

  6. 如何使用css来让图片居中不变形 微信小程序和web端适用

    图片变形很多人祭奠出了妖魔鬼怪般的各种大法,比如使用jq来写,或者使用css表达式来写.今天我总结的是使用css3来写,唯一最大缺点就是对一些浏览器版本不够兼容.下面就是关于如何使用css来让图片居中 ...

  7. 微信小程序设置底部导航栏目方法

    微信小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家. 好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的. 我们先来看个效果图 这里,我们添加了 ...

  8. 微信小程序设置滚动条

    前言 又很久没有写东西了,上周开始将一个APP和一个网站的内容整合到微信小程序中,到这会儿终于搞得快结束了,才发现为啥我的小程序滚动视图没有滚动条,这是闹哪样,没有滚动条的滚动是没有灵魂的. 客官可移 ...

  9. 微信小程序_(组件)view视图容器

    微信小程序view组件官方文档 传送门 Learn 一.hover-class属性 二.hover-start-time与hover-stay-time属性 三.hover-stop-propagat ...

随机推荐

  1. 10.Redis分布式集群

    10.Redis分布式集群10.1 数据分布10.1.1 数据分布理论10.1.2 Redis数据分区10.1.3 集群功能限制10.2 搭建集群10.2.1 准备节点10.2.2 节点握手10.2. ...

  2. Vue中观察者模式的实现

    Vue中实现观察者模式的方法可以有三种: 1.v-on方法 exp: <div id='test'> <button v-on:event='functionName'>but ...

  3. Visual Studio连接Oracle数据库

    一.安装Oracle Developer Tools for Visual Studio 2015 其他的什么client一概不要装,装了的直接卸载. 下载时需要登录,如果之前已经注册账号,提醒一下密 ...

  4. Mysql InnoDB下的两种行锁

    今天例举2种常见的Mysql InnoDB下的行锁 现有表dr_test(id pk, name) 数据是 1 zhangsan2 lisi3 wangwu 例子1 事务1 update dr_tes ...

  5. 项目管理 - PM、 SRS、SOW简介及范例

    PM在一个IT项目中的主要管理任务 http://blog.csdn.net/eaglezhang/article/details/1717171 计算机软件需求说明编制指南 http://blog. ...

  6. .net数据库实现Excel的导入与导出

    .net数据库实现Excel的导入与导出 参考路径:https://www.cnblogs.com/splendidme/archive/2012/01/05/2313314.html 1.defau ...

  7. 构造 this super

    构造方法 我们对封装已经有了基本的了解,接下来我们来看一个新的问题,依然以Person为例,由于Person中的属性都被private了,外界无法直接访问属性,必须对外提供相应的set和get方法.当 ...

  8. 利用Python生成GIF动图

    一.PIL库 1.PIL库的概括: PIL(Python Image Library)是python的第三方图像处理库,但是由于其强大的功能与众多的使用人数,几乎已经被认为是python官方图像处理库 ...

  9. 去除最后一个li的样式

    推荐::::方法一,使用:first-child    纯css的:first-child伪类就可以胜任此任务,操作很方便,代码量忽略不计.支持IE7+,不支持IE6 :first-child /:l ...

  10. Lab keepalived

    [root@node1 keepalived]#cat keepalived.conf ! Configuration File for keepalived global_defs { notifi ...