通过npm或useExtendedLib方式引入组件库

1、需求

• 需要引入weui组件库，组件库支持“useExtendedLib、npm install”两种方式引入

2、两种方式引入

两种方式是冲突的, 一个组件只能由一种方式引入.

1. 通过 useExtendedLib 扩展库 的方式引入，这种方式引入的组件将不会计入代码包大小。
2. 也可以通过npm (opens new window)方式下载构建

（一） 通过useExtendedLib的方式引入

• 在 app.json 中添加

  "useExtendedLib": {
    "weui" : true
  }

（二） 通过npm构建的方式引入

• 打开NPM组件使用

• 然后打开一下terminal

• npm 初始化

npm init

然后一直回车即可，本次属于测试，不需要填写更多信息

• 安装weui-miniprogram

npm install weui-miniprogram

• 构建NPM（此处必做，npm install 后是组件源码，需要构建后才能使用）

构建完成

完成后的目录

• 注意！如果微信小程序NPM构建失败提示找不到npm包位置，这时候需要前往project.config.json添加指向

• 修改

        "packNpmManually": true,
        "packNpmRelationList": [
            {
                "packageJsonPath": "./package.json",
                "miniprogramNpmDistDir": "./node_modules"
            }
        ]

• 通过app.wxss引入全局样式

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

（三）效果预览

使用官方的表单预览，代码：Form | 微信开放文档 (qq.com)

（四）小问题修复

• 预览图中，page__hd、page__title、page__desc的样式和官方预览图是不一样的

    <view class="page__hd">
        <view class="page__title">Form</view>
        <view class="page__desc">表单输入</view>
    </view>

修复，新建page__hd、page__title、page__desc的样式， 这样就舒服多了

.title{
  cursor: default;
  user-select: none;
  line-height: 1.6;
  --height: 44px;
  --right: 95px;
  font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
  margin: 0;
  display: block;
  text-align: left;
  font-size: 20px;
  font-weight: 400;
}
​
.hd{
  cursor: default;
  user-select: none;
  line-height: 1.6;
  --height: 44px;
  --right: 95px;
  font-size: 16px;
  font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
  margin: 0;
  display: block;
  padding: 40px;
}
​
.desc{
  cursor: default;
  user-select: none;
  line-height: 1.6;
  --height: 44px;
  --right: 95px;
  font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
  margin: 0;
  display: block;
  margin-top: 5px;
  color: #888888;
  text-align: left;
  font-size: 14px;
}

将样式加到组件中

    <view class="page__hd hd">
        <view class="page__title title">Form</view>
        <view class="page__desc desc">表单输入</view>
    </view>

• 同时下面隐私协议里面的复选框也不见了

找到发现是weui-agree__checkbox和weui-agree__checkbox-icon样式缺失，终于看得见框框了

.agreeCheckBox{
  cursor: default;
  user-select: none;
  line-height: 1.6;
  --height: 44px;
  --right: 95px;
  font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
  font-size: 13px;
  color: rgba(0,0,0,.5);
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  display: inline-block;
  position: absolute;
  left: -9999px;
}
​
.agreeCheckBoxIcon{
  cursor: default;
  user-select: none;
  line-height: 1.6;
  --height: 44px;
  --right: 95px;
  font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
  font-size: 13px;
  color: rgba(0,0,0,.5);
  margin: 0;
  position: relative;
  top: 2px;
  display: inline-block;
  border: 1px solid #d1d1d1;
  background-color: #fff;
  border-radius: 3px;
  width: 11px;
  height: 11px;
} 

将样式加到组件中

        <checkbox-group bindchange="bindAgreeChange" class="checkBoxGroup">
            <label class="weui-agree agree" for="weuiAgree">
                <view class="weui-agree__text agreeText">
                    <checkbox class="weui-agree__checkbox agreeCheckBox" id="weuiAgree" value="agree" checked="{{isAgree}}" />
                    <view class="weui-agree__checkbox-icon agreeCheckBoxIcon">
                        <icon class="weui-agree__checkbox-icon-check" type="success_no_circle" size="9" wx:if="{{isAgree}}"></icon>
                    </view>阅读并同意<navigator url="" class="weui-agree__link">《相关条款》</navigator>
                </view>
            </label>
        </checkbox-group>