1. APP内嵌网页与应用互操作概述
在通常的APP开发中，经常会采用内嵌网页的形式，通过网页来展现丰富的动态内容，虽少了很多原生开发的功能，但是这么做无可厚非，毕竟APP需要适配的系统平台很多，比如安卓、苹果、各种PC端，现在还有如日中天的鸿蒙系统；为每一种平台做定制难度还是很大的，但是这些平台的APP都支持内嵌网页，通过网页可以屏蔽各平台的差异，从而减少开发难度，提高开发效率。
当然，单纯的内嵌网页还是有不少局限性的，不过，可以通过应用和网页的互操作来提升用户的使用体验，所谓的互操作，就是可以在网页中调用APP中的方法，或者在APP中执行网页中的脚本，鸿蒙通过web组件中的javaScriptProxy接口提供了注册应用侧js对象到web组件中的方法：
javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Array<string>,controller: WebviewController | WebController, asyncMethodList?: Array<string>})当然，也可以使用WebviewController的registerJavaScriptProxy接口：
registerJavaScriptProxy(object: object, name: string, methodList: Array<string>, asyncMethodList?: Array<string>): void在应用侧执行网页中的脚本使用的是WebviewController类的runJavaScript接口：
runJavaScript(script: string): Promise<string>通过上述几个接口，就可以实现强大的Web组件与应用互操作功能
2. Web组件与应用互操作示例
本示例运行后的界面如下所示
单击网页中“计算应用侧的乘法”按钮，可以自动计算app上部的乘法，计算后的界面如下所示；
在app内调节RGB颜色分量，设置好选择的背景色后，单击应用中的“设置网页背景色”按钮，可以设置网页的背景色：
下面详细介绍创建该应用的步骤。
步骤1：创建Empty Ability项目。
步骤2：在module.json5配置文件加上对权限的声明：
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]这里添加了获取互联网信息的权限。
步骤3：添加资源文件demo.html，路径为src/main/resources/rawfile/demo.html，内容如下：
<!-- index.html -->
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<div style="text-align: center;font-size: larger;">
<button type="button" onclick="compute()">计算应用侧的乘法</button>
</div>
<div id="info">
</div>
</body>
<script type="text/javascript">
function compute() {
let multiplier = multipObj.getMultiplier();
let multiplicand = multipObj.getMultiplicand();
let product = multiplier * multiplicand
multipObj.setProduct(product);
}
function setbackcolor(color) {
document.body.style.backgroundColor = color;
}
</script>
</html>该资源文件很重要，是本示例互操作实现的基础。
步骤4：在Index.ets文件里添加如下的代码：
import web_webview from '@ohos.web.webview'
//注册到web组件中的应用侧js对象
class ComputeObj {
constructor() {
}
public multiplier: number = 0.618
public multiplicand: number = 3.14
public product: string = "乘积"
//获取乘数
public getMultiplier() {
return this.multiplier;
}
//获取被乘数
public getMultiplicand() {
return this.multiplicand;
}
//设置乘积
public setProduct(newProduct: number) {
this.product = newProduct.toString();
}
}
@Entry
@Component
struct Index {
@State computeObj: ComputeObj = new ComputeObj()
jsName: string = "multipObj"
@State rColor: number = 100
@State gColor: number = 100
@State bColor: number = 100
@State backColor: string = "#646464"
scroller: Scroller = new Scroller()
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Row() {
Column() {
Text("Web组件与应用互操作示例")
.fontSize(14)
.fontWeight(FontWeight.Bold)
.width('100%')
.textAlign(TextAlign.Center)
.padding(5)
Text("输入乘数和被乘数，在web组件中单击计算按钮进行计算")
.fontSize(14)
.width('100%')
.textAlign(TextAlign.Start)
.padding(5)
Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
TextInput({ text: this.computeObj.multiplier.toString() })
.onChange((value) => {
this.computeObj.multiplier = parseFloat(value)
})
.type(InputType.NUMBER_DECIMAL)
.width(110)
.fontSize(11)
.flexGrow(1)
Text("*")
.fontSize(14)
.width(20)
.flexGrow(0)
TextInput({ text: this.computeObj.multiplicand.toString() })
.onChange((value) => {
this.computeObj.multiplicand = parseFloat(value)
})
.type(InputType.NUMBER_DECIMAL)
.width(100)
.fontSize(11)
.flexGrow(1)
Text("=")
.fontSize(14)
.width(20)
.flexGrow(0)
TextInput({ text: `${this.computeObj.product}` })
.width(100)
.fontSize(11)
.enabled(false)
.flexGrow(1)
}
.width('100%')
.padding(5)
Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
Text("R颜色分量")
.fontSize(14)
.width(100)
.flexGrow(0)
Slider({ value: this.rColor, min: 0, max: 255 })
.onChange((value: number, mode: SliderChangeMode) => {
this.rColor = value
this.computeBackcolor()
})
.flexGrow(1)
}
.width('100%')
.padding(5)
Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
Text("G颜色分量")
.fontSize(14)
.width(100)
.flexGrow(0)
Slider({ value: this.gColor, min: 0, max: 255 })
.onChange((value: number, mode: SliderChangeMode) => {
this.gColor = value
this.computeBackcolor()
})
.flexGrow(1)
}
.width('100%')
.padding(5)
Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
Text("B颜色分量")
.fontSize(14)
.width(100)
.flexGrow(0)
Slider({ value: this.bColor, min: 0, max: 255 })
.onChange((value: number, mode: SliderChangeMode) => {
this.bColor = value
this.computeBackcolor()
})
.flexGrow(1)
}
.width('100%')
.padding(5)
Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
Text(`选中的颜色：${this.backColor}`)
.fontSize(14)
.height(30)
.width(150)
.backgroundColor(this.backColor)
Button("设置网页背景色")
.onClick(() => {
this.controller.runJavaScript(`setbackcolor('${this.backColor}')`)
})
.width(140)
.fontSize(14)
.flexGrow(0)
}
.width('100%')
.padding(5)
Scroll(this.scroller) {
Web({ src: $rawfile("demo.html"), controller: this.controller })
.padding(10)
.width('100%')
.textZoomRatio(300)
.backgroundColor(0xeeeeee)
//注册js对象
.javaScriptProxy({
object: this.computeObj,
name: this.jsName,
methodList: ["getMultiplier", "getMultiplicand", "setProduct"],
controller: this.controller,
})
}
.align(Alignment.Top)
.backgroundColor(0xeeeeee)
.height(300)
.flexGrow(1)
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.On)
.scrollBarWidth(20)
}
.width('100%')
.justifyContent(FlexAlign.Start)
.height('100%')
}
.height('100%')
}
//计算背景色
computeBackcolor() {
this.backColor = "#" + parseInt(this.rColor.toFixed(0)).toString(16)
+ parseInt(this.gColor.toFixed(0)).toString(16)
+ parseInt(this.bColor.toFixed(0)).toString(16)
}
}步骤5：编译运行，可以使用模拟器或者真机。
步骤6：具体的操作过程上面讲过了，就不再赘述了。
3. 关键功能分析
第一个是要注册到web组件中的js对象，在API12中写成class的形式，
//注册到web组件中的应用侧js对象
class ComputeObj {
constructor() {
}
public multiplier: number = 0.618
public multiplicand: number = 3.14
public product: string = "乘积"
//获取乘数
public getMultiplier() {
return this.multiplier;
}
//获取被乘数
public getMultiplicand() {
return this.multiplicand;
}
//设置乘积
public setProduct(newProduct: number) {
this.product = newProduct.toString();
}
}第二个是注册对象的代码：
Web({ src: $rawfile("demo.html"), controller: this.controller })
.padding(10)
.width('100%')
.textZoomRatio(300)
.backgroundColor(0xeeeeee)
//注册js对象
.javaScriptProxy({
object: this.computeObj,
name: this.jsName,
methodList: ["getMultiplier", "getMultiplicand", "setProduct"],
controller: this.controller,
})这里javaScriptProxy方法的各个参数一定要保证准确，否则在web组件中调用会失败，其中name和demo.html中使用的注册对象名称multipObj要完全一致，methodList参数为注册对象声明的方法，也要保证拼写正确。
最后是计算背景的代码：
//计算背景色
computeBackcolor() {
this.backColor = "#" + parseInt(this.rColor.toFixed(0)).toString(16)
+ parseInt(this.gColor.toFixed(0)).toString(16)
+ parseInt(this.bColor.toFixed(0)).toString(16)
}把选中的颜色分量拼凑成了颜色字符串，最前面的是字符#。
最后
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。
点击领取→【纯血版鸿蒙全套最新学习资料】（安全链接，放心点击）希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！
这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、（南向驱动、嵌入式等）鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
鸿蒙（HarmonyOS NEXT）最新学习路线
有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。
获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料
HarmonyOS Next 最新全套视频教程
《鸿蒙 (OpenHarmony)开发基础到实战手册》
OpenHarmony北向、南向开发环境搭建
《鸿蒙开发基础》
- ArkTS语言
- 安装DevEco Studio
- 运用你的第一个ArkTS应用
- ArkUI声明式UI开发
- .……
《鸿蒙开发进阶》
- Stage模型入门
- 网络管理
- 数据管理
- 电话服务
- 分布式应用开发
- 通知与窗口管理
- 多媒体技术
- 安全技能
- 任务管理
- WebGL
- 国际化开发
- 应用测试
- DFX面向未来设计
- 鸿蒙系统移植和裁剪定制
- ……
《鸿蒙进阶实战》
- ArkTS实践
- UIAbility应用
- 网络案例
- ……
大厂面试必问面试题
鸿蒙南向开发技术
鸿蒙APP开发必备
鸿蒙生态应用开发白皮书V2.0PDF
总结
总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，才能在这个变革的时代中立于不败之地。
1171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
