外贸网站推广 sit,拼多多网上怎么开店,网络营销模式有几种,hao123网站用什么程序做的一 容器
1.1 容器分类 Column表示沿垂直方向布局的容器。Row表示沿水平方向布局的容器。 1.2 主轴和交叉轴
主轴#xff1a;在Column容器中的子组件是按照从上到下的垂直方向布局的#xff0c;其主轴的方向是垂直方向#xff1b;在Row容器中的组件是按照从左到右的水平方向…一 容器
1.1 容器分类 Column表示沿垂直方向布局的容器。Row表示沿水平方向布局的容器。 1.2 主轴和交叉轴
主轴在Column容器中的子组件是按照从上到下的垂直方向布局的其主轴的方向是垂直方向在Row容器中的组件是按照从左到右的水平方向布局的其主轴的方向是水平方向 交叉轴与主轴垂直相交的轴线如果主轴是垂直方向则交叉轴就是水平方向如果主轴是水平方向则交叉轴是垂直方向。 1.3 对齐 justifyContent设置子组件在主轴方向上的对齐格式。alignItems 设置子组件在交叉轴方向上的对齐格式。 主轴方向的对齐justifyContent: Start元素在主轴方向首端对齐第一个元素与行首对齐同时后续的元素与前一个对齐。 Center元素在主轴方向中心对齐第一个元素与行首的距离以及最后一个元素与行尾距离相同。 End元素在主轴方向尾部对齐最后一个元素与行尾对齐其他元素与后一个对齐。 SpaceBetween元素在主轴方向均匀分配弹性元素相邻元素之间距离相同。 第一个元素与行首对齐最后一个元素与行尾对齐。 SpaceAround元素在主轴方向均匀分配弹性元素相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。 SpaceEvenly元素在主轴方向等间距布局无论是相邻元素还是边界元素到容器的间距都一样。 交叉轴方向的对齐alignItems Column容器的主轴是垂直方向交叉轴是水平方向其参数类型为HorizontalAlign水平对齐: Start设置子组件在水平方向上按照起始端对齐。Center默认值设置子组件在水平方向上居中对齐。End设置子组件在水平方向上按照末端对齐。 Row容器的主轴是水平方向交叉轴是垂直方向其参数类型为VerticalAlign垂直对齐: Top设置子组件在垂直方向上居顶部对齐。Center默认值设置子组件在竖直方向上居中对齐。Bottom设置子组件在竖直方向上居底部对齐。 二 基础组件
2.1 Text
Text组件用于在界面上展示一段文本信息可以包含子组件Span组件用于在界面上展示一段文本信息可以包含子组件Span
Entry
Component
struct TextDemo {build() {Row() {Column() {Text(HarmonyOS)Text(HarmonyOS).fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily(Arial)}.width(100%)}.backgroundColor(0xF1F3F5).height(100%)}
}
2.2 Image
Image组件用来渲染展示图片它可以让界面变得更加丰富多彩。只需要给Image组件设置图片地址、宽和高图片就能加载出来示例如下
Image($r(app.media.image2)).objectFit(ImageFit.Cover).backgroundColor(0xCCCCCC).width(100).height(100)
2.3 TextInput
TextInput组件用于输入单行文本响应输入事件。TextInput的使用也非常广泛例如应用登录账号密码、发送消息等。和Text组件一样TextInput组件也支持文本样式设置下面的示例代码实现了一个简单的输入框
TextInput().fontColor(Color.Blue).fontSize(20).fontStyle(FontStyle.Italic).fontWeight(FontWeight.Bold).fontFamily(Arial) 2.4 Button
Button组件主要用来响应点击操作可以包含子组件。下面的示例代码实现了一个“登录按钮”
Button(登录, { type: ButtonType.Capsule, stateEffect: true }).width(90%).height(40).fontSize(16).fontWeight(FontWeight.Medium).backgroundColor(#007DFF)
2.5 List
List竖向列表列表往往由多个条目组成所以我们需要在List组件中写多个ListItem组件来构建列表这就会导致代码的冗余。使用循环渲染ForEach遍历数组的方式构建列表可以减少重复代码
Entry
Component
struct ListDemo {private arr: number[] [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]build() {Column() {List({ space: 10 }) {ForEach(this.arr, (item: number) {ListItem() {Text(${item}).width(100%).height(100).fontSize(20).fontColor(Color.White).textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0x007DFF)}}, item item)}}.padding(12).height(100%).backgroundColor(0xF1F3F5)}
} 2.6 Grid
Grid组件为网格容器是一种网格列表由“行”和“列”分割的单元格所组成通过指定“项目”所在的单元格做出各种各样的布局。Grid组件一般和子组件GridItem一起使用Grid列表中的每一个条目对应一个GridItem组件
Entry
Component
struct GridExample {private arr: String[] [0, 1, 2, 3]build() {Column() {Grid() {ForEach(this.arr, (day: string) {ForEach(this.arr, (day: string) {GridItem() {Text(day).fontSize(16).fontColor(Color.White).backgroundColor(0x007DFF).width(100%).height(100%).textAlign(TextAlign.Center)}}, day day)}, day day)}.columnsTemplate(1fr 1fr 1fr 1fr).rowsTemplate(1fr 1fr 1fr 1fr).columnsGap(10).rowsGap(10).height(300)}.width(100%).padding(12).backgroundColor(0xF1F3F5)}
} 2.7 AlertDialog 警告弹窗AlertDialog由以下三部分区域构成对应下面的示意图 标题区为可选的。内容区显示提示消息。操作按钮区用户做”确认“或者”取消“等操作。 Button(点击显示弹窗).onClick(() {AlertDialog.show({title: 删除联系人, // 标题message: 是否需要删除所选联系人?, // 内容autoCancel: false, // 点击遮障层时是否关闭弹窗。alignment: DialogAlignment.Bottom, // 弹窗在竖直方向的对齐方式offset: { dx: 0, dy: -20 }, // 弹窗相对alignment位置的偏移量primaryButton: {value: 取消,action: () {console.info(Callback when the first button is clicked);}},secondaryButton: {value: 删除,fontColor: #D94838,action: () {console.info(Callback when the second button is clicked);}},cancel: () { // 点击遮障层关闭dialog时的回调console.info(Closed callbacks);}})})
2.8 动画
Image(iconItem.imgRes).width(this.iconWidth).position({ x: iconItem.posX }).objectFit(ImageFit.Contain).animation({duration: 2000,tempo: 3.0,delay: iconItem.delay,curve: Curve.Linear,playMode: PlayMode.Normal,iterations: 1,onFinish: () { prompt.showToast({ message:动画播放结束 })}})2.9 Web
ArkUI为我们提供了Web组件来加载网页借助它我们就相当于在自己的应用程序里嵌入一个浏览器从而非常轻松地展示各种各样的网页
加载在线网页
Entry
Component
struct WebComponent {controller: WebController new WebController();build() {Column() {Web({ src: https://developer.harmonyos.com/, controller: this.controller })}}
} 加载本地网页
Entry
Component
struct SecondPage {controller: WebController new WebController();build() {Column() {Web({ src: $rawfile(index.html), controller: this.controller })}}
}
三 网络请求
3.1 生命权限
{module : {requestPermissions:[{name: ohos.permission.INTERNET}]}
}
3.2 导入http模块
import http from ohos.net.http; 3.3 创建httpRequest对象
let httpRequest http.createHttp();
3.4 发起http请求
let url https://EXAMPLE_URL;
let promise httpRequest.request(// 请求url地址url,{// 请求方式method: http.RequestMethod.POST,// 请求的额外数据。extraData: {param1: value1,param2: value2,},// 可选默认为60sconnectTimeout: 60000,// 可选默认为60sreadTimeout: 60000,// 开发者根据自身业务需要添加header字段header: {Content-Type: application/json}});
3.5 处理响应结果
promise.then((data) { if (data.responseCode http.ResponseCode.OK) {console.info(Result: data.result);console.info(code: data.responseCode);}
}).catch((err) {console.info(error: JSON.stringify(err));
});
四 三方库的使用
4.1 目前提供了两种途径获取开源三方库 通过访问Gitee网站开源社区获取在Gitee中搜索OpenHarmony-TPC仓库在tpc_resource中对三方库进行了资源汇总可以供开发者参考。通过HarmonyOS开发者官网提供的资源中心获取进入HarmonyOS开发者官网选择 开发DevEco Service在DevEco Service页面下找到资源中心在资源中心找到三方库入口 4.2 lottie动画三方库为例lottie的安装 通过ohpm执行对应的指令将lottie安装到项目中。
ohpm install ohos/lottie
4.3 卸载lottie
ohpm uninstall ohos/lottie
4.4 引入lottie通过import指令在项目中引入lottie到文件中。
import lottie from ohos/lottie
4.5 构建Canvas画布
lottie解析JSON动画文件的数据需要基于Canvas 画布进行2D渲染所以在加载JSON动画之前要先初始化渲染上下文并在画面中创建Canvas画布区域将对应的渲染上下文renderingContext传递给Canvas。
// 初始化渲染上下文
private renderingSettings: RenderingContextSettings new RenderingContextSettings(true) // 设置开启抗锯齿
private renderingContext: CanvasRenderingContext2D new CanvasRenderingContext2D(this.renderingSettings) // 创建2D渲染上下文// 加载Canvas画布
Canvas(this.renderingContext)...
4.6 使用lottie加载JSON动画
加载JSON动画需要用到loadAnimation方法在方法中需配置相应的初始设置包括渲染上下文、渲染方式以及JSON动画资源的路径等。可以直接使用lottie.loadAnimation方法也可以用一个animationItem实例来接收返回的animationItem对象
// 用animationItem实例接收
let animationItem lottie.loadAnimation({container: this.renderingContext, // 渲染上下文renderer: canvas, // 渲染方式loop: 10, // 设置为循环播放10次autoplay: true, // 是否自动播放默认truepath: common/lottie/data.json, // json路径})
//或者直接使用
lottie.loadAnimation({container: this.renderingContext, // 渲染上下文renderer: canvas, // 渲染方式loop: true, // 默认为trueautoplay: true, // 是否自动播放默认truepath: common/lottie/data.json, // json路径})
4.7 lottie控制动画
// 播放、暂停、停止、销毁 可以使用lottie也可以使用animationItem实例进行控制
lottie.play(); // 从目前停止的帧开始播放
lottie.stop(); // 停止播放回到第0帧
lottie.pause(); // 暂停该动画在当前帧停止并保持
lottie.togglePause(); // 切换暂停/播放状态
lottie.destroy(); // 删除该动画移除相应的元素标签等。在unmount的时候需要调用该方法// 播放进度控制
animationItem.goToAndStop(value, isFrame); // 跳到某个时刻/帧并停止。isFrame(默认false)指示value表示帧还是时间(毫秒)
animationItem.goToAndPlay(value, isFrame); // 跳到某个时刻/帧并进行播放
animationItem.goToAndStop(30, true); // 例跳转到第30帧并停止
animationItem.goToAndPlay(300); // 例跳转到第300毫秒并播放// 控制帧播放
animationItem.setSegment(5,15); // 限定动画资源播放时的整体帧范围即设置动画片段
animationItem.resetSegments(5,15); // 重置播放的动画片段
animationItem.playSegments(arr, forceFlag); // arr可以包含两个数字或者两个数字组成的数组forceFlag表示是否立即强制播放该片段
animationItem.playSegments([10,20], false); // 例播放完之前的片段播放10-20帧
animationItem.playSegments([[5,15],[20,30]], true); //例 直接播放5-15帧和20-30帧// 动画基本属性控制
lottie.setSpeed(speed); // 设置播放速度speed为1表示正常速度
lottie.setDirection(direction); // 设置播放方向1表示正向播放-1表示反向播放// 获取动画帧数属性
animationItem.getDuration(); //获取动画时长
4.8 事件订阅
在一些特殊场景下比如开始加载动画或者动画播放结束时可能需要执行相应的操作在lottie中提供了事件订阅和取消订阅的功能当触发对应的event会执行传入的回调函数用户可以在回调函数中完成要实现的功能
// 订阅事件
animationItem.addEventListener(event,function(){// TODO something
})// 取消订阅事件
animationItem.removeEventListener(event,function(){// TODO something
})
// event事件类型
enterFrame // 每进入一帧就会触发
loopComplete // 当前循环下播放循环播放/非循环播放结束时触发
complete // 播放完成时触发
segmentStart // 播放指定片段时触发playSegments、resetSegments等方法刚开始播放指定片段时会发出如果playSegments播放多个片段多个片段最开始都会触发。
destroy // 销毁动画时触发
data_ready // 数据准备完成
DOMLoaded // 动画相关dom已经被添加
error // 出现错误
data_failed // 数据加载失败...
