【版本发布】体验快速开发的快乐！
体验快速开发的快乐！
本此更新包含以下内容：
智能小程序开发工具 0.5.6 版本，模拟器优化，新增多语言、机型模拟等功能。
社区兼容，支持微信小程序生态，可引入微信小程序组件库。
Ray 命令行工具 alpha 版本，重构引入 esbuild 构建，加倍提速。
智能小程序开发工具 0.5.6 版本，模拟器优化，新增多语言、机型模拟等功能。
社区兼容，支持微信小程序生态，可引入微信小程序组件库。
Ray 命令行工具 alpha 版本，重构引入 esbuild 构建，加倍提速。1. 开发工具 0.5.6 版本模拟器功能集
首批开放的功能集如下：
- 深色模式
- 多语言
- 机型
- 缩放
多语言
其中需要注意的是，智能小程序的多语言需要在[设置=>项目配置]里面拉取多语言文件。而面板小程序的多语言则是在面板工具里查看，平台上操作
机型模拟
2. 智能小程序社区生态兼容 - 支持微信小程序组件库
功能介绍
小程序的模式已经日渐成熟，各大厂商也都推出了自己的小程序框架。微信小程序开发群体较广阔，在此基础上创建了大量的、优秀的小程序组件库。例如：
- iView Weapp 一套高质量的微信小程序 UI 组件库。
- vant weapp Vant 是一个轻量、可靠的移动端组件库。
通过 UI 组件的复用，能大大提高的开发效率。如果在智能小程序上也能使用，也可借鉴参考实现符合自身需求的组件，这是多么令人兴奋的。
今天很告诉的告诉大家，智能小程序已经支持！
抢先体验
使用智能生活 App 扫码体验 vant weapp 在涂鸦小程序上的运行效果：
| 组件名 | 适配 |
|---|---|
| Button |  |
| Cell | |
| ConfigProvider | |
| Icon | |
| Image | |
| Layout | |
| Popup | |
| Transition | |
| Calendar | |
| Cascader | |
| Checkbox | |
| DatetimePicker |  |
| Field | |
| Picker | |
| Radio | |
| Rate | |
| Search | |
| Slider | |
| Stepper | |
| Switch | |
| Uploader | |
| ActionSheet | |
| Dialog | |
| DropdownMenu | |
| Loading | |
| Notify | |
| Overlay | |
| ShareSheet | |
| SwipeCell | |
| Toast | |
| Circle | |
| Collapse | |
| CountDown | |
| Divider | |
| Empty | |
| NoticeBar | |
| Panel | |
| Progress | |
| Skeleton | |
| Steps | |
| Sticky | |
| Tag | |
| TreeSelect | |
| Grid | |
| IndexBar | |
| Sidebar | |
| NavBar | |
| Tab | |
| Tabbar | |
| Area | |
| Card | |
| SubmitBar | |
| GoodsAction | |
如何使用
小程序的文件组织由模板文件、样式文件、逻辑脚本、配置文件等组成，各厂商的小程序框架都有自己的文件后缀名，无法直接复用。但本质上，小程序的文件组织方式是一致的，只是各个小程序框架对文件的后缀名有所不同，例如：
- 微信小程序：
.wxml、.wxss、.js、.json - 智能小程序：
.tyml、.tyss、.js、.json
只需在构建时解析同类型的文件，进行编译即可。
1. 增加构建配置
仅需通过 project.tuya.json 配置文件中增加 compilerOptions.compatible = ['wx'] 的构建声明即可。
Code: Select all
{
"projectname": "vant_miniprogram",
- "description": "vant-weapp 智能生活小程序 demo"
+ "description": "vant-weapp 智能生活小程序 demo",
+ "compilerOptions": {
+ "compatible": ["wx"]
+ }
}例如在 vant-weapp/example 仓库下，增加了 vant-weapp/example/project.tuya.json 配置文件之后，使用智能小程序开发者工具打开即可。
2. 组件引入方式的调整
微信小程序对 npm package 的导入方式，需要进行一次构建后方可使用，详见开发辅助/npm 支持。社区中发布微信小程序组件库均基于此方式，在 package.json 中使用 miniprogram 字段指定目标文件所在的目录。
然而智能小程序原生支持 npm package 的导入，因此如在项目中使用面向微信小程序的 npm package 组件库时，根据其对应的 miniprogram 声明，在 usingComponents 配置中直接导入对应的目标文件即可，像这样：
Code: Select all
{
"usingComponents": {
"van-button": "@vant/weapp/lib/button/index"
}
}更多内容详见：官方指南-社区兼容
小结
小程序的文件组织方式基本相同，只是同类型的文件后缀名不同，编译的方式基本相同，只需要调整编译的配置即可。
程序的执行主要依赖基础库的能力，目前尚存在部分组件未适配的问题，此部分的能力也在不断完善中。让开发者可完全复用已有生态能力，提高开发效率。
3. Ray 1.4.0 公测版发布，加倍提速！
介绍
Ray 是智能小程序团队提供的一套面板小程序开发框架，提供开发者使用 React 的方式来开发面板小程序。
本此更新带来以下特性：
- Ray 工程中支持引入微信小程序组件。
- 接入 esbuild 提升编译构建速度。
esbuild(esbuild 是一个用 Go 编写的 JavaScript 打包器，它的特点是快速、简单。) 替换 webpack 重构了 Ray 的构建流程，整体大幅提升了构建速度。
构建速度对比
| 1.3.x | 1.4.x | |
|---|---|---|
| start | 80s | 4s |
| start watch rebuild | 9s | 1.8s |
| build | 90s | 4.5s |
如何升级使用
1. 升级 @ray-js/cli
将 package.json 中的 @ray-js/cli @ray-js/ray 等依赖升级到 >= 1.4.0-alpha.3 即可。无需做其他修改。
之后执行 ray start --target=tuya 即可使用新的构建流程，预览需使用基础库 >= 2.12.6。
2. CSS Modules 导入的变化
在上一版本中，对 CSS Modules 的使用，在工程里做了一个适配，经分析发现这个适配会导致构建速度变慢，因此在新版本中，对 CSS Modules 的使用做了一些调整。
Code: Select all
import styles from './index.less';
// 调整为：
import styles from './index.less?modules';之前使用 import styles from 'index.less'; 具名导入的方式，会进行语法检测开启 CSS Modules 编译，但是这个过程会导致构建速度变慢，因此在新版本中，需要在导入的路径后面加上 ?modules 来指定使用 CSS Modules。
以下内容无需修改：
Code: Select all
import styles from './index.module.less'; // css modules 文件
import './index.less'; // 全局样式3. 启动项目
经过上面的修改，即可启动项目，启动命令不变：
Code: Select all
ray start --target=tuya提示：如果升级后发现构建异常，可增加参数 --bundler=webpack 进行降级使用旧的构建流程。
一. 使用微信小程序组件
在 Ray 1.4.0 中，我们支持在 Ray 工程中引入微信小程序组件，导入方式与引入 React 组件一致，例如：
Code: Select all
import React from 'react';
import VantButton from '@vant/weapp/lib/button/index';
import { View } from '@ray-js/ray';
const Home = () => {
return (
<View className="greeting">
<VantButton type="primary">Hello Ray</VantButton>
</View>
);
};更多细节参考社区生态兼容
小结
提高开发者的开发体验一直是我们的目标之一，通过复用已有社区成熟的生态，减少在组件上的开发投入时间，更专注于业务本身。同时我们还优化了编译速度，从而提升整体的开发调试体验。
目前版本还在测试阶段如遇到问题，欢迎在社区中反馈。
