老大扔來(lái)任務(wù)
老大：來(lái)费奸，你研究研究弥激，把咱們微信H5端弄個(gè)小程序出來(lái)
我：得令！于是乎愿阐，小程序的學(xué)習(xí)開(kāi)發(fā)開(kāi)始了微服。。缨历。以蕴。
首先糙麦，我翻了翻收藏夾，找出了我一朋友分享的小程序開(kāi)源項(xiàng)目——WePY
這個(gè)項(xiàng)目還是騰訊自己出的丛肮，看了看赡磅，我覺(jué)得靠譜，沒(méi)問(wèn)題宝与，就它了焚廊。
開(kāi)搞開(kāi)搞~
先搞個(gè)能跑起來(lái)的demo
打開(kāi) webstorm
打開(kāi) wepy官方文檔
1. 全局安裝或更新WePY命令行工具
npm install wepy-cli@1.7.0 -g
我后邊使用了 sass，而 wepy-cli 1.7.0 以上的版本不知為何 sass 編譯出來(lái)的 wxss 文件是空的
2. 在開(kāi)發(fā)目錄中用wepy-cli生成項(xiàng)目
wepy init standard
我的wepy-cli版本：1.7.0 出現(xiàn)以下對(duì)話
Generate project in current directory? // 在當(dāng)前目錄中生成項(xiàng)目嘛?
Y // 似滴
A newer version of wepy-cli is available. // 如果出現(xiàn)习劫，就是提醒你wepy-cli有新的版本可用
Project name // 項(xiàng)目叫啥
xxx
Project description // 來(lái)講一下你這個(gè)項(xiàng)目
這是一個(gè)xxx小程序項(xiàng)目……&*%￥……#……%￥&*……&%#￥%#￥
Author // 作者咆瘟？
姓名<郵箱>
Use ESLint to lint your code? // 使用ESLint幫你檢測(cè)代碼？
y // 來(lái)吧
Use Redux in your project? // 使用Redux來(lái)處理狀態(tài)管理诽里？
Y // 可以
Use web transform feature in your project? // 在項(xiàng)目中使用Web轉(zhuǎn)換功能袒餐？
Y // 允了（雖然不知道是干啥的東西，但是看起來(lái)很厲害的樣子须肆，先加上再說(shuō)）
3. 萬(wàn)事大吉匿乃，只欠下載
npm i
4. 開(kāi)啟實(shí)時(shí)編譯，走你
wepy build --watch
于是乎得到了一個(gè)項(xiàng)目豌汇，目錄結(jié)構(gòu)：
├── dist 微信開(kāi)發(fā)者工具指定的目錄（該目錄由WePY的build指令自動(dòng)編譯生成幢炸，請(qǐng)不要直接修改該目錄下的文件）
├── node_modules
├── src 代碼編寫(xiě)的目錄（該目錄為使用WePY后的開(kāi)發(fā)目錄）
| ├── components WePY組件目錄（組件不屬于完整頁(yè)面，僅供完整頁(yè)面或其他組件引用）
| | ├── com_a.wpy 可復(fù)用的WePY組件a
| | └── com_b.wpy 可復(fù)用的WePY組件b
| ├── pages WePY頁(yè)面目錄（屬于完整頁(yè)面）
| | ├── index.wpy index頁(yè)面（經(jīng)build后拒贱，會(huì)在dist目錄下的pages目錄生成index.js宛徊、index.json、index.wxml和index.wxss文件）
| | └── other.wpy other頁(yè)面（經(jīng)build后逻澳，會(huì)在dist目錄下的pages目錄生成other.js闸天、other.json、other.wxml和other.wxss文件）
| └── app.wpy 小程序配置項(xiàng)（全局?jǐn)?shù)據(jù)斜做、樣式苞氮、聲明鉤子等；經(jīng)build后瓤逼，會(huì)在dist目錄下生成app.js笼吟、app.json和app.wxss文件）
└── package.json 項(xiàng)目的package配置
5. 對(duì)微信開(kāi)發(fā)者工具和IDE工具做一些設(shè)置（非常重要）
至此項(xiàng)目的準(zhǔn)備工作就基本完成了。
可以在 微信開(kāi)發(fā)者工具 中看到效果
6. 如果你使用的是 WebStorm 霸旗。贷帮。。诱告。撵枢。。
我是用 WebStorm 開(kāi)發(fā)的，在進(jìn)入 sec/pages/index.wpy 看代碼時(shí)習(xí)慣性的按了一波 Ctrl+Shift+F+S 之后(格式化代碼+保存)锄禽，我發(fā)現(xiàn)界面出問(wèn)題了潜必。。沟绪。
WTF刮便？？绽慈？切回 WebStorm 我發(fā)現(xiàn)多了好幾條紅線，原來(lái)是 WebStorm 不認(rèn)識(shí) rpx 單位辈毯，格式化代碼時(shí)會(huì)在 rpx 單位前邊加個(gè)空格坝疼，導(dǎo)致樣式出了問(wèn)題
7. 于是乎，解決這個(gè)問(wèn)題
wepy自帶less谆沃，但是用less解決的話很難受
.userinfo-avatar {
width: ~"200rpx";
height: ~"200rpx";
border-radius: 50%;
}
轉(zhuǎn)過(guò)頭看钝凶，用 sass 的函數(shù)去解決這個(gè)問(wèn)題就很優(yōu)雅了
@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.注意：這里有一個(gè)天坑
wepy-cli 1.7.2 版本編譯出來(lái)的 wxss（就是小程序的 css 文件）是空的唁影，升級(jí) or 降級(jí)到 1.7.0 即可
