【平头哥Sipeed LicheeRV 86 Panel测评】12-Waft例程分析与按钮功能测试
<p cid="n0" mdtype="paragraph">LicheeRV 86 Panel开发板支持Waft的方式进行图形界面的开发，之前的两篇文章：</p><p cid="n211" mdtype="paragraph"><a href="https://bbs.eeworld.com.cn/thread-1193434-1-1.html" spellcheck="false"><strong>【平头哥Sipeed LicheeRV 86 Panel测评】6-Waft图形界面开发测试（上）</strong></a></p>
<p cid="n217" mdtype="paragraph"><a href="https://bbs.eeworld.com.cn/thread-1193436-1-1.html" spellcheck="false"><strong>【平头哥Sipeed LicheeRV 86 Panel测评】7-Waft图形界面开发测试（下）</strong></a></p>
<p cid="n209" mdtype="paragraph">已经介绍过waft的开发环境搭建以及的demo例程测试。本篇，来详细分析Waft的一个基础例程的代码结构，并尝试修改对应的参数验证各处代码的作用，最后再来测试一下按钮组件的显示功能。</p>
<h1 cid="n2" mdtype="heading">1 Waft文件结构</h1>
<p cid="n3" mdtype="paragraph">waft是基于<strong>AssemblyScript语言</strong>开发的前端框架，项目编译产出后缀为.wasm的bundle包，可以在web或装有waft容器的设备上，动态的跨端运行。</p>
<p cid="n4" mdtype="paragraph">waft采用<strong>渲染</strong>和<strong>逻辑</strong>分离的架构，通过定义模板视图和页面执行逻辑，两者会通过state进行数据绑定。执行逻辑通过更新state，从而触发渲染更新。</p>
<p cid="n5" mdtype="paragraph">waft应用结构类似小程序，分为app和page两层：app描述了整个应用，page描述页面。</p>
<p cid="n6" mdtype="paragraph">app由三个文件组成，必须放在项目的根目录。</p>
<figure cid="n7" mdtype="table">
<table>
<thead>
<tr cid="n8" mdtype="table_row">
<th><strong>文件</strong></th>
<th><strong>必填</strong></th>
<th><strong>作用</strong></th>
</tr>
</thead>
<tbody>
<tr cid="n12" mdtype="table_row">
<td>app.ts</td>
<td>是</td>
<td>脚本逻辑</td>
</tr>
<tr cid="n16" mdtype="table_row">
<td>app.json</td>
<td>是</td>
<td>全局设置</td>
</tr>
<tr cid="n20" mdtype="table_row">
<td>mock.json</td>
<td>?</td>
<td>一些变量？</td>
</tr>
</tbody>
</table>
</figure>
<p cid="n24" mdtype="paragraph"><code>page</code>由四个文件组成，分别是：</p>
<figure cid="n25" mdtype="table">
<table>
<thead>
<tr cid="n26" mdtype="table_row">
<th><strong>文件</strong></th>
<th><strong>必填</strong></th>
<th><strong>作用</strong></th>
</tr>
</thead>
<tbody>
<tr cid="n30" mdtype="table_row">
<td>index.ts</td>
<td>是</td>
<td>页面逻辑</td>
</tr>
<tr cid="n34" mdtype="table_row">
<td>index.axml</td>
<td>是</td>
<td><strong>页面结构</strong>(类比html)</td>
</tr>
<tr cid="n38" mdtype="table_row">
<td>index.acss</td>
<td>否</td>
<td><strong>页面样式表</strong>(类比css)</td>
</tr>
<tr cid="n42" mdtype="table_row">
<td>indexc.json</td>
<td>否</td>
<td>页面配置</td>
</tr>
</tbody>
</table>
</figure>
<p cid="n46" mdtype="paragraph">开发者所写的代码，最终都会打包成一个wasm文件，在waft容器启动时运行。</p>
<h1 cid="n47" mdtype="heading">2 模板例程分析</h1>
<p cid="n48" mdtype="paragraph">使用demo例程中的<strong>空模板例程</strong>（empty）来分析Waft的代码结构，使用VSCode打开工程代码，项目源码结构如下：</p>
<p cid="n49" mdtype="paragraph"></p>
<p cid="n50" mdtype="paragraph">下面来尝试分析一下各个文件中每行代码的含义。</p>
<h2 cid="n51" mdtype="heading">2.1 根目录</h2>
<h3 cid="n52" mdtype="heading">2.1.1 全局设置-app.json</h3>
<pre>
<code>{
"pages": [
"pages/index/index"
],
"default": "pages/index/index",
"window": {
"defaultTitle": "Waft Empty Template"
},
"viewport":{
"width": 1024,
"height": 600,
"scaleMode": "fixedHeight"
}
}</code></pre>
<ul cid="n54" data-mark="-" mdtype="list">
<li cid="n55" mdtype="list_item">
<p cid="n56" mdtype="paragraph">pages数组</p>
<ul cid="n57" data-mark="-" mdtype="list">
<li cid="n58" mdtype="list_item">
<p cid="n59" mdtype="paragraph">"pages/index/index" <strong>--指明路径为pages目录下的index目录下的index开头的相关文件</strong></p>
</li>
</ul>
</li>
<li cid="n60" mdtype="list_item">
<p cid="n61" mdtype="paragraph">default字段："pages/index/index"</p>
</li>
<li cid="n62" mdtype="list_item">
<p cid="n63" mdtype="paragraph">windows对象</p>
<ul cid="n64" data-mark="-" mdtype="list">
<li cid="n65" mdtype="list_item">
<p cid="n66" mdtype="paragraph">defaultTitle字段："Waft Empty Template" <strong>--表示这是一个空工程</strong></p>
</li>
</ul>
</li>
<li cid="n67" mdtype="list_item">
<p cid="n68" mdtype="paragraph">viewport对象</p>
<ul cid="n69" data-mark="-" mdtype="list">
<li cid="n70" mdtype="list_item">
<p cid="n71" mdtype="paragraph">width字段：1024 <strong>--页面宽度</strong></p>
</li>
<li cid="n72" mdtype="list_item">
<p cid="n73" mdtype="paragraph">height字段：600 <strong>--页面高度</strong></p>
</li>
<li cid="n74" mdtype="list_item">
<p cid="n75" mdtype="paragraph">widthscaleMode字段："fixedHeight"</p>
</li>
</ul>
</li>
</ul>
<h3 cid="n76" mdtype="heading">2.1.2 脚本逻辑-app.ts</h3>
<pre>
<code>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');
}
}</code></pre>
<ul cid="n78" data-mark="-" mdtype="list">
<li cid="n79" mdtype="list_item">
<p cid="n80" mdtype="paragraph">引入<strong>JSONObject</strong>从"waft-json"中</p>
</li>
<li cid="n81" mdtype="list_item">
<p cid="n82" mdtype="paragraph">引入<strong>console和App</strong>从"waft"中</p>
</li>
<li cid="n83" mdtype="list_item">
<p cid="n84" mdtype="paragraph">一个app类？</p>
</li>
</ul>
<h3 cid="n85" mdtype="heading">2.1.3 mock.json</h3>
<pre>
<code>{
"dataSource":{
"desc": "powered by waft",
"percent": 42
}
}</code></pre>
<ul cid="n87" data-mark="-" mdtype="list">
<li cid="n88" mdtype="list_item">
<p cid="n89" mdtype="paragraph">数据源</p>
<ul cid="n90" data-mark="-" mdtype="list">
<li cid="n91" mdtype="list_item">
<p cid="n92" mdtype="paragraph">变量 desc："powered by waft"</p>
</li>
<li cid="n93" mdtype="list_item">
<p cid="n94" mdtype="paragraph">变量 percent： 42</p>
</li>
</ul>
</li>
</ul>
<h2 cid="n95" mdtype="heading">2.2 pages页面</h2>
<h3 cid="n96" mdtype="heading">2.2.1 页面样式表-index.ass</h3>
<pre>
<code>.warpper {
background-color:white;
width:100%;
height:100%;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.text{
color: black;
}</code></pre>
<ul cid="n98" data-mark="-" mdtype="list">
<li cid="n99" mdtype="list_item">
<p cid="n100" mdtype="paragraph">warpper 包装器</p>
<ul cid="n101" data-mark="-" mdtype="list">
<li cid="n102" mdtype="list_item">
<p cid="n103" mdtype="paragraph">background-color: 背景色</p>
</li>
<li cid="n104" mdtype="list_item">
<p cid="n105" mdtype="paragraph">width: 宽度</p>
</li>
<li cid="n106" mdtype="list_item">
<p cid="n107" mdtype="paragraph">height: 高度</p>
</li>
<li cid="n108" mdtype="list_item">
<p cid="n109" mdtype="paragraph">display: 弹性布局</p>
</li>
<li cid="n110" mdtype="list_item">
<p cid="n111" mdtype="paragraph">flex-direction: 弹性方向为列方向</p>
</li>
<li cid="n112" mdtype="list_item">
<p cid="n113" mdtype="paragraph">justify-direction: 用于设置弹性盒子元素在主轴方向上的对齐方式</p>
</li>
<li cid="n114" mdtype="list_item">
<p cid="n115" mdtype="paragraph">align-item: 定义flex子项在flex容器的当前行的侧轴方向上的对齐方式</p>
</li>
</ul>
</li>
<li cid="n116" mdtype="list_item">
<p cid="n117" mdtype="paragraph">text 文本</p>
<ul cid="n118" data-mark="-" mdtype="list">
<li cid="n119" mdtype="list_item">
<p cid="n120" mdtype="paragraph">color: 黑色</p>
</li>
</ul>
</li>
</ul>
<h3 cid="n121" mdtype="heading">2.2.2 页面结构-index.axml</h3>
<pre>
<code><div class="warpper">
<div class="text" onTap="onTap">{{text}}</div>
</div></code></pre>
<ul cid="n123" data-mark="-" mdtype="list">
<li cid="n124" mdtype="list_item">
<p cid="n125" mdtype="paragraph">warpper 包装器</p>
<ul cid="n126" data-mark="-" mdtype="list">
<li cid="n127" mdtype="list_item">
<p cid="n128" mdtype="paragraph">text 文本</p>
</li>
<li cid="n129" mdtype="list_item">
<p cid="n130" mdtype="paragraph">onTap 点击</p>
</li>
</ul>
</li>
</ul>
<h3 cid="n131" mdtype="heading">2.2.3 页面配置-index.json</h3>
<pre>
<code>{
"usingComponents": {
},
"state":{
"text": "waft"
}
}</code></pre>
<ul cid="n133" data-mark="-" mdtype="list">
<li cid="n134" mdtype="list_item">
<p cid="n135" mdtype="paragraph">usingComponents 使用的组件</p>
</li>
<li cid="n136" mdtype="list_item">
<p cid="n137" mdtype="paragraph">state 状态</p>
<ul cid="n138" data-mark="-" mdtype="list">
<li cid="n139" mdtype="list_item">
<p cid="n140" mdtype="paragraph">text: 显示的文本为"waft"</p>
</li>
</ul>
</li>
</ul>
<h3 cid="n141" mdtype="heading">2.2.4 页面逻辑-index.ts</h3>
<pre>
<code>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));
}
}</code></pre>
<h2 cid="n143" mdtype="heading">2.3 模板例程运行分析</h2>
<p cid="n144" mdtype="paragraph">进入工程目录运行：</p>
<pre>
<code>npm run start</code></pre>
<p cid="n146" mdtype="paragraph">先在浏览器中模拟运行该模板例程</p>
<p cid="n147" mdtype="paragraph"></p>
<p cid="n148" mdtype="paragraph">观察运行结果，可以看出一些明显的特征：</p>
<ul cid="n149" data-mark="-" mdtype="list">
<li cid="n150" mdtype="list_item">
<p cid="n151" mdtype="paragraph"><strong>背景是白色的</strong> ——页面样式表-index.ass中的.warpper里的background-color的值为白色，且页面结构-index.axml中使用的是"warpper"这个类。</p>
</li>
<li cid="n152" mdtype="list_item">
<p cid="n153" mdtype="paragraph"><strong>字体是黑色的</strong> ——页面样式表-index.ass中的.text里的color的值为黑色，且页面结构-index.axml中使用的是"text"这个类。</p>
</li>
<li cid="n154" mdtype="list_item">
<p cid="n155" mdtype="paragraph"><strong>文字内容为waft</strong> —— 页面结构-index.axml中使用的文字内容是{text}，且页面配置-index.json中的 "text"内容为"waft"</p>
</li>
</ul>
<p cid="n156" mdtype="paragraph">此外：mock.json中的两个值desc和percent暂时无用。</p>
<h2 cid="n157" mdtype="heading">2.4 模板例程参数修改</h2>
<p cid="n158" mdtype="paragraph">了解了模板工程中各代码的基础作用后，可以先简单修改一些参数，验证我们的想法。</p>
<p cid="n159" mdtype="paragraph">比如进行如下修改：</p>
<ul cid="n160" data-mark="-" mdtype="list">
<li cid="n161" mdtype="list_item">
<p cid="n162" mdtype="paragraph">index.acss修改背景色为灰色，并增加一种字体样式：</p>
<pre>
<code>.warpper {
background-color:gray;
width:100%;
height:100%;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}</code></pre>
<p> </p>
</li>
<li cid="n164" mdtype="list_item">
<p cid="n165" mdtype="paragraph">index.acss增加一种字体样式：</p>
<pre>
<code>.textA{
color: red;
}
.textB{
color: green;
font-size: 40px;
}</code></pre>
<p> </p>
</li>
<li cid="n167" mdtype="list_item">
<p cid="n168" mdtype="paragraph">index.json修改文字内容：</p>
<pre>
<code>{
"usingComponents": {
},
"state":{
"text1": "hello waft"
}
}</code></pre>
<p> </p>
</li>
<li cid="n170" mdtype="list_item">
<p cid="n171" mdtype="paragraph">index.axml修改显示内容，增加一行字，字段内容来源于之前未使用的mock.json中值：</p>
<pre>
<code><div class="warpper">
<div class="textA" onTap="onTap">{{text1}}</div>
<div class="textB" onTap="onTap">{{desc}}</div>
</div></code></pre>
<p> </p>
</li>
</ul>
<p cid="n173" mdtype="paragraph">修改后的效果如下：</p>
<p cid="n174" mdtype="paragraph"></p>
<h1 cid="n175" mdtype="heading">3 按钮组件测试</h1>
<p cid="n176" mdtype="paragraph">参考如下文章：<a href="https://occ.t-head.cn/community/post/detail?spm=a2cl5.14300867.0.0.24a8180flHP5QI&id=4003826661371551744" spellcheck="false"><strong>【RISC-V 生态软件系列】Waft UI基础一：Button使用</strong></a></p>
<p cid="n177" mdtype="paragraph">获取源码：</p>
<pre>
<code>git clone git@gitee.com:tsing-qiu/waft-ui.git</code></pre>
<p cid="n179" mdtype="paragraph">主要是获取ui相关组件的代码，如下图的assembly中的各个文件夹，以及src文件夹下的各个例程，本篇先来测试button组件：</p>
<p cid="n180" mdtype="paragraph"></p>
<h2 cid="n181" mdtype="heading">3.1 将button源码添加到工程</h2>
<p cid="n182" mdtype="paragraph">将src文件夹中的test-button源码添加到工程中，如下图，然后修改app.json中的default字段为“pages/button/index”，这样就会默认显示按钮页面了：</p>
<p cid="n183" mdtype="paragraph"></p>
<p cid="n184" mdtype="paragraph">可以修改button源码中的相关参数，以实现自己想要的效果：</p>
<p cid="n185" mdtype="paragraph">比如我修改了index.axml：</p>
<pre>
<code><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></code></pre>
<h2 cid="n187" mdtype="heading">3.2 升级组件功能与编译</h2>
<p cid="n188" mdtype="paragraph">修改完后进行编译：</p>
<pre cid="n189" lang="sh" mdtype="fences" spellcheck="false">
.build</pre>
<p cid="n190" mdtype="paragraph">可能会提示如下的错误：waft-ui-common.ts找不到：</p>
<p cid="n191" mdtype="paragraph"></p>
<p cid="n192" mdtype="paragraph">这时需要升级waft-ui组件：</p>
<pre cid="n193" lang="sh" mdtype="fences" spellcheck="false">
npm i waft-ui --save
升级完组件之后，即可编译成功。</pre>
<h2 cid="n196" mdtype="heading">3.3 运行测试</h2>
<p cid="n197" mdtype="paragraph">现在浏览器中查看运行效果：</p>
<p cid="n198" mdtype="paragraph"></p>
<p cid="n199" mdtype="paragraph">再到板子中查看运行效果，比较奇怪的时，浏览器预览的和板子里实际运行的，效果不一样，如下图：</p>
<p cid="n200" mdtype="paragraph"></p>
<p cid="n201" mdtype="paragraph">再次修改相关参数，修改assembly里的button.acss和base.acss中的相关的数值，以及修改app.json里的宽高为480。</p>
<p cid="n202" mdtype="paragraph">排列整齐了一点，不过不同大小的按钮，还是不能正常显示为不太的大小，不知道哪里还没改到位：</p>
<p cid="n203" mdtype="paragraph"></p>
<h1 cid="n204" mdtype="heading">4 总结</h1>
<p cid="n205" mdtype="paragraph">本篇详细分析了Waft基础例程的工程模板中各文件的基础作用，并通过修改参数验证猜想，最后通过新加一个button页面来进一步测试Waft的开发使用。</p>
<p cid="n206" mdtype="paragraph"> </p>
<p cid="n207" mdtype="paragraph"> </p>
页:
[1]