Giter VIP home page Giter VIP logo

wx-miniprogram-boilerplate's Introduction

⚠️说明

⚠️⚠️⚠️已停止更新,仅供学习参考 推荐使用其他成熟的小程序开发框架


wx-miniprogram-boilerplate

基于Gulp构建的微信小程序开发工作流

原生小程序的开发模式,过于简陋,就样式来说,写惯了less,stylus和sass的同学一定无法忍受wxss的这种写法,基于此,决定使用gulp自动化工具来构建一套微信小程序开发的基础模板,在完全保留微信小程序功能和特性的基础上,又可以的使用less来写样式,同时加入图片压缩,命令行快速创建模板等特性,提升开发效率!

特性

  • 基于gulp+less构建的微信小程序工程项目
  • 项目图片自动压缩
  • ESLint代码检查
  • 使用命令行快速创建pagetemplatecomponent
  • 支持生产环境打包

Getting Started

0. 开始之前,请确保已经安装node和npm,全局安装gulp-cli
$ npm install --global gulp-cli
1. 下载代码
$ git clone https://github.com/YangQiGitHub/wx-miniprogram-boilerplate.git
2. 进目录,安装依赖
$ cd wx-miniprogram-boilerplate && npm install
3. 编译代码,生成dist目录,使用开发者工具打开dist目录
$ npm run dev (开发环境打包)
$ npm run test (测试环境打包)
4. 新建page、template或者component
  gulp auto -p mypage           创建名为mypage的page文件
  gulp auto -t mytpl            创建名为mytpl的template文件
  gulp auto -c mycomponent      创建名为mycomponent的component文件
  gulp auto -s index -p mypage  复制pages/index中的文件创建名称为mypage的页面
5. 上传代码前编译
$ npm run build (生产环境打包)
6. 上传代码,审核,发版

工程结构

wx-miniprogram-boilerplate
├── dist         // 编译后目录
├── node_modules // 项目依赖
├── src 
│    ├── components // 微信小程序自定义组件
│    ├── env        // 请求域名配置
│    ├── images     // 页面中的图片和icon
│    ├── pages      // 小程序page文件
│    ├── styles     // ui框架,公共样式
│    ├── template   // 模板
│    ├── utils      // 公共js文件
│    ├── app.js
│    ├── app.json
│    ├── app.less
│    ├── project.config.json // 项目配置文件
│    └── api.config.js       // 项目api接口配置
├── .gitignore
├── .eslintrc.js
├── package-lock.json
├── package.json
└── README.md

Gulp说明

Tasks:
  dev              开发编译,同时监听文件变化
  test             整体编译,请求指向测试环境
  build            整体编译

  clean            清空产出目录
  wxml             编译wxml文件(仅仅copy)
  js               编译js文件,同时进行ESLint语法检查
  json             编译json文件(仅仅copy)
  wxss             编译less文件为wxss
  img              编译压缩图片文件
  watch            监听开发文件变化
  devEnv/testEnv/prodEnv 生成对应环境的请求域名配置

  auto             自动根据模板创建page,template或者component(小程序自定义组件)

gulp auto 

选项:
  -s, --src        copy的模板                     [字符串] [默认值: "_template"]
  -p, --page       生成的page名称                                       [字符串]
  -t, --template   生成的template名称                                   [字符串]
  -c, --component  生成的component名称                                  [字符串]
  --msg            显示帮助信息                                           [布尔]

示例:
  gulp auto -p mypage           创建名为mypage的page文件
  gulp auto -t mytpl            创建名为mytpl的template文件
  gulp auto -c mycomponent      创建名为mycomponent的component文件
  gulp auto -s index -p mypage  复制pages/index中的文件创建名称为mypage的页面

Q&A

  • Q: 为什么工作流中没有加入js转换,样式补全以及代码压缩?

    A: 微信开发者工具中自带babel将ES6转ES5,样式补全以及js代码压缩等功能,在此工作流中不做额外添加。

  • Q: _template目录的文件有什么用?

    A: 使用gulp auto命令自动生成文件,-s参数可以指定copy的对象,默认情况下是以对应目录下文件夹为_template中的文件为copy对象的。开发者可以根据业务需求,自定义_template下的文件。

  • Q: _template目录的文件是否会被编译到dist目录?

    A: 不会。

TODO

  • 代码注释
  • 规范命令行使用
  • eslint
  • gulp增量编译
  • 生产环境打包

最后

如果有新的建议,欢迎创建Issue或发送PR,感谢你的支持和贡献。

wx-miniprogram-boilerplate's People

Contributors

yangqigithub avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

wx-miniprogram-boilerplate's Issues

gulp 命令出错

TypeError: Cannot read property 'apply' of undefined at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20 at _combinedTickCallback (internal/process/next_tick.js:131:7) at process._tickCallback (internal/process/next_tick.js:180:9) at Function.Module.runMain (module.js:678:11) at startup (bootstrap_node.js:187:16) at bootstrap_node.js:608:3

请问node_modules和package.json是怎么移动到dist文件夹中的?

请问node_modules和package.json是怎么移动到dist文件夹中的?

├── dist // 编译后目录
│ ├── miniprogram_npm // 小程序npm构建生成
│ ├── node_modules // 小程序模块依赖
│ ├── package-lock.json
│ ├── package.json
├── node_modules // 项目依赖
├── src
├── package-lock.json
├── package.json
└── README.md

我看src和dist都有一份,从仓库代码看不出来怎么操作的,请问作者能透露下怎么操作的吗

样式不生效

下载源码,加了一个字体样式没有效果,整体的css效果都没效果

当自动生成模板(page、template、component)的目录不是单目录时会有问题

当生成单目录的模板不会有问题

  1. 例如: gulp auto -p mypage

当生成多目录下的模板会有问题

场景:我需要在order文件夹(order文件在pages目录下)下有list和detail两个page

  1. 生成list页面
    执行:gulp auto -p order/list,会存在问题。看了一下源码,问题应该是出现在
    image重命名文件名称这里。

  2. 我的解决办法是通过把name这个字段处理一下,如图所示:
    image,方法仅供参考

重复@import sass文件

例如
./a.scss
@import c.scss

./b.scss
@import c.scss

./c.scss

body{
    background:#000
}

输出会变成
./a.scss

body{
    background:#000
}

./b.scss

body{
    background:#000
}

而期望是
./a.scss
@import c.scss

./b.scss
@import c.scss

因为小程序本身就支持@import

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.