【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;
    });
  }
}
文章转载自：平头哥芯片开放社区 作者：景尚