钉钉小程序 - - - - 内嵌webview打不开？ios打开白屏？安卓页面受限？

原创 已于 2023-04-04 12:18:26 修改 · 4.3k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#钉钉 #小程序

于 2022-11-25 17:35:51 首次发布
本文主要探讨了在iOS小程序内遇到H5页面无法正常打开的问题，特别强调了安卓设备正常，而iOS设备出现访问问题。解决方案包括将http切换为https协议，确保URL参数转码正确，以及在小程序中配置Webview安全域名，并勾选忽略webview合法性检测。开发者需要注意这些关键步骤以确保H5页面在不同平台上的兼容性。

内嵌H5打不开


小程序内引入H5页面是常见需求，但是总有一些弯弯绕绕在阻挠着开发的进度。

1. 问题描述

开发者工具打开H5页面是没问题的，但是真机访问有问题？安卓机能够正常访问，但是ios访问有问题？

2. 解决办法：

  • http需要换成https协议
  • url传参是可能有一些特殊字符、汉字等，需要使用decodeURIComponent(url)进行转码

3. Webview 安全域名配置

一定要记得配置！
一定要记得配置！！
一定要记得配置！！！

一定要准确配置域名！
一定要准确配置域名！！
一定要准确配置域名！！！

如:
在这里插入图片描述

4. 勾选忽略webview合法性检测

在这里插入图片描述

