小程序随笔15:引用WeUI组件方法(二)

引入引用WeUI组件方法

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

本篇文章采用第一种方法,实现方式:
1、进入node.js(https://nodejs.org/en/)官网,下载官网推荐的版本。

nodejs下载

2、下载完成后,我们双击安装包,直接下一步。所有配置按默认安装推荐的来进行。不需要改任何设置。

3、安装完成后,我们打开微信小程序的开发工具,进入项目,找到如下图中的终端。
终端

4、在命令窗口中键入npm init。然后所有配置都按默认配置进行,只需点击回车键即可。当提示“Is this OK?<yes>”时,我们只需点击回车即可。
npm init

5、再次键入npm install构建。成功的标志是,项目中生成package.json。在node.js中我们创建的一个模块化的架构,这个文件就是描述这个模块的文件。
package.json

6、我们继续使用命令提示符窗口,键入"npm i weui-miniprogram -S --production",该命令是通过npm安装我们的weui-miniprogram。成功的标志是项目中生成文件“package-lock.json”。
package-lock.json

7、回到微信小程序开发工具,在上方“工具”一栏中找到“构建npm”。稍等几秒即可构建成功。
构建npm

8、最后一步我们在微信小程序开发工具右上角找到:详情---本地设置--使用npm模块。
设置使用npm模块

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

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

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

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

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

<view class="container">
  <view class="page__bd">
    <mp-cells title="新消息提示跟摘要信息后,统一在列表右侧">
      <mp-cell title="单行列表" link>
        <view slot="footer">
          <view style="display: inline-block;vertical-align:middle; font-size: 17px;">详细信息</view>
          <mp-badge style="margin-left: 5px;margin-right: 5px;" content="9" ext-class="blue"/>
        </view>
      </mp-cell>
    </mp-cells>
  </view>
</view>

效果如图:
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容