微信小程序 —— web-view组件配置及使用

最新推荐文章于 2024-07-02 17:45:32 发布
最新推荐文章于 2024-07-02 17:45:32 发布
阅读量8k 收藏 1
点赞数
分类专栏： 微信小程序 文章标签： bug 微信 web-view 配置文件 调试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wu_shuxuan/article/details/78433025
版权

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

bug&tips:

  1. 每个页面只能有一个，会自动铺满整个页面，并覆盖其他组件。
  2. 网页与小程序之间不支持除JSSDK提供的接口之外的通信。
  3. 在iOS中，若存在JSSDK接口调用无响应的情况，可在的src后面加个#wechat_redirect解决。

微信小程序使用web-view组件开发及配置流程：

  • 配置：先在微信小程序后台配置业务域名

这里写图片描述

  • 微信开发者工具中选择基础库（1.6.4）

这里写图片描述

  • 编辑web-view内容

    这里写图片描述

「已注销」
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
微信小程序-web-view-开发日记，看这一篇就够了！，38岁的中年失业者怎么活下去
m0_61549674的博客
03-22 1301
本文在开源项目GitHub中已收录，里面包含不同方向的自学编程路线、面试题集合/面经、及系列技术文章等，资源持续更新中…[外链图片转存中…(img-GX0yUJRe-1711089460471)]
微信小程序 web-view 开发小记
weixin_44145299的博客
01-17 634
微信小程序的 web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。 这对于基于 H5 开发的站点，直接迁移到小程序带来了很大的便利。当然这其中也有一些需要注意的坑。 一 账号权限 如果要在小程序中使用 web-view 组件，则需要开发者账号不仅是该小程序的开发者而且还有网页开发权限，这需要在该小程序关联的公众号里面绑定开发者账号为开发者。不然在开发工具里面会弹窗提示没...
微信小程序如何使用web-view
Gyh9421的博客
07-03 4512
当然在开发阶段，如果想联调自己本地的话，将项目本地代码运行，把地址放在src属性里，微信开发者工具中点击右上角详情——本地设置中将不校验合法域名勾选就可以，不作用于线上正式服。有时我们的业务需求是小程序内部跳转到其他h5项目的页面，这是我们就会用到web-view标签，这个标签可以帮助我们完成h5页面的渲染。然后登录微信公众平台——开发管理——开发设置里面找到业务域名，扫码之后将你h5项目完整域名放上去，此时需要你下载一个校验文件，放在服务器根目录，点击保存，就可以了。
小程序-＜web-view＞嵌套H5页面支付功能
最新发布
qq_39241421的博客
07-02 886
用JSSDK接口提供的wx.miniProgram.navigato({url: url})，跳转到过渡页面wePay，在wePay.js中处理调取微信支付接口的功能，支付成功与否，跳转到小程序包含web-view页面，动态修改url，就可跳转到H5中的指定页面，开发者工具中，web-view中的h5页面若想看到打印日志，那是看不到的，于是和同事说了一下问题，他之前遇到过，和我说可以在vue中install vconsole试试。页面之间跳转是没问题的，因后台接口也改了，要等老板上线了再做调试了。
微信小程序 快速接入微信web-view控件
weixin_34194359的博客
11-03 190
今天微信小程序发布了2个重大更新 小程序内嵌网页 小程序可关联500个公众号内嵌网页的支持使微信从单个App成为名符其实的平台更近了一步，赶紧来尝鲜下，web-view 官方文档地址#####一，更新<微信开发者工具>至最新版由于web-view 组件是由基础库 1.6.4 开始支持，而在当前<微信开发者工具>版本点击右侧'详情'按钮可以看到仅支持到1.5.4：15096...
微信小程序嵌入 H5 页面（webview）基本用法和父子传参数说明
talentT的博客
03-29 4375
最近实现一个功能需要在小程序嵌入其它系统内部的一个页面（用vue写的H5页面），但小程序是无法使用iframe的，所以最终选择小程序官方的webview实现，本文对基本用法和父子传参进行说明
微信小程序web-view嵌套的H5页面，导航功能，点击跳出标有目标地的地图
weixin_48922164的博客
05-20 950
主要思路： 在H5页面中点击按钮，跳出web-view，进入小程序的某个页面，在这个页面中使用加载微信地图等操作。
小程序开发之组件web-view（浏览器）
M.Siebel
01-17 1877
web-view web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。 注： navigationStyle: custom 对 组件无效 非正式域名链接需要登录小程序管理后台配置业务域名。 网页内 iframe 的域名也需要配置到域名白名单。 开发者工具上，可以在 组件上通过右键 - 调试，打开 组件的调试。 每个页面只...
微信小程序底层相关-打包过程
03-19
微信小程序的打包编辑器是基于WEB技术体系实现的，主要包括`nwjs+React`技术栈。具体而言： - **nwjs**：是Node.js与Chromium的组合，允许开发者使用JavaScript、HTML和CSS构建桌面应用。 - **node**: 提供本地API...
微信小程序开发笔记⑧——map（地图）组件、canvas（画布）组件、open-data组件和web-view组件
ww0peo的博客
02-05 1430
地图组件 map组件 原生组件 官方描述 https://developers.weixin.qq.com/miniprogram/dev/component/map.html 下面是一个简单的地图实现 <map longitude="121.48" latitude="31.22" scale="18" ></map> 下面则是一个关于地图控件的案例 <ma...
小程序嵌套h5页面_uni-app 中使用 web-view 微信小程序嵌套H5
weixin_39797693的博客
12-19 3128
uni-app 中使用 web-view 微信小程序嵌套H5由于项目需要，我们的小程序中嵌套了web-view， 对于第一次接触uni-app，第一次用web-view的我真的是踩坑无数，屡次站在放弃的边缘，终于在今天搞定了。所以我感觉有必要更新一篇关于uni-app中嵌套web-view的文章，希望下面的文章可以帮助到正在学习的朋友吧。1、uni-app 中为什么要嵌套 web-view ？2、...
黑马程序员-微信小程序-原生框架——购物平台-分类页面
weixin_48884617的博客
05-16 5783
黑马程序员-微信小程序-原生框架——购物平台-分类页面
微信小程序 组件和slot_微信小程序——模板，组件与自定义组件
weixin_29496207的博客
02-05 416
模板可以在模板中定义代码片段，然后在不同的地方调用。通过name指定模板名字，然后通过is调用模板，通过data传入模板所需值模板拥有自己的作用域，只能使用 data 传入的数据以及模版定义文件中定义的 模块。Page({data: {temData: {index: 0,msg: 'this is a template',time: '2016-09-15'}}}) odd even 引用模...
微信小程序-web-view组件
weixin_45527865的博客
09-24 1934
微信小程序-web-view组件1.web-view组件的使用？2.cover-view组件的使用？3.实现需求（在web-view组件上面添加按钮，实现分享、拨打电话功能） 1.web-view组件的使用？ 每个页面只能有一个web-view组件，web-view组件会铺满整个屏幕，并且覆盖其他组件； web-view，个人类小程序暂不支持； 2.cover-view组件的使用？ 覆盖在原生组件之上的文本视图。 可覆盖的原生组件包括 map、video、canvas、camera、live-play
HTML手机端屏幕适配
冰凉的枷锁的博客
11-02 8409
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta name="apple-mobile-web-app-ca
微信原生小程序内嵌web-view设置动态src
weixin_45068543的博客
12-21 947
web-view动态设置src
微信小程序web-view组件嵌入h5页面导致双导航栏，如何只保留其中一个？
铁锤妹妹的博客
12-13 6079
前提 已知存在一个微信小程序，该小程序的某个页面通过web-view组件嵌套了我们app的一个h5页面，h5页面本身有自己的导航栏，就导致了双导航栏。 由于uniapp的 web-view 组件一定有原生导航栏，pages.js中设置navigationStyle: custom 对 web-view 组件无效；所以只能去掉因为h5里的导航。 方案 h5里的导航现在有两个地方在使用，一个需要保留导航栏，另一个也就是小程序中需要去掉h5的导航栏，所以需要条件判断，在使用web-view 组件项目中的页面src
小程序嵌套 webview，将cookie传给 webview解决方案
xixiGirlLiu的博客
11-29 1426
可以通过中间页进行传递，先跳到中间页，通过上面提到的地址带参的形式将 cookie 携带到中间页。在中间页获取到并存储，再跳转到 webview 正常需要展示的页面，此时cookie是不是已经有了呢。如果是第二种场景，很简单。将 cookie 通过 webview 地址带参的形式传递，在 h5内可直接获取到。这个中间页要注意不要有请求接口，否则可能会被拦截到登录页，除非特殊处理一下。2、webview 嵌套的h5是自己内部开发的，可以修改代码。如果是第一种场景，h5内无法进行代码操作，那应该怎么办呢？
小程序web-view组件
zgmu的专栏
01-19 3120
不久前微信小程序发布了web-view组件，这个消息在各个圈里引起不小的涟漪。近期正好在做小程序的项目，便研究了一下这个让大家充满期待的组件。 1，web-view这个组件是什么鬼？官网的介绍：web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。简单来说，这个组件是一个和当前页面一样大小的容器，容器里显示的是属性src引用的url的内容。类似于html中的iframe框架
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值