尝试Capacitor(Vue+Android)混合开发
2023-02-18 16:41:29 时间
大家好,我是“前端小鑫同学”,?长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~
前言:
Capacitor介绍:
- Capacitor是一个开源的并且在Native端运行的跨平台的web应用。
- 使用JavaScript、HTML和CSS创建跨平台iOS、Android和渐进式Web应用程序。
- 很好的将Cordova迁移到Capacitor,因为它99%的向后兼容Cordova。来自Vue3文档中的一张截图:
来自capacitorjs网站的一张截图:
开始前注意: 前端开发环境和安卓开发环境的依赖还需自行安装
尝试一下走起:
1. 准备一个前端环境:
- 创建项目:
yarn create vite
- 安装依赖:
cd .\v3-native-demo\
&yarn
- 首次编译:
yarn build
2. 准备Capacitor环境:
文档地址:https://capacitorjs.com/solution/vue
- 安装核心模块:
npm i @capacitor/core
- 安装脚手架:
npm i @capacitor/cli
- 初始化项目:
npx cap init <project-name> <package-name> --web-dir=dist
3. 准备Android环境:
文档地址:https://capacitorjs.com/docs/getting-started#where-to-go-next
- 安装安卓环境依赖:
npm install @capacitor/android
- 添加安卓环境到项目:
npx cap add android
- 使用AS打开安卓项目:
npx cap open android
,默认AndroidSDK目录可能找不到,执行后AS会自动检索SDK目录进行更新。 - 编译安卓项目到模拟器:
npx cap run android
4. 官方插件使用(@capacitor/toast):
文档地址:https://capacitorjs.com/docs/apis
- 安装插件依赖:
npm install @capacitor/toast
- 同步代码:
npx cap sync
- 更新前端: ```javascript import { Toast } from '@capacitor/toast';
const showHelloToast = async () => { await Toast.show({ text: 'Hello!', }); };
#### 5. 自定义安卓插件:
**插件简单指南:**[https://capacitorjs.com/docs/android/custom-code](https://capacitorjs.com/docs/android/custom-code)
**完整插件指南:**[https://capacitorjs.com/docs/plugins/android](https://capacitorjs.com/docs/plugins/android)
1. 定义插件:
```javascript
package cn.it200.v3demo;
import com.getcapacitor.JSObject;
import com.getcapacitor.Plugin;
import com.getcapacitor.PluginCall;
import com.getcapacitor.PluginMethod;
import com.getcapacitor.annotation.CapacitorPlugin;
@CapacitorPlugin(name = "Echo")
public class EchoPlugin extends Plugin {
@PluginMethod()
public void echo(PluginCall call) {
String value = call.getString("value");
JSObject ret = new JSObject();
ret.put("value", value);
call.resolve(ret);
}
}
注册插件MainActivity=>onCreate():
public class MainActivity extends BridgeActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
registerPlugin(EchoPlugin.class);
}
}
在前端代码整合调用:
// 整合
import { registerPlugin } from '@capacitor/core';
export interface EchoPlugin {
echo(options: { value: string }): Promise<{ value: string }>;
}
const Echo = registerPlugin<EchoPlugin>('Echo');
export default Echo;
// 调用
const { value } = await Echo.echo({ value: 'Hello World!' });
console.log('Response from native:', value);
结语: 通过上面的一顿操作后发现,从和Cordova还是很相似的,插件的注册和我自己框架的方式类似也是通过注解+反射来实现的,但是每次修改完前端代码后不能很方便的同步到模拟器上不知道要怎么办?ReactNative都可以监听重新编译的,你们知道有类似的功能吗?
相关文章
- 【黄啊码】如何用小程序实现世界杯参赛队伍投票
- 《Android App开发进阶与项目实战》资源下载和内容勘误
- 微信小程序使用阿里巴巴的矢量图标iconfont
- 微信小程序 点击显示隐藏 极简Tab标签 点击添加class样式
- 微信小程序 wx:if 与 hidden区别
- 微信小程序 CSS border-radius元素 overflow:hidden失效问题 iPhone ios 苹果兼容问题
- 微信小程序 自定义 tabBar案例 官方案例迁入无效解决方法 非 tab 页显示 tabBar的问题解决 自定义tabBar与原生tabBar以及自写伪tabbar的区别
- IOS APPStore 上传更新应用版本 软件
- Android - NETD解读
- 【Android自定义控件】不用ScrollView实现上下两屏滑动
- Android实现TextView跑马灯效果
- Android进程间通信(一)- Bundle
- Android进程间通信(二)- Messenger
- 微信小程序实现上拉和下拉加载更多
- 微信小程序 scroll-view 完成上拉加载更多
- 微信小程序实现tabs选项卡
- java和vue学生定位打卡小程序人脸识别打卡系统源码网站学生考勤系统
- Java疫苗预约小程序线上疫苗预约系统
- 移动研发提效?小程序容器技术来帮忙!
- 微信小程序(一)自定义导航栏和fixed失效及各机型兼容问题