分享一下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的时间来快乐摸鱼。感谢大家的收看。