react-native-web-webview:React Native用于RN的WebView的Web实现
05-17
react-native-web-webview React Native用于RN的WebView的Web实现 入门 $ npm install react-native-web-webview --save 别名打包您的webpack配置中： resolve: { alias: { 'react-native': 'react-native-web...
cordova-plugin-ionic-webview:用于Cordova的Web View插件，专门用于Ionic应用程序
05-04
注意：此存储库及其文档适用于cordova-plugin-ionic-webview @ 5.x ，它使用的新功能可能不适用于所有应用程序。 请参阅和 2.x文档可以在找到。 :open_book: 文档： : :megaphone: 支持/问题？ 有关常规支持...
钉钉小程序 打开web-view页面显示白屏
WY66987的博客
07-20 2065
使用钉钉小程序开发,使用苹果手机打开web-view页面可以正常显示，但是使用安卓手机显示白屏。
小程序web-view无法打开该页面的解决方法
我是小鹏呀的博客
06-28 1万+
把文件给后端，后端部署服务器，部署完后，可以直接访问该文件。例如：业务域名为https://baidu.com，下载下来的文件名为test.txt，后端部署完成后，可以确保https://baidu.com/test.txt可以访问。问题：开发者工具可以正常打开，正式上线版小程序使用 web-view 组件测试时提示：“无法打开该页面，不支持打开。解决方法：需要配置业务业务域名，在微信公众平台-开发-开发管理-业务域名。，请在“小程序右上角更多->反馈与投诉”中和开发者反馈。
钉钉小程序，H5页如何关闭（返回上一级）Webview
最新发布
JoeBrid9eWong的博客
09-24 172
虽然以前就知道钉钉小程序和支付宝小程序是一起的，但是开始一直在看钉钉的开发文档，没往那想，而且钉钉官网的一句话说“webview暂不支持微应用的jsapi”，我一度以为就是不支持，结果一试才知道支付宝的api是能用的，多少带点坑。文章不长，希望能帮助到你。
小程序使用webview嵌套H5中使用iframe真机无法跳转 wx.miniProgram.navigateTo等失效问题
u010439874的博客
08-20 3675
点击支付
微信小程序 - 详细解决web-view公众号文章或第三方网站分享转发后打开失败，页面显示“无法打开该页面，不支持打开“、“页面不存在“报错提示，苹果IOS系统手机打开是空白页，安卓手机系统会有提示！
🏆 前端领域优质创作者
08-22 1万+
微信小程序，公众号文章，第三方H5网页，内嵌网站分享后打不开，web-view，页面分享，小程序里公众号文章转发后无法打开，白屏，页面空白什么都没有，不支持打开，无法打开该页面，页面不存在，业务域名配置好了还是不行，公众号和小程序已经关联，iOS端苹果真机打开空白页，安卓手机，页面分享后，用户打不开提示错误，提示页面不存在，如何解决页面提示无法打开该页面，微信小程序web-view无法打开该页面不支持打开的解决方法，无法打开该页面不支持打开，最新详细解决方案，分享之后无法打开页面，提示无法打开该页面,不支持
web-view在安卓机型打不开附件， wx.downloadFile和wx.openDocument不支持打开图片类型 已解决！！！
weixin_43991257的博客
09-09 1819
最近在写小程序时遇到在预览图片和附件多种格式的文件时，使用web-view预览图片没有问题，但是预览附件时在安卓机型上显示空白的问题。 换一种写法用wx.downloadFile()和wx.openDocument()这两个api,发现安卓和ios都可以直接预览文件，但是不支持图片格式，原因是官方fileType不支持。 所以要是既想要预览图片，又要预览附件，需要同时使用web-view和wx.downloadFile()、wx.openDocument()。 步骤如下： （1）在html中调用点击方法，触
h5通过webview嵌入app，ios兼容
weixin_41706307的博客
11-20 506
已解决！！！h5通过webview嵌入app，ios兼容微信支付。微信支付ios打不开
微信小程序 - 完美解决 web-view 公众号文章或第三方网站分享转发后，打开提示 “无法打开该页面，不支持打开” 或 “页面不存在”（IOS 苹果系统打开是空白页，安卓系统会有提示）超详细排查
热门推荐
🏆 前端领域优质创作者
01-30 1万+
微信小程序微信小程序提示无法打开该页面,不支持打开，打开webview公众号文章地址不对，小程序WebView打开关联的公众号文章失败，小程序webview访问公众号文章提示非业务域名，微信小程序页面分享后提示页面不存在或者页面空白的解决办法，微信小程序分享webview公众号文章页面提示无法打开该页面,不支持打开，微信小程序webview提示页面不存在，小程序提示无法打开页小程序打开webview页面显示无法打开该页面显示一串地址，请在小程序右上角更多，微信小程序分享webview公众号文章页面提示无法
微信小程序webview安卓机不能打开pdf问题
不会写代码的前端
01-18 3801
【代码】微信小程序webview安卓机不能打开pdf问题。
笔记 -- uniapp 微信小程序webview安卓文件预览失败
qq_40649554的博客
03-15 1039
uniapp 微信小程序 解决 安卓 文件预览失败
iOS WebView白屏问题&&解决方案
叶阳的博客
10-13 6330
iOS WKWebview白屏
flutter ios webview不能打开http地址
weixin_44911775的博客
08-25 1938
webview_flutter 在使用过程中会iOS出现无法加载HTTP请求的情况， 但是Flutter 却可以加载HTTP请求。这就与两个的框架有关了，Flutter是独立于UIKit框架的。解决方案就是在iOS 的info.plist中添加对HTTP的信任。
Android内嵌WebView网页无法打开
Zeyonr的博客
10-10 2653
解决webview无法加载问题
小程序webview页面转发后，打开页面空白
weixin_40918145的博客
07-06 1617
小程序webview页面，小程序正常入口进入没有问题，分享出去后，打开IOS空白，安卓提示非业务域名
iPhone12打开webview闪退或者白屏
吃瓜群众的博客
07-26 1413
解决办法：排除法 1、先测试iPhone12打开其他嵌入的webview页面，无问题，继续下一步 2、修改嵌入的webview代码，删除无用代码，然后重新部署测试，无问题，继续下一步 3、检查包裹webview组件的代码，最后一个删除测试，找到是SafeAreaView导致，删除SafeAreaView的包裹代码后能正常打开。 ...
【钉钉小程序】钉钉小程序预览文件的两种方式，从获取权限到预览文件全过程
aDiaoYa_的博客
06-04 6512
最近写钉钉小程序项目过程中，要实现页面展示pdf、word、ppt等文件的功能。在网上搜了很多文章，研究了很久，总结了一下有两种实现该功能的方法，方法一：借助web-view组件打开外部网页；方法二：通过上传到钉盘，从钉盘打开文件。具体过程如下。
ios系统在h5页面下拉上拉会带动整个webview 出现空白
imkaifan的博客
07-05 3548
ios系统在h5页面下拉上拉会带动整个webview 出现空白
原生小程序webView显示的h5页面还可以使用wx-open-launch-weapp打开小程序吗?
04-03
<think>嗯，用户的问题是关于在小程序的webView中加载的H5页面能否使用wx-open-launch-weapp组件跳转到其他小程序。根据之前的引用资料，我记得引用[1]提到H5页面内嵌的话不支持用这个标签跳转其他小程序。用户可能遇到了这个问题，想确认是否可行。 首先，我需要明确wx-open-launch-weapp的使用条件。根据引用[3]，这个标签需要微信JS-SDK的支持，并且必须在微信浏览器环境中运行。而小程序的webView虽然是在微信里，但它本身是web-view组件加载的H5页面，可能和普通的微信浏览器环境不同。引用[1]明确指出这种情况下不支持，所以原生小程序的webView里的H5页面确实无法使用这个标签。 接下来，用户想知道如何在这种情况下实现跳转。根据引用[2]和引用[4]，H5跳转小程序可以通过URL Scheme或者wx.miniProgram的API。但需要注意，在webView中可能无法直接调用这些方法，可能需要小程序的配合。例如，H5页面可以通过postMessage和web-view组件通信，让小程序端触发跳转。或者使用URL Scheme，但Android需要H5页面中转，而iOS可以直接使用。 另外，引用[3]提到点击事件是在wx-open-launch-weapp标签上触发的，这可能受限于环境是否支持。因此，在webView中可能无法触发这个事件，导致跳转失败。 总结下来，用户的问题答案是否定的，无法在webView的H5中使用该标签，但可以替代方案是通过与小程序的通信或使用URL Scheme来实现跳转。需要详细说明这些替代方法，并引用相关引用资料作为支持。</think>根据微信官方技术文档和现有实践验证，在原生小程序的`web-view`组件加载的H5页面中，**无法直接通过`wx-open-launch-weapp`组件跳转其他小程序**，主要原因如下： 1. **环境限制** `wx-open-launch-weapp`属于微信开放标签，要求页面必须通过微信JS-SDK初始化且运行在微信浏览器环境中[^1][^3]。而小程序内的`web-view`组件虽然基于微信内核，但其权限体系和普通H5页面不同，无法直接使用开放标签功能。 2. **组件触发机制冲突** 该标签依赖微信浏览器环境的原生事件绑定机制，但小程序`web-view`会限制部分DOM操作和事件传播，导致标签点击事件无法正常触发[^3]。 --- ### 替代实现方案 若需在原生小程序的`web-view`中实现跳转其他小程序，可采用以下方法： #### 方法一：通过小程序原生通信 1. **H5页面发送信号** 在H5页面中通过`window.postMessage`向小程序发送跳转请求： ```javascript // H5页面代码 wx.miniProgram.postMessage({ data: { action: 'navigateToMiniProgram', appId: '目标小程序appid' } }); ``` 2. **小程序监听消息** 在小程序页面的`web-view`组件中监听消息并执行跳转： ```javascript // 小程序页面代码 Page({ onMessage(e) { if (e.detail.data[0].action === 'navigateToMiniProgram') { wx.navigateToMiniProgram({ appId: e.detail.data[0].appId, success: console.log, fail: console.error }) } } }) ``` #### 方法二：通过URL Scheme跳转 1. **生成小程序URL Scheme** 在服务端生成目标小程序的URL Scheme（`weixin://dl/business/?t=xxx`），需通过微信服务端接口获取[^4]。 2. **H5页面触发跳转** 在H5页面中通过`location.href`或`iframe`调用Scheme： ```javascript // 示例：iOS直接跳转，Android需中转页面 if (isIOS) { window.location.href = 'weixin://dl/business/?appid=xxx&path=xxx'; } else { // 跳转到中转H5页面再触发Scheme } ``` --- ### 关键差异对比表 | 方案 | 技术实现难度 | 跨平台兼容性 | 用户体验 | |---------------------|--------------|--------------|----------| | 原生通信方案 | 中等 | 全平台支持 | 无缝跳转 | | URL Scheme方案 | 较高 | iOS直接支持 | 需要确认弹窗 | ---
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值