【平头哥Sipeed LicheeRV 86 Panel测评】6-Waft图形界面开发测试（上）

DDZZ669

【平头哥Sipeed LicheeRV 86 Panel测评】6-Waft图形界面开发测试（上） [复制链接]

 

Waft（WebAssembly Framework for Things) 是一个面向 AIoT 的高性能应用研发框架，由阿里工程师研发，基于WebAssembly和自研的渲染引擎技术打造，适用于智能终端的软件应用研发场景，目前已在天猫精灵上得到应用。

下面介绍如何在Ubuntu中使用Waft开发环境，也是自己的实际操作记录。

1 安装npm

在ubuntu中安装npm，使用如下指令：

sudo apt-get install npm

提示需要node-gyp，再使用如下指令安装：

sudo apt-get install nodejs-dev node-gyp libssl1.0-dev

安装完之后，再重新安装npm（顺带也把node.js装一下）：

sudo apt-get install node.js npm

安装完npm之后，使用输入如下指令：

sudo npm i waft-cli -g

又提示一堆err!

2 升级npm

本来是想用如下指令再装一个cnpm试试：

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

这个装的较慢，大约十几到几十分钟。

这期间网上又搜索发现，上面报错的问题是因为是npm的版本太低了：

参考这里：https://www.cyberhour.com/community/threads/how-to-fix-npm-err-typeerror-error-missing-required-argument-1.262/

The error npm ERR! typeerror Error: Missing required arguments #1 is an error that basically is telling us that the current nodejs is outdated.

等cnpm安装完，再使用如下指令来升级npm的版本：

sudo npm install -g n
sudo n latest
sudo npm install -g npm
hash -d npm
npm i

最终我的npm的版本为8.4.0：

注意上面输入npm i时提示错误，就先执行了一下npm init，如下图，它会产生一个package.json文件：

3 Waft例程测试

再来使用这个指令，注意要加sudo:

sudo npm i waft-cli -g

上面还是报错，好像是网络问题，再试一下又可以了：

3.1 初始化waft例程

然后进行waft的初始化：

waft init

这里有几个例程，通过键盘的上下键可以选择，这里我选择第3个：

确定之后，会下载该例程，并多出一个my-waft-project的文件夹：

3.2 启动调试

进入到my-waft-project目录下，运行调试：

cd my-waft-project
npm run start

3.3 网页端查看效果

启动调试之后之后，可以在浏览器中查看显示的界面，如果是在ubuntu的浏览器中，使用本机地址127.0.0.1，我使用的是同一局域网下的Windows系统的浏览器，显示效果如下：

浏览器显示的时候，ubuntu中也会同步输出一下信息：

3.4 REPL命令行模式

启动调试后会自动开启REPL模式，可以通过.help查询支持哪些命令：

waft> .help
.aot          aot编译 --wasm=build/app.wasm
.build        编译工程 --default=默认页面(可选) --page=指定单页(可选) --card=指定的卡片(可选) --aot=true(可选, 是否输出 .aot 文件) --push=true(可选, 构建完自动推送)
.clear        清空屏幕输出。
.disconnect   断开终端链接
.exit         退出 REPL。
.help         查看更多 WAFT REPL 命令。
.nlu          adb模拟语音调试 如".nlu 早上好"
.push         推送真机设备或模拟器 --wasm=build/app.wasm --mock=src/mock.json (可选)
.simulator    启动模拟器 --wasm=build/app.wasm
.ui
.update       触发调试更新 onMessage 事件，--mock=src/mock.json 或者 --mock={"dataSource":{"desc":"hello\\sbig\\sold"}}
.upgrade      升级官方插件工具例如: .upgrade simulator 或着 .upgrade aot 

3.5 编译waft例

使用如下指令来编译打包：

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

编译结果在build目录中：

3.6 板子中运行waft例程

注：此篇文章，SD中是镜像使用的是百度云盘开发资料中的LicheeRV_Tina_86panel_480p_waft.7z压缩包里镜像。

使用adb将编译的app.aot传送到板子中运行：

运行指令为：

waft_app app.aot 

观察板子，屏幕上什么也没显示：

用手触摸屏幕，可以看到有触摸点的坐标打印：

4 更新Waft二进制库

本来以为是waft自带的库没有更新，就参考这里：

https://occ.t-head.cn/community/post/detail?spm=a2cl5.25989976.0.0.3fa9180fa8muOV&id=4003830518746517504

开始给板子更新waft的库。

4.1 下载Waft库

下载地址：

https://occ.t-head.cn/vendor/detail/download?spm=a2cl5.25411629.0.0.3af0180fGZP0st&id=3978884137347461120&vendorId=3895463451199475712&module=3

选择Waft_binary_v0_0_005这个：

解压之后，有5个文件夹，需要把它们分别拷贝到板子中的对应目录中。

4.2 拷贝到板子中

一开始在Windows上使用adb来拷贝，有问题：

将Waft库先拷贝到ubuntu中，再通过ubuntu的adb连接板子，就能正常拷贝了：

所以的拷贝指令：

adb push ./bin/waft_app /usr/bin
adb push ./lib/* /usr/lib/
adb push ./resources /
adb push ./waftapps /

bin中存放waft容器二进制运行文件

lib中存放waft_app运行时依赖的共享库

resources中存放waft依赖的资源文件，如字库文件

waftapps存放waft字节码文件

4.3 空间不够的问题

在拷贝resources时，提示空间不够了：

查看一下存储空间的使用情况：

果然是不够用了，虽然SD卡的容量够，但没有分配给Linux系统。

下篇介绍如何给Linux扩容，以及后续的Waft例程测试效果展示。

 

Jacktang

楼主这里主要介绍的是Ubuntu环境中搭建Waft开发环境，讲的很细了

damiaa

不错。谢谢分享。