关于Rax开发微信小程序初体验

1,138 阅读1分钟

Rax是一个超轻量,高性能,易上手的前端解决方案。一次开发多端运行,解放重复工作,专注产品逻辑,提升开发效率。

Rax 小程序以运行时方案为基础,支持局部场景使用编译时方案开发组件,充分结合了二者的优势特点,让用户在保证开发效率的大前提下能够针对局部场景进行更高渲染性能的优化。

运行时方案:通过底层模拟 DOM 和 BOM API,使得开发者能够获得完整的 Rax 开发体验,无语法约束,同时能使用大部分 Web 生态 编译时方案:通过 AST 转译 + 运行时垫片模拟 Rax core 的方式,将源代码(Rax)1 比 1 输出为原生小程序代码,性能相对较好。

一. 环境安装

  1. 项目创建:
  2. npm init rax myrax
    
  3. 进入目录并安装依赖:
  4. cd myrax
    
  5. yarn
    

二. 运行: npm run start

三. 查看运行结果与微信小程序开发工具调试:

程序运行后的界面是:

无标题.png

其中myrax/build/wechat-miniprogram 目录下的文件,就是适合微信小程序运行的源码包。

我们打开微信小程序开发工具,把该目录导入项目,就可以看到效果了。

四. 遇到的问题:

1、在微信开发工具中提示错误:Uncaught TypeError: Cannot delete property 'WeixinJSBridge' of #....

解决办法:打开本地设置->选择调试基础库

image.png

  1. 在微信开发工具中提示错误:./root.wxml unexpected attribute name, near picture...

解决办法:打开myrax/build/wechat-miniprogram/root.wxml文件,搜索:picture-in-picture-show-progress,在大约212行的video组件,把该参数删除。