小程序中使用weui组件库

创建项目

打开微信开发者工具，创建新的项目

创建完了之后将没有用的内容都清理干净

引入weui

以前引入得用npm的形式，引入完了还得进行构建，比较麻烦，新版本增加了直接导入的功能，具体在app.json中增加配置

{
    
    
  "pages": [
    "pages/index/index"
  ],
  "window": {
    
    
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "云开发 QuickStart",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "style": "v2",
  "useExtendedLib": {
    
    
    "weui": true
  }

}

设置weui为true就行，为了验证是否引入成功，我们在index页面增加一个弹出框。
先在index.json中增加自定义组件

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

然后在index.wxml中引入需要的组件

<!--index.wxml-->
<view class="container">
<text>这是一个云开发</text>
<mp-dialog title="test" show="{
    
    {true}}" bindbuttontap="tapDialogButton" buttons="{
    
    {[{text: '取消'}, {text: '确认'}]}}">
    <view>test content</view>
</mp-dialog>
</view>

引入后的效果

是不是很方便呢，有的人喜欢用colorui也有用有赞的ui框架，我本人偏爱weui，样式和微信浑然一体，而且使用起来也方便不用担心会有不兼容的效果。