LicheeRV 86 Panel开发板支持Waft的方式进行图形界面的开发，之前的两篇文章：
【平头哥Sipeed LicheeRV 86 Panel测评】6-Waft图形界面开发测试（上）
【平头哥Sipeed LicheeRV 86 Panel测评】7-Waft图形界面开发测试（下）
已经介绍过waft的开发环境搭建以及的demo例程测试。本篇，来详细分析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容器启动时运行。
使用demo例程中的空模板例程（empty）来分析Waft的代码结构，使用VSCode打开工程代码，项目源码结构如下：
下面来尝试分析一下各个文件中每行代码的含义。
{
"pages": [
"pages/index/index"
],
"default": "pages/index/index",
"window": {
"defaultTitle": "Waft Empty Template"
},
"viewport":{
"width": 1024,
"height": 600,
"scaleMode": "fixedHeight"
}
}
pages数组
"pages/index/index" --指明路径为pages目录下的index目录下的index开头的相关文件
default字段："pages/index/index"
windows对象
defaultTitle字段："Waft Empty Template" --表示这是一个空工程
viewport对象
width字段：1024 --页面宽度
height字段：600 --页面高度
widthscaleMode字段："fixedHeight"
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');
}
}
引入JSONObject从"waft-json"中
引入console和App从"waft"中
一个app类？
{
"dataSource":{
"desc": "powered by waft",
"percent": 42
}
}
数据源
变量 desc："powered by waft"
变量 percent： 42
.warpper {
background-color:white;
width:100%;
height:100%;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.text{
color: black;
}
warpper 包装器
background-color: 背景色
width: 宽度
height: 高度
display: 弹性布局
flex-direction: 弹性方向为列方向
justify-direction: 用于设置弹性盒子元素在主轴方向上的对齐方式
align-item: 定义flex子项在flex容器的当前行的侧轴方向上的对齐方式
text 文本
color: 黑色
<div class="warpper">
<div class="text" onTap="onTap">{{text}}</div>
</div>
warpper 包装器
text 文本
onTap 点击
{
"usingComponents": {
},
"state":{
"text": "waft"
}
}
usingComponents 使用的组件
state 状态
text: 显示的文本为"waft"
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));
}
}
进入工程目录运行：
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暂时无用。
了解了模板工程中各代码的基础作用后，可以先简单修改一些参数，验证我们的想法。
比如进行如下修改：
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>
修改后的效果如下：
参考如下文章：【RISC-V 生态软件系列】Waft UI基础一：Button使用
获取源码：
git clone git@gitee.com:tsing-qiu/waft-ui.git
主要是获取ui相关组件的代码，如下图的assembly中的各个文件夹，以及src文件夹下的各个例程，本篇先来测试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>
修改完后进行编译：
.build
可能会提示如下的错误：waft-ui-common.ts找不到：
这时需要升级waft-ui组件：
npm i waft-ui --save
升级完组件之后，即可编译成功。
现在浏览器中查看运行效果：
再到板子中查看运行效果，比较奇怪的时，浏览器预览的和板子里实际运行的，效果不一样，如下图：
再次修改相关参数，修改assembly里的button.acss和base.acss中的相关的数值，以及修改app.json里的宽高为480。
排列整齐了一点，不过不同大小的按钮，还是不能正常显示为不太的大小，不知道哪里还没改到位：
本篇详细分析了Waft基础例程的工程模板中各文件的基础作用，并通过修改参数验证猜想，最后通过新加一个button页面来进一步测试Waft的开发使用。
京公网安备 11010802033920号
