评论

微信小程序前端开发踩坑——引入weui组件库

本文介绍了如何在小程序前端开发中引入weui组件库

前言

今天在写微信小程序前端页面,想引入weui组件库来完成开发。结果按着官方文档来遇到了一堆问题,最后靠着不断百度查资料才最终解决。所以将过程记录一下,避免后面再遇到这类坑。
注意:本文默认读者已知道怎么使用npm

1. 初始化

以管理员身份运行命令行窗口(cmd),在cmd中进入项目的根目录。然后输入以下命令:

npm init

后面一路按回车健即可,最终会在项目的根目录中创建出一个名为package.json的文件。

2. 安装weui组件库

在cmd中紧接着输入以下命令:

npm install weui-miniprogram

命令执行完毕后会多出来一个node_modules文件夹,里面包含了weui组件库。

3. 构建npm

在微信开发者工具中,选择“工具”->“构建npm”。如无意外会出现类似“没有找到可以构建的NPM包……”这样的报错。
这时就需要在项目根目录找到package.config.json文件,修改相关的配置如下:

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

继续在开发者工具中的“详情”->“本地设置”里检查是否勾选上“使用npm模块”选项,若没勾选则勾选上。
完成上述配置后,重新构建npm,即可构建完成。

4. 重启项目

在开发者工具中“项目”->“重新打开此项目”,完成对项目的重启。
注意:这一步非常重要!!!否则引入组件会提示找不到文件!!!

5. 引入wxss

在app.wxss中,引入weui库的wxss文件

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

引入时要根据实际情况调整路径,但最长后缀均为

/weui-miniprogram/weui-wxss/dist/style/weui.wxss

6. 引入组件

在想要使用组件的页面对应的js文件中,对组件进行的引入。一定要注意自己项目的目录结构!!!

而官方文档的写法是

如果直接照搬官方文档的写法,则忽略了目录结构,会报错!!

接着在要使用组件的页面对应的wxml文件中使用该组件即可

<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
    <view>test content</view>
</mp-dialog>

效果如下:

后记

不得不说,前端开发的坑实在是太多了,上面记录的过程我摸索了一个多小时。看来平时一定要多注意总结才行,不然真的非常消耗时间!!!

创作不易,觉得有用麻烦点个赞,谢谢~~~

最后一次编辑于  01-11  
点赞 23
收藏
评论

15 个评论

  • 如我
    如我
    02-25

    版主 你这个要补充一下啊 如果选择的是 ts less 患者 ts sass 这个配置             "miniprogramNpmDistDir": "./miniprogram/" 然后再构建nom 不然 wxss编译会出错


    02-25
    赞同 1
    回复 1
    • 晨曦
      晨曦
      03-01
      感谢提醒。不过这两个配置我似乎没搞过,所以不太清楚,后面有时间会验证一下的。现在我先把你的评论顶上去~
      03-01
      回复
  • TYXX
    TYXX
    2021-11-16

    我超,还有这种坑,收藏了

    2021-11-16
    赞同 2
    回复
  • 知非
    知非
    2021-11-15

    新手确实会遇到很多问题,感觉看完文章很有帮助,赞~

    2021-11-15
    赞同 2
    回复 3
    • 晨曦
      晨曦
      发表于小程序端
      2021-11-15

      确实。刚接触小程序开发没多久,老多问题了

      2021-11-15
      2
      回复
    • 知非
      知非
      2021-11-15回复晨曦
      没事没事,一起学习进步!
      2021-11-15
      2
      回复
    • 晨曦
      晨曦
      2021-11-15回复知非
      加油!!
      2021-11-15
      1
      回复
  • 缘来是你
    缘来是你
    06-20

    请问,weui 中没有封装的组件怎么使用呢

    06-20
    赞同 1
    回复
  • Lanh
    Lanh
    2021-11-16

    看完文章很有帮助,必须给你点个赞

    2021-11-16
    赞同 1
    回复 1
    • 晨曦
      晨曦
      2021-11-16
      谢谢。大家共同进步~~
      2021-11-16
      回复
  • 卢嘉駒
    卢嘉駒
    07-17

    感谢楼主啊 搞了一上午不知道哪儿出错 看完立马搞定👍🏻

    07-17
    赞同
    回复
  • Nobita
    Nobita
    04-27

    必须给个赞,以为官方的文档都是完全经得起推敲的,想学习一下,直接卡在第一步,直接在第一步卡死,看样子他们都没验证过。

    04-27
    赞同
    回复
  • Frankly
    Frankly
    03-03

    请问官方的组件使用文档在哪里呀?这个和jquery weui有什么区别吗?

    03-03
    赞同
    回复 1
  • Mr.W
    Mr.W
    03-01

    为什么npm引入后的代码包会变大300多KB?这有方法解决吗

    03-01
    赞同
    回复 2
    • 晨曦
      晨曦
      03-01
      没办法的。你引入了一个外部组件库进来,相当于在你原来的代码上添加了组件库的代码,代码包肯定会变大。
      03-01
      回复
    • Mr.W
      Mr.W
      03-02回复晨曦
      好的谢谢你
      03-02
      回复
  • 耿霄
    耿霄
    02-23

    确实好使,点赞

    02-23
    赞同
    回复

正在加载...

登录 后发表内容