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

最新推荐文章于 2023-08-09 20:56:21 发布

漂亮得皮皮

最新推荐文章于 2023-08-09 20:56:21 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： h5嵌入app 文章标签： html5 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_36706903/article/details/108535494

h5嵌入app 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了将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弹框，可以找移动端同事用工具查一下报错，打断点