VUE+HBuilder的uniapp技术路线开发应用使用总结

本文讲述了作者在开发过程中从使用uniappSQLite遇到的挑战,转向使用电脑上的服务器端存储,探讨了HBuilder的适用性、兼容性问题以及在uniapp、Web和移动端之间的文件系统操作。还涉及了Vue、Vuex和后端技术如Flask的使用情况。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用总结

  • 本来想做一个记录日常数据的应用,主要在Android端使用,后来发现在uniapp中使用sqllite数据库不是像原生中那样简单(所以当前准备去进行另一个路线,就是给我使用的电脑都安装一个portalble的服务端,用来记录数据,这样也不会占用手机的空间了)。当前的使用体验如下:
  • 考虑到兼容性问题,HBuilder比较适合写UI加服务端存储的项目(各种小程序,网页商城)(当然其他功能也可以进行uniapp的安卓原生插件开发或者与原生Android交互传递数据
  • Hbuilder编辑器在使用打包时要进行登录,手机绑定。使用中还出现了以下问题:

在这里插入图片描述

基础

重要组成 说明 注释
vue的基础语法 插值和数据绑定,条件与循环等 重要
App.vue 应用入口文件,监听应用生命周期、配置全局样式、配置全局的存储globalData 处理app启动,切换时的命令,可以不用管
main.js/main.uts 初始化vue实例、定义全局组件、使用需要的插件如 i18n、vuex import作用
pages.json 页面管理,pages数组中第一项表示应用启动页 重要配置文件
vue.config.js
### 集成 `usb-serial-for-android` 到 UniApp 为了在 UniApp 中实现与 Android 设备的 USB 串口通信,可以采用一种混合开发的方式。具体来说,通过原生模块来处理底层硬件交互,并利用 JavaScript 脚本调用这些功能。 #### 创建自定义 Native Plugin 由于 `usb-serial-for-android` 是一个 Java 库[^1],而 UniApp 主要用于构建跨平台应用并主要依赖于前端技术栈(HTML/CSS/JS),因此需要创建一个桥接组件以便两者之间互相协作: 1. **引入库文件** 将 `usb-serial-for-android` 的 AAR 或 JAR 文件加入到项目的 native 层级中去。这通常涉及到修改 build.gradle 文件以包含该第三方库作为依赖项。 2. **编写 JNI 接口** 编写必要的本地接口方法,允许 JS 端发起请求给 Android 平台执行特定操作,比如打开连接、发送命令等。这部分工作可能涉及到了解一些关于 Android NDK 和 JNI (Java Native Interface) 的基础知识。 3. **封装 API 函数** 使用上述提到的方法,在 Android Studio 内部完成对于 USB 连接管理以及数据传输逻辑的具体编码;之后再把这些能力暴露出来供 HBuilderX (或其他 IDE)中的 Vue 组件访问。 4. **注册插件服务** 完成以上步骤后,则需按照官方文档指示把新建立好的 plugin 注册至 app.json 下方的应用配置里边儿,从而让整个工程识别此扩展包的存在。 5. **测试验证** 构建 APK 对应版本号进行真机调试,确保一切正常运作后再考虑上线发布事宜。 ```javascript // 示例:uni-app页面内调用native插件函数 export default { methods: { async initUsb() { try { const result = await plus.android.importClass('com.yourpackage.name'); console.log(result); } catch (error) { console.error(error.message); } }, sendCommand(commandString){ // 发送指令... } } } ``` 考虑到实际应用场景可能会更加复杂多变,建议开发者们依据自身需求灵活调整方案细节。另外值得注意的是,虽然这里介绍了一种可行的技术路线图,但在实施过程中仍有许多潜在挑战等待克服——例如不同品牌型号手机间存在的兼容性差异等问题都需要仔细考量解决办法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值