老大扔来任务
老大：来，你研究研究，把咱们微信H5端弄个小程序出来
我：得令！于是乎，小程序的学习开发开始了。。。。
首先，我翻了翻收藏夹，找出了我一朋友分享的小程序开源项目——WePY
这个项目还是腾讯自己出的，看了看，我觉得靠谱，没问题，就它了。
开搞开搞~
先搞个能跑起来的demo
打开 webstorm
打开 wepy官方文档
1. 全局安装或更新WePY命令行工具
npm install wepy-cli@1.7.0 -g
我后边使用了 sass，而 wepy-cli 1.7.0 以上的版本不知为何 sass 编译出来的 wxss 文件是空的
2. 在开发目录中用wepy-cli生成项目
wepy init standard
我的wepy-cli版本：1.7.0 出现以下对话
Generate project in current directory? // 在当前目录中生成项目嘛?
Y // 似滴
A newer version of wepy-cli is available. // 如果出现，就是提醒你wepy-cli有新的版本可用
Project name // 项目叫啥
xxx
Project description // 来讲一下你这个项目
这是一个xxx小程序项目……&*%￥……#……%￥&*……&%#￥%#￥
Author // 作者？
姓名<邮箱>
Use ESLint to lint your code? // 使用ESLint帮你检测代码？
y // 来吧
Use Redux in your project? // 使用Redux来处理状态管理？
Y // 可以
Use web transform feature in your project? // 在项目中使用Web转换功能？
Y // 允了（虽然不知道是干啥的东西，但是看起来很厉害的样子，先加上再说）
3. 万事大吉，只欠下载
npm i
4. 开启实时编译，走你
wepy build --watch
于是乎得到了一个项目，目录结构：
├── dist 微信开发者工具指定的目录（该目录由WePY的build指令自动编译生成，请不要直接修改该目录下的文件）
├── node_modules
├── src 代码编写的目录（该目录为使用WePY后的开发目录）
| ├── components WePY组件目录（组件不属于完整页面，仅供完整页面或其他组件引用）
| | ├── com_a.wpy 可复用的WePY组件a
| | └── com_b.wpy 可复用的WePY组件b
| ├── pages WePY页面目录（属于完整页面）
| | ├── index.wpy index页面（经build后，会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件）
| | └── other.wpy other页面（经build后，会在dist目录下的pages目录生成other.js、other.json、other.wxml和other.wxss文件）
| └── app.wpy 小程序配置项（全局数据、样式、声明钩子等；经build后，会在dist目录下生成app.js、app.json和app.wxss文件）
└── package.json 项目的package配置
5. 对微信开发者工具和IDE工具做一些设置（非常重要）
至此项目的准备工作就基本完成了。
可以在 微信开发者工具 中看到效果
6. 如果你使用的是 WebStorm 。。。。。。
我是用 WebStorm 开发的，在进入 sec/pages/index.wpy 看代码时习惯性的按了一波 Ctrl+Shift+F+S 之后(格式化代码+保存)，我发现界面出问题了。。。
WTF？？？切回 WebStorm 我发现多了好几条红线，原来是 WebStorm 不认识 rpx 单位，格式化代码时会在 rpx 单位前边加个空格，导致样式出了问题
7. 于是乎，解决这个问题
wepy自带less，但是用less解决的话很难受
.userinfo-avatar {
width: ~"200rpx";
height: ~"200rpx";
border-radius: 50%;
}
转过头看，用 sass 的函数去解决这个问题就很优雅了
@function rpx($value) {
@return $value * 1rpx;
}
.userinfo-avatar {
width: rpx(80);
height: rpx(80);
border-radius: 50%;
}
So
//安装sass
npm i node-sass
//安装wepy-compiler-sass插件
npm install wepy-compiler-sass --save-dev
//配置wepy.config.js
module.exports = {
"compilers": {
sass: {
'outputStyle': 'compressed'
}
}
};
再跑一遍，搞定~
8.注意：这里有一个天坑
wepy-cli 1.7.2 版本编译出来的 wxss（就是小程序的 css 文件）是空的，升级 or 降级到 1.7.0 即可
