P4组件库_4.简单的组件使用方式

P4组件库_4.简单的组件使用方式

 

 

 

 

miniprogram\pages\index\index.wxml

<view class="container">

<van-button bindtap="onClick" type="info" plain icon="gem-o" size="large">主要按钮</van-button>

<view class="user"><van-icon name="manager" />如来佛</view>

<van-cell title="单元格" icon="volume-o" size="large" is-link/>
<van-cell title="单元格" icon="volume-o" size="large" is-link value="5人"/>
</view>

 

miniprogram\pages\index\index.wxss

.container{
  padding: 30rpx;
}
.user{
 font-size: 40rpx;
}
.user .van-icon{
  color: green;
}

 

miniprogram\app.json

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "云开发 QuickStart",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "usingComponents": {
    "van-button": "@vant/weapp/button/index",
    "van-icon": "@vant/weapp/icon/index",
    "van-cell": "@vant/weapp/cell/index"
  }
}