【版本发布】体验快速开发的快乐!

面板小程序开发相关产品技术讨论,包括面板小程序、智能小程序、React Native、Ray跨端框架、Panel SDK、微信小程序、小程序开发工具(IDE)及其他开发技术相关等话题


noyobo
Posts: 13

体验快速开发的快乐!

本此更新包含以下内容:

  1. 🤖 智能小程序开发工具 0.5.6 版本,模拟器优化,新增多语言、机型模拟等功能。
  2. 🧩 社区兼容,支持微信小程序生态,可引入微信小程序组件库。
  3. 🚀 Ray 命令行工具 alpha 版本,重构引入 esbuild 构建,加倍提速。

1. 开发工具 0.5.6 版本模拟器功能集

首批开放的功能集如下:

  • 深色模式
  • 多语言
  • 机型
  • 缩放

多语言

i18n.gif

其中需要注意的是,智能小程序的多语言需要在[设置=>项目配置]里面拉取多语言文件。而面板小程序的多语言则是在面板工具里查看,平台上操作

机型模拟

model.gif

2. 智能小程序社区生态兼容 - 支持微信小程序组件库

功能介绍

小程序的模式已经日渐成熟,各大厂商也都推出了自己的小程序框架。微信小程序开发群体较广阔,在此基础上创建了大量的、优秀的小程序组件库。例如:

  • iView Weapp 一套高质量的微信小程序 UI 组件库。
  • vant weapp Vant 是一个轻量、可靠的移动端组件库。

通过 UI 组件的复用,能大大提高的开发效率。如果在智能小程序上也能使用,也可借鉴参考实现符合自身需求的组件,这是多么令人兴奋的。

今天很告诉的告诉大家,智能小程序已经支持!

抢先体验

使用智能生活 App 扫码体验 vant weapp 在涂鸦小程序上的运行效果:

vant-weapp.png
组件名适配
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 的方式来开发面板小程序。

本此更新带来以下特性:

  1. Ray 工程中支持引入微信小程序组件。
  2. 接入 esbuild 提升编译构建速度。

esbuild(esbuild 是一个用 Go 编写的 JavaScript 打包器,它的特点是快速、简单。) 替换 webpack 重构了 Ray 的构建流程,整体大幅提升了构建速度。

构建速度对比

1.3.x1.4.x
start80s4s
start watch rebuild9s1.8s
build90s4.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>
  );
};

更多细节参考社区生态兼容

小结

提高开发者的开发体验一直是我们的目标之一,通过复用已有社区成熟的生态,减少在组件上的开发投入时间,更专注于业务本身。同时我们还优化了编译速度,从而提升整体的开发调试体验。

目前版本还在测试阶段如遇到问题,欢迎在社区中反馈。

User avatar
Muzzzhi
Posts: 80

Re: 【版本发布】体验快速开发的快乐!

用心了 :!: :idea:

:geek: :ugeek: :mrgreen: :roll: :lol: :idea: :arrow: LGTM

User avatar
TheThingX
Posts: 65
Location: TheThingX
Contact:

Re: 【版本发布】体验快速开发的快乐!

点赞来了👍

[][TheThingX.com]
blackbear
Posts: 2

Re: 【版本发布】体验快速开发的快乐!

111

blackbear
Posts: 2

Re: 【版本发布】体验快速开发的快乐!

<h1>1</h1>

User avatar
Secret Keeper
Posts: 15

Re: 【版本发布】体验快速开发的快乐!

想用小程序做个和智能无关的内容,类似游戏这种内容的,可以做么?



User avatar
智能小程序管理员
Posts: 45

Re: 【版本发布】体验快速开发的快乐!

Secret Keeper 2023年 Sep 27日 19:52

想用小程序做个和智能无关的内容,类似游戏这种内容的,可以做么?

简单的可以,你可以使用canvas实现

User avatar
Secret Keeper
Posts: 15

Re: 【版本发布】体验快速开发的快乐!

涂鸦张凯 2023年 Sep 28日 10:11
Secret Keeper 2023年 Sep 27日 19:52

想用小程序做个和智能无关的内容,类似游戏这种内容的,可以做么?

简单的可以,你可以使用canvas实现

做个类似大富翁的游戏,成功创建我的设备的使用场景,就送 3 个骰子,成功执行一次,送 5 个,语音控制一次送 2 个,app 控制一次送 1 个,然后全世界景点打卡,最后送优惠券或者小礼物。这个创意是不是也不错。



User avatar
智能小程序管理员
Posts: 45

Re: 【版本发布】体验快速开发的快乐!

Secret Keeper 2023年 Sep 28日 10:57
涂鸦张凯 2023年 Sep 28日 10:11
Secret Keeper 2023年 Sep 27日 19:52

想用小程序做个和智能无关的内容,类似游戏这种内容的,可以做么?

简单的可以,你可以使用canvas实现

做个类似大富翁的游戏,成功创建我的设备的使用场景,就送 3 个骰子,成功执行一次,送 5 个,语音控制一次送 2 个,app 控制一次送 1 个,然后全世界景点打卡,最后送优惠券或者小礼物。这个创意是不是也不错。

听起来不错,哈哈 ,类似养成类游戏都可以,森林庄园之类

User avatar
达咩怪
Posts: 2

Re: 【版本发布】体验快速开发的快乐!

Secret Keeper 2023年 Sep 28日 10:57
涂鸦张凯 2023年 Sep 28日 10:11
Secret Keeper 2023年 Sep 27日 19:52

想用小程序做个和智能无关的内容,类似游戏这种内容的,可以做么?

简单的可以,你可以使用canvas实现

做个类似大富翁的游戏,成功创建我的设备的使用场景,就送 3 个骰子,成功执行一次,送 5 个,语音控制一次送 2 个,app 控制一次送 1 个,然后全世界景点打卡,最后送优惠券或者小礼物。这个创意是不是也不错。

兄弟你赶紧的,赚到钱了带哥一把

Image
Post Reply