美文网首页
【微信小程序】使用微信原生样式

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

作者: 焜_8899 | 来源:发表于2020-02-09 05:24 被阅读0次

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

    相关文章

      网友评论

          本文标题:【微信小程序】使用微信原生样式

          本文链接:https://www.haomeiwen.com/subject/zzxgxhtx.html