App内嵌H5活动页面携带用户token

18 篇文章 1 订阅
1 篇文章 0 订阅

此文章仅记录自己在app端做的一个活动所遇到的各种问题, 帮助大家避免入坑.

背景:后端使用framemark动态生成html模板.我写好的以ftl为后缀名结尾的framemark文件给后台,后台打成jar包,并集合后端自己的代码部署.

需求:app端通过banner页面进入到投票活动页面(这个活动页面是H5页面),H5页面需要拿到用户的token.并可以进行投票活动.

问题1:通过postman测试,发现生成的页面里面有一些代码错位;我里面有一些需要动态添加dom的功能,发现生成的html页面dom字符串引号后面有html标签的地方,htm标签都会自动换行

方案1:最开始页面在移动端不出现任何数据,以为是这些标签换行的问题,后来经过多次各种不同的测试,排除了这个可能.
如果大家也遇到标签换行问题,暂时不用考虑,有可能是postman的问题.

问题2:安卓手机5.0+以上的版本可以显示数据,5.0以下版本就无法显示数据,在安卓客户端同事的帮助下,查看了错误日志,原来是我在代码里使用了es6的一些语法,安卓5.0以下对es6的支持性不够.

方案2:可以使用babel转义一下,也可以把es6语法全部换成js的语法,为了方便快捷,我选择了后者.

问题3:ios端一直无法显示数据,并提示$ 未定义,但是其实我通过cdn已经引入了jquery文件.

方案3:我引入的jquery版本的协议是http,但是由于ios系统的安全策略,只能支持https协议,所以要把里面引入的文件地址都要改成https协议的.

问题4:数据可以正常显示后,发现后端给我数据偶尔会有字符乱码问题,但是多刷新几次乱码就又恢复了,这个乱码出现的概率还很高.

方案4:经后台排查,是由于我们的网关进行了一次处理,这个让后台处理就好了.

最后给大家一个移动端开发测试神器
VConsole插件

这个真是移动端调试神器,附上插件的使用教程VConsole插件使用教程

这是我自己做项目遇到的问题以及解决思路,希望可以帮助到你们,如有不同解决方案,欢迎大家交流学习.

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你想在uni-app小程序中将token传递给webview的H5页面,可以使用uni-app提供的uni.postMessage()方法。具体的实现步骤如下: 1. 在uni-app小程序中,使用uni.getStorageSync()方法获取token,并将token保存在变量中。 2. 在uni-app小程序中,使用uni.createSelectorQuery()方法获取webview组件的引用,并调用组件的postMessage()方法token传递给H5页面。 3. 在H5页面中,使用window.addEventListener()方法监听message事件,获取传递过来的token。 下面是一个示例代码: 在uni-app小程序中: ```javascript export default { mounted() { // 获取token let token = uni.getStorageSync('token') // 获取webview组件引用 let webview = uni.createSelectorQuery().select('#webview') // 将token传递给H5页面 webview.postMessage({ type: 'setToken', token: token }) } } ``` 在H5页面中: ```javascript window.addEventListener('message', function(event) { if (event.data.type === 'setToken') { let token = event.data.token // 在这里可以使用token进行相关操作 } }) ``` 在这个示例代码中,我们先在uni-app小程序中获取token,并将token保存在变量中。然后使用uni.createSelectorQuery()方法获取webview组件的引用,并调用组件的postMessage()方法token传递给H5页面。在H5页面中,我们使用window.addEventListener()方法监听message事件,获取传递过来的token。在这里,我们可以使用token进行相关操作。需要注意的是,传递的数据需要使用对象形式,并且在H5页面中需要判断数据的类型。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值