vue+element 的h5界面嵌入app的一些注意事项

本文介绍了将Vue+Element构建的H5界面嵌入APP时遇到的问题及其解决方法。主要涉及如何获取APP登录信息,处理因数据为空导致的点击无响应,以及在iOS和Android设备上的调试技巧,包括使用转义链接和二维码安装APP进行调试。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

情景:h5界面嵌入app里,这里用的是vue+element+mint-ui

 

1、h5界面需要获取app的登录信息

方法是app提供原生的方法,挂载在window上

比如

//方法 app同事肯定会给你提供
//这里需要注意的:如果原生的方法需要参数,要问清楚app同事参数,如果要获取app拿的值
//比如我这里要获取登录信息,一般是json形式,需要转化一些JSON.parse()
//另外,要问清楚,返回的字段名,这样方便获取对应的值,比如,下方我获取的值
const centerInfoData = 'fundaccount,idnumber,fullName';
let {fundaccount,idnumber,fullName} = JSON.parse(window.NEDK.tztGetUserCenterInfo(centerInfoData))

 

2、获取window上的方法,我这里是客户提供了一个js文件,这样才能获取到window.NEDK里面的方法,这里面就是window.NEDK的一些方法,到时候如果是这种形式,可以alert一下是否有值还是null,如果是null就需要客户提供一个这个文件

 

3、如果某些事件pc端调试没问题,但是app里没反应,要注意这个界面用到的数据是否有值,如果是null,app里的h5页面可能点击没反应,比如不显示这时候还是可以通过alert看一下值是否存在,特别是获取的app的值,然后存入全局数据,点击事件的界面又需要用到这个app取得值

 

 

4、另外,app提供安卓/ios包,h5界面通过链接嵌入app,app给一个链接入口,比如banner,图标,点击进入h5界面

  • 调试期间,ios如果提供的不是二维码,需要转化ipa为二维码,然后手机安装打开
  • 安卓可以直接下载apk的包

app同事也可以给一个加上了h5链接的转义过的链接(前提安装了包,另外app上没有给你h5页面的入口,不建议这个方法,不方便),比如我这边转义后的带上h5链接,打开就进入登录,登陆成功后就跳转到h5界面的链接,这个移动端同事可以给一下,方便调试,h5在app里调试,可以弄一个移动端同事的工具,可以alert弹框,可以找移动端同事用工具查一下报错,打断点

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值