小程序webView页面转发后,进入页面空白

钉钉小程序 打开web-view页面显示白屏 使用钉钉小程序开发,使用苹果手机打开web-view页面可以正常显示,但是使用安卓手机显示白屏。 阅读详情

小程序webView页面,在点击右上角按钮分享后,进入分享的链接页面空白

重新进入页面后,页面空白。使用电脑打开之后报错提示如下

 

 一、排查页面转发后,页面地址有没有解码

webview页面转发后,小程序会将url参数转码,这时如果 不对页面地址重新进行解码 页面重绘失败,导致页面空白

// index.js
// 获取应用实例
const app = getApp()
var util = require('../utils/util.js');
Page({
  data: {
    url:''
  },
  onLoad(options){    
    if(options.weburl){
      const weburl = decodeURIComponent(options.weburl)
      this.setData({
        url: weburl
      })
    }
  },   

  /**
  * 用户点击右上角分享
  */
  onShareAppMessage: function () {
    
  }
})

 二、排查当前页面分享时没有对页面的分享链接做处理

需要通过小程序提供的onShareAppMessage方法,重新组装分享所需要的对象,包括分享的标题(title)、分享页面地址(path)、分享图片(imageUrl)等。组装完毕,重新赋值。

/**
  * 用户点击右上角分享
  */
  onShareAppMessage: function (res) {
    console.log("分享", res)
    let shareObj = {
      tittle: res.title, //默认是小程序名称
      path: `/pages/product/index?weburl=${encodeURIComponent(res.webViewUrl)}`, //页面分享
      success: function(ress){
        // 转发成功之后的回调
        if(ress.errMsg == 'shareAppMessage:ok'){
          console.log("chenggon")
        }
      },
      fail: function(error){
        console.log("分享错误", error)
        // 转发失败之后的回调
     if(res.errMsg == 'shareAppMessage:fail cancel'){
      // 用户取消转发
     }else if(res.errMsg == 'shareAppMessage:fail'){
      // 转发失败,其中 detail message 为详细失败信息
     }
      },
      complete: function(){
        // 转发结束之后的回调(转发成不成功都会执行)
        
      }
    }
    return shareObj;
  }

三、排查小程序后端的参数设置,比如小程序业务域名设置有没有包含http之类的请求,需要在后台设置中将此类请求设置为https;小程序接口域名等等~都需要排查。

微信平台关于小程序的开发文档链接已备好,可直接飞走~wx.updateShareMenu(Object object) | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/api/share/wx.updateShareMenu.html

微信小程序嵌套H5页面,调用微信小程序扫码功能,并将结果传回H5页面 实现方式: 小程序嵌套h5页面,点击h5页面的扫码按钮跳转到小程序的扫码页面,进入之后会立即扫码,拿到扫码结果后,跳转到小程序定义好的webview页面,再由webview页面进入h5页面。缺点:为了唤起扫码,会进入一个空白的扫码页面。 阅读详情

相关推荐

微信小程序 - 完美解决 web-view 公众号文章或第三方网站分享转发后,打开提示 “无法打开该页面,不支持打开” 或 “页面不存在”(IOS 苹果系统打开是空白页,安卓系统会有提示)超详细排查

微信小程序微信小程序提示无法打开该页面,不支持打开,打开webview公众号文章地址不对,小程序WebView打开关联的公众号文章失败,小程序webview访问公众号文章提示非业务域名,微信小程序页面分享后提示页面不存在或者页面空白的解决办法,微信小程序分享webview公众号文章页面提示无法打开该页面,不支持打开,微信小程序webview提示页面不存在,小程序提示无法打开页小程序打开webview页面显示无法打开该页面显示一串地址,请在小程序右上角更多,微信小程序分享webview公众号文章页面提示无法

🏆 前端领域优质创作者 1万+

微信小程序web-view使用说明,及链接打不开问题

开发微信小程序时,有时会需要在小程序内打开网页链接,这时就需要用到 web-view 标签。web-view 是小程序上用来承载网页的容器,且每个页面只能有一个 web-view,它会自动铺满整个页面,并覆盖其他组件。目前个人类型的小程序上不支持使用。在小程序上打开的网页链接地址大致可以分为两种类型:外部网页链接,如百度、知乎等网页地址微信公众号文章链接web-view 跳转外部网页链接需要配置业务域名,外部网页内 iframe 的域名也需要配置。配置小程序业务域名的方法可以参考。

