miniprogram-hello-world

极其简单的微信小程序Hello World示例! A Simple WeChat Miniprogram Demo!

• 本项目基于Jeff2Ma/WeApp-Workflow之上对技术栈做了删减优化，建议先看看这个项目的README！

安装运行

1. 拉取代码: git clone https://github.com/xianyuxmu/miniprogram-hello-world.git
2. 切换到项目目录: cd miniprogram-hello-world
3. 安装依赖: npm install
4. 打包构建: npm run dev
5. 运行小程序:
   • 打开“微信开发者工具”，新增项目，“项目目录”选择到/miniprogram-hello-world/dist
   • “AppID”选择 体验小程序
   • 点击确定，即可运行

项目结构说明

.
├── config.js // 项目配置文件
├── gulpfile.js // gulp 配置
├── package.json
├── src // 开发目录
│   ├── app.js
│   ├── app.json
│   ├── app.scss
│   ├── assets // 静态资源：最终上传到CDN
│   │   ├── images // 图片文件，可被上传到CDN
│   │   ├── less // 通用基础less文件，最终被pages引用
│   │   └── sprites // 生成雪碧图小图的目录
│   ├── image // 小程序专用的图片资源(如:tabBar、icon等)
│   ├── pages //小程序页面
│   │   └── index // index页面
│   │       ├── index.js   // js 文件
│   │       ├── index.less // 样式，最终转成.wxss
│   │       ├── index.wxml
│   │       └── index.json
│   └── utils // 实用函数目录
├── tmp //  src目录编译后生成的缓存目录，存放图片
└── dist // src目录编译后生成的文件目录，是小程序运行的根目录

技术选型与设计原则

技术选型

• less: less相对sass更加简单、不需要依赖Ruby环境；直接写.wxss嵌套样式很难写(我觉得未来wxss会引入预处理器功能)
• Gulp: 任务自动化。任务包括：雪碧图生成、图片上传CDN、less文件预处理等。
• 其他的都是原汁原味的。

功能

自动上传图片到CDN

只要在相关的配置文件中写好配置，就能实现自动上传功能。目前支持腾讯云和阿里云。

全自动构建雪碧图及生成相应CSS

由 postcss-lazysprite 插件驱动。开发中准备好图片后仅仅写一句类似@lazysprite "xxxx"的代码，即可全自动构建雪碧图及生成相应CSS。

// Input: src/app.scss
@lazysprite "filetype";

// Output: dist/app.wxss
.icon-filetype-doc {
    background-image: url(../sprites/filetype.png);
    background-position: 0 0;
    width: 80px;
    height: 80px;
}

.icon-filetype-pdf {
    background-image: url(../sprites/filetype.png);
    background-position: -90px 0;
    width: 80px;
    height: 80px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio:2) {
    .icon-filetype-doc {
        background-image: url(../sprites/filetype@2x.png);
        background-position: 0 0;
        background-size: 170px 170px;
    }

    .icon-filetype-pdf {
        background-image: url(../sprites/filetype@2x.png);
        background-position: -90px 0;
        background-size: 170px 170px;
    }
}

图片压缩

实时压缩图片并采用增量方式防止被重复压缩。

自动添加文件指纹

该功能基于 gulp 的 gulp-rev 和 gulp-rev-collector 插件，能够为文件添加基于内容的指纹，并自动在 html 中替换文件名。

设计原则

• Simple, simple and simple. 一切从简，非必要的引入。降低开发成本，提高项目健壮性。
  • **不引入node_modules。需要的依赖包直接通过js文件包引入。
  • **不使用Promise封装小程序API。**一般用到的小程序API不多、也不频繁，使用Promise封装所有接口带来的好处不明显，却带来一些不便之处：
    • 封装可能引起未知的问题。
    • 有些特殊的接口，不能Promise化，即使Promise化了也不好用。
    • 有些接口几乎用不到，Promise化是多此一举。
  • **不引入Babel。**小程序本身支持了ES6，ES6语法基本够用了。
• Classic JavaScript/CSS/HTML. 使用原生的JS进行开发，不使用TypeScript、不使用WXSS。