通过npm或useExtendedLib方式引入组件库
发布于 3 年前 作者 chaozhu 4967 次浏览 来自 分享

通过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](/user/import) '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

(三)效果预览

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

(四)小问题修复

  • 预览图中,page__hdpage__titlepage__desc的样式和官方预览图是不一样的
    <view class="page__hd">
        <view class="page__title">Form</view>
        <view class="page__desc">表单输入</view>
    </view>

修复,新建page__hdpage__titlepage__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__checkboxweui-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>
1 回复

补一张图

位置:

(二) 通过npm构建的方式引入

  • 打开NPM组件使用

回到顶部