../代表向上一级目录；

style中wxss为公用得样式；

微信小程序第三方组件库

WeUI：与原生相同

iView Weapp：

Vant Weapp：有赞公司出品

第三方组件库

WeUI,iView Weapp,Vant Weapp 三个第三方组件库比较好

主键库样式

第三方样式库：WeUI

iView Weapp(有后端管理系统)

Vant Weapp

wxss

rpx响应式单位，不同的手机屏幕大小不同，设计时建议使用iphone6作为标准。

1rpx = 0.5px

微信小程序组件库

1. wxss 用于小程序的样式语言，相当于css.用于描述wxml的组件样式，也就是视觉上的效果。

2. 尺寸单位：rpx，可以根据屏幕宽度进行自适应，适配不同宽度的屏幕。一般选用iphone6作为视觉稿的标准。

3. 引入外部wxss: @import './test_0.wxss'

4. 第三方样式库：WeUI 、iView Weapp 、vant Weapp
   

750px

use iphone 6 because 375x2 = 750

第三个样式库，补充

第三方样式库

weui

iview weapp

vant weapp

https://weui.io/

https://github.com/Tencent/weui

https://developers.weixin.qq.com/miniprogram/dev/extended/weui/

rpx

750px, iphone6

wx:key="*this"

bug

class="style-name"

@import "../"

```css

/* pages/base/index.wxss */

.rpx-box {

background: #000;

width: 50vw;

height: 375rpx;

display: flex;

align-items: center;

justify-content: center;

margin: 10rpx auto;

box-sizing: border-box;

border: 1px solid red;

color: #0f0;

}

```

wxss ,  rpx自适应，宽度 750rpx

1rpx=0.5px

# wxss

css

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

wxss === css

wxss ,  rpx自适应，宽度规定750rpx。    1rpx=0.5px

推荐  iView Weapp（带小程序后台） 和 WeUI 组件库

第三方软件库

第三方样式库

微信程序画面样式

<view>{{m1}}</view>

<view class="box"></view>

<view wx:for="{{arr}}" wx:key="{{index}}">{{item}} {{index}}</view>

<view wx:for="{{list}}" wx:key="{{index}}">{{index}} {{item.name}} {{item.age}}</view>

<view wx:if="{{islogin}}">请登录</view>

<view wx:else>小川</view>

<view hidden="{{!islogin}}">隐藏</view>

<image src="/images/002.png">002</image>

<image src="{{img1}}" class="banner"></image>

data: {

      m1:'hello',

      img1:'/images/001.jpg',

      arr:['a','b','c','d'],

      list:[{

        name:'小白',

        age:16

      },

        {

          name: '小红',

          age: 17

        },

        {

          name: '小黑',

          age: 18

        }],

        islogin: true

  },

小程序樣式庫推薦

WeUI

iView Weapp

Vant Weapp