m0_60312580的博客 2万+

微信小程序 - 解决web-view嵌套H5网页白屏问题,将h5网页嵌套在webview页面出现无法加载一片空白,详解微信小程序<web-view>页面跳转出现白屏情况(无论本地还是线上H5都能解决)

微信小程序解决web-view打开网页在手机上出现白屏的问题,小程序web-view嵌套H5项目白屏问题分析及解决,使用web-view组件加载H5网页链接后白屏情况,小程序嵌套的h5网页中跳转页面时也有可能出现白屏问题,嵌套webview页面时,出现白屏,WebView 加载不出网页,微信小程序<web-view>页面跳转出现白屏解决方法,解决WebView白屏空白,H5内嵌第三方小程序打开白屏,微信小程序嵌入h5页面加载空白,微信小程序web-view跳转h5白屏,解决微信小程序web-view打开网页

🏆 前端领域优质创作者 1万+

uniapp 小程序分享(以及提示页面不存在的坑)

uniapp 小程序分享提示页面不存在问题

qq_32184753的博客 3640

【无人机智能避障】基于深度强化学习的城市复杂环境路径规划实战

本文探讨了基于深度强化学习的无人机在城市复杂环境中的智能避障与路径规划。针对传统算法难以应对动态与非结构化障碍的痛点,文章详细介绍了如何利用DQN算法,通过设计合理的状态空间、奖励函数,并结合经验回放、目标网络等技巧,训练无人机自主学会在楼宇间安全、高效飞行的策略。

weixin_28224217的博客 731

短视频mssdk中get_token协议逆向与加密流程深度解析

本文深度解析了短视频mssdk中get_token协议的逆向分析与加密流程。通过抓包、Frida Hook、静态分析等手段,详细拆解了协议数据的Protobuf结构、设备信息采集来源,并重点剖析了其核心加密链路:zlib压缩、自定义TEA算法与AES-CBC加密,最终实现完整的协议模拟。

flower的专栏 554

小程序webview页面转发后,打开页面空白

小程序webview页面,小程序正常入口进入没有问题,分享出去后,打开IOS空白,安卓提示非业务域名

weixin_40918145的博客 1670

DIY一个SM2262ENG 2TB Nvme固态硬盘,慧荣SM2262EN主控

网友订做的 材料: 慧荣科技的62en,2片1G 三星DDR4缓存,4颗PF29F04T2AOCTH1,8CE B17A。SM2262EN属于慧荣第二代PCIe SSD主控,支持PCIe G3×4通道和全新的NVMe 1.3规范、8个NAND通道设计,并提供完整固件设计,最大循序读取速度高达3.5GB/s,循序写入速度达3.0GB/s,随机读写则高达420K IOPS和420K IOPS。此外,还采用目前最先进的低功耗设计,无论是在待机还是在工作状态下,均展现超低功耗,有效减少30%的功耗,满足用户追求超

m0_55207244的博客 1万+

‌微信小程序Webview转发页面空白问题解决方案‌

在小程序中使用webview组件进行页面转发时,接收方打开转发链接后出现页面显示空白的情况。经过上述处理,转发后的webview页面能够正常加载和显示,解决了页面空白的问题。在webview页面的onLoad方法中获取传递的URL参数。该方法能够正确解码URL中的特殊字符,恢复原始URL格式。确保所有需要转发的URL都经过正确的编码和解码处理。建议在开发过程中对URL参数进行完整的编码解码测试。确保转发前后的URL参数保持一致性和可解析性。使用解码后的URL进行页面内容的加载和显示。

G佳伟 611

Zabbix华为交换机光衰告警

zabbix使用自动发现监控huawei网络设备光衰

qq_31651649的博客 4529

LTO编译器优化介绍以及开启方法

LTO优化的详细介绍

性感的小君君 4922

微信webview转发空白

