【微信小程序】使用微信原生样式

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/.

上一篇下一篇

猜你喜欢

热点阅读