【RISC-V 生态软件系列】Waft基础教学二：Waft应用快速开发环境支持

一、开发环境支持



二、waft开发流程




三、安装waft-cli 工具


npm i waft-cli -g

四、创建项目



waft init




五、启动调试服务

cd my-waft-project
npm run start
REPL命令行模式


打包

waft>.build --aot=true --aotTarget=riscv64


文件夹及目录说明：



六、推送




adb push build/app.aot /mnt/UDISK/wasm/

scp build/app.aot root@172.16.1.36:/mnt/UDISK/wasm

七、运行waft


waft_app /mnt/UDISK/wasm/app.aot


模拟器调试





Web调试（Beta）




八、布局和样式

1. 布局写法和数据绑定





let page: Login;
export class Login extends Page {
constructor(props: ComponentProps) {
super(props);
page = this; // assemblyScript不支持闭包，在闭包中需要先赋给全局变量
this.addEventListener('tapMe', function () {
page.setState(`{"title":"Hello Waft"}`);
});
}
onLoad(query: JSONObject): void{
console.log('onload')
}
}

2. 样式写法


.title-div{
width: 30rpx;
height: 10rpx;
background-color: red;
}

.title-text{
font-size: 20rpx;
color: #FFFFFF;
}

3. 布局基准：



{
"pages": [
"pages/index/index"
],
"widgets":[
"widgets/weather/weather"
]
"window": {
"defaultTitle": "Hello Waft"
},
"viewport": 1024
}

{
"usingComponents": {
"card-layout": "waft-ui/src/components/card-layout/card-layout"
},
"viewport": 300
}
九、页面逻辑写法



1. Function写法

import { JSON, JSONArray, JSONObject } from "waft-json";
import { getDataSource, log, FuncPage } from "waft";

let thisPage: FuncPage;
export function Index(page: FuncPage): void{
thisPage = page;

// 设置默认state
page.setState(getDataSource().toString());

page.onload = function (query: string) {
log('--> onload:' + query);
};

page.onshow = function (event: string) {
log('--> onshow:' + event);
};

page.onhide = function (event: string) {
log('--> onhide:' + event);
};

page.onunload = function (event: string) {
log('--> onunload:' + event);
};

page.addEventListener('tapTitle', function (event: string) {
log('--> tapTitle event:' + event);
thisPage.setState(`{"title":"Hello Waft"}`);
});
}

2. Class写法

import { JSON, JSONObject } from "waft-json";
import { console, getDataSource, Page, ComponentProps, BaseEvent } from "waft";

let thisPage: Page;
export class Index extends Page {
constructor(props: ComponentProps){
super(props);
thisPage = this;
// 设置默认的state
this.setState(JSON.stringify(getDataSource()));
this.addEventListener('tapTitle', function (event: BaseEvent) {
console.log('tapTitle event');
thisPage.setState(`{"title":"Hello Waft"}`);
});
}

onShow(): void{
// 页面显示
console.log('page onShow');
}

onLoad(query: JSONObject): void{
// 页面加载后
console.log('page onLoad:' + JSON.stringify(query));
}

onHide(): void{
// 页面隐藏
console.log('page onHide');
}

onUnLoad(): void{
// 页面销毁
console.log('page onUnLoad');
}

onMessage(data: JSONObject): void{
// 信息推送更新
console.log('page onMessage:' + JSON.stringify(data));
}

onError(error: Error): void{
// 错误
console.log('page onError');
}
}
十、Page开发示例

根据模板创建页面


在app.json中配置页面

{
"pages": [
"pages/demo/demo"
],
"window": {
"defaultTitle": "Hello Waft"
}
}

【 可选】在app.json配置页面渲染基准：


{
"pages": [
"pages/demo/demo"
],
"window": {
"defaultTitle": "Hello Waft"
}
"viewport": 1024
}

【可选】在mock.json中配置页面mock启动参数：

• path: 启动页面路径；（默认为首页）
  
  
  • query: 启动的query参数
    
    
  
  

• dataSource：启动的额外下发数据 （如服务端预先请求完数据，会放到dataSource下）
  
  

{
"path": "pages/demo/demo",
"query": {
"id": "123456"
}
"dataSource":{
"title": "hello"
}
}

在axml文件中开发界面：




在ts文件中开发逻辑：

• 可以在页面初始化时，通过全局的getLaunchData()方法，获取到应用启动的信息
• 取出其中的dataSource字段，设置到默认的state
  
  

• 在生命周期中，可以进行您的定制操作
  
  

import { JSON, JSONObject } from "waft-json";
import { console, getDataSource, WaftPage, ComponentProps } from "waft";

export class Index extends WaftPage {
constructor(props: ComponentProps){
super(props);
this.setState(JSON.stringify(getDataSource()));
}

onShow(): void{
console.log('page onShow');
}

onLoad(query: JSONObject): void{
console.log('page onLoad:' + JSON.stringify(query));
}

onHide(): void{
console.log('page onHide');
}

onUnLoad(): void{
console.log('page onUnLoad');
}

onMessage(data: JSONObject): void{
console.log('page onMessage:' + JSON.stringify(data));
}

onError(error: Error): void{
console.log('page onError');
}
}

十一、waft-router



在目录里新建多个页面，并在app.json中配置


在app.json中配置页面，和默认启动页



在页面中使用history API跳转

push


const query = new JSONObject();
query.set("id", 123);
// query可以省略 或用 null 或 new JSONObject()
history.pushState({url : 'pages/detail/detail', query: query });

replace


// query可以省略 或用 null 或 new JSONObject()
history.replaceState({url : 'pages/detail/detail', query: JSON.parseObject(`{"id":"123456"}`)});

goBack


history.goBack();
十二、waft-store



store数据获取

improt { store } from 'waft';

const globalData = store.getGlobalData();

store设置数据

import { store } from 'waft'

store.dispatch('state', new JSONObject())

store更新订阅



export class Login extends Page {
constructor(props: ComponentProps) {
super(props);
// 监听全局store变化
this.observer(['menuData'], (key:string, data: JSONObject)=>{
console.log('menuData change:' + data.toString());
}, {
immediate: true
});
}
}

store默认映射到当前页面的state



export class Login extends Page {
constructor(props: ComponentProps) {
super(props);
// 自动把store的key内容同步到page的state
this.connect(['menuData']);
// 监听全局store变化，并修改；
this.connect(['menuData'], (key:string, data: JSONObject, oldData: JSONObject | null)=>{
return data;
});
}
}
文章转载自：平头哥芯片开放社区 作者：景尚