今天偶尔测试到小程序webview转发功能时,发现页面转发出去的页面再打开时是空白。 然后通过log发现 :被转义为%3A  / 被转义为%2F 然后在页面onLoad方法中对传递的url进行 decodeURIComponent(options.url) 方法转义,页面正常显示...

a307859的博客 1720

免ROOT、不刷机、不依赖Xposed实现Android改机的思路

最近在一个项目中需要模拟多种Android设备的环境。无奈市面上的大部分改机工具,要么需要ROOT权限,要么依赖Xposed,甚至还得重启设备。为了实现更灵活、更干净的改机方式,我开始了漫长的技术探索,最终找到了免ROOT、不刷机、拒绝Xposed的实现路径。Android_IDIMEI手机序列号手机型号、品牌、CPU型号等硬件信息GPS位置、Wi-Fi参数、通话记录、短信等软硬件数据这些信息通常用于标识设备唯一性,而改机就是对这些标识数据进行模拟或篡改。

代码简单说 Vue、JAVA、PHP、Node.js 熟练运用,接口、架构、性能全搞定。 2663

小程序webview组件嵌H5页面,安卓手机没有问题,苹果有页面空白问题

小程序上线之后的有一天,发现了一个bug,同事说点击列表的时候会进入一个状态界面,这个界面是H5页面,但是在苹果手机上却是空白的。这涉及到了小程序webview组件嵌H5页面,安卓手机没有问题,苹果有部分页面不显示 问题。 对webview以下的这些坑进行一一排查: 并进行真机调试 ![](https://upload-images.jianshu.io/upload_images...

qq_38822390的博客 3449

YOLO系列算法改进 | C3k2改进篇 | 融合MambaOut轻量化门控架构 | 纯卷积实现超越Mamba性能的同时兼顾极致轻量化与边缘部署效率 | CVPR 2025

YOLO系列算法改进 | C3k2改进篇 | 融合MambaOut轻量化门控架构 | 纯卷积实现超越Mamba性能的同时兼顾极致轻量化与边缘部署效率 | CVPR 2025 (以YOLOv26最新目标检测模型为基础,利用C3k2_MambaOut创新模块进行改进)

2502_91881744的博客 223

10倍开发者的 Dify 魔法书:从零构建全栈 AI 应用

“不懂底层算法,也能开发爆款 AI 应用吗?” 答案是:绝对可以。 Dify 正在重新定义 AI 应用的开发范式——通过可视化的低代码平台,将原本需要数周的开发周期压缩到几小时。无论你是前端、后端、产品经理,还是渴望破局的独立开发者,这都是你不可错过的红利。 我们将手把手教你利用 Dify 快速接入百模大战,零代码搭建企业级知识库,并一键发布你的专属 AI 助手、智能客服和自动化工作流。 告别重复造轮子,掌握 Dify,一个人就是一支 AI 团队。现在上车,开启你的 10 倍速开发之旅!

davidwang456的专栏 680

小程序webview组件嵌H5页面,安卓手机没有问题,苹果有部分页面不显示

小程序上线之后的有一天,发现了一个bug,同事说点击列表的时候会进入一个状态界面,这个界面是H5页面,但是在苹果手机上却是空白的。这涉及到了小程序webview组件嵌H5页面,安卓手机没有问题,苹果有部分页面不显示 问题。 对webview以下的这些坑进行一一排查: 并进行真机调试 ![](https://upload-images.jianshu.io...

祈澈菇凉 3232

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

webView加载H5页面出现空白页的解决办法

最近在做一个理财的项目,其中用到的H5页面比较多,在项目后期出现了很多bug,今天介绍下webView加载H5出现空白的解决办法 首先介绍下出现问题的场景,我们在一个Activity中镶嵌了一个H5的小页面,在这个Activity中有很多点击可以进入另外的H5页。并且这个Activity每次执行onResume就会重新加载所有的数据。  当H5页面没有加载完成的时候如果我点击进入另外的H5页面时

lixiaoshuai_91的博客 2万+

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

uniapp 微信小程序webview 踩坑

微信小程序的存在许多功能上的限制和约束,有些情况不得不去使用webview进行开发实现需求,比如原生无法满足(例如某团队维护SDK 只提供了WEB端jsSDK,且不维护小程序SDK)H5可以同时适用多端(适用范围更广)H5可以弥补小程序部分欠缺微信生态有部分限制(包大小,设计规范等)由于最近做的需求小程序不支持播放带有透明通道的视频,所以转到了webview这里总结下完整的开发流程和现有的各种解决方案: 开发阶段需要将不校验合法域名勾选上。

Raccon_的博客 8836

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

H5页面嵌入小程序没有返回按钮,以及返回页面空白的问题

需求催动此篇博客的诞生 项目背景 之前也没写过小程序但是看过之后都是现成的api 简单易懂 唯一就是会有很多坑要去踩 以为要写原生小程序 但是 是我想多了 公司是要节约开发成本 那么就衍生了H5嵌入小程序这个操作 必须的 1、要去申请一个小程序测试号要配置域名用 2、然后准备一套自己写的项目 测试用 代码部分 index.wxml文件 <web-view src="{{url}}#wechat_redirect"></web-view> #wechat_redirect 在

a331790021的博客 2668

小程序webview内嵌h5链接第二次打开空白

有个广告需要通过小程序内嵌H5打开报名然后调取小程序支付,再支付成功后跳转回H5的支付成功页面。 然后问题来了,在支付成功后跳转支付成功的H5页面直接空白 ??? 尝试了一下把支付成功后跳转的地址换成入口H5地址又可以了,换回来又跳不了,直接打开链接又是可以访问的,看微信的说明,webview带的参数要encodeURIComponent一下,于是加上: let id = encodeURIComponent(app.globalData.authorizationInfo.openId) .

艾路菲尔博客 1607

小程序ios页面数据空白问题

小程序上线之后的有一天,发现了一个bug,同事说点击列表的时候会进入一个状态界面,这个界面是H5页面,但是在苹果手机上却是空白的。这涉及到了小程序webview组件嵌H5页面,安卓手机没有问题,苹果有部分页面不显示 问题。 对webview以下的这些坑进行一一排查: 并进行真机调试 ![](https://upload-images.jianshu.io/upload_images...

前端视听 4114

嵌入到小程序webview的h5页面相关bug

1、日期问题 对于yyyy-mm-dd hh:mm:ss 这种格式在ios系统不识别 时间格式化的时候,在浏览器端处理好好的,到了手机端,就变成NAN,或者null,这种情况,是ios系统不能转化这种类型的时间。 `let date = new Date('2019-02-28 18:33:24'); // null` 解决方案是,转成 yyyy/mm/dd hh:mm:ss 这种...

你好瘦 1382

微信小程序 web-view 在ios显示空白页面

  最近遇到的一个问题,小程序使用web-view链接到H5页面,业务域名已经配置过了,在安卓系统上也是没有问题,只有ios不能正常显示,出现空白页面。在网上几番查找后,没有效果。   首先下载了safari的windows版(原晾我没有苹果本),打开H5页面发现js报错,原因是js里用了ES6的写法,写小程序写习惯了。然后通通改成ES5,页面正常加载出来了。   然而,小程序并没有展示出来页...

f的博客 8022

小程序 web-view 显示空白

今天接到一个需求,要把服务号的内容搬到小程序上,幸好现在小程序有webview组件,不然这个工作量,真的能让我哭了 可是一开工就让我头痛不已,页面一直是空白的状态 查过网上各种教程都没能成功,后面无意间想着页面开启了微信授权,会不会是小程序模拟器对这个有兼容问题呢?然后开启真机调试,果然,在手机上·就能正常显示了!!! 所以下次就不用觉得奇奇怪怪啦,这种带授权的页面,看来也只能手机调试了...

suilyy的博客 5391

小程序 web-view进入空白

web-view进入空白 小程序中的web-view点击进入空白,在域名配置完成的情况下,真机调试也可以的情况下,本地调试进入不了,可以试试以下方法: 点击“终止”,连续点击好几次 就好了 奇怪的知识又增长 了,第一次遇到这种,找了好多办法都不行,以此记录一波~~~ ...

Pluto_98的博客 1049
上一篇: css如何快速将网站设置为灰色背景
下一篇: Vue 封装WebSocket实现聊天功能
逩跑鍀小学生
博客等级 码龄5年 37粉丝 52原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值