Clams

简介

微信小程序模块化开发脚手架工具，目前支持的功能有：

解析 scss/less，转换为 wxss；
强化小程序的模板功能，支持自定义组件；
支持自定义 plugin，实现基于组件生命周期的扩展；
支持自定义 alias 等配置；

未来会提供的功能：

一键初始化小程序项目；
文件/图片压缩功能；
按需打包；
等等……

使用方式

安装 clams

从 npm 源安装。

npm install clams -g

创建 demo

在一个文件夹中，执行 clams init，可以在本文件夹中初始化一个 clams 项目。也可以在当前文件夹的自路径中创建一个新项目，如 clams init clams-demo，就会在当前路径下创建一个 clams-demo 文件夹，并在里面初始化项目。

编译项目

在 clams 项目中运行命令 clams build，项目中会生成 dist 文件夹；打开微信 web 开发者工具，『添加项目』，项目目录选择 dist 文件夹，然后导入项目即可。在开发时，需要勾选『项目』->『开启 ES6 转 ES5』。

开发项目

在 clams 项目中运行命令 clams build，在 src 文件夹中进行项目开发，保存文件时会自动编译到 dist 路径中。

与小程序开发最大的区别如下：

开发方式类似 React，所有的页面都以组件的方式开发，在页面和组件中也可以直接引用其他的组件；
setData 方法修改为 setState 方法，data 属性修改为 state 属性；
可以直接编写组件，并在 wxml 中直接引用，并传递 props，这里纯字符串的 props 认为是传递的属性方法，插值 props 认为是传递的属性值；

更多用法请参考我们的 demo 工程。

项目实例

class Home extends Component {
    state = {
        show: false,
        name: 'Malcolm'
    };

    getName(name) {
        this.setState({
            show: true,
            name
        });
    }

    openTodo() {
        // 使用了 navigator plugin，可以自由跳转
        this.navigateTo('TodoList');
    }
}

<view class="container">
    <import src="/components/UserInfo/UserInfo" />
    <import src="/components/Toast/Toast" />
    <text class="title">欢迎使用 Clams!</text>
    <text class="sub-title">本页面由两个组件构成，UserInfo 和 Toast，打开源码你就会发现，它们的使用、声明都非常简单明了。</text>
    <UserInfo defaultName="{{state.name}}" getCurrentName="getName"/>
    <Toast show="{{state.show}}" content="{{state.name}}" duration="{{300}}" />
    <text class="next-page" bindtap="openTodo">进入下一页</text>
</view>

icindy/clams

Clams

简介

使用方式