Wepy使用记录—Stylus预编译基本使用
- 坏境搭建请前往wepy框架官网
- 淘宝 NPM 镜像
- wepy新建wpy初始化模板参考
创建空项目
使用wepy init empty 项目名称命令来创建项目。如下如所示，几乎一路回车就可以了。
创建完项目，就可以打开它了。使用wepy build -w开启时时预览。随后就会在项目根目录生成一个dist文件夹。然后使用微信小程序开发工具打开这个文件夹，就可以预览、调试和上传了。
使用微信小程序开发工具预览的效果如下图所示。
在项目中依赖Stylus
- wepy-compiler-stylus配置说明
使用npm install wepy-compiler-stylus --save命令安装依赖。因为我用的淘宝镜像所以这里用的是cnpm。
在项目的根目录中找到wepy.config.js文件。配置如下图所示：
因为习惯代码中有分号，所以在这个配置中我将eslint关闭了。
初步使用Stylus
- stylus中文版参考文档
修改下index界面中“Hello world”字符串显示的效果。index.wpy文件修改后代码如下：
<style lang="stylus">
font_size = 100rpx
match_parent = 100%
page
display flex
height match_parent
width match_parent
background-color cadetblue
justify-content center
align-items center
color white
font-size font_size
font-weight bold
</style>
<template>
<view class="container">
Hello world
</view>
</template>
<script>
import wepy from 'wepy';
export default class Index extends wepy.page {
config = {
navigationStyle: 'custom'
};
}
</script>
Stylus的基本使用还是比较好理解的，修改过的效果如下图所示：
引用外部Stylus.styl文件
相当于引入外部样式表，这个在一般开发中肯定会用到的，所以这里还是记录一下。使用起来很简单，创建一个xxx.styl样式文件，使用webstorm创建样式表会有提示。
将index.wpy中定义的样式变量提取出来放到test.styl文件中，修改下文字的大小，并添加一个转换单位的方法。如下如所示：
在index.wpy，引入test.styl样式文件。
大功告成，效果如下。字体已经变小了。说明单位转换的方式也是好使的。
