[MCU] 【平头哥Sipeed LicheeRV 86 Panel测评】- 3 waft-ui组件的测试

Waft-UI组件学习

再完成waft开发环境搭建后，就到了waft开发的学习过程，首先学习waft-UI中组件的使用。

1 Waft-UI组件的安装

    以下组件测试基于，Waft-UI组件的最新版本是0.3，waft版本0.7。

    在创建了新的工程后，在工程目录下安装waft-ui，命令为

        npm i waft-ui –save

    更新waft为0.7版

    执行命令：

        ncu

        nuc –u

        npm install

    将会将当前工程中的组件更新到最新。

2、Button组件的学习

Waft-UI中提供了基本的Button组件，我们可以直接调用这个组件来使用。

2.1 组件的调用方法

在index.json中增加button组件的引用，方法为：

{

    "usingComponents": {

        "x-button": "waft-ui/assembly/button/button"

    }

}

2.2 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;">

<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>

实际显示效果

2.3 Button的事件响应

在index.ts中编写Button的事件响应函数

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());
}
}

事件的响应结果展示

可见，当按键被按下时，按键的响应函数被执行了，在终端打印了我们的输出信息。

3 Toast组件的学习

Waft-UI中提供了Toast清提示组件，我们可以直接调用这个组件显示提示信息。

3.1 组件的调用方法

在index.json中增加Toast组件的引用，方法为：

{

   "usingComponents": {

    "x-toast": "waft-ui/assembly/toast/toast"

  }

}

3.2 组件使用

组件的显示是通过程序调用完成的。

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);
  }); 
 }
}

实际显示效果

 

4 Image组件的学习

Waft-UI中提供了Image显示组件，我们可以直接调用这个组件显示图片。

4.1 组件的调用方法

在index.axml中增加image组件的调用

<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>

其中width和height根据屏幕尺寸适当调整，图片需要指明获取来源。

在index.json中增加image组件的引用，方法为：

{

   "usingComponents": {
     "x-image": "waft-ui/assembly/image/image"
   }
}

4.2实际显示效果

 

Waft-UI中的Button组件挺好玩，也很有用