锐客网

  1. 首页 > 睿知 > it技术 > >

cordova+vue混合式开发App

IT知识Cordova开发app

出门莫恨无人随，书中车马多如簇。这篇文章主要讲述cordova+vue混合式开发App相关的知识，希望能为你提供帮助。
                应要求第一次使用cordova打包了一下vue写的app项目，期间遇到了不少问题，整理一下流程并记录一下常见问题吧。
                cordova打包项目需要的环境配置啥的就不具体讲啦，百度一下很多教程~
1. 创建cordova项目并添加android平台
创建项目指令：cordova create hello com.example.hello helloworld
第一个hello是cordova自动生成的项目文件夹名称
第二个com.example.hello我一般填写公司的名称，比如：com.csdn.hello
第三个helloword是打包完成后app的名称。
                创建完cordova项目后我们需要通过指令进入cordova项目的路径下才可进行后续操作：
                进入项目目录指令：cd hello
                进入项目目录后，我们需要添加对应的平台，这里我们用的是Android平台
                添加平台指令：cordova platform add android
2. 打包vue项目
打包vue项目指令：npm run build
                首先打包好你的h5项目，我们公司是用vue框架写的项目，因此打包的时候遇到一个问题，即打包生成的静态页面打开为空白页，百度搜索之后发现是路径指向问题，只需要在vue.config.js文件中修改publicPath的值为“ ./” 即可解决问题。
publicPath: ‘/‘,=> publicPath: ‘./‘,
1
                这里有一种比较便捷的打包方式，即修改你的输出文件路径，将它指向你cordova项目中静态文件存放的地址。这样可以省去每次打包好vue项目后再复制粘贴到cordova项目中的麻烦。
具体修改outputDir值即可：
//原始值
outputDir: ‘dist‘,
//修改为 具体地址视开发情况而定
outputDir: ‘E:cordovademoplatformsandroidappsrcmainassetswww‘,

注意：每次打包前要清空cordova项目中对应目录下的静态文件！先清空，在打包！
                如果打包vue项目时没有修改outputDis路径，则将输出的dist文件下的内容，全部复制到E:cordovademoplatformsandroidappsrcmainassetswww路径下。注意不要随便删除跟插件有关的js文件，否则会造成打包后插件不生效的情况！

                上图中绿色线框选出的是cordova自动生成的插件相关文件，建议不要随便修改！红线框出的是复制进来的vue项目打包输出后的文件。
3. 安装所需的插件
安装插件指令：cordova plugin add cordova-plugin-XXX
具体插件名称看项目中用到了哪些，一般安装插件有三种方法：
cordova官方插件。比如 cordova plugin add cordova-plugin-camera
通过url安装。比如 cordova plugin add https://github.com/nordnet/cordova-hot-code-push.git
安装本地插件。比如 cordova plugin add E:cordovapluginscordova-hot-code-push-local-dev-addon
如果需要删除某些插件可以使用：cordova plugin remove XXXX
如果需要查看已安装的插件列表可以使用： cordova plugin list
4. 修改APP的名称和图标
具体开发时我们可能还需要重新修改APP的名称和图标：
修改名称
        找到helloplatformsandroidappsrcmain esvalues文件夹下的strings.xml文件，修改app_name值：
< ?xml version=‘1.0‘ encoding=‘utf-8‘?>
< resources>
< string name="app_name"> APP名称< /string>
< string name="launcher_name"> @string/app_name< /string>
< string name="activity_name"> @string/launcher_name< /string>
< /resources>

2.修改图标
                找到E:cordovademoplatformsandroidappsrcmain es目录
将上图红框文件夹中的图片替换为你所需要的图片，每个文件夹对应了不同尺寸的设备，具体对应关系自行百度。
注意修改放入的图片的文件名为ic_launcher_foreground.png!
5. 打包apk
打包APK指令：cordova build android
                除了使用指令以外，也可以在AndroidStudio中通过    Build-> Build Bundle(s)/APK(s)-> Build APK(s)    来输出apk文件。
【cordova+vue混合式开发App】一般输出的apk文件在
E:cordovademoplatformsandroidappuildoutputsapkdebug目录下，默认的文件名为app-debug.apk。
                当然在打包之前尽量现在虚拟机上运行一下程序看看是否有问题，若无问题再打包最好



    推荐阅读


    上一篇：Taro聊天室|react+taro仿微信聊天App界面|taro聊天实例

    下一篇：解决android手机EditText设置光标颜色，android:textCursorDrawable=&quot;@drawable/corner_cursor&quot; 华为手机无效果的问题