超详细手把手教你cordova开发使用指南+自定义插件，jsbridge
Cordova是什么
使用前端技术 开发跨平台web App的工具
底层原理:HTML+CSS搭建页面, JS和原生交互
交互原理：Cordova插件
环境配置
安卓开发基础环境搭建的文章可以参考一下我的其他博客哇，有详细的图文
ios的话等我不忙啦发
Cordova安装 （可以根据自己需求选择安装全局还是安装自己项目文件路径）
npm install -g cordova
或者在项目路径运行cmd命令
npm install cordova
创建Cordova工程
npx cordova create splugin com.xiaojin.splugin Splugin
Create命令详细解析:
- 保存路径:splugin
- 项目id:com.xiaojin.splugin,
默认值是io.cordova.hellocordova
安卓中的Java包名, iOS的bundleID都需要用到,此值后期可修改 - 项目name:Splugin
- config.xml中会看到 id和name
添加平台 platform
cd splugin
npx cordova platform add android
查看你添加的平台:
npx cordova platform ls
特别注意:使用CLI构建, 你不可以编辑/platforms/目录. Cordova会根据需求定期自动覆盖此目录中的文件.
使用虚拟机
使用adb链接夜神模拟器
运行项目
npx cordova run android
遇到报错（如果你没有遇到就跳过哦）
ANDROID_SDK_ROOT=undefined (recommended setting)
ANDROID_HOME=C:\Users\Jindi J Sun\AppData\Local\Android\Sdk (DEPRECATED)
Using Android SDK: C:\Users\Jindi J Sun\AppData\Local\Android\Sdk
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio
解决报错
- 添加环境变量 ANDROID_SDK_ROOT 变量值同 ANDROID_HOME
- 以管理员身份重新打开vscode,重新执行 npx cordova run android
添加插件进行JS 和 原生交互
点击搜索插件
安装插件
npx cordova plugin add cordova-plugin-geolocation
安装插件成功
用代码来进行交互
- \splugin\www\index.html
<button id="getPosition">点击获取位置</button>
- \splugin\www\js\index.js
document.addEventListener('deviceready', onDeviceReady, false);function onDeviceReady() {// Cordova is now initialized. Have fun!console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);document.getElementById('deviceready').classList.add('ready');// 添加获取位置代码document.getElementById('getPosition').addEventListener('click', getPosition)
}
function getPosition() {var options = {enableHighAccuracy: true,maximumAge: 10000,}navigator.geolocation.getCurrentPosition(onSuccess, onError, options)function onSuccess(position) {alert('经纬度：'+ position.coords.longitude)}function onError(err) {alert('出错啦'+ err.message)}
}
使用真机调试–更加详细的调试步骤请移步此文–cordova第三方插件的创建,修改以及调试指南—真机调试，浏览器调试
运行成功
自定义插件，首先你需要一定原生能力
下载创建插件的命令行工具
npm install plugman
创建插件
npx plugman create --name [插件名] --plugin_id [插件ID] --plugin-version [插件版本】
我这里用这个命令 plugin_id 和 plugin_version是可以自己写的哦
npx plugman create --name tangdoudou --plugin_id xiao.jin.tangdoudou --plugin_version 1.0.0
添加平台支持
plugman platform add --platform_name [android|ios]
初始化插件
plugman createpackagejson [插件路径]
- 非常不好意思，输入法老是在我截图的时候失效
进入我们项目目录，引入我们刚刚自定义的插件
cd ../
cd splugin
npx cordova plugin add ../tangdoudou/
插件引入成功
常用命令 命令之前根据需求添加npx
cordova -v //版本检测
cordova platform add android
cordova platform add ios
完成后运行以下命令查看：
cordova platfrom list
要移除Android平台支持，可以运行：
cordova platform rm android
cordova build android //只针对Andorid平台编译
实际上build命令对应于以下两个命令：
cordova prepare android
cordova compile android
这意味着你可以仅执行prepare命令，然后用SDK开发环境去另外编译。
cordova requirements //检测是否满足构建平台的要求
cordova plugin add cordova-plugin-camera //添加插件
cordova plugin ls //插件列表
欢迎路过的小哥哥小姐姐们提出更好的意见哇~~
超详细手把手教你cordova开发使用指南+自定义插件，jsbridge相关推荐
- 超详细——手把手教你用threejs实现一个酷炫的模型发光扫描效果(三)
上一篇文章 voidjay,公众号:web前端可视化超详细--手把手教你用threejs实现一个酷炫的模型发光扫描效果(二) 上一篇文章已完成基本效果的实现,本文则完成整个项目的灵魂:发光效果以及模型 ...
- aspen二元体系共沸组分_超详细 | 手把手教你组分结构预测
好久不见,读者朋友们,笔者本次介绍USPEX官方案例16-18:大体系定组分稳定结构预测.以德拜温度为目的进行定组分结构预测.计算量惊人的三元体系的变组分结构预测. 01 USPEX官方案例讲解(16 ...
- 超详细——手把手教你用threejs实现一个酷炫的模型发光扫描效果(一)
前言 模型特效是大家在3d可视化项目所追求的,但很多人苦于无法实现一个好的模型效果,本次就手把手一步一步教你实现一个酷炫的模型发光扫描特效,帮让你的项目提升一个逼格.话不多说,先上效果: 本文所使用的 ...
- ESP8266 Non-OS SDK 开发之旅 基础篇① 初识 Non-OS SDK，史上超级详细手把手教小白20分钟快速搭建SDK软件开发环境，完成第一个例子Hello World！
文章目录 1.前言 2. SDK概述 2.1 SDK使用流程 2.2 ESP8266 HDK -- 硬件开发工具 2.3 ESP8266 SDK -- 软件开发工具包 2.3.1 Non-OS SDK ...
- Android studio百度地图SDK开发 2020最新超详细的Android 百度地图开发讲解(3) 路线规划步行骑行驾车路线规划
2020最新超详细的Android 百度地图开发讲解(3) 路线规划步行骑行驾车路线规划 开发前配置,显示基本地图,实时定位等查看之前代码,此博客紧接上一博客:https://blog.csdn.ne ...
- 超详细的Android百度地图开发：在APP上定位并显示出来
超详细的Android百度地图开发:在APP上定位并显示出来 一 写在前面 二 注册百度开发者账户.申请API KEY 三.代码实现 四.问题 五.总结 一 写在前面 由于项目所需,我需要在手机APP ...
- 400 多行代码！超详细 Rasa 中文聊天机器人开发指南 | 原力计划
作者 | 无名之辈FTER 责编 | 夕颜 出品 | 程序人生(ID:coder_life) 本文翻译自Rasa官方文档,并融合了自己的理解和项目实战,同时对文档中涉及到的技术点进行了一定程度的扩展, ...
- 手把手教你搭建开发环境之Java开发
大家好呀,从今天开始,我们的手把手系列教程就正式开始啦. 如果你觉得本文对你有一些帮助,欢迎大家关注.点赞.分享给需要的小伙伴们,谢谢大家啦. 前言 Java虽然是一个比较老的语言,但到现在依然充满了 ...
- 手把手教用XNA开发winphone7游戏（五）大结局
Alien Game逻辑 在这最有一个部分你将创建game-specific logic和 helper方法和类.胜利就在眼前,你的第一个winphone7程序就要出现了,加油加油!!(感谢http: ...
最新文章
- 【虚拟化实战】容灾设计之三Stretched Cluster
- System.Windows.Forms.ListView : Control
- StackOverflow 上面最流行的 7 个 Java 问题！
- uva 11732 - strcmp() Anyone? 不错的Trie题
- python字典的常见操作_Python 字典(Dictionary) 基本操作
- 欢迎归来 ，“LiveVideoStack新闻站”
- MatLab的排序函数-sort
- Python_爬虫笔记_2018.3.19
- vs2010格式化html,VS中的快捷键快速格式化代码,使好看,整齐
- Unity发布windows程序，Fullscreen Mode设置为Windowed，可运行总是全屏
- 搜索python设计题的微信公众号_appium+python自动化42-微信公众号 (可能以后会遇到也遇到切换不了webview的问题 记录再此 还没试)...
- 盘点国内6大抗DDOS攻击服务商
- PBS任务只排队，不运行
- MAC_BOOKPRO苹果电脑系统常用快捷键大全
- js 高德地图，地图上落点，并点击地图上的图片可进行切换图片
- edge下载Vue.js devtools
- 引用 SDE气体灭火系统设计、施工、验收规范
- Windows ❀ CMD中使用批量Ping网段命令教程
- ST_顺控指令-学习方法
- 逆战———微信小程序