1. 程式人生 > 其它 >微信小程式使用weui元件

微信小程式使用weui元件

技術標籤:微信小程式

微信新版本通過useExtendedLib引入即可,不用使用npm構建

1、引入weui

在app.json頁面,設定"weui":true

{
  "pages": [
    "pages/index/index",
    "pages/login/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "useExtendedLib": {
    "weui": true
  }
}

2、在要使用元件的.json頁面註冊元件,這裡使用了徽章元件

{
  "usingComponents": {
    "mp-badge": "weui-miniprogram/badge/badge"
  }
}

3、在頁面的.wxml頁面使用元件

<mp-badge content="8"></mp-badge>

效果如下: