前言：
前几天公司需要制作一个小程序，但是本人对于小程序不太熟悉，借此机会来记录一下自己使用weui的流程
小程序 + ts
基础库3.4.3（当时的最新）
1.使用npm在项目中下载weui
在文件的根目录中执行npm init -y 初始化项目
npm init
npm init会在你的项目根目录中创建一个package.json的文件，这是 Node.js 项目的核心文件之一，用于管理项目的依赖和配置信息。你也可以自己配置该文件。
2.安装weui
使用npm i weui-miniprogram或者npm install weui-miniprogram安装weui
npm i weui-miniprogram
或者
npm install weui-miniprogram
然后项目中就会多一个node_modules的文件夹
3.在微信小程序中构建npm
微信小程序左上方的菜单栏 点击工具 点击构建npm
但是我这个时候报错了
微信开发者工具弹出来一个提示框，提示我NPM packages not found... 因为当时忘记截图了，所有没有报图片。
其实很简单奥。
在你的project.config.json文件中有一个setting的配置项，在里面添加以下代码就行
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
],
然后点击项目-点击重新打开此项目-点击工具-点击构建npm 然后就好啦
4.使用weui
在app.wxss中引入weui.wxss
@import 'weui-miniprogram/weui-wxss/dist/style/weui.wxss'; // 官方使用示例
@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';// 我使用的
在需要使用weui的页面的json文件中usingComponents 配置字段
// login.json （注意：json文件中是不允许加注释的）
{
"usingComponents": {
"mp-toptips": "weui-miniprogram/toptips/toptips"
}
}
这个时候你就可以直接在wxml文件中使用toptips了
<mp-toptips msg="{{error}}" type="error" show="{{error}}" bindhide="toptipsHide"></mp-toptips>
这样就可以了，这是本人写的第一篇文章，如有错误，欢迎大家指出
