简介
Cordova 是⽤ Web 技术（ HTML，CSS 和 JS ）构建移动应⽤的平台。
我们可以认为Cordova 是⼀个容器，⽤于将的 Web 应⽤移植到移动端，同时⽀持移动端的功能（例如：定位、蓝⽛、摄像头等）。
资源⽹站
- 官⽹： https://cordova.apache.org/
- 中⽂镜像：http://cordova.axuer.com/
- Github： https://github.com/apache/cordova
环境搭建
- Node.js 环境搭建
- Git 安装
- Android 环境搭建
- iOS 环境搭建
- VS Code 编辑器
Android 环境搭建
-
JDK
下载地址：https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html -
Android Studio
下载地址：https://developer.android.com/studio/index.html -
Gradle 安装
-
下载
下载地址：https://services.gradle.org/distributions/
下载版本：建议使⽤ gradle-6.5-all.zip （我之前下载的 6.8 说太⾼了，⽽后⼜切换到 6.5） -
解压
下载后解压，将加压包放到任意位置（例如，我本地是 D:\Program Files\gradle-6.5）
-
绑定环境变量
-
检测安装结果
gradle -v
-
iOS 环境搭建
安装 Xcode
在 App Store 中安装即可。安装完成后，再安装 iOS 模拟器。
安装部署⼯具
npm install -g ios-sim
npm install -g ios-deploy
VS Code 编辑器
下载地址：https://code.visualstudio.com/
在 VS Code 中编辑 Cordova 代码，最好安装 Cordova Tools 插件
初始化项⽬
安装 Cordova CLI
npm install -g cordova
cordova -v
创建项⽬
cordova create HelloCordova io.cordova.hellocordova CordovaApp
# HelloCordova 应⽤程序的⽬录名称。
# io.cordova.hellocordova 项⽬唯⼀标识（默认的反向域值）。⼀般是点连接的语法
# CordovaApp 应⽤的标题。
添加平台
cd HelloCordova
# 浏览器
cordova platform add browser
# 安卓 添加 android 平台，并确保他们保存在了 config.xml 中
cordova platform add android --save
# 查看当前平台
cordova platform ls
当前平台信息（注意平台版本，例如，Android 是 9.0，将来安装模拟器时，也要安装对应的版本）
Installed platforms:
android 9.0.0
browser
Available platforms:
browser ^6.0.0
electron ^1.0.0
windows ^7.0.0
运⾏
1 # 浏览器端运⾏
2 cordova run browser
3
4 # 安卓端运⾏
5 cordova run android # 真机调试
6 cordova emulate android # 模拟器启动
项⽬⽬录
- hooks：钩⼦⽬录。每个Cordova 命令都可以定义 before 和 after 的
Hook，⽐如：before_build、after_build - platforms：平台⽬录。例如 android、ios、browser 等
- plugins：插件⽬录。安装的插件会放在这⾥
- www：源代码⽬录。在执⾏ cordova prepare 的时候，源码会被 copy 到各个平台⼯程的 assets\www⽬录下
- config.xml：主配置⽂件，⽐如：项⽬使⽤了哪些插件、应⽤图标和启动⻚⾯
index.html
Meta
Content-Security-Policy（CSP）
⽹⻚安全策略（CSP）的实质就是⽩名单，开发者明确告诉客户端，哪些外部资源可以加载和执⾏，哪些不可以。
1 <meta http-equiv="Content-Security-Policy" content="default-src 's
elf' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src
'self' 'unsafe-inline'; media-src *; img-src 'self' data: conten
t:;">
选项名
- default-src ：限制全局
- script-src ：外部脚本
- style-src ：样式表
- img-src ：图像
- media-src ：媒体⽂件（⾳频和视频）
- font-src ：字体⽂件
- object-src ：插件（⽐如 Flash）
- child-src ：框架
- frame-ancestors ：嵌⼊的外部资源（⽐如<frame>、<iframe>、<embed>和<applet>）
- connect-src ：HTTP 连接（通过 XHR、WebSockets、EventSource等）
- worker-src ： worker 脚本
- manifest-src ：manifest ⽂件
default-src
⽤来设置上⾯各个选项的默认值。
1 Content-Security-Policy: default-src 'self'
上⾯代码限制所有的外部资源，都只能从当前域名加载。
如果同时设置某个单项限制（⽐如 style-src）和 default-src，前者会覆盖后者，即字体⽂件会采⽤ style-src 的值，其他资源依然采⽤ default-src 的值。
选项值
多个值也可以并列，⽤空格分隔。
1 Content-Security-Policy: script-src 'self' https://apis.google.com
Content-Security-Policy-Report-Only 表示不执⾏限制选项，只是记录违反限制的⾏为。
format-detection
格式检测，⽤来检测html⾥的⼀些格式，主要有以下⼏个设置：
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="adress=no">
<!-- 也可以连写 -->
<meta name="format-detection" content="telephone=no,email=no,adress=no">
- telephone
主要作⽤是：是否设置⾃动将你的数字转化为拨号连接
telephone=no 禁⽌把数字转化为拨号链接
telephone=yes 开启把数字转化为拨号链接，默认开启 - email
告诉设备不识别邮箱，点击之后不⾃动发送
email=no 禁⽌作为邮箱地址
email=yes 开启把⽂字默认为邮箱地址，默认情况开启 - adress
adress=no 禁⽌跳转⾄地图
adress=yes 开启点击地址直接跳转⾄地图的功能, 默认开启
msapplication-tap-highlight
关闭 Windows 上的触碰⾼亮
<meta name="msapplication-tap-highlight" content="no">
viewport
视⼝：是⽤户⽹⻚的可视区域。
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
参数：
- initial-scale：初始缩放⽐例，即是当⻚⾯第⼀次 load 的时候缩放⽐例。
- width ：控制 viewport 的⼤⼩，⼀般为了⾃适应设置为 device-width（设备宽度）
- maximum-scale：允许的最⼤缩放程度。是⼀个浮点值
- minimum-scale：允许⽤户缩放到的最⼩⽐例。
- user-scalable：是否允许⽤户进⾏缩放，值为 no 或 yes
- viewport-fit=cover：解决 IphoneX tabbar 底部遮挡问题（是⻚⾯充满整个屏幕）
color-scheme
使⽹站⽀持多种模式（⾼亮模式、暗⿊模式）。当⽤户的系统主题更改后，⽹站样式随之更改。
- 声明可⽤模式
<meta name="color-scheme" content="light dark">
- 针对不同模式，写不同的样式
1 body {
2 /* 默认为 light */
3 background-image:linear-gradient(to bottom, #A7A7A7 0%, #E4E4E4 51%);
4 }
5
6 @media screen and (prefers-color-scheme: dark) { /* 暗⿊模式 */
7 body {
8 background-image:linear-gradient(to bottom, #585858 0%, #1B1B1B 51%);
9 }
10 }
注意：并不是所有的浏览器都支持 color-scheme，详情查看：https://www.caniuse.com/?search=color-scheme
cordova.js
在 [项⽬⽬录]/www/index.html 中引⼊的 cordova.js 不是当前⽬录下的。⽽是构建之后⽬录下的
事件
Cordova 给我们提供了很多的事件。应⽤程序代码中可以添加这些事件的监听。
设备就绪
它是 Cordova 设备 API 准备好，并可以访问的信号。相当于 Web ⻚⾯中的 onload 事件。
1 document.addEventListener('deviceready', onDeviceReady, false);
2
3 function onDeviceReady() {
4 // 设备就绪后的其他逻辑代码
5 }
应⽤挂起
1 function onDeviceReady() {
2 // 当前应⽤切换到后台时，触发 pause 事件
3 document.addEventListener('pause', function() {
4 alert('设备挂起');
5 })
6 }
回退按钮
function onDeviceReady() {
// 点击回退按钮时，触发 backbutton 事件
document.addEventListener('backbutton', function() {
alert('回退按钮')
})
}
菜单按钮
function onDeviceReady() {
// 按下菜单按钮时，触发 menubutton 事件
document.addEventListener('menubutton', function() {
alert('按下菜单按钮');
})
}
更多详情：https://cordova.apache.org/docs/en/10.x/cordova/events/events.html
config.xml
简介
config.xml 是 Cordova 应⽤程序的全局配置⽂件。进⾏项⽬构建后，该⽂件会被复制到平台的⼦⽬录下。例如：
app/platforms/android/res/xml/config.xml
app/platforms/ios/AppName/config.xml
app/platforms/browser/config.xml
Widget
Widget 是 config.xml ⽂档的根元素。
<?xml version='1.0' encoding='utf-8'?>
<widget
id="me.cliu.hellocordova"
version="1.0.0"
xmlns="http://www.w3.org/ns/widgets"
xmlns:cdv="http://cordova.apache.org/ns/1.0"
>
<!- 其他配置 -->
</widget>
name
指定应⽤程序的正式名称，因为它出现在设备的主屏幕上
<name>HelloCordova</name>
description
指定可在应⽤商店上市出现的元数据
<description>A sample Apache Cordova application</description>
author
指定可在应⽤商店上市出现的联系⼈信息。
<author email="dev@cordova.apache.org" href="http://cordova.io"></
author>
content
声明应⽤的起始⻚⾯，默认是 index.html，指代 www ⽬录下的 index.html
<content src="startPage.html"></content>
access
声明与应⽤程序通信的外部域名集合。
<access origin="http://google.com"></content>
更多详情，可以访问 ⽩名单指南
allow-navigation
声明 WebView 可以导航到哪些 URL
1 <!-- 允许链接到 example.com -->
2 <allow-navigation href="http://example.com/*" />
3
4 <!-- 通配符设置协议, ⼦域名及域名下的路径 -->
5 <allow-navigation href="*://*.example.com/*" />
allow-intent
声明应⽤请求系统打开的 URL
1 <allow-intent href="http://*/*" />
2 <allow-intent href="https://*/*" />
3 <allow-intent href="tel:*" />
4 <allow-intent href="sms:*" />
engine
指定有关准备过程中要还原的平台的详细信息。
1 <engine name="android" spec="https://github.com/apache/cordova-and
roid.git#5.1.1" />
2 <engine name="ios" spec="^4.0.0" />
plugin
指定准备过程中要还原的插件的详细信息。
1 <plugin name="cordova-plugin-device" spec="^1.1.0" />
2 <plugin name="cordova-plugin-device" spec="https://github.com/apac
he/cordova-plugin-device.git#1.0.0" />
preference
偏好设置。设置各种 名/值 格式的属性。其中 名 ⼤⼩写敏感。很多属性在特定平台下名称是唯⼀的。
1 <!-- 状态条的背景⾊ -->
2 <preference name="StatusBarBackgroundColor" value="#0000FF" />
3
4 <!-- Splash ⻚⾯的停留时间 -->
5 <preference name="SplashScreenDelay" value="3000" />
更多详情:
http://cordova.axuer.com/docs/zh-cn/latest/config_ref/index.html#preference
platform
声明平台
<platform name="android">
<!-- Android 平台下的配置 -->
<preference name="Fullscreen" value="true" />
</platform>
hook
特定动作发⽣时，需要执⾏的⾃定义脚本
<!-- type="钩⼦名称" src="执⾏脚本" -->
<hook type="after_plugin_install" src="scripts/afterPluginInstall.js" />
钩⼦详情：https://cordova.apache.org/docs/en/10.x/guide/appdev/hooks/index.html
更多详情：https://cordova.apache.org/docs/en/10.x/config_ref/index.html
Cordova 命令
基本语法
cordova <command> [options] -- [platformOpts]
查看帮助
cordova help
项⽬命令列表
常⽤命令
1 cordova install android // 将编译好的应⽤程序安装到模拟器上
2 cordova emulate android // 在模拟器上运⾏
3 cordova serve android // 在浏览器运⾏
4 cordova build android // 打包 Cordova 项⽬到 android 平台。
5 cordova run android // 通过 USB 直接安装到真机（这⾥已经包括了 build 命令）
命令语法
这⾥以 管理平台 为例
1 cordova {platform | platforms} [
2 add <platform-spec> [...] {--save | link=<path> } |
3 {remove | rm} platform [...] |
4 {list | ls} |
5 check |
6 save ]
上述命令语法是官⽹给出的，可以拆分成如下命令
添加平台
cordova platform add android
删除平台
1 cordova platform remove android
2 # 或
3 cordova platform rm android
列出平台
1 cordova platform list
2 # 或
3 cordova platform ls
我们可以看到，官⽅给出的语法，实际上是各个命令的组合⽅式。
命令参数
通估参数，可以限制命令的执⾏效果。例如：
1 # 安装插件，并将插件记录在 package.json 中 (默认)
2 cordova plugin add cordova-plugin-geolocation --save
3
4 # 只安装插件，不记录在 package.json 中
5 cordova plugin add cordova-plugin-geolocation --nosave
更多详情：https://cordova.apache.org/docs/en/10.x/reference/cordova-cli/index.html
插件
cordova 插件是连接 web 应⽤程序和设备平台之间的⼀个桥梁。
- 插件分类
cordova-plugin-geolocation
该插件可以获取位置信息（经纬度）
详情查看：https://www.npmjs.com/package/cordova-plugin-geolocation
安装
cordova plugin add cordova-plugin-geolocation
添加触发按钮
<button id="getPosition">获取位置</button>
<button id="watchPosition">监测位置</button>
添加监听事件
document.getElementById("getPosition").addEventListener("click", getPosition);
document.getElementById("watchPosition").addEventListener("click",watchPosition);
获取位置
function getPosition() {
var options = {
enableHighAccuracy: true,
maximumAge: 10000, // 毫秒为单位
}
navigator.geolocation.getCurrentPosition(onSuccess, onError, options)
function onSuccess(position) {
alert('经度：' + position.coords.longitude + "\n" +
'纬度：' + position.coords.latitude + "\n" +
'Altitude: ' + position.coords.altitude + '\n' + // 高度
'Accuracy: ' + position.coords.accuracy + '\n' + // 精确度
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' + // 高度精确度
'Heading: ' + position.coords.heading + '\n' + // 方向
'Speed: ' + position.coords.speed + '\n' + // 速度
'Timestamp: ' + position.timestamp + '\n'
);
}
function onError(error) {
alert("Code: " + error.code + "\n Message: " + error.message)
}
}
监测位置
function watchPosition() {
var options = {
maximumAge: 3600000,
timeout: 3000,
enableHighAccuracy: true,
}
var watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
function onSuccess(position) {
alert('Latitude: ' + position.coords.latitude + '\n' +
'Longitude: ' + position.coords.longitude + '\n' +
'Altitude: ' + position.coords.altitude + '\n' +
'Accuracy: ' + position.coords.accuracy + '\n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' +
'Heading: ' + position.coords.heading + '\n' +
'Speed: ' + position.coords.speed + '\n' +
'Timestamp: ' + position.timestamp + '\n');
};
function onError(error) {
alert('code: ' + error.code + '\n' +'message: ' + error.message + '\n');
}
}
取消监测
var watchID = navigator.geolocation.watchPosition(onSuccess, onError,
{ enableHighAccuracy: true });
// ...later on...
navigator.geolocation.clearWatch(watchID);
cordova-plugin-camera
该插件允许使⽤摄像头拍照，或在相册中选取图⽚。
安装
cordova plugin add cordova-plugin-camera
添加按钮和图像
<button id="takePic">拍照</button>
<button id="getPic">从相册中选取</button>
<img id="myImage"></img>
添加事件监听
// 拍照
document.getElementById("takePic").addEventListener("click", takePic);
// 从相册中选取
document.getElementById("getPic").addEventListener("click", getPic);
拍照
function takePic() {
navigator.camera.getPicture(onSuccess, onError, {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI
})
function onSuccess(imageURI) {
var image = document.getElementById('myImage')
image.src = imageURI
}
function onError(message) {
alert("拍照失败：" + message)
}
}
从相册中选取
const getPic = () => {
navigator.camera.getPicture(onSuccess, onFail, {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY
});
function onSuccess(imageURL) {
var image = document.getElementById('myImage');
image.src = imageURL;
}
function onFail(message) {
alert('Failed because: ' + message);
}
}
cordova-plugin-device
该插件⽤来获取设备信息，例如：操作系统，版本号
安装
cordova plugin add cordova-plugin-device
添加按钮
<button id="deviceInfo">设备信息</button>
添加事件监听
document.getElementById("deviceInfo").addEventListener("click", deviceInfo);
获取设备信息
function deviceInfo() {
alert("Cordova 环境的版本：" + device.cordova + "\n" +
"Device model: " + device.model + "\n" +
"操作系统: " + device.platform + "\n" +
"UUID: " + device.uuid + "\n" +
"是否在模拟器上: " + device.isVirtual + "\n" +
"设备序列号: " + device.serial + "\n" +
"操作系统版本号: " + device.version + "\n" +
"终端制造商: " + device.manufacturer + "\n"
)
}
⾃定义插件
安装 Plugman
npm install -g plugman
创建插件
注意：存放插件的⽬录，不能有中⽂和空格等特殊符号。例如：我先创建⼀个⽬录 cordovaplugin，然后cd 进⼊
plugman create --name [插件名] --plugin_id [插件id] --plugin_version [插件本]
plugman create --name MyToast --plugin_id me.cliu.mytoast --plugin_version 1.0.0
cd MyToast
添加⽀持平台
进⼊插件⽬录之后（cd MyToast），我们添加插件⽀持的平台
plugman platform add --platform_name android # 安卓平台⽀持
plugman platform add --platform_name ios # iOS 平台⽀持（不⽀持可以不添加）
初始化插件
进⼊到插件⽬录，然后运⾏
cd MyToast
npm init
# 或
plugman createpackagejson [插件路径]
在项⽬中安装⾃定义插件
cd [Cordova项⽬⽬录]
cordova plugin add [插件路径]
// 我本地
cordova plugin add D:\cliu\HelloCordova\MyToast
声明触发按钮
在 [项⽬⽬录]/www/index.html 中添加如下⼀⾏
<button id="toast">点我提示</button>
调⽤⾃定义插件
在 [项⽬⽬录]/www/js/index.js 中添加如下内容
// 添加自定义插件的事件监听
document.getElementById('myToast').addEventListener('click', myToast)
// 自定义插件
function myToast() {
cordova.plugins.MyToast.coolMethod("hello", onSuccess, onError)
function onSuccess(message) {
alert("MyToast success " + message)
}
function onError() {
alert('MyToast Error')
}
}
项目
将 Vue 项⽬和 Cordova 结合
Vue 项⽬初始化
安装 Vue CLI
npm install -g @vue/cli
创建 Vue 项⽬
vue create vc
Vue 集成 Cordova
进⼊ Vue 项⽬
cd [你的 Vue 项⽬⽬录]
修改 Vue 打包位置
在 Vue 项⽬⽬录下声明 vue.config.js
module.exports = {
publicPath: './', // 必填
outputDir: 'www', // 打包后的⽬录名称（为了适配 Cordova，这⾥必须写成 www）
assetsDir: '', // 静态资源⽬录名称
productionSourceMap: false, // 去掉打包的时候⽣成的 map ⽂件
lintOnSave: false,
}
修改 Vue 中的 index.html
- 在 public/index.html 的 head 中添加 Cordova 需要的 meta 标签
- 在 public/index.html 的 body 中添加 cordova.js
修改 Vue 中的 main.js
在 src/main.js 中添加 Cordova 的 deviceready 事件
if (process.env.NODE_ENV === 'production') {
document.addEventListener('deviceready', function() {
app.mount('#app')
}, false)
} else {
app.mount('#app')
}
将 Cordova 中的 config.xml 复制到 Vue 项⽬中
添加平台
cordova platform add android --save
添加⽩名单插件
cordova plugin add cordova-plugin-whitelist
cordova prepare
运⾏
cordova run android
将 Cordova 命令集成到 Vue 命令中
安装 Cordova 相关插件
npm install corodva-lib # 包含 Cordova 和 Plugman 的常⽤命令
⾃定义 Cordova 命令
在 Vue 项⽬⽬录下创建 cdva.js。⽬的是将 Cordova 命令，集成到 Vue 命令中。
const { cordova } = require('cordova-lib')
// 清除
const clean = api => {
api.registerCommand('clean', args => {
return cordova.clean()
.catch(console.error)
})
}
// 构建
const build = api => {
const { build } = api.service.commands
const originalBuild = build.fn
build.fn = (...args) => {
return originalBuild(...args)
.then(() => cordova.prepare())
.then(() => cordova.compile({ options: args[0] }))
.catch(console.error)
}
}
// 运行
const develop = api => {
api.registerCommand('develop', args => {
return cordova.run()
.catch(console.error)
})
}
// 将命令导出
module.exports = (api, options) => [clean, build, develop].map(fn => fn(api, options))
修改 package.json
添加上述命令的⽀持代码
{
// ....
"scripts": {
"clean": "vue-cli-service clean",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"develop": "vue-cli-service develop"
},
"vuePlugins": {
"service": [
"cdva.js"
]
},
// ....
}
vue-cli-service:
https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-inspect
vuePlugins:
https://cli.vuejs.org/guide/plugins-and-presets.html#installing-plugins-in-anexisting-project
通过 develop 运⾏ Cordova
npm run develop
实时调试
Cordova 没有热更新，所以每次代码修改后，都需要重新启动才能看到效果。这⾥，我们可以通过 Vue的热更新，来近似地实现 Cordova 的实时调试。
修改 config.xml
将 Cordova 默认加载的地址，由本地的 index.html 改成上⾯ Vue 的公⽹ IP 地址
项目问题总结
vue 开发时需要设置代理而 APP 不需要代理
-
vue 设置代理
编辑 vue.config.jsmodule.exports = { outputDir: 'www', publicPath: './', devServer: { proxy: { '/news': { target: 'http://v.juhe.cn', changeOrigin: true, pathRewrite: { "^/news": "" } }, "/weather" : { target: 'https://devapi.qweather.com/v7/weather', changeOrigin: true, pathRewrite: { "^/weather": "" } } } } } -
APP接口调用判断
var newsProxy = "" var weatherProxy = "" if (process.env.NODE_ENV === 'production') { newsProxy = "http://v.juhe.cn" weatherProxy = "https://devapi.qweather.com/v7/weather" } else { newsProxy = "/news" weatherProxy = "/weather" }
vue 项目正常 APP 出现白屏 首先需要检查是否配置了白名单
扫⼀扫
这⾥我们通过 cordova-plugin-qrscanner 来实现扫码功能。
安装
cordova plugin add cordova-plugin-qrscanner
扫码
const doScan = () => {
if (typeof QRScanner !== 'object') {
alert('QRScanner 不存在')
return;
}
QRScanner.prepare(onDone)
function onDone(err, status) {
if (err) {
console.log(err._message)
}
if (status.authorized) {
QRScanner.scan(displayContents)
function displayContents(err, text) {
if (err) {
console.error(err)
} else {
alert(text)
// 后续操作
}
}
// 让 webview 透明，执行扫码操作
QRScanner.show()
} else if (status.denied) {
alert('用户拒绝扫码')
} else {
alert('未获取数据')
}
}
}
// 挂载完成
onMounted (() => {
doScan()
})
切换闪光灯
const toggleLight = () => {
alert('切换闪光灯')
if (state.lightOn === false) {
QRScanner.enableLight((err, status) => {
err && console.log(err)
state.lightOn = true;
})
} else {
QRScanner.disableLight((err, status) => {
err && console.log(err)
state.lightOn = false;
})
}
}
切换摄像头
const toggleCamera = () => {
alert('切换摄像头')
if (state.frontCamera === false) {
QRScanner.useFrontCamera((err, status) => {
err && console.log(err)
state.frontCamera = true
})
} else {
QRScanner.useBackCamera((err, status) => {
err && console.log(err)
state.frontCamera = false
})
}
}
重置⻚⾯背景
onUnmounted(() => {
document.getElementById('app').style.backgroundColor = "#FFFFFF"
document.querySelector('body').style.backgroundColor = "#FFFFFF"
try {
QRScanner.hide(status => {
console.log('关闭扫描' + JSON.stringify(status))
})
QRScanner.destroy(status => {
console.log('销毁扫描' + JSON.stringify(status))
})
} catch (error) {
console.log(error)
}
})
Splash ⻚
cordova-plugin-splashscreen
详情查看：https://www.npmjs.com/package/cordova-plugin-splashscreen
安装
cordova plugin add cordova-plugin-splashscreen
添加启动屏幕
打开项⽬⽬录下的 config.xml，在 widget 中添加配置项
<platform name="android">
<splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi" />
<splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi" />
<splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi" />
<splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi" />
<splash src="res/screen/android/splash-land-xxhdpi.png" density="land-xxhdpi" />
<splash src="res/screen/android/splash-land-xxxhdpi.png" density="land-xxxhdpi" />
<splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi" />
<splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi" />
<splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi" />
<splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi" />
<splash src="res/screen/android/splash-port-xxhdpi.png" density="port-xxhdpi" />
<splash src="res/screen/android/splash-port-xxxhdpi.png" density="port-xxxhdpi" />
</platform>
<platform name="ios">
<!-- ios 设置省略 -->
</platform>
图标可以针对不同尺⼨的屏幕⽣成。⽣成⽹站：https://icon.wuruihong.com/
因为 splash 图⽚的⽣成收费，因此，我这⾥⽤了同⼀张图⽚另外，还可以通过 land 和 port 前缀指定横屏和竖屏的 splash
<splash src="res/screen/android/splash.png" density="land-hdpi" /> <!-- 横屏启动⻚ -->
<splash src="res/screen/android/splash.png" density="port-hdpi" /> <!-- 竖屏启动⻚ -->
详情查看 扩展知识
设置启动屏幕
打开项⽬⽬录下的 config.xml，在 widget 中添加配置项
<preference name="SplashScreenDelay" value="3000" /> <!--
启动时⻓，单位：毫秒 -->
<preference name="FadeSplashScreen" value="false"/> <!--
启动淡⼊淡出 -->
<preference name="FadeSplashScreenDuration" value="750"/> <!--
淡⼊淡出时⻓，默认 500 -->
<preference name="SplashMaintainAspectRatio" value="true" /> <!--
true：不拉伸图⽚，默认 false -->
<preference name="SplashShowOnlyFirstTime" value="true" /> <!--
只启动⼀次 -->
扩展知识
两种布局
- land （landscape - 横屏）
- port （portrait - 竖屏）
密度
密度为每平⽅英⼨（inch）中的像素（px）数，常⽤ dpi （Dots Per Inch - 每英⼨点数）来表示。
- ldpi 低密度
- mdpi 中等密度
- hdpi ⾼密度
屏幕⼤⼩
国际化
通过 cordova-plugin-globalization 获取当前语⾔信息。然后通过 Vue 的 i18n 来实现多语⾔的效果。
下载 i18n
npm install vue-i18n@next
创建语⾔包
src
├── assets
| └──i18n 国际化⽬录
│ └── en.js 英⽂
| └── zh.js 中⽂
| └── index.js
index.js
import { createI18n } from 'vue-i18n'
import enLocale from './en'
import zhLocale from './zh'
const messages = {
en: { ...enLocale },
zh: { ...zhLocale }
}
const i18n = createI18n({
locale: localStorage.getItem('lang') || 'zh',
messages
})
export default i18n
引⼊ i18n
import i18n from './assets/i18n/index'
const app = createApp(App)
app.use(i18n)
使⽤语⾔包
<template>
<div>
<van-tabbar v-model="active">
<van-tabbar-item to="/" icon="home-o">{{$t('nav.home')}}</va
n-tabbar-item>
<van-tabbar-item to="/news" icon="desktop-o">{{$t('nav.news')}}</van-tabbar-item>
<van-tabbar-item to="/user" icon="user-o">{{$t('nav.profile')}}</van-tabbar-item>
</van-tabbar>
</div>
</template>
电话短信
<van-grid :gutter="6" border>
<van-grid-item icon="peer-pay" text="短信" to="" url="sms:18764219356" />
<van-grid-item icon="phone-o" text="呼叫" to="" url="tel:4006282835" />
</van-grid>
FAQ
1621
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
