小程序学习之旅（一）跑一个wepy

老大扔来任务

老大：来，你研究研究，把咱们微信H5端弄个小程序出来
我：得令！

于是乎，小程序的学习开发开始了。。。。

首先，我翻了翻收藏夹，找出了我一朋友分享的小程序开源项目——WePY

这个项目还是腾讯自己出的，看了看，我觉得靠谱，没问题，就它了。

开搞开搞~

先搞个能跑起来的demo

打开 webstorm
打开 wepy官方文档

1. 全局安装或更新WePY命令行工具

npm install [email protected] -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工具做一些设置（非常重要）

微信开发者工具
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 即可