分享一下cordova+vue项目的注意点

前言

现在是9102 年了,cordova作为老前辈,性能上完全没有优势,那为什么我们要用他,也许是历史接手项目,或者对单纯是学习一下,我选用他的原因是因为“快”。这个快不是指体验和性能 :) ,而是指突然要把一个vue的H5项目,拓展到app上,cordova可以不怎么费力(并不)的直接使用。
目录
1.打包路径
vue的项目一般打包后,默认的路径是为服务器设置的绝对路径,要和Cordova搭配,需要把默认路径改成相对路径(./)就可以了,就是这么简单。具体一点就是打包后,可以通过index.html启动项目。
vue-cli3 配置中的 publicPath:'./'
复制代码
2.网络请求
浏览器和后端通信要注意跨域限制,但是当使用cordova时,项目是运行在app里的,不存在跨域限制,可喜可贺。但是需要小心的是在浏览 器上能正常工作的cookie,就不能在app里使用了,因为打包后的项目实际上在File协议下运行,所以通过sessionID来保证登录的方案 不可行(当然没打包前是可以的,这才是最迷惑的),建议使用token放在请求头部使用,来保证登录,然后使用本地缓存token来保证持久登录。
3.插件使用
在真机上就可以使用调用各种插件了,使用时可以把所有插件用一个构造函数封装,然后在vue里注册插件使用,调用起来很直观清晰。cordova官方封装了很多基础的插件。但有点插件你不满意效果或功能不完善时,也许需要些原生知识来改动插件或上GitHub上找找改造的插件。
4.安卓菜单栏
菜单栏的后退键需要有后退和双击推出的功能,需要你自己把vue路由后退或关闭modal的功能和退出app的功能通过事件注册的方式,绑定到上面(类似原生js的方式)。如下
document.addEventListener('backbutton', function(){}, false)
复制代码
5.调用第三方应用
有的时候需要通过app打开第三方的app,解决方案有很多。我在项目里遇到的是需要打开地图的导航功能,这玩意可说起来简单,实际上各种打不开、没反应。最简单的方式推荐使用scheme链接的方式,(有的app有白名单限制,这种方法貌似无法打开)经测试,地图类app可以,一般情况下h5页面也可以通过a标签打开,在cordova中有神秘力量导致a标签无效,可以使用cordova-plugin-app-launcher这个插件,具体scheme可以参考各个地图开发文档里的说明。下面是高德地图驾驶导航的scheme:
iosamap://navi?sourceApplication=applicationName&poiname=${name}&lat=${lat}&lon=${lon}&dev=1
androidamap://navi?sourceApplication=appname&poiname=${name}&lat=${lat}&lon=${lon}&dev=1
复制代码
6.微信分享
app如果要接入第三方分享,每一种分享都要去装相应app(QQ,微信,微博)的JDK。这里说一下微信的分享,通过Cordova插件来分享,

调用方法很简单,需要注意的是分享需要微信平台的appID,appID需要注册开放平台,审核应用然后获取。微信审核时需要提供app签名文件的中的MD5密钥(小写)。

7.推送
推送的话,建议使用极光推送,Cordova有封装好的插件,通过登录后设置别名来控制每个用户的推送,很简单实用。另外推送跳转页面,需要后端去发推送请求的时候带上参数(exrea),前端注册一个事件来接受,通过参数来跳转对应页面。注册如下
document.addEventListener('jpush.openNotification',function(event){},false)
复制代码

后记

这是本菜鸟的第一个Cordova项目,一些Cordova环境的搭建什么的,网上一大堆就不一一列举了,这里写的都是,实际遇上的需要花一点时间查资料的地方。作为我项目的总结。希望对大家同样的问题能省下google的时间来快乐摸鱼。感谢大家的收看。
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值