微信小程序前端引入weui组件库

这篇具有很好参考价值的文章主要介绍了微信小程序前端引入weui组件库。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

正在开发的微信小程序,想使用weui组件库。  步骤如下:

基础:1.小程序开发工具:1.06.22

1. 初始化

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

npm init

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

2. 安装weui组件库

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

 npm install weui-miniprogram --save

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

3. 构建npm

在项目根目录找到package.config.json文件,修改相关的配置如下:

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

在微信开发者工具中,选择“工具”->“构建npm”。 构建完成会出现这样的目录结构。

微信小程序前端引入weui组件库

4. 重启项目

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

5. 引入wxss

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

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

引入时要根据实际情况调整路径。

6. 引入组件

微信小程序前端引入weui组件库

7.模板中使用组件

微信小程序前端引入weui组件库

 文章来源地址https://www.toymoban.com/news/detail-501946.html

 

到了这里,关于微信小程序前端引入weui组件库的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】使用weui组件库来实现弹出一个确认的弹窗popup,其中包含图片和名称

    在微信小程序中,你可以使用weui组件库来实现弹出一个确认的popup,并在其中包含图片和名称。以下是一个示例代码: 在wxml文件中,添加一个按钮来触发弹出确认popup: 在wxss文件中,定义确认popup的样式: 在js文件中,编写相应的逻辑来显示和隐藏确认popup,并传递图片和名

    2024年02月17日
    浏览(57)
  • uniapp引入微信小程序直播组件

    在manifest.json配置即可,与直接在小程序代码中引入相同。 在工程的manifest.json文件中引入直播插件 通过直播间列表接口查询直播间列表,显示在小程序中 点击直播间,跳转到小程序直播组件即可 未整理参考 未整理参考 未整理参考

    2024年02月22日
    浏览(48)
  • 引入小程序组件库 WeUI 报错 error: module “miniprogram_npm/weui-miniprogram/_commons/0.js“ is not defined

    如果有类似报错,并且package.json已经有\\\"weui-miniprogram\\\" 依赖了 那就先删除了node_modules 跟 miniprogram_npm 两个文件夹(有就删除,没有也一样是按照下面的步骤),执行以下几步: 打开终端 构建 miniprogram_npm 文件夹 miniprogram_npm是基于node_modules文件夹构建的,确保先执行上面的第

    2024年02月11日
    浏览(113)
  • uniapp微信小程序引入vant组件库

    1、首先要有uniapp项目,根据vant官方文档使用yarn或npm安装依赖: 安装完依赖如下: 2、在uniapp项目根目录下(也可以指定目录)本案例在根目录下新建:wxcomponents文件夹 !!!!必须是wxcomponents文件夹! !!!!必须是wxcomponents文件夹! !!!!必须是wxcomponents文件夹! (原

    2024年02月16日
    浏览(83)
  • 微信小程序引入官方《评价组件》的一些坑点

    作为微信小程序开发者,多少有些想对其吐槽的冲动。文档是多,却混乱、自相矛盾等等。 这次遇到的坑就是官方的《评价组件》,原本引入该组件是为了增加用户体验,结果却不如人意。 按官方文档引入组件(代码层面的引入,公众管理平台添加插件),启动开发工具,

    2024年02月22日
    浏览(63)
  • 【实战】前端必会 —— 微信小程序引入背景图

    wxss中直接引用本地图片会报错: 使用本地图片的话,需要在行内样式中引用 ,外部wxss只能引用线上图片(需要上传服务器后引用) tips:数据量小的话这里建议使用小程序自带的云存储, 续费说明 | 微信开放文档 背景图片既可以直接在最外层view使用background,也可以在re

    2024年02月17日
    浏览(80)
  • 微信小程序在TS模板下引入TDesign组件

    TDesign 是腾讯官方出品的一款微信小程序组件库。本文介绍如何在新建ts空白模板下引入TDesign库 新建一个空白项目,这里可以选择TS-基础模板 新建项目目录结构如图所示: 注意这里其实小程序的文件都存放在miniprogram文件夹下,因此我们后续安装npm包时需要进入miniprogram文件

    2024年02月03日
    浏览(53)
  • uniapp 微信小程序 纯js文件中引入自定义modal组件(无需所有页面手动引入组件)

    工具:uniapp 开发端:微信小程序 其他:uview 2.0 场景:接口请求统一封装中需要对接口返回token失效的情况做modal显示,引导用户退出小程序,我的想法是将modal的默认confirm按钮替换成小程序自带的退出方法: 这样用户点击确认按钮就能退出小程序,因此uni.showModel不满足需求

    2024年02月09日
    浏览(67)
  • 微信小程序WeUI项目weui-miniprogram如何运行起来?

    微信小程序WeUI项目weui-miniprogram如何运行起来? 解决方法: 1、下载 https://github.com/wechat-miniprogram/weui-miniprogram 2、在项目根目录weui-miniprogram-master执行以下命令安装依赖: npm install 3、继续执行编译命令: npm run dev 生成miniprogram_dist目录如何使用可参考: 微信小程序WeUI项目weui-m

    2024年01月20日
    浏览(62)
  • [微信小程序] 项目引入vant组件库 npm构建问题 避坑

     按照Vant Weapp官网的快速上手,构建npm时发现报错 问题:package.json 未找到 原因:没有初始化npm,所以没生成package.json,npm构建时需要此文件,所以报此错误 解决:在项目根目录里执行 “ npm init ” 再次构建npm,还会报错,此时按照vant官方文档 再次执行即可: 如果还是没有

    2024年02月17日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包