
经验分享 如何在网页中唤起鸿蒙应用
通过短信、落地页唤起应用是非常常见的业务需求,这里介绍如何在鸿蒙中唤起应用。
在 Android/iOS 中唤起应用一般有两类方案,URL Schema 和 Universal Links(安卓中叫 App Links)。
基本概念
使用 URL Schema 唤起,是传统方案,用户通过访问自定义的 uri 网址,来打开应用并传递参数,比如 weixin://
这个 schema 是唤起微信的方案。
使用 Universal Links 这种方案,是用户访问一个 https 网页,这个网页在对应的后台已经认证过,打开这个网页时候可以打开应用并传递对应的参数。
优点缺点对比。
URL Schema
缺点
使用 URL Schema 这种方式打开应用,系统一般会弹窗提示用户是否打开,,用户打开引用每多一个步骤就会流失的风险。再者 schema 方案谁都可以注册,可能有重复注册 schema 的方式,用户需要正确选择才能打开应用,容易困惑、错误选择。
URL Schema 优点
简单,常规。
Universal Links
缺点
开发稍麻烦,需要一个所有人都可以访问的网页,在国内必须备案通过并且使用 https
Universal Links 优点
这种方案有兜底机制,不打扰用户,不会阻塞用户打开应用。
鸿蒙中方案
鸿蒙中也有类似的方案
- App Linking 类似 Universal Links,在华为 AGC 后台认证域名
- Deep Linking 类似 URL Schema ,自定义 uri
Deep Linking 方案
官方文档地址《 使用Deep Linking实现应用间跳转》
使用 Deep Linking 方案,需要1个步骤
- 配置 module.json5 ,注册 schema
在 HBuilderX 中,打开 harmony-configs/entry/src/moin/module.json5
,配置 skills,如果没有,可以在 unpackages/dist/app-harmony
产物文件里获取。
重点是添加 skill[1]
,添加下面代码
{
"actions": [
// 固定写法
"ohos.want.action.viewData"
],
"uris": [
{
// scheme必选,可以自定义
"scheme": "webworker",
// host必选,配置待匹配的域名
"host": "www.example.com"
}
]
}
在线网页中添加 a 链接,填写 schema
<a href='webworker://www.example.com?a=a&b=2'>唤起应用</a>
这种情况下,点击链接应该就可以正常唤起应用了。如果不能请自查
- 观察鸿蒙产物文档是否有两个 skills ,原来的
skill[0]
不需要动,维持不变,只添加内容 - 这个网页要通过网络访问,检查 schema 是否完全一样
如果还有问题请留言,无法唤起,并说明你的操作步骤。
接下来介绍业务测如何接收参数。
应用中唤起有两个不同的场景:
- 冷启动-通过网页第一次唤起应用,对应鸿蒙中的 onCreate 生命周期
- 热启动-应用已经启动,重新从后台唤起应用,对应鸿蒙中的 onNewWant 生命周期
应用启动时候获取参数,自定义业务逻辑,在应用加载时候监听参数,具体如何跳转是应用自己处理的。
HBuilderX 中监听参数
HBuilderX 可以封装一个简单的 UTS 插件完成参数获取。
在项目中新建 uni_modules
文件夹,选择新建 UTS插件 - API 插件
,创建之后创建并打开 utssdk/app-harmony/index.uts
import { Want } from '@kit.AbilityKit';
const params = {
paramsOnCrate: "",
paramsOnNewWant: ""
}
UTSHarmony.onAppAbilityCreate((want : Want) => {
let uri = want?.uri
params.paramsOnCrate = uri ?? ''
// 实际上立即执行了,但是通信通道还没有建立,延迟一秒打印可以看到数据
// 延迟是为了看到打印,业务逻辑不需要延迟
// setTimeout(() => {
// console.log('onCreate', uri);
// }, 1000)
});
UTSHarmony.onAppAbilityNewWant((want : Want) => {
params.paramsOnNewWant = want?.uri ?? ''
// console.log('onNewWant', want);
});
export default params
在页面中引入此插件,观察控制台变化,在 onLaunch 和 onShow 读取 params 后续可根据实际需求完善逻辑。
通过短信、落地页唤起应用是非常常见的业务需求,这里介绍如何在鸿蒙中唤起应用。
在 Android/iOS 中唤起应用一般有两类方案,URL Schema 和 Universal Links(安卓中叫 App Links)。
基本概念
使用 URL Schema 唤起,是传统方案,用户通过访问自定义的 uri 网址,来打开应用并传递参数,比如 weixin://
这个 schema 是唤起微信的方案。
使用 Universal Links 这种方案,是用户访问一个 https 网页,这个网页在对应的后台已经认证过,打开这个网页时候可以打开应用并传递对应的参数。
优点缺点对比。
URL Schema
缺点
使用 URL Schema 这种方式打开应用,系统一般会弹窗提示用户是否打开,,用户打开引用每多一个步骤就会流失的风险。再者 schema 方案谁都可以注册,可能有重复注册 schema 的方式,用户需要正确选择才能打开应用,容易困惑、错误选择。
URL Schema 优点
简单,常规。
Universal Links
缺点
开发稍麻烦,需要一个所有人都可以访问的网页,在国内必须备案通过并且使用 https
Universal Links 优点
这种方案有兜底机制,不打扰用户,不会阻塞用户打开应用。
鸿蒙中方案
鸿蒙中也有类似的方案
- App Linking 类似 Universal Links,在华为 AGC 后台认证域名
- Deep Linking 类似 URL Schema ,自定义 uri
Deep Linking 方案
官方文档地址《 使用Deep Linking实现应用间跳转》
使用 Deep Linking 方案,需要1个步骤
- 配置 module.json5 ,注册 schema
在 HBuilderX 中,打开 harmony-configs/entry/src/moin/module.json5
,配置 skills,如果没有,可以在 unpackages/dist/app-harmony
产物文件里获取。
重点是添加 skill[1]
,添加下面代码
{
"actions": [
// 固定写法
"ohos.want.action.viewData"
],
"uris": [
{
// scheme必选,可以自定义
"scheme": "webworker",
// host必选,配置待匹配的域名
"host": "www.example.com"
}
]
}
在线网页中添加 a 链接,填写 schema
<a href='webworker://www.example.com?a=a&b=2'>唤起应用</a>
这种情况下,点击链接应该就可以正常唤起应用了。如果不能请自查
- 观察鸿蒙产物文档是否有两个 skills ,原来的
skill[0]
不需要动,维持不变,只添加内容 - 这个网页要通过网络访问,检查 schema 是否完全一样
如果还有问题请留言,无法唤起,并说明你的操作步骤。
接下来介绍业务测如何接收参数。
应用中唤起有两个不同的场景:
- 冷启动-通过网页第一次唤起应用,对应鸿蒙中的 onCreate 生命周期
- 热启动-应用已经启动,重新从后台唤起应用,对应鸿蒙中的 onNewWant 生命周期
应用启动时候获取参数,自定义业务逻辑,在应用加载时候监听参数,具体如何跳转是应用自己处理的。
HBuilderX 中监听参数
HBuilderX 可以封装一个简单的 UTS 插件完成参数获取。
在项目中新建 uni_modules
文件夹,选择新建 UTS插件 - API 插件
,创建之后创建并打开 utssdk/app-harmony/index.uts
import { Want } from '@kit.AbilityKit';
const params = {
paramsOnCrate: "",
paramsOnNewWant: ""
}
UTSHarmony.onAppAbilityCreate((want : Want) => {
let uri = want?.uri
params.paramsOnCrate = uri ?? ''
// 实际上立即执行了,但是通信通道还没有建立,延迟一秒打印可以看到数据
// 延迟是为了看到打印,业务逻辑不需要延迟
// setTimeout(() => {
// console.log('onCreate', uri);
// }, 1000)
});
UTSHarmony.onAppAbilityNewWant((want : Want) => {
params.paramsOnNewWant = want?.uri ?? ''
// console.log('onNewWant', want);
});
export default params
在页面中引入此插件,观察控制台变化,在 onLaunch 和 onShow 读取 params 后续可根据实际需求完善逻辑。
收起阅读 »
Uniapp 的鸿蒙 next 应用中隐藏和显示系统状态栏
本示例至少需要在 HbuilderX 4.61 运行
在 uniapp 开发鸿蒙应用中,通过 UTS 插件,可以调用许多系统原生的 API,这里给出一个小功能:隐藏和显示系统状态栏
原始的界面效果:

