小程序随笔14:引用WeUI组件方法(一)

引入引用WeUI组件方法

  1. 通过npm方式,(此方法比较复杂些)。可以通过npm方式下载构建,npm包名为weui-miniprogram。
  2. 通过页面按需下载地址:https://developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html

本篇文章采用第二种方法,实现方式:
1、将下载的weui-miniprogram放到项目的根目录下。

2、在小程序页面对应的.wxss文件中引入weui.wxss,添加代码:

@import '/weui-miniprogram/weui-wxss/dist/style/weui.wxss'

3、在小程序页面对应的.json文件中引入组件,添加代码:

"usingComponents": {
    "mp-cells": "/weui-miniprogram/cells/cells",
    "mp-cell": "/weui-miniprogram/cell/cell",
    "mp-badge": "/weui-miniprogram/badge/badge"
  }

4、在小程序页面对应的.wxml文件中,添加代码:


    
        Badge
        徽章
    

    
        
            
                
                    详细信息
                    
                
            
        
    

效果图来了:
小程序随笔14:引用WeUI组件方法(一)_第1张图片
效果图

你可能感兴趣的:(小程序随笔14:引用WeUI组件方法(一))