微信小程序-web-view-开发日记，看这一篇就够了！，38岁的中年失业者怎么活下去_微信小程序web-view

作者：Cpp五条 | 2024-05-12 18:24:43

踩

微信小程序web-view

微信小程序的 web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。这对于基于 H5 开发的站点，直接迁移到小程序带来了很大的便利。当然这其中也有一些需要注意的坑。

一账号权限

如果要在小程序中使用 web-view 组件，则需要开发者账号不仅是该小程序的开发者而且还有网页开发权限，这需要在该小程序关联的公众号里面绑定开发者账号为开发者。不然在开发工具里面会弹窗提示没有网页开发权限。提示如下：

二业务域名

we-bview 组件的 src 属性指向网页的链接。可打开关联的公众号的文章，其它网页则需登录小程序管理后台（设置 -> 开发设置）中配置业务域名，如下图：

配置业务域名的时候会提示你上传验证文件到该域名下进行验证。如果你压根就没有权限去上传验证文件，那不好意思，你用了不该业务域名，页面直接提示报错，无法正常访问。

三登录态

小程序登录态与 web-view 组件登录态属于两套隔离的系统。所以得想办法让小程序中的登录态传入到 web-view 组件的 H5 页面中。目前最简单也是最常用的方案是把 cookie作为 url 参数传入，然后再在 H5 中获取并设置 cookie，为了提高点难度，可以加个加解密。

如果不嫌麻烦，可以搭建一个中间服务，传入 tickets，中间服务通过 tickets 得到 cookie，再重定向地址。

四组件层级

web-view 组件属于原生组件，所以层级很高，如果需要覆盖则需要使用 cover-view 组件。但是 cover-view 组件在开发工具上是看不到覆盖效果的，安卓默认也不能覆盖，只有 IOS 默认会覆盖。

cover-view

有些时候我们封装一个组件，需要盖住 web-view ，所以会选择 cover-view 组件，但是如果这个组件不是应用在 web-view 页面就会带来层级太高，弹窗浮层根本盖不住的问题。如一些右下角的咨询按钮，既应用在小程序页面中，也应用在 web-view 页面中。所以做组件的时候可以做一个属性判断，如果是 web-view 页面则使用 cover-view ，否则使用 view 。

五 web-view 页面中小程序环境判断

官网有记载在网页内可通过 window.__wxjs_environment 变量判断是否在小程序环境，并且建议在WeixinJSBridgeReady回调中使用，也可以使用JSSDK 1.3.2提供的getEnv接口。代码如下：

// web-view下的页面内
function ready() {
console.log(window.__wxjs_environment === ‘miniprogram’) // true
}
if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
document.addEventListener(‘WeixinJSBridgeReady’, ready, false)
} else {
ready()
}

// 或者
wx.miniProgram.getEnv(function(res) {
console.log(res.miniprogram) // true

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级安卓工程师，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Android移动开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。