极其简单的微信小程序Hello World示例!（很实用的微信小程序）

极其简单的微信小程序Hello World示例!（很实用的微信小程序）

miniprogram-hello-world

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

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

安装运行

项目结构说明

.├── 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。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。