精华内容
下载资源
问答
  • 微信小程序引入WeUI组件库并使用组件
    千次阅读
    2020-09-27 18:00:06

    第一种方法:

    一、通过npm方式下载构建,npm包名为 weui-miniprogram

    1、进入小程序项目根目录,执行命令 npm init 创建 package.json 文件

    注意:一开始是没有的 package.json 文件的,就是在这里踩的坑...

    2、在小程序 package.json 所在的目录中执行命令安装 npm 包,安装命令:

    npm install weui-miniprogram

    注意:此处要求参与构建 npm 的 package.json 需要在 project.config.json 定义的 miniprogramRoot 之内。

    3、点击开发者工具中的菜单栏:工具 --> 构建 npm

    4、勾选“使用 npm 模块”选项

    二、WeUI组件的使用

    1、首先要在 app.wxss 里面引入 weui.wxss

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

    2、在使用组件的页面的 json 文件加入 usingComponents 配置字段,例如弹窗组件

    {
      "usingComponents": {
        "mp-dialog": "../../miniprogram_npm/weui-miniprogram/dialog/dialog"
        // 注意:路径与组件包在项目的位置有关
      }
    }

    3、在对应页面的 wxml 中直接使用该组件

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

    操作完毕。

    ------------------------------分割线-----------------------------

    第二种方法:

    有小伙伴发现WeUi 新版本的使用更简单,更新一下。(我没有试过,xdm可以试试)

    1. 微信基础库在2.2.1 以上(包含)可以直接在app.json 里面配置就可以

    //  app.json
    {
      "useExtendedLib": {
        "weui": true
      }
    }

    2. 在使用组件的页面的 json 文件加入 usingComponents 配置字段

    {
      "usingComponents": {
        "mp-badge": "weui-miniprogram/badge/badge"
      }
    }

    操作完毕。

    上面第二种方法已验证可行,推荐使用第二种方法。

    2021.10.28

    更多相关内容
  • 引入weui (1)将src->style->weui.wxss复制到自己项目里 (2)在app.wxss文件中顶部加上如下代码 /* 这里的里放的是绝对路径,加入把文件放到了项目文件->utils文件夹中这里就是utils/weui.wxss */ @import weui...
  • 微信小程序 引入 WeUI

    2021-01-15 12:26:22
    2.win+r,输入cmd,打开终端,然后进入刚才所创建的文件中,同时使用小程序开发工具打开刚才创建的项目 3.终端中输入npm init(我这里都是快速回车默认选择了),这样项目中会出现一个node_modules的文件 4.继续...

    1.创建一个新的工程

     

    2.win+r,输入cmd,打开终端,然后进入刚才所创建的文件中,同时使用小程序开发工具打开刚才创建的项目

    3.终端中输入 npm init(我这里都是快速回车默认选择了),这样项目中会出现一个node_modules的文件

    4.继续输入npm i

    5.安装插件weui,输入npm i weui-miniprogram(可能会失败  可以改用 npm i weui-miniprogram -S --production)

     

    6.开发者工具上选择工具-npm,项目中多了一个miniprogram_npm的文件夹

    7.app.wss中引入weui.wxss  @import './miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

    8.创建一个页面,index.json中引入 

        "mp-dialog": "weui-miniprogram/dialog/dialog"

     

    index.wxml文件中添加

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

     

     

    9.保存编译

     

    错误提示:不知道为啥,按照步骤下来也是会出现报错 

    报错["usingComponents"]["mp-dialog"] 未找到

    "mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"改为"mp-dialog": "weui-miniprogram/dialog/dialog"

    解决方法 cmd中敲入 npm i weui-miniprogram -S --production 然后再重新构建npm

     

     

    展开全文
  • 微信小程序引入weui

    2020-04-28 17:19:32
    下载程序代码,解压后可以看到如下目录: 将dist导入微信开发者工具 删除app.wxss下内容加入@import ‘/style/weui.wxss’; /**app.wxss**/ @import '/style/weui.wxss'; .container { height: ...
    1. 在GitHub上https://github.com/hyy520/weui-wxss-master
      下载程序代码,解压后可以看到如下目录:
      在这里插入图片描述
    2. 将dist导入微信开发者工具
      在这里插入图片描述
    3. 删除app.wxss下内容加入@import ‘/style/weui.wxss’;
    /**app.wxss**/
    @import '/style/weui.wxss';
    
    .container {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 200rpx 0;
      box-sizing: border-box;
    } 
    
    1. 创建pages文件夹穿件index文件夹,然后开始编写代码,app.js添加路径进行编译测试
      在这里插入图片描述
    展开全文
  • 微信小程序引入WeUI组件库 本章选择官方引入组件的方式为第一种 通过npm方式(第二种)引入WeUI通道 第一步(引入WeUI库) 第二步(组件代码) 第三步(注册组件) 第四步(看效果)

    微信小程序引入WeUI组件库(详细成功案例,带图)

    在这里插入图片描述
    本章选择官方引入组件库的方式为第一种
    通过npm方式(第二种)引入WeUI通道

    第一步(引入WeUI库)
    备注:
    1.通过该方式引入,可省略import样式库
    2.第一步为最重要的一步,官方文档看不到的一步【快速上手
    在这里插入图片描述

    第二步(页面wxml文件,写组件代码)
    在这里插入图片描述

    第三步(页面json文件,注册组件)
    在这里插入图片描述

    第四步(看效果)
    在这里插入图片描述

    总结:极力推荐本章方法,方便快捷简单易上手,喜欢的请点赞!!!


    官网正确打开姿势
    在这里插入图片描述

    展开全文
  • 微信小程序 引用 weui 问题合集

    千次阅读 2022-04-15 15:09:31
    微信小程序如何引入 weui # 1. npm 初始化 npm init -y # 2. npm 安装 weui npm install weui-miniprogram --production # 3. 编译 NPM 包生成 miniprogram_npm,我的小程序开发工具版本是 RC 1.05.2203251 - 左上...
  • 微信小程序引入WEui

    2021-05-25 16:14:59
    首先要在 app.wxss 里面引入 weui.wxss @import 'miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss'; 5、 在页面的 json 文件加入 usingComponents 配置字段 { "usingComponents
  • 微信小程序引入weui的操作

    千次阅读 2018-10-23 11:51:57
    在做微信小程序的时候,可能会使用到ui框架,https://github.com/Tencent/weui 通过这个GitHub 下载微信小程序的文档, 然后再你需要的页面中引入weui.wxss 使用@import 引入文件,然后直接用你想用的就可以了。...
  • 微信小程序调用weUI

    2022-01-25 16:28:27
    虽然微信小程序开发工具的目录里面也有一个node.exe,但是不一样的,还是要重新下一个。(这里也浪费我不少时间,一直把那个node.exe的路径加入环境变量,结果根本不一个东西) 2、安装weui 进入项目目录下,打开...
  • WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。 在微信小程序的开发过程中,涉及到的前端复杂的样式界面的问题,就需要使用个UI...
  • 微信小程序 - weui引入使用方法

    千次阅读 2020-03-11 11:02:52
    查看weui是否是想要的表单样式,样式大致为: ... 引入weui (1)将src->style->weui.wxss复制到自己项目的最外层文件夹中 (2)在app.wxss文件中顶部加上如下代码 /* 这里的""里...
  • 微信小程序引入weui组件

    千次阅读 2017-05-08 15:07:21
    微信小程序引入weui 组件
  • 在做微信小程序的时候就想着找一个UI库,方便我们前端开发,然后查找资料,发现了这个WeUI特别适合放在微信小程序里。下面就简单的了解一下。 WeUI是一套跟微信原生的视觉体验类似的一套样式库,由微信官方设计团队...
  • 微信官方文档给了两种weui引入方式: 通过useExtendedLib 扩展库的方式引入,这种方式引入的组件将不会计入...第一步 进入你的小程序根目录下(带app.json的目录)初始化npm 这步的意思是让当前文件夹以node_modu...
  • 如何在小程序引入我们需要的WeUI组件库?下面我们将通过npm的方式下载构建,只要按照以下几个步骤操作即可完成!
  • 微信小程序使用WeUI入门教程

    万次阅读 2021-09-26 10:12:45
    微信小程序使用WeUI入门教程 在学习微信小程序过程中,很多组件的样式需要自己调整,且很多不是我们想要的样子。所以找到了WeUI这样的扩展组件库,预览了组件库,真的非常nice! 但是找不到怎么去引用。网上资料又很...
  • 文章目录导入weui.wxss出现的问题weui.wxss部分样式不显示问题 Demo采用了npm导入包的方式,虽然会占用包体积,但是版本稳定,利于操作。 导入weui.wxss出现的问题 解决方法: 拷贝/miniprogram/miniprogram_npm/...
  • 网上有很多类似的说法,都是用npm构建的方式,但是不知道你们会...然后在你要用的页面json文件里,引入对应你需要用的组件 { "usingComponents": { "mp-badge": "weui-miniprogram/badge/badge", "mp-form": "we
  • 1. 在微信小程序的根目录新建一个weui.wxss的文件 2. 将https://raw.githubusercontent.com/Tencent/weui-wxss/master/dist/style/weui.wxss这个网址的内容全部复制到刚刚创建的weui.wxss文件中并保存 3. 在...
  • 小程序全局配置文件app.json中以扩展库的形式引入WeUI,相当于引入了对应扩展库最新版本的npm包,同时不占用小程序的包体积。 "useExtendedLib": { "weui": true }, 在页面配置中指定使用的组件 在需要使用WeUI...
  • 微信小程序weui的引用及使用说明

    千次阅读 2019-01-11 09:28:56
    WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、progress、toast、article、actionsheet、icon等各式...
  • 26.微信小程序WeUI框架)

    千次阅读 2019-11-30 09:18:27
    微信小程序WeUI框架) 前言 前言: 因为小程序的api描述都比较简单,并没有wxml及wxss的描述,有的人可能会想小程序有没有一个UI库。类似于前端中的常见的UI库例如Bootstrap、MDUI(简称MD)、Semantic UI(简称...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,599
精华内容 639
关键字:

微信小程序引入weui

微信小程序 订阅