【平头哥Sipeed LicheeRV 86 Panel测评】- 3 waft-ui组件的测试
<p style="text-align: center;"><strong><span style="font-size:20px;">Waft-UI组件学习</span></strong></p><p>再完成waft开发环境搭建后，就到了waft开发的学习过程，首先学习waft-UI中组件的使用。</p>
<p><span style="font-size:16px;">1 Waft-UI组件的安装</span></p>
<p> 以下组件测试基于，Waft-UI组件的最新版本是0.3，waft版本0.7。</p>
<p> 在创建了新的工程后，在工程目录下安装waft-ui，命令为</p>
<p> <strong>npm i waft-ui –save</strong></p>
<p> 更新waft为0.7版</p>
<p> 执行命令：</p>
<p><strong> ncu</strong></p>
<p><strong> nuc –u</strong></p>
<p><strong> npm install</strong></p>
<p> 将会将当前工程中的组件更新到最新。</p>
<p>2、Button组件的学习</p>
<p>Waft-UI中提供了基本的Button组件，我们可以直接调用这个组件来使用。</p>
<p>2.1 组件的调用方法</p>
<p>在index.json中增加button组件的引用，方法为：</p>
<p>{</p>
<p> "usingComponents": {</p>
<p> "x-button": "waft-ui/assembly/button/button"</p>
<p> }</p>
<p>}</p>
<p>2.2 Button的显示</p>
<p>在index.axml文件中，编写显示脚本。</p>
<pre>
<code class="language-html"><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;">
<x-button type="primary" text="按钮"
onTap="priclick" >
</x-button>
<view class="dot"></view>
<x-button type="secondary" text="按钮"
onTap="secclick" >
</x-button>
<view class="dot"></view>
<view class="title">带图标</view>
<view class="flex">
<x-button
text="按钮"
iconURL="http://172.17.64.61:8001/ico/bulb-24x24-23415.png"
onTap="btnclick" >
<view class="dot"></view>
</view>
</view>
<view class="title">自定义颜色</view>
<view class="flex">
<x-button text="按钮" bgColor="#ff976a" borderColor="#ff976a" textColor="#ffffff"></x-button><view class="dot"></view>
</view>
</view></code></pre>
<p>实际显示效果</p>
<p style="margin-bottom: 0pt;"></p>
<p style="margin-bottom: 0pt;">2.3 Button的事件响应</p>
<p>在index.ts中编写Button的事件响应函数</p>
<pre>
<code class="language-javascript">import { FuncPage, MessageEvent, Target, history, Event } from 'waft';
import { JSON, JSONObject } from "waft-json";
export function Main(page: FuncPage): void {
// page.addEventListener("btnclick", (e: MessageEvent): void => {
// console.log("this is button test!");
// });
page.addEventListener("btnclick", (e, target): void => {
console.log("this is button test!");
});
page.addEventListener("priclick", (e, target): void => {
console.log("this is primary button test!");
});
page.addEventListener("secclick", (e, target): void => {
console.log("this is secondary button test!");
});
page.onload = function (data: JSONObject, target?: Target | null) {
console.log('--> onLoad tigger with launchData = ' + data.toString());
};
page.onmessage = function (event: MessageEvent) {
console.log('--> onMessage args = ' + event.toString());
}
}</code></pre>
<p>事件的响应结果展示</p>
<p></p>
<p>可见，当按键被按下时，按键的响应函数被执行了，在终端打印了我们的输出信息。</p>
<p><span style="font-size:16px;">3 Toast组件的学习</span></p>
<p>Waft-UI中提供了Toast清提示组件，我们可以直接调用这个组件显示提示信息。</p>
<p>3.1 组件的调用方法</p>
<p>在index.json中增加Toast组件的引用，方法为：</p>
<pre>
<code class="language-cpp">{
"usingComponents": {
"x-toast": "waft-ui/assembly/toast/toast"
}
}</code></pre>
<p>3.2 组件使用</p>
<p style="margin-bottom: 0pt;"><span style="font-family: 'Consolas'; font-size: 10.5pt;">组件的显示是通过</span><span style="font-family: 'Consolas'; font-size: 10.5pt;">程序调用完成的。</span></p>
<pre>
<code class="language-javascript">import { Page, Props } from "waft";
import { JSON, JSONObject } from "waft-json";
import { Toast, ToastOptions } from "waft-ui";
export class ComponentTest extends Page {
constructor(props: Props) {
super(props);
this.addEventListener("clickToast1Btn", (e, target): void => {
// 未测试多个toast同时调用的问题
let toastOptions = new ToastOptions();
toastOptions.message = "测试Toast1";
toastOptions.type = "fail";
toastOptions.iconURL = "http://172.17.64.61:8001/ico/O1CN01cSL5BS1d7bmgm1pxt_!!6000000003689-2-
tps-200-200.png"
toastOptions.position = "middle";
Toast.show(toastOptions);
});
this.addEventListener("clickToast2Btn", (e, target): void => {
let toastOptions = new ToastOptions();
toastOptions.message = "测试Toast2";
toastOptions.type = "success";
toastOptions.iconURL = "http://172.17.64.61:8001/ico/O1CN01evbrT81s2JRO3tkra_!!6000000005708-2-tps-200-200.png"
toastOptions.duration = 5000;
toastOptions.position = "middle";
Toast.show(toastOptions);
});
}
}</code></pre>
<p>实际显示效果</p>
<p style="margin-bottom: 0pt;"></p>
<p> </p>
<p><span style="font-size:16px;">4 Image组件的学习</span></p>
<p>Waft-UI中提供了Image显示组件，我们可以直接调用这个组件显示图片。</p>
<p>4.1 组件的调用方法</p>
<p>在index.axml中增加image组件的调用</p>
<pre>
<code class="language-html"><view class="wrapper">
<x-nav-bar showArrow="{{true}}" title="测试图片"></x-nav-bar>
<view class="content">
<x-image full="{{ true }}" width="320rpx" height="240rpx" src="http://172.17.64.61:8001/ico/O1CN01dudMzQ1eY0BV29999_!!6000000003882-2-tps-1920-1080.png"></x-image>
</view>
</view></code></pre>
<p>其中width和height根据屏幕尺寸适当调整，图片需要指明获取来源。</p>
<p>在index.json中增加image组件的引用，方法为：</p>
<pre>
<code class="language-cpp">{
"usingComponents": {
"x-image": "waft-ui/assembly/image/image"
}
}</code></pre>
<p>4.2实际显示效果</p>
<p style="margin-bottom: 0pt;"></p>
<p> </p>
<p>Waft-UI中的Button组件挺好玩，也很有用</p>
页:
[1]