【平头哥Sipeed LicheeRV 86 Panel测评】五、WAFT初体验

sonicfirr 发表于 2022-3-18 20:00

本帖最后由 sonicfirr 于 2022-3-18 23:32 编辑

       LicheeRV 86板的介绍中说明它是支持WAFT框架的，所以本人也是了解并体验了一下，过程和心得记录此篇。

1、准备条件

       搜索官方文档，说实在的，费了半天劲才找到，而且里面不少坑（以后再讨论），链接是：<a href="https://www.yuque.com/waft/docs" target="_blank">https://www.yuque.com/waft/docs</a> 。

       也是参考码农爱学习大神的博文，成功避坑，少走了不少弯路。安装并使用WAFT框架的前期准备有：

       1）准备Linux系统，WAFT目前只能在MAC和Linux系统中运行，之前搭建86板编译环境时安装了Ubuntu20.04的虚拟机，这里继续使用。

       2）TF卡扩容，因为烧写官方镜像后，TF卡还有很多空间没有被分配，默认系统容量才8MB，具体方法可以参考码农爱学习的博文“<a href="https://bbs.eeworld.com.cn/thread-1193436-1-1.html" target="_blank">7-Waft图形界面开发测试（下）</a>”。

       3）安装NodeJS（为了获得npm命令），这里也是参考了码农爱学习的博文“<a href="https://bbs.eeworld.com.cn/thread-1193434-1-1.html" target="_blank">6-Waft图形界面开发测试（上）</a>”，看其提到安装后的npm还需要升级。所以自作聪明，从NodeJS官网下载了最新版——下载后是8.5.0，结构在安装waft-cli（WAFT框架的脚手架工具）时还是提示升级到8.5.4，白折腾半天。

       4）安装waft后，在控制台中执行：waft init--》选择3）图文模板--》进入目录cd my-waft-project（默认项目名称）--》运行npm run start。因为WAFT属于前端开发，所以本人还在Ubuntu上装了VScode，用作IDE。搜索了一个WAFT插件，不过发现是用于调试的而且要连接天猫精灵设备（猜想是智能音箱之类的），暂时用不到。

 



 

2、运行项目

       在控制台项目路径下，执行“npm run start”，就可以启动项目。而且项目启动后，控制台会自动进入waft-cli REPL（即个人习惯称之为“交互”）。相当于运行了npm脚本，这样会开启一个HTTP Server，并且可以通过“静态模式”和“运行模式”进行浏览器访问。这里有个小坑，文档中提到运行模式目前还不稳定，在下用FireFox和Chrome都没有效果，而“静态模式”中TS脚本无效，刚开始没有发现还调试了半天。

       项目启动后，就可以通过Web来访问，因此只要是同一网段的都可以，我分别用手机浏览器，本机Win及虚拟机Ubuntu都做了测试，可以看到Demo的界面——“方糖”图样。

 



 



 



 

3、案例修改并测试

       分析项目代码，并稍作修改，然后打包部署到86板上运行，测试成功。修改的地方是项目中的mock.json，这里定义了一个JSON对象，存储了一些配置数据。分别是：1）imageUrl，UI上左侧显示的方糖Logo，这是通过URL在线加载的图片。2）标题title，UI中大号字“方糖”字样。3）内容detail，UI中介绍文字。因为，暂时还没有具体了解整个代码编写方式，所以首先对这三个参数进行改动，具体操作和改动后界面如下图。

 



  



 



 



   

       然后，就是执行“.build”进行项目打包，也就是在执行启动脚本后进入"waft>"交互后，输入“.build”命令，进行打包创建可执行二进制文件（.wasm格式）。而且在waft交互，还可以push推送，或者使用ADB推送到真机端。不过，本人一直犯懒还没有配置ADB工具，所以使用FileZilla导出到本机，再用MobaXterm SSH传送到86板。

 



 



 



 

       在真机控制台，执行“waft_app app.wasm”，就可以启动案例。可以看到，86板真机上的运行效果 ，因为屏幕长宽比例原因，所以小猫咪图片被拉成瘦长样式了。至此，WAFT初体验成功。

       另外，在系统root目录中已经预制了两个waft案例“render_example.wasm”和“render_example_d1_allwin.wasm”，本人也运行了一下，效果如下图所示。render_example.wasm案例包含组件展示和API展示，可以滑屏翻动。render_example_d1_allwin.wasm案例则是一个智能家居中控台的Demo。

Jacktang 发表于 2022-3-21 07:24

如果使用使用ADB推送到真机端有什么优势

sonicfirr 发表于 2022-3-21 17:03

Jacktang 发表于 2022-3-21 07:24
如果使用使用ADB推送到真机端有什么优势

就是方便啊，通过adb命令直接串口发送到板子。

我这种就是拷到windows，再转到板子，多倒一次一手。

页: [1]

电子工程世界-论坛's Archiver

【平头哥Sipeed LicheeRV 86 Panel测评】五、WAFT初体验