# wxdad

**Repository Path**: lisniuse/wxdad

## Basic Information

- **Project Name**: wxdad
- **Description**: 微信小程序脚手架工具，帮助你快速部署微信小程序源文件。
- **Primary Language**: NodeJS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 89
- **Forks**: 26
- **Created**: 2016-11-14
- **Last Updated**: 2024-03-14

## Categories & Tags

**Categories**: weixin-lapp

**Tags**: None

## README

```
                   _           _
__      ____  ____| | __ _  __| |
\ \ /\ / /\ \/ / _` |/ _` |/ _` |
 \ V  V /  >  < (_| | (_| | (_| |
  \_/\_/  /_/\_\__,_|\__,_|\__,_|
                                 
```
## 一、介绍
一款微信小程序脚手架工具，帮助你快速开发微信小程序应用。

目前有两个功能：

1. 快速构建初始项目架构。
1. 把wxdad语法快速编译成wxml和wxjs文件，帮助开发者急速开发。

## 二、使用前你必须
---
1. 安装nodejs最新版本。
1. 将node部署到shell/cmd全局变量环境。

## 三、安装方法 
---
- 终端下输入：``git clone https://git.oschina.net/lisniuse/wxdad.git``


## 四、简易教程（以 Windows 环境为例，其他系统同理）
---
1)：项目初始化：
##### 第一步：在D盘新建一个文件夹名为：wxdemo。
##### 第二步：在wxdemo里新建一个app.json，并且写好微信官方文档中所要求的一些配置项 (如果不清楚可以去看：

http://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html?t=20161107) 

配置内容大概如下：
```js
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}
```
其中 pages 数组为必填项，脚手架工具会根据你填写的 pages 路径来自动为你创建页面文件夹以及文件。
##### 第三步：打开命令行输入：``node wxdad build "d:\wxdemo\app.json"``
![输入图片说明](http://git.oschina.net/uploads/images/2016/1130/173532_6be527fb_566630.png "在这里输入图片标题")
##### 第四步：最后打开微信开发工具，加载刚刚创建好的wxdemo
![输入图片说明](http://git.oschina.net/uploads/images/2016/1115/000508_3fe3d340_566630.png "在这里输入图片标题")
![输入图片说明](http://git.oschina.net/uploads/images/2016/1115/000604_c124a7ac_566630.png "在这里输入图片标题")

 **2)：为项目动态添加新页面：** 

原来的配置文件如下： 
```js
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}
```
新的配置文件如下： 
```js
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/home/hoem"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}
```
可以看到在pages数组中新增了一个``"pages/home/home"``

保存之后，在终端下输入：``node wxdad build "d:\wxdemo\app.json"``
即可完成新页面的创建和添加，并且不会影响到原来的页面。

 **3)列表循环语法糖：** 
打开项目中的index.wxml文件，键入代码：
```
<view wx:for="{{[https://api.douban.com/v2/movie/top250].subjects}}">
  {{index}}: {{item.title}}
<view>
```
![输入图片说明](http://git.oschina.net/uploads/images/2016/1130/174220_87703e1f_566630.png "在这里输入图片标题")

保存后，终端输入对文件进行编译：
``node wxdad compile "d:\wxdemo\app.json"``
3![输入图片说明](http://git.oschina.net/uploads/images/2016/1130/174300_b07ffec7_566630.png "在这里输入图片标题")

打开开发者工具你将看到：

![输入图片说明](http://git.oschina.net/uploads/images/2016/1130/174420_13deef74_566630.png "在这里输入图片标题")

### 更新日志：
> 0.1.2 :
> 1.修复若干BUG
> 2.新增列表渲染语法糖。

> 0.0.11 :
> 1.将源代码重新构建成nodejs模块化。
> 2.全面使用ES6语法编写。