小程序中使用weui组件库

简介: 小程序中使用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,样式和微信浑然一体,而且使用起来也方便不用担心会有不兼容的效果。

相关文章
|
5天前
|
小程序 JavaScript
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
|
5天前
|
存储 小程序 JavaScript
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
|
5天前
|
JSON 小程序 数据格式
【微信小程序】-- 自定义组件总结 (四十)
【微信小程序】-- 自定义组件总结 (四十)
|
5天前
|
小程序 JavaScript
【微信小程序】-- 自定义组件 - behaviors(三十九)
【微信小程序】-- 自定义组件 - behaviors(三十九)
|
5天前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
|
5天前
|
小程序
【微信小程序】-- 自定义组件 - 纯数据字段 & 组件的生命周期(三十六)
【微信小程序】-- 自定义组件 - 纯数据字段 & 组件的生命周期(三十六)
|
5天前
|
小程序 JavaScript
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
|
5天前
|
小程序 JavaScript
【微信小程序】之自定义四宫格(不用mp-grids扩展组件实现,这个组件太难用了)
【微信小程序】之自定义四宫格(不用mp-grids扩展组件实现,这个组件太难用了)
|
5天前
|
JSON 资源调度 小程序
一个强大的小程序富文本组件mp-html
一个强大的小程序富文本组件mp-html
40 0
|
5天前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 父子组件之间的通信(三十八)
【微信小程序】-- 自定义组件 - 父子组件之间的通信(三十八)

热门文章

最新文章