【平头哥Sipeed LicheeRV 86 Panel测评】12-Waft例程分析与按钮功能测试
[复制链接]
LicheeRV 86 Panel开发板支持Waft的方式进行图形界面的开发，之前的两篇文章：
【平头哥Sipeed LicheeRV 86 Panel测评】6-Waft图形界面开发测试（上）
【平头哥Sipeed LicheeRV 86 Panel测评】7-Waft图形界面开发测试（下）
已经介绍过waft的开发环境搭建以及的demo例程测试。本篇，来详细分析Waft的一个基础例程的代码结构，并尝试修改对应的参数验证各处代码的作用，最后再来测试一下按钮组件的显示功能。
1 Waft文件结构
waft是基于AssemblyScript语言开发的前端框架，项目编译产出后缀为.wasm的bundle包，可以在web或装有waft容器的设备上，动态的跨端运行。
waft采用渲染和逻辑分离的架构，通过定义模板视图和页面执行逻辑，两者会通过state进行数据绑定。执行逻辑通过更新state，从而触发渲染更新。
waft应用结构类似小程序，分为app和page两层：app描述了整个应用，page描述页面。
app由三个文件组成，必须放在项目的根目录。
| 文件 |
必填 |
作用 |
| app.ts |
是 |
脚本逻辑 |
| app.json |
是 |
全局设置 |
| mock.json |
? |
一些变量？ |
page由四个文件组成，分别是：
| 文件 |
必填 |
作用 |
| index.ts |
是 |
页面逻辑 |
| index.axml |
是 |
页面结构(类比html) |
| index.acss |
否 |
页面样式表(类比css) |
| indexc.json |
否 |
页面配置 |
开发者所写的代码，最终都会打包成一个wasm文件，在waft容器启动时运行。
2 模板例程分析
使用demo例程中的空模板例程（empty）来分析Waft的代码结构，使用VSCode打开工程代码，项目源码结构如下：
下面来尝试分析一下各个文件中每行代码的含义。
2.1 根目录
2.1.1 全局设置-app.json
{
"pages": [
"pages/index/index"
],
"default": "pages/index/index",
"window": {
"defaultTitle": "Waft Empty Template"
},
"viewport":{
"width": 1024,
"height": 600,
"scaleMode": "fixedHeight"
}
}
2.1.2 脚本逻辑-app.ts
import { JSONObject } from "waft-json";
import { console, App } from "waft";
export class app extends App{
onLaunch(options: JSONObject): void{
super.onLaunch(options);
console.log('app onLaunch');
}
}
2.1.3 mock.json
{
"dataSource":{
"desc": "powered by waft",
"percent": 42
}
}
2.2 pages页面
2.2.1 页面样式表-index.ass
.warpper {
background-color:white;
width:100%;
height:100%;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.text{
color: black;
}
2.2.2 页面结构-index.axml
<div class="warpper">
<div class="text" onTap="onTap">{{text}}</div>
</div>
2.2.3 页面配置-index.json
{
"usingComponents": {
},
"state":{
"text": "waft"
}
}
-
usingComponents 使用的组件
-
state 状态
2.2.4 页面逻辑-index.ts
import { JSON, JSONObject } from "waft-json";
import { console, getDataSource, Page, Props, Event, MessageEvent, setTimeout,window } from "waft";
export class Index extends Page {
constructor(props: Props){
super(props);
// 设置默认的state
this.setState(getDataSource());
}
onTap(e: Event): void{
// 点击事件
}
onShow(): void{
// 页面显示
console.log('page onShow');
}
onLoad(query: JSONObject): void{
// 页面加载后
console.log('page onLoad:' + JSON.stringify(query));
}
onMessage(event: MessageEvent): void{
// 信息推送更新
console.log('page onMessage:' + JSON.stringify(event.data));
}
}
2.3 模板例程运行分析
进入工程目录运行：
npm run start
先在浏览器中模拟运行该模板例程
观察运行结果，可以看出一些明显的特征：
-
背景是白色的 ——页面样式表-index.ass中的.warpper里的background-color的值为白色，且页面结构-index.axml中使用的是"warpper"这个类。
-
字体是黑色的 ——页面样式表-index.ass中的.text里的color的值为黑色，且页面结构-index.axml中使用的是"text"这个类。
-
文字内容为waft —— 页面结构-index.axml中使用的文字内容是{text}，且页面配置-index.json中的 "text"内容为"waft"
此外：mock.json中的两个值desc和percent暂时无用。
2.4 模板例程参数修改
了解了模板工程中各代码的基础作用后，可以先简单修改一些参数，验证我们的想法。
比如进行如下修改：
-
index.acss修改背景色为灰色，并增加一种字体样式：
.warpper {
background-color:gray;
width:100%;
height:100%;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
-
index.acss增加一种字体样式：
.textA{
color: red;
}
.textB{
color: green;
font-size: 40px;
}
-
index.json修改文字内容：
{
"usingComponents": {
},
"state":{
"text1": "hello waft"
}
}
-
index.axml修改显示内容，增加一行字，字段内容来源于之前未使用的mock.json中值：
<div class="warpper">
<div class="textA" onTap="onTap">{{text1}}</div>
<div class="textB" onTap="onTap">{{desc}}</div>
</div>
修改后的效果如下：
3 按钮组件测试
参考如下文章：【RISC-V 生态软件系列】Waft UI基础一：Button使用
获取源码：
git clone git@gitee.com:tsing-qiu/waft-ui.git
主要是获取ui相关组件的代码，如下图的assembly中的各个文件夹，以及src文件夹下的各个例程，本篇先来测试button组件：
3.1 将button源码添加到工程
将src文件夹中的test-button源码添加到工程中，如下图，然后修改app.json中的default字段为“pages/button/index”，这样就会默认显示按钮页面了：
可以修改button源码中的相关参数，以实现自己想要的效果：
比如我修改了index.axml：
<view class="wrapper">
<x-nav-bar showArrow="{{true}}" title="Button 测试"></x-nav-bar>
<view style="flex: 1; padding-top: 30rpx; display: flex;flex-direction: column;">
<view class="title">1 按钮类型</view>
<view class="flex">
<x-button text="普通"></x-button><view class="dot"></view>
<x-button type="tip" text="气泡"></x-button><view class="dot"></view>
<x-button type="primary" text="类型1"></x-button><view class="dot"></view>
<x-button type="secondary" text="类型2"></x-button><view class="dot"></view>
</view>
<view class="title">2 不同大小的按钮</view>
<view class="flex">
<x-button type="primary" text="小按钮" size="small"></x-button><view class="dot"></view>
<x-button type="primary" text="中按钮" ></x-button><view class="dot"></view>
<x-button type="primary" text="大按钮" size="large"></x-button><view class="dot"></view>
</view>
<view class="title">3 带图标的按钮</view>
<view class="flex">
<x-button type="secondary" text="按钮" iconURL="https://gw.alicdn.com/imgextra/i1/O1CN0192HvCz1vntR4jzNJ9_!!6000000006218-2-tps-20-20.png"></x-button><view class="dot"></view>
</view>
<view class="title">4 自定义颜色的按钮</view>
<view class="flex">
<x-button text="按钮" bgColor="#ff976a" borderColor="#ff976a" textColor="#ffffff"></x-button><view class="dot"></view>
</view>
</view>
</view>
3.2 升级组件功能与编译
修改完后进行编译：
.build
可能会提示如下的错误：waft-ui-common.ts找不到：
这时需要升级waft-ui组件：
npm i waft-ui --save
升级完组件之后，即可编译成功。
3.3 运行测试
现在浏览器中查看运行效果：
再到板子中查看运行效果，比较奇怪的时，浏览器预览的和板子里实际运行的，效果不一样，如下图：
再次修改相关参数，修改assembly里的button.acss和base.acss中的相关的数值，以及修改app.json里的宽高为480。
排列整齐了一点，不过不同大小的按钮，还是不能正常显示为不太的大小，不知道哪里还没改到位：
4 总结
本篇详细分析了Waft基础例程的工程模板中各文件的基础作用，并通过修改参数验证猜想，最后通过新加一个button页面来进一步测试Waft的开发使用。
| 
提升卡
变色卡
千斤顶
1/10 
京公网安备 11010802033920号
Copyright © 2005-2024 EEWORLD.com.cn, Inc. All rights reserved
