vue2 + cordova 开发webapp
来源:互联网 发布:休眠状态关闭网络 编辑:程序博客网 时间:2024/06/07 08:03
最近公司在用cordova+vue2做一个 webapp,开始以为把vue项目打包一下,放到cordova的www文件下,运行一下,cordova build就一切ok了,然而事情不是这样的….
1.vue的安装=>打包不多讲,各位道友按照vue官网一步一步来吧。
2.cordova的安装=>运行起来自己的app项目,也不多说了,按照官网都可以的。
3.把vue项目打包后的文件融合到cordova里面。下面是我的vue项目结构:
下面是我cordova的项目结构:
由于vue项目需要运行在一个服务器下面,所以直接把vue打包后的文件(dist下面的文件)放到cordova的www下面行不通。
这里我是修改了下cordova的config.xml文件。添加了
<content src="http://192.168.1.108:8080/" />
<allow-navigation href="http://192.168.1.108:8080/*" />
这里是我本地vue项目服务器地址 上面代码设置了app默认打开的网址和白名单(上线后修改下),。这样就打开app可以访问我们想要的网页。但是如果我们想要调用cordova的plugins这些还不够。
4.vue项目cordova组件,这里以开发iosapp为例。
第一步.把cordova项目/platforms/ios/www 下面的cordova_plugins.js、cordova-js-src文件夹、cordova.js、plugins文件夹复制到vue项目下面static里面,每次添加新的cordova组件都要重新复制。
第二步.vue项目下面index.html引用cordova.js
<script src="/static/cordova.js"></script>
头部添加设置
<meta http-equiv=Content-Security-Policy content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"> <meta name=format-detection content="telephone=no"> <meta name=msapplication-tap-highlight content=no>
第三步.在vue项目得main.js添加代码,这里以设置StatusBar为例子
var app = { initialize: function() { document.addEventListener('deviceready', this.onDeviceReady.bind(this), false); }, onDeviceReady: function() { StatusBar.overlaysWebView(false); StatusBar.backgroundColorByHexString("#000000"); },};app.initialize();
the end
阅读全文
0 0
- vue2 + cordova 开发webapp
- Vue2开发的读书WebAPP
- webapp开发使用Cordova-Cordova教程
- Cordova webapp实战开发:(1)为什么选择 Cordova webapp?
- Vue2.0开发仿豆瓣电影WebApp
- Cordova webapp实战开发:(1) - (7)
- WebApp开发-CORDOVA踩过的坑
- WebApp开发之Cordova安装教程
- WebApp开发之Cordova安装教程
- WebApp开发-CORDOVA踩过的坑
- Cordova webapp?
- Cordova webapp实战开发:(2)认识一下Cordova
- Cordova webapp实战开发:(2)认识一下Cordova
- Vue.js 2.0和Cordova开发webApp环境搭建
- Cordova webapp+android studio开发环境的搭建
- Vue.js 2.0和Cordova开发webApp环境搭建
- WebApp cordova 入门
- Vue2版Cnode社区webapp
- dubbo 序列化实例
- Vim实验楼笔记
- 【Python】Python条件语句
- 随机森林(R)
- java 时间格式化
- vue2 + cordova 开发webapp
- AtomicInteger线程安全的实现机制
- 解释一下关系数据库的第一第二第三范式?
- 用户画像—设计参考
- 四步完成Spring国际化动态配置
- 【微积分】第一讲 极限与连续
- tomcat启动后404错误
- Spring源码深度解析(一)Spring的整体架构
- 构造方法