Skip to content
极其简单的微信小程序Hello World示例! A Simple WeChat Miniprogram Demo!
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images
src
.babelrc
.gitignore
LICENSE
README.md
config.js
gulpfile.js
package.json

README.md

miniprogram-hello-world

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

小程序运行截图

安装运行

  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-revgulp-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。
You can’t perform that action at this time.