大家好,我是“前端小鑫同学”,😇长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~
来自capacitorjs网站的一张截图:
开始前注意: 前端开发环境和安卓开发环境的依赖还需自行安装
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
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
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都可以监听重新编译的,你们知道有类似的功能吗?