小程序跨端框架初体验 - Chameleon VS Taro

3,250 阅读2分钟

背景:

最近做项目,接触了 Chameleon 这个多端框架,出于好奇,同时去学习了下 Taro,想要对比下两者在实际开发中会有哪些优势和缺点,为以后选择框架提供一些经验和思路。

既然是初次接触多端框架,我按照两者的官方文档,从零开始搭建了两个项目,分别是 chameleon-demo 和 taro-demo 。

下面是从头开始搭建项目的一些操作步骤:

一、chameleon 新建项目

介绍Chameleon ,又叫变色龙,是一个跨多端开发的统一解决方案,它可以像变色龙一样适应不同的环境。一次开发,多端运行,一端所见即多端所见。

安装

npm i -g chameleon-tool

安装成功后,使用 cml 命令创建项目和启动项目:

-   执行 cml init project
-   输入项目名称
-   等待自动执行 npm install 依赖
-   切换到项目根目录执行 cml dev
-   会自动打开预览界面 预览界面如下:

image.png

调试和预览:

小程序端请下载对应小程序开发工具,打开项目根目录下的 /dist/[wx|alipay|baidu|其他] 目录预览。(备注:我这里只关注百度小程序开发,Web 端和 Native 端可以参考官网)。

在百度小程序开发者工具导入 chameleon-demo 项目根目录下的 /dist/baidu 目录,在百度开发者工具中进行页面预览和调试即可。(前提你已经安装了百度小程序开发者工具

在开发过程中,我遇到的一些问题:

1、每次修改代码,需要重新执行编译,终端编译速度还行,当时百度小程序开发者工具的编译速度很慢,编译时间一般是 1s 左右,开发体验很不友好,因为会影响到开发效率。 2、导入百度小程序开发者工具的一定得是 dist/baidu ,不然无法预览。

二、Taro 新建项目

介绍: Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用。

安装: 我使用的 npx 安装方式:(前提是:npm 5.2+ ,node >=12.0.0),直接创建项目 taro-demo

$ npx @tarojs/cli init taro-demo

开发和调试: 以百度小程序编译为例子:(其他安装方式查看官方文档

npx taro build --type swan --watch\
npx taro build --type swan

预览: 下载并打开百度开发者工具,并确保已经设置了小程序项目配置文件 project.swan.json。然后选择项目根目录下 dist 目录(根目录 config 中的 outputRoot 设置的目录)进行预览。