【微信小程序】使用微信原生样式
2020-02-09 本文已影响0人
焜_8899
1. 微信小程序
一个小程序页面包含四个文件:
文件类型 | 必须 | 作用 | 相当于web中的 |
---|---|---|---|
wxml | 是 | 页面结构 | html |
wxss | 否 | 页面样式 | css |
js | 是 | 页面逻辑 | js |
json | 否 | 页面配置 |
2. 微信原生样式WeUI
WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计。
这里有预览地址和下载地址。
可直接下载dist/style/
下的weui.wxss
文件并引用之。
3. 用法
把weui.wxss
放在项目根目录下,然后在app.wxss
中添加
@import 'weui.wxss';
4. 补充
按照以上方式,用的会是第一版本的微信原生样式。目前个人已知的有两个版本。要使用第二版本,只需在app.json
中添加
"style": "v2",
如下图所示
使用第二版本的微信原生样式
5. 参考文献
[1] 腾讯. 目录结构 | 微信开放文档[EB/OL]. [2020-02-09]. https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html.
[2] 腾讯. 微信小程序设计指南 | 微信开放文档[EB/OL]. [2020-02-09]. https://developers.weixin.qq.com/miniprogram/design/#资源下载.
[3] Tencent. weui-wxss[Z/OL]. (2019-10-23)[2020-02-09]. https://github.com/Tencent/weui-wxss/.