隐藏系统状态栏之后的效果:
这个示例的参考文档有:
- 鸿蒙官方文档: https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs/faqs-arkui-193
- UTS 插件: https://doc.dcloud.net.cn/uni-app-x/plugin/uts-plugin.html
- UTSHarmony 的使用: https://doc.dcloud.net.cn/uni-app-x/uts/utsharmony.html
核心页面代码:
<template>
<view>
<button @click="show">显示原生状态栏</button>
<button @click="hide">隐藏原生状态栏</button>
</view>
</template>
<script>
import { showStatusBar, hideStatusBar } from '@/uni_modules/harmony-statusbar';
export default {
data() {
return {
message: 'Hello, World!'
}
},
methods: {
show() {
showStatusBar()
},
hide() {
hideStatusBar()
}
}
}
</script>
<style scoped>
</style>
核心UTS插件代码:
import window from '@ohos.window';
let _window : window.Window;
UTSHarmony.onAppAbilityWindowStageCreate((windowStage : window.WindowStage) => {
_window = windowStage.getMainWindowSync()
})
export const hideStatusBar = () => {
_window.setWindowSystemBarEnable([])
}
export const showStatusBar = () => {
_window.setWindowSystemBarEnable(['status', 'navigation'])
}
示例工程:
本示例至少需要在 HbuilderX 4.61 运行
在 uniapp 开发鸿蒙应用中,通过 UTS 插件,可以调用许多系统原生的 API,这里给出一个小功能:隐藏和显示系统状态栏
原始的界面效果:
隐藏系统状态栏之后的效果:
这个示例的参考文档有:
- 鸿蒙官方文档: https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs/faqs-arkui-193
- UTS 插件: https://doc.dcloud.net.cn/uni-app-x/plugin/uts-plugin.html
- UTSHarmony 的使用: https://doc.dcloud.net.cn/uni-app-x/uts/utsharmony.html
核心页面代码:
<template>
<view>
<button @click="show">显示原生状态栏</button>
<button @click="hide">隐藏原生状态栏</button>
</view>
</template>
<script>
import { showStatusBar, hideStatusBar } from '@/uni_modules/harmony-statusbar';
export default {
data() {
return {
message: 'Hello, World!'
}
},
methods: {
show() {
showStatusBar()
},
hide() {
hideStatusBar()
}
}
}
</script>
<style scoped>
</style>
核心UTS插件代码:
import window from '@ohos.window';
let _window : window.Window;
UTSHarmony.onAppAbilityWindowStageCreate((windowStage : window.WindowStage) => {
_window = windowStage.getMainWindowSync()
})
export const hideStatusBar = () => {
_window.setWindowSystemBarEnable([])
}
export const showStatusBar = () => {
_window.setWindowSystemBarEnable(['status', 'navigation'])
}
示例工程:
收起阅读 »
uni-app/uniappx 中调用鸿蒙原生扫码能力的实践
uni-app/uniappx 中调用鸿蒙原生扫码能力的实践
一、背景介绍
最近在开发一个鸿蒙应用时,遇到了扫码功能的需求。之前用过很多扫码方案,但都不太理想。直到发现了 hmos-scan 这个插件,终于解决了我们的痛点。下面分享一下使用心得。
1.1 为什么选择 hmos-scan?
说实话,之前踩过不少坑:
-
传统扫码方案太坑了:
- WebView 扫码慢得要死,经常卡住
- 引入第三方库后,应用体积直接翻倍
- 不同手机表现不一样,有的能扫,有的扫不了
- 稍微模糊一点的码就识别不出来,用户体验太差
-
原生开发太痛苦:
- 写原生代码太费时间了
- 每个平台都要写一遍,累死
- 维护起来特别麻烦
- 开发周期太长,老板等不及
-
hmos-scan 真香:
- 用鸿蒙原生能力,扫码贼快
- 识别率特别高,歪着扫都能识别
- 几行代码就搞定了,太方便了
- 性能好,不占内存
- 还能从相册选图,太贴心了
1.2 实际使用案例
-
电商比价:
// 扫商品码比价 async function scanProduct() { try { const barcode = await scanapiSync() // 调用比价接口 const priceInfo = await comparePrice(barcode) showPriceResult(priceInfo) } catch (error) { showError('扫码失败,重试一下') } }
-
快递扫描:
// 扫快递单号 async function scanExpress() { try { const trackingNumber = await scanapiSync() // 查物流信息 const expressInfo = await queryExpress(trackingNumber) showExpressInfo(expressInfo) } catch (error) { showError('扫码失败,重试一下') } }
-
会议签到:
// 扫会议码签到 async function scanMeeting() { try { const meetingCode = await scanapiSync() // 验证会议码 const checkInResult = await verifyMeeting(meetingCode) showCheckInResult(checkInResult) } catch (error) { showError('签到失败,重试一下') } }
二、环境准备
-
开发工具:
- HBuilderX 3.8.0 或以上版本
- DevEco Studio(鸿蒙开发必备)
-
项目要求:
- 用 uni-app x 框架
- 选 Vue 3 就对了
三、插件使用
1. 插件安装
- 去插件市场:hmos-scan 插件
- 下载后导入 HBuilderX 就完事了
四、在项目中使用
1. 基础示例
<!-- pages/index/index.uvue -->
<template>
<view class="content">
<button @click="startScan">开始扫描</button>
<text v-if="scanResult">扫描结果:{{scanResult}}</text>
</view>
</template>
<script>
import { scanapiSync } from "@/uni_modules/hmos-scan/utssdk/app-harmony";
export default {
data() {
return {
scanResult: ''
}
},
methods: {
async startScan() {
try {
const result = await scanapiSync()
this.scanResult = result
console.log('扫描结果:', result)
} catch (error) {
console.error('扫描失败:', error)
this.scanResult = '扫描失败'
}
}
}
}
</script>
<style>
.content {
padding: 20px;
}
button {
margin: 20px 0;
}
</style>
2. 高级示例(带历史记录)
<!-- pages/advanced/index.uvue -->
<template>
<view class="container">
<view class="scan-area">
<button @click="startScan" :disabled="isScanning">
{{isScanning ? '扫描中...' : '开始扫描'}}
</button>
</view>
<view class="result-area" v-if="scanHistory.length > 0">
<text class="title">扫描历史</text>
<view v-for="(item, index) in scanHistory" :key="index" class="history-item">
<text class="time">{{item.time}}</text>
<text class="content">{{item.content}}</text>
</view>
</view>
</view>
</template>
<script>
import { scanapiSync } from "@/uni_modules/hmos-scan/utssdk/app-harmony";
export default {
data() {
return {
isScanning: false,
scanHistory: []
}
},
methods: {
async startScan() {
if (this.isScanning) return
this.isScanning = true
try {
const result = await scanapiSync()
this.scanHistory.unshift({
time: new Date().toLocaleTimeString(),
content: result
})
} catch (error) {
console.error('扫描失败:', error)
} finally {
this.isScanning = false
}
}
}
}
</script>
<style>
.container {
padding: 20px;
}
.scan-area {
margin-bottom: 20px;
}
.result-area {
border-top: 1px solid #eee;
padding-top: 20px;
}
.title {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.history-item {
padding: 10px;
border-bottom: 1px solid #eee;
}
.time {
font-size: 12px;
color: #999;
}
.content {
margin-top: 5px;
}
</style>
五、功能特点
-
多模式支持:
- 二维码、条形码都能扫
- 相册选图也支持
-
错误处理:
- 各种异常都处理好了
- 提示信息很友好
- 日志记录很详细
-
用户体验:
- 操作简单,一看就会
- 有状态反馈,不会卡住
- 异步处理,不阻塞界面
六、注意事项
-
兼容性:
- 只支持鸿蒙系统
- 确保设备有扫码功能
-
性能优化:
- 注意内存使用
- 及时释放资源
- 别重复扫描
七、常见问题
-
扫描失败:
- 看看设备支不支持
- 查查日志找原因
-
结果解析错误:
- 检查结果格式
- 处理各种返回类型
- 加好错误处理
八、总结
用了 hmos-scan 插件后,扫码功能开发变得特别简单。原生功能完整保留,开发体验又好,强烈推荐!
九、参考资料
uni-app/uniappx 中调用鸿蒙原生扫码能力的实践
一、背景介绍
最近在开发一个鸿蒙应用时,遇到了扫码功能的需求。之前用过很多扫码方案,但都不太理想。直到发现了 hmos-scan 这个插件,终于解决了我们的痛点。下面分享一下使用心得。
1.1 为什么选择 hmos-scan?
说实话,之前踩过不少坑:
-
传统扫码方案太坑了:
- WebView 扫码慢得要死,经常卡住
- 引入第三方库后,应用体积直接翻倍
- 不同手机表现不一样,有的能扫,有的扫不了
- 稍微模糊一点的码就识别不出来,用户体验太差
-
原生开发太痛苦:
- 写原生代码太费时间了
- 每个平台都要写一遍,累死
- 维护起来特别麻烦
- 开发周期太长,老板等不及
-
hmos-scan 真香:
- 用鸿蒙原生能力,扫码贼快
- 识别率特别高,歪着扫都能识别
- 几行代码就搞定了,太方便了
- 性能好,不占内存
- 还能从相册选图,太贴心了
1.2 实际使用案例
-
电商比价:
// 扫商品码比价 async function scanProduct() { try { const barcode = await scanapiSync() // 调用比价接口 const priceInfo = await comparePrice(barcode) showPriceResult(priceInfo) } catch (error) { showError('扫码失败,重试一下') } }
-
快递扫描:
// 扫快递单号 async function scanExpress() { try { const trackingNumber = await scanapiSync() // 查物流信息 const expressInfo = await queryExpress(trackingNumber) showExpressInfo(expressInfo) } catch (error) { showError('扫码失败,重试一下') } }
-
会议签到:
// 扫会议码签到 async function scanMeeting() { try { const meetingCode = await scanapiSync() // 验证会议码 const checkInResult = await verifyMeeting(meetingCode) showCheckInResult(checkInResult) } catch (error) { showError('签到失败,重试一下') } }
二、环境准备
-
开发工具:
- HBuilderX 3.8.0 或以上版本
- DevEco Studio(鸿蒙开发必备)
-
项目要求:
- 用 uni-app x 框架
- 选 Vue 3 就对了
三、插件使用
1. 插件安装
- 去插件市场:hmos-scan 插件
- 下载后导入 HBuilderX 就完事了
四、在项目中使用
1. 基础示例
<!-- pages/index/index.uvue -->
<template>
<view class="content">
<button @click="startScan">开始扫描</button>
<text v-if="scanResult">扫描结果:{{scanResult}}</text>
</view>
</template>
<script>
import { scanapiSync } from "@/uni_modules/hmos-scan/utssdk/app-harmony";
export default {
data() {
return {
scanResult: ''
}
},
methods: {
async startScan() {
try {
const result = await scanapiSync()
this.scanResult = result
console.log('扫描结果:', result)
} catch (error) {
console.error('扫描失败:', error)
this.scanResult = '扫描失败'
}
}
}
}
</script>
<style>
.content {
padding: 20px;
}
button {
margin: 20px 0;
}
</style>
2. 高级示例(带历史记录)
<!-- pages/advanced/index.uvue -->
<template>
<view class="container">
<view class="scan-area">
<button @click="startScan" :disabled="isScanning">
{{isScanning ? '扫描中...' : '开始扫描'}}
</button>
</view>
<view class="result-area" v-if="scanHistory.length > 0">
<text class="title">扫描历史</text>
<view v-for="(item, index) in scanHistory" :key="index" class="history-item">
<text class="time">{{item.time}}</text>
<text class="content">{{item.content}}</text>
</view>
</view>
</view>
</template>
<script>
import { scanapiSync } from "@/uni_modules/hmos-scan/utssdk/app-harmony";
export default {
data() {
return {
isScanning: false,
scanHistory: []
}
},
methods: {
async startScan() {
if (this.isScanning) return
this.isScanning = true
try {
const result = await scanapiSync()
this.scanHistory.unshift({
time: new Date().toLocaleTimeString(),
content: result
})
} catch (error) {
console.error('扫描失败:', error)
} finally {
this.isScanning = false
}
}
}
}
</script>
<style>
.container {
padding: 20px;
}
.scan-area {
margin-bottom: 20px;
}
.result-area {
border-top: 1px solid #eee;
padding-top: 20px;
}
.title {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.history-item {
padding: 10px;
border-bottom: 1px solid #eee;
}
.time {
font-size: 12px;
color: #999;
}
.content {
margin-top: 5px;
}
</style>
五、功能特点
-
多模式支持:
- 二维码、条形码都能扫
- 相册选图也支持
-
错误处理:
- 各种异常都处理好了
- 提示信息很友好
- 日志记录很详细
-
用户体验:
- 操作简单,一看就会
- 有状态反馈,不会卡住
- 异步处理,不阻塞界面
六、注意事项
-
兼容性:
- 只支持鸿蒙系统
- 确保设备有扫码功能
-
性能优化:
- 注意内存使用
- 及时释放资源
- 别重复扫描
七、常见问题
-
扫描失败:
- 看看设备支不支持
- 查查日志找原因
-
结果解析错误:
- 检查结果格式
- 处理各种返回类型
- 加好错误处理
八、总结
用了 hmos-scan 插件后,扫码功能开发变得特别简单。原生功能完整保留,开发体验又好,强烈推荐!
九、参考资料
收起阅读 »
uniapp- UTS 插件鸿蒙端开发示例 虽然我们这个示例简单 但是这个是难住很多人的一大步
UTS 插件鸿蒙端开发示例
以上示例已开源
项目地址 请参考 示例代码。
前言
虽然这个 UTS 插件鸿蒙端的示例看起来很简单,但说实话,这一步其实难住了不少开发者。很多人第一次做 UTS 插件,尤其是要跑通鸿蒙端,都会在这里卡壳。希望这份文档能帮你少走弯路,顺利迈过这道坎。
基础知识补充
什么是 UTS 插件?
UTS 插件其实就是 uni-app x 扩展 API 的标准插件形式。你可以把它理解成"写一份 TypeScript 风格的代码,编译后在不同平台都能用"。
说个实话,刚接触 uni-app x 的时候,很多人一看到"插件"两个字就头大,觉得一定很复杂。其实 UTS 插件的本质,就是把你想要的原生能力用 TypeScript 包一层,剩下的交给编译器搞定。
UTS 与 ArkTS 的关系
UTS 和 ArkTS 都是基于 TypeScript 的扩展,但有些细节不同。特别注意:鸿蒙端开发时,所有对象字面量都必须定义类型,不能用 any 类型,否则会直接编译报错。
比如 ArkTS 不允许无类型的对象字面量,UTS 会自动帮你加上类型,但你自己写代码时一定要养成良好习惯:
// 错误写法(鸿蒙端会报错)
const obj = { a: 1 };
// 正确写法
interface Obj { a: number }
const obj: Obj = { a: 1 };
// 或
const obj = { a: 1 } as Obj;
你只需要记住:UTS 写的代码,最终会被编译成 ArkTS(.ets)文件,然后就能愉快地调用鸿蒙的原生 API 了。
配置鸿蒙依赖
鸿蒙的依赖管理工具叫 ohpm,和 npm 很像。三方 SDK 用 .har 文件(有点像 Android 的 .aar)。
配置依赖时,记得在 utssdk/app-harmony/config.json
里写清楚:
{
"dependencies": {
"@cashier_alipay/cashiersdk": "15.8.26",
"local-deps": "./libs/local-deps.har"
}
}
注意:config.json 不能有注释,本地依赖路径是相对的。
资源文件与权限配置
- 插件资源(图片、字体等)放在
utssdk/app-harmony/resources
。 - 权限、模块信息等写在
utssdk/app-harmony/module.json5
。
比如你要用定位权限,可以这样写:
{
"module": {
"requestPermissions": [
{
"name": "ohos.permission.LOCATION",
"usedScene": { "when": "inuse" },
"reason": "$string:permission_location_reason"
}
]
}
}
context 获取
很多鸿蒙原生 API 需要 context。大多数场景下直接用 getContext()
就行:
import settings from '@ohos.settings';
const context: Context = getContext();
settings.getValue(context, settings.display.SCREEN_BRIGHTNESS_STATUS, (err, value) => {
if (err) {
console.error(`Failed to get the setting. ${err.message}`);
return;
}
console.log(`SCREEN_BRIGHTNESS_STATUS: ${JSON.stringify(value)}`)
});
有一次小王同学写插件,死活拿不到 context,结果发现是忘了在页面生命周期里调用,调试了半天才恍然大悟。遇到问题别慌,先查查官方文档和社区经验,很多"坑"其实大家都踩过。
更多细节和常见问题,建议随时查阅官方文档:UTS for HarmonyOS
步骤详解
友情提示:
虽然下面的步骤看起来很基础,但每一步都很关键。尤其是接口定义和鸿蒙端实现,很多人就是在这里卡住的。别嫌简单,能跑通才是王道。
再次强调:鸿蒙端开发时,所有对象字面量都必须定义类型,不能用 any 类型!
第一步:定义插件接口(interface.uts)
目的:
- 明确插件对外暴露的 API 规范,方便多端实现和 IDE 智能提示。
- 这是 UTS 插件开发的基础,所有端的实现都要遵循这里定义的接口。
操作:
- 在
uni_modules/你的插件名/utssdk/
下新建或编辑interface.uts
文件。 - 定义你要暴露的类型、方法签名。例如:
// uni_modules/tt-ost/utssdk/interface.uts
export type MyApiSync1 = (paramA: string) => string;
第二步:鸿蒙端实现接口(app-harmony/index.uts)
目的:
- 按照接口定义,实现鸿蒙端的具体逻辑。
- 这是很多开发者卡壳的地方,需注意导入接口类型、调用鸿蒙 API、正确导出方法。
- 注意:所有对象字面量都要定义类型,不能用 any!
操作:
- 在
uni_modules/你的插件名/utssdk/app-harmony/
下新建或编辑index.uts
文件。 - 按照接口定义,实现方法。例如:
// uni_modules/tt-ost/utssdk/app-harmony/index.uts
import { MyApiSync1 } from '../interface.uts';
import { promptAction } from '@kit.ArkUI';
interface ShowToastOptions {
message: string;
}
export const myApiSync1: MyApiSync1 = function (paramA: string): string {
let ddd: ShowToastOptions = { message: paramA };
promptAction.showToast(ddd);
return paramA;
}
- 这里以 Toast 弹窗为例,实际可根据业务需求调用鸿蒙原生能力。
第三步:在页面中调用插件方法
目的:
- 验证插件功能是否生效。
- 体验 UTS 跨端调用的便捷性。
操作:
- 在页面脚本中引入并调用插件方法。例如:
<script>
import { myApiSync1 } from '@/uni_modules/tt-ost';
export default {
methods: {
showToast() {
const msg = 'Hello Harmony!';
const result = myApiSync1(msg);
console.log(result); // 输出: Hello Harmony!
}
}
}
</script>
说明
- 该插件支持多端,鸿蒙端实现了
myApiSync1
,会调用 ArkUI 的promptAction.showToast
。 - 其他端(如 Android/iOS)可根据需要实现对应方法。
- 适合演示 UTS 跨端插件的基本用法。
如需更多信息,请参考 uni-app x 官方 UTS 插件开发文档。
UTS 插件鸿蒙端开发示例
以上示例已开源
项目地址 请参考 示例代码。
前言
虽然这个 UTS 插件鸿蒙端的示例看起来很简单,但说实话,这一步其实难住了不少开发者。很多人第一次做 UTS 插件,尤其是要跑通鸿蒙端,都会在这里卡壳。希望这份文档能帮你少走弯路,顺利迈过这道坎。
基础知识补充
什么是 UTS 插件?
UTS 插件其实就是 uni-app x 扩展 API 的标准插件形式。你可以把它理解成"写一份 TypeScript 风格的代码,编译后在不同平台都能用"。
说个实话,刚接触 uni-app x 的时候,很多人一看到"插件"两个字就头大,觉得一定很复杂。其实 UTS 插件的本质,就是把你想要的原生能力用 TypeScript 包一层,剩下的交给编译器搞定。
UTS 与 ArkTS 的关系
UTS 和 ArkTS 都是基于 TypeScript 的扩展,但有些细节不同。特别注意:鸿蒙端开发时,所有对象字面量都必须定义类型,不能用 any 类型,否则会直接编译报错。
比如 ArkTS 不允许无类型的对象字面量,UTS 会自动帮你加上类型,但你自己写代码时一定要养成良好习惯:
// 错误写法(鸿蒙端会报错)
const obj = { a: 1 };
// 正确写法
interface Obj { a: number }
const obj: Obj = { a: 1 };
// 或
const obj = { a: 1 } as Obj;
你只需要记住:UTS 写的代码,最终会被编译成 ArkTS(.ets)文件,然后就能愉快地调用鸿蒙的原生 API 了。
配置鸿蒙依赖
鸿蒙的依赖管理工具叫 ohpm,和 npm 很像。三方 SDK 用 .har 文件(有点像 Android 的 .aar)。
配置依赖时,记得在 utssdk/app-harmony/config.json
里写清楚:
{
"dependencies": {
"@cashier_alipay/cashiersdk": "15.8.26",
"local-deps": "./libs/local-deps.har"
}
}
注意:config.json 不能有注释,本地依赖路径是相对的。
资源文件与权限配置
- 插件资源(图片、字体等)放在
utssdk/app-harmony/resources
。 - 权限、模块信息等写在
utssdk/app-harmony/module.json5
。
比如你要用定位权限,可以这样写:
{
"module": {
"requestPermissions": [
{
"name": "ohos.permission.LOCATION",
"usedScene": { "when": "inuse" },
"reason": "$string:permission_location_reason"
}
]
}
}
context 获取
很多鸿蒙原生 API 需要 context。大多数场景下直接用 getContext()
就行:
import settings from '@ohos.settings';
const context: Context = getContext();
settings.getValue(context, settings.display.SCREEN_BRIGHTNESS_STATUS, (err, value) => {
if (err) {
console.error(`Failed to get the setting. ${err.message}`);
return;
}
console.log(`SCREEN_BRIGHTNESS_STATUS: ${JSON.stringify(value)}`)
});
有一次小王同学写插件,死活拿不到 context,结果发现是忘了在页面生命周期里调用,调试了半天才恍然大悟。遇到问题别慌,先查查官方文档和社区经验,很多"坑"其实大家都踩过。
更多细节和常见问题,建议随时查阅官方文档:UTS for HarmonyOS
步骤详解
友情提示:
虽然下面的步骤看起来很基础,但每一步都很关键。尤其是接口定义和鸿蒙端实现,很多人就是在这里卡住的。别嫌简单,能跑通才是王道。
再次强调:鸿蒙端开发时,所有对象字面量都必须定义类型,不能用 any 类型!
第一步:定义插件接口(interface.uts)
目的:
- 明确插件对外暴露的 API 规范,方便多端实现和 IDE 智能提示。
- 这是 UTS 插件开发的基础,所有端的实现都要遵循这里定义的接口。
操作:
- 在
uni_modules/你的插件名/utssdk/
下新建或编辑interface.uts
文件。 - 定义你要暴露的类型、方法签名。例如:
// uni_modules/tt-ost/utssdk/interface.uts
export type MyApiSync1 = (paramA: string) => string;
第二步:鸿蒙端实现接口(app-harmony/index.uts)
目的:
- 按照接口定义,实现鸿蒙端的具体逻辑。
- 这是很多开发者卡壳的地方,需注意导入接口类型、调用鸿蒙 API、正确导出方法。
- 注意:所有对象字面量都要定义类型,不能用 any!
操作:
- 在
uni_modules/你的插件名/utssdk/app-harmony/
下新建或编辑index.uts
文件。 - 按照接口定义,实现方法。例如:
// uni_modules/tt-ost/utssdk/app-harmony/index.uts
import { MyApiSync1 } from '../interface.uts';
import { promptAction } from '@kit.ArkUI';
interface ShowToastOptions {
message: string;
}
export const myApiSync1: MyApiSync1 = function (paramA: string): string {
let ddd: ShowToastOptions = { message: paramA };
promptAction.showToast(ddd);
return paramA;
}
- 这里以 Toast 弹窗为例,实际可根据业务需求调用鸿蒙原生能力。
第三步:在页面中调用插件方法
目的:
- 验证插件功能是否生效。
- 体验 UTS 跨端调用的便捷性。
操作:
- 在页面脚本中引入并调用插件方法。例如:
<script>
import { myApiSync1 } from '@/uni_modules/tt-ost';
export default {
methods: {
showToast() {
const msg = 'Hello Harmony!';
const result = myApiSync1(msg);
console.log(result); // 输出: Hello Harmony!
}
}
}
</script>
说明
- 该插件支持多端,鸿蒙端实现了
myApiSync1
,会调用 ArkUI 的promptAction.showToast
。 - 其他端(如 Android/iOS)可根据需要实现对应方法。
- 适合演示 UTS 跨端插件的基本用法。
如需更多信息,请参考 uni-app x 官方 UTS 插件开发文档。
收起阅读 »
华为mate60 rs 鸿蒙next系统在hbuilder4.6.1中打包到鸿蒙连接不上的问题
问题:
华为mate60 rs 鸿蒙next系统在hbuilder4.6.1中打包到鸿蒙连接不上的问题
解决方式:
连接手机弹出USB连接方式的时候,选择仅充电,别选传输文件或者传输图片,希望能帮到碰到此问题的小伙伴。
问题:
华为mate60 rs 鸿蒙next系统在hbuilder4.6.1中打包到鸿蒙连接不上的问题
解决方式:
连接手机弹出USB连接方式的时候,选择仅充电,别选传输文件或者传输图片,希望能帮到碰到此问题的小伙伴。

帮搞小程序转换鸿蒙NEXT,就练技术
满足以下几点条件可以联系我,这周帮忙改了2个到原生鸿蒙,后续可以慢慢来
1、应用或者小程序已经处于上架状态,证书备案的齐全了
2、vue3写的,vue2的话改造比较耗时,暂时先帮忙搞vue3开发的应用
满足以下几点条件可以联系我,这周帮忙改了2个到原生鸿蒙,后续可以慢慢来
1、应用或者小程序已经处于上架状态,证书备案的齐全了
2、vue3写的,vue2的话改造比较耗时,暂时先帮忙搞vue3开发的应用

鸿蒙webview通信evalJS,不支持this.$scope.$getAppWebview().children()[0],需要使用使用uni.createWebviewContext
APP往webview通过evalJS注入方法时
鸿蒙不支持this.$scope.$getAppWebview().children()[0] ,使用uni.createWebviewContext
//template
<web-view id="webviewId" src="xxxxxx"></web-view>
//javascript
// #ifdef APP-HARMONY
this.currentWebview = uni.createWebviewContext('webviewId', this);
// #endif
// #ifdef APP-PLUS
this.currentWebview = this.$scope.$getAppWebview().children()[0];
// #endif
let token = uni.getStorageSync('token');
let tenant = uni.getStorageSync('tenantCode');
// 准备要传递的数据
let dataToPass = JSON.stringify({
token: token
});
this.currentWebview.evalJS(`uniappReceiveData('${JSON.stringify({ token: token,tenant: tenant})}')`)
APP往webview通过evalJS注入方法时
鸿蒙不支持this.$scope.$getAppWebview().children()[0] ,使用uni.createWebviewContext
//template
<web-view id="webviewId" src="xxxxxx"></web-view>
//javascript
// #ifdef APP-HARMONY
this.currentWebview = uni.createWebviewContext('webviewId', this);
// #endif
// #ifdef APP-PLUS
this.currentWebview = this.$scope.$getAppWebview().children()[0];
// #endif
let token = uni.getStorageSync('token');
let tenant = uni.getStorageSync('tenantCode');
// 准备要传递的数据
let dataToPass = JSON.stringify({
token: token
});
this.currentWebview.evalJS(`uniappReceiveData('${JSON.stringify({ token: token,tenant: tenant})}')`)
收起阅读 »

还学鸿蒙原生?vue3 + uniapp 可以直接开发鸿蒙啦!
7月20号,uniapp 官网“悄咪咪”的上线了 uniapp 开发鸿蒙应用 的文档,算是正式开启了 Vue3 + uniapp 开发鸿蒙应用 的时代。
<顺便吆喝一声,技术大厂年前捞人,前后端测试,待遇给的还不错,感兴趣可以试试~>
开发鸿蒙的前置准备
想要使用 uniapp 开发鸿蒙,我们需要具备三个条件:
DevEco-Studio 5.0.3.400 以上(下载地址:https://developer.huawei.com/consumer/cn/deveco-studio/)
鸿蒙系统版本 API 12 以上 (DevEco-Studio有内置鸿蒙模拟器)
HBuilderX-alpha-4.22 以上
PS: 这里不得不吐槽一下,一个 DevEco-Studio 竟然有 10 个 G......
安装好之后,我们就可以通过 开发工具 运行 示例代码
运行时,需要用到 鸿蒙真机或者模拟器。但是这里需要 注意: Windows系统需要经过特殊配置才可以启动,mac 系统最好保证系统版本在 mac os 12 以上
windows 系统配置方式(非 windows 用户可跳过):
打开控制面板 - 程序与功能 - 开启以下功能
Hyper-V
Windows 虚拟机监控程序平台
虚拟机平台
注意: 需要win10专业版或win11专业版才能开启以上功能,家庭版需先升级成专业版或企业版
启动鸿蒙模拟器
整个过程分为三步(中间会涉及到鸿蒙开发者申请):
下载 uni-app 鸿蒙离线SDK template-1.3.4.tgz (下载地址:https://web-ext-storage.dcloud.net.cn/uni-app/harmony/zip/template-1.3.4.tgz)
解压刚下载的压缩包,将解压后的模板工程在 DevEco-Studio 中打开
等待 Sync 结束,再 启动鸿蒙模拟器 或 连接鸿蒙真机(如无权限,则需要申请(一般 3 个工作日),申请地址:https://developer.huawei.com/consumer/cn/activity/201714466699051861/signup)
配置 HBuilderX 吊起 DevEco-Studio
打开HBuilderX,点击上方菜单 - 工具 - 设置,在出现的弹窗右侧窗体新增如下配置
注意:值填你自己的 DevEco-Studio 启动路径
js 代码解读复制代码"harmony.devTools.path" : "/Applications/DevEco-Studio.app"
创建 uni-app 工程
BuilderX 新建一个空白的 uniapp 项目,选vue3
在 manifest.json 文件中配置鸿蒙离线SDK路径(SDK 路径可在 DevEco-Studio -> Preferences(设置) z中获取)
编辑 manifest.json 文件,新增如下配置:
然后点击 运行到鸿蒙即可
总结
这样我们就有了一个初始的鸿蒙项目,并且可以在鸿蒙模拟器上运行。关于更多 uniapp 开发鸿蒙的 API,大家可以直接参考 uniapp 官方文档:https://zh.uniapp.dcloud.io/tutorial/harmony/dev.html#nativeapi
——转载自作者:程序员Sunday
7月20号,uniapp 官网“悄咪咪”的上线了 uniapp 开发鸿蒙应用 的文档,算是正式开启了 Vue3 + uniapp 开发鸿蒙应用 的时代。
<顺便吆喝一声,技术大厂年前捞人,前后端测试,待遇给的还不错,感兴趣可以试试~>
开发鸿蒙的前置准备
想要使用 uniapp 开发鸿蒙,我们需要具备三个条件:
DevEco-Studio 5.0.3.400 以上(下载地址:https://developer.huawei.com/consumer/cn/deveco-studio/)
鸿蒙系统版本 API 12 以上 (DevEco-Studio有内置鸿蒙模拟器)
HBuilderX-alpha-4.22 以上
PS: 这里不得不吐槽一下,一个 DevEco-Studio 竟然有 10 个 G......
安装好之后,我们就可以通过 开发工具 运行 示例代码
运行时,需要用到 鸿蒙真机或者模拟器。但是这里需要 注意: Windows系统需要经过特殊配置才可以启动,mac 系统最好保证系统版本在 mac os 12 以上
windows 系统配置方式(非 windows 用户可跳过):
打开控制面板 - 程序与功能 - 开启以下功能
Hyper-V
Windows 虚拟机监控程序平台
虚拟机平台
注意: 需要win10专业版或win11专业版才能开启以上功能,家庭版需先升级成专业版或企业版
启动鸿蒙模拟器
整个过程分为三步(中间会涉及到鸿蒙开发者申请):
下载 uni-app 鸿蒙离线SDK template-1.3.4.tgz (下载地址:https://web-ext-storage.dcloud.net.cn/uni-app/harmony/zip/template-1.3.4.tgz)
解压刚下载的压缩包,将解压后的模板工程在 DevEco-Studio 中打开
等待 Sync 结束,再 启动鸿蒙模拟器 或 连接鸿蒙真机(如无权限,则需要申请(一般 3 个工作日),申请地址:https://developer.huawei.com/consumer/cn/activity/201714466699051861/signup)
配置 HBuilderX 吊起 DevEco-Studio
打开HBuilderX,点击上方菜单 - 工具 - 设置,在出现的弹窗右侧窗体新增如下配置
注意:值填你自己的 DevEco-Studio 启动路径
js 代码解读复制代码"harmony.devTools.path" : "/Applications/DevEco-Studio.app"
创建 uni-app 工程
BuilderX 新建一个空白的 uniapp 项目,选vue3
在 manifest.json 文件中配置鸿蒙离线SDK路径(SDK 路径可在 DevEco-Studio -> Preferences(设置) z中获取)
编辑 manifest.json 文件,新增如下配置:
然后点击 运行到鸿蒙即可
总结
这样我们就有了一个初始的鸿蒙项目,并且可以在鸿蒙模拟器上运行。关于更多 uniapp 开发鸿蒙的 API,大家可以直接参考 uniapp 官方文档:https://zh.uniapp.dcloud.io/tutorial/harmony/dev.html#nativeapi
——转载自作者:程序员Sunday
收起阅读 »
还学鸿蒙原生?vue3 + uniapp 可以直接开发鸿蒙啦!
Hello,大家好,我是 Sunday(顺便吆喝一句,技术大厂,前、后端/测试机会,多地捞人)
7月20号,uniapp 官网“悄咪咪”的上线了 uniapp 开发鸿蒙应用 的文档,算是正式开启了 Vue3 + uniapp 开发鸿蒙应用 的时代。
开发鸿蒙的前置准备
想要使用 uniapp 开发鸿蒙,我们需要具备三个条件:
- DevEco-Studio 5.0.3.400 以上(下载地址:https://developer.huawei.com/consumer/cn/deveco-studio/)
- 鸿蒙系统版本 API 12 以上 (DevEco-Studio有内置鸿蒙模拟器)
- HBuilderX-alpha-4.22 以上
PS: 这里不得不吐槽一下,一个 DevEco-Studio 竟然有 10 个 G......
> 安装好之后,我们就可以通过 开发工具 运行 示例代码
运行时,需要用到 鸿蒙真机或者模拟器。但是这里需要 注意: Windows系统需要经过特殊配置才可以启动,mac 系统最好保证系统版本在 mac os 12 以上
windows 系统配置方式(非 windows 用户可跳过):
打开控制面板 - 程序与功能 - 开启以下功能
Hyper-V
Windows 虚拟机监控程序平台
虚拟机平台
注意: 需要win10专业版或win11专业版才能开启以上功能,家庭版需先升级成专业版或企业版
启动鸿蒙模拟器
整个过程分为三步(中间会涉及到鸿蒙开发者申请):
1.下载 uni-app 鸿蒙离线SDK template-1.3.4.tgz (下载地址:https://web-ext-storage.dcloud.net.cn/uni-app/harmony/zip/template-1.3.4.tgz)
2.解压刚下载的压缩包,将解压后的模板工程在 DevEco-Studio 中打开
3.等待 Sync 结束,再 启动鸿蒙模拟器 或 连接鸿蒙真机(如无权限,则需要申请(一般 3 个工作日),申请地址:https://developer.huawei.com/consumer/cn/activity/201714466699051861/signup)
配置 HBuilderX 吊起 DevEco-Studio
打开HBuilderX,点击上方菜单 - 工具 - 设置,在出现的弹窗右侧窗体新增如下配置
注意:值填你自己的 DevEco-Studio 启动路径
harmony.devTools.path" : "/Applications/DevEco-Studio.app"
创建 uni-app 工程
1.BuilderX 新建一个空白的 uniapp 项目,选vue3
2.在 manifest.json 文件中配置鸿蒙离线SDK路径(SDK 路径可在 DevEco-Studio -> Preferences(设置) z中获取)
编辑 manifest.json 文件,新增如下配置:
然后点击 运行到鸿蒙即可
总结
这样我们就有了一个初始的鸿蒙项目,并且可以在鸿蒙模拟器上运行。关于更多 uniapp 开发鸿蒙的 API,大家可以直接参考 uniapp 官方文档:https://zh.uniapp.dcloud.io/tutorial/harmony/dev.html#nativeapi
——转自作者:程序员Sunday
Hello,大家好,我是 Sunday(顺便吆喝一句,技术大厂,前、后端/测试机会,多地捞人)
7月20号,uniapp 官网“悄咪咪”的上线了 uniapp 开发鸿蒙应用 的文档,算是正式开启了 Vue3 + uniapp 开发鸿蒙应用 的时代。
开发鸿蒙的前置准备
想要使用 uniapp 开发鸿蒙,我们需要具备三个条件:
- DevEco-Studio 5.0.3.400 以上(下载地址:https://developer.huawei.com/consumer/cn/deveco-studio/)
- 鸿蒙系统版本 API 12 以上 (DevEco-Studio有内置鸿蒙模拟器)
- HBuilderX-alpha-4.22 以上
PS: 这里不得不吐槽一下,一个 DevEco-Studio 竟然有 10 个 G......
> 安装好之后,我们就可以通过 开发工具 运行 示例代码
运行时,需要用到 鸿蒙真机或者模拟器。但是这里需要 注意: Windows系统需要经过特殊配置才可以启动,mac 系统最好保证系统版本在 mac os 12 以上
windows 系统配置方式(非 windows 用户可跳过):
打开控制面板 - 程序与功能 - 开启以下功能
Hyper-V
Windows 虚拟机监控程序平台
虚拟机平台
注意: 需要win10专业版或win11专业版才能开启以上功能,家庭版需先升级成专业版或企业版
启动鸿蒙模拟器
整个过程分为三步(中间会涉及到鸿蒙开发者申请):
1.下载 uni-app 鸿蒙离线SDK template-1.3.4.tgz (下载地址:https://web-ext-storage.dcloud.net.cn/uni-app/harmony/zip/template-1.3.4.tgz)
2.解压刚下载的压缩包,将解压后的模板工程在 DevEco-Studio 中打开
3.等待 Sync 结束,再 启动鸿蒙模拟器 或 连接鸿蒙真机(如无权限,则需要申请(一般 3 个工作日),申请地址:https://developer.huawei.com/consumer/cn/activity/201714466699051861/signup)
配置 HBuilderX 吊起 DevEco-Studio
打开HBuilderX,点击上方菜单 - 工具 - 设置,在出现的弹窗右侧窗体新增如下配置
注意:值填你自己的 DevEco-Studio 启动路径
harmony.devTools.path" : "/Applications/DevEco-Studio.app"
创建 uni-app 工程
1.BuilderX 新建一个空白的 uniapp 项目,选vue3
2.在 manifest.json 文件中配置鸿蒙离线SDK路径(SDK 路径可在 DevEco-Studio -> Preferences(设置) z中获取)
编辑 manifest.json 文件,新增如下配置:
然后点击 运行到鸿蒙即可
总结
这样我们就有了一个初始的鸿蒙项目,并且可以在鸿蒙模拟器上运行。关于更多 uniapp 开发鸿蒙的 API,大家可以直接参考 uniapp 官方文档:https://zh.uniapp.dcloud.io/tutorial/harmony/dev.html#nativeapi
——转自作者:程序员Sunday
收起阅读 »
HBuilder X 运行设备不兼容鸿蒙模拟器目前只能在arm64平台运行怎么弄
运行到鸿蒙模拟器报HBuilder X 运行设备不兼容鸿蒙模拟器目前只能在arm64平台运行
运行到鸿蒙模拟器报HBuilder X 运行设备不兼容鸿蒙模拟器目前只能在arm64平台运行