精华内容
下载资源
问答
  • 之前上传过wxss后缀的样式表,今天把整个ui组件从github上拷贝下来方便大家下载,下载完直接用微信web开发者工具打开整个文件夹即可
  • 1.下载为小程序设计的weui组件, 2.在开发者工具中打开dist目录,而不是整个目录, 在开发者工具中就可以预览weui组件的示例了。   如果想在自己项目中引用weui组件,需要如下步骤: 1. 打开weui-wxss-master...

    浏览器搜索 :https://github.com/Tencent/weui-wxss/

    1.下载为小程序设计的weui组件,

    2.在开发者工具中打开dist目录,而不是整个目录, 在开发者工具中就可以预览weui组件的示例了。

     

    如果想在自己项目中引用weui组件,需要如下步骤:

    1. 打开weui-wxss-master目录 --> dist目录 --> style目录 -->找到 weui.wxss文件,(或者是 weui-wxss-master目录--> src目录 -->style目录-->找到weui.wxss文件)

    2.把 weui.wxss文件复制到自己的根目录下,

    3.在开发者工具中,打开app.wxss文件,引入weui.wxss,(在app.wxss文件头部写上代码 :@import 'weui.wxss';),引入组件就完成了。

    在自己的项目中就可以使用weui组件了。

    (引用结果,如下图)

    附(百度经验) https://jingyan.baidu.com/article/d45ad1485dc09469542b804d.html

    展开全文
  • 微信小程序官方链接: https://developers.weixin.qq.com/miniprogram/dev/extended/weui/quickstart.html 这里面的示例代码需要npm安装之后使用,不能直接复制,现在有个简单的方法,不需要npm安装直接使用,ctrl ...

    首先下载weui-wxss

    下载地址:

    https://github.com/Tencent/weui-wxss 
    

    复制 dist ------ style ------ weui.wxss 这个文件到根目录下面

    在这里插入图片描述

    在app.wxss里引入

    	@import 'weui.wxss';
    

    在这里插入图片描述

    组件全部例子都在 dist ------ example 这个文件夹里

    在app.json里新建

    	"pages/home/home",
    

    在dist ------ example 中找一个想看的例子,把js、wxss、wxml代码复制到 home 里,效果:

    在这里插入图片描述

    展开全文
  • 微信小程序 WeUI 组件使用教程

    万次阅读 2018-03-20 09:55:43
    预览: 下载地址:https://github.com/Tencent/weui-wxss 最后:在项目中使用weui的样式!!!- 原文链接 :原文链接

    预览:

    这里写图片描述

    下载地址:https://github.com/Tencent/weui-wxss
    这里写图片描述
    这里写图片描述
    最后:在项目中使用weui的样式!!!-

    原文链接 :原文链接

    展开全文
  • 错误解读 …/components/cells/cells" 未找到 很明显插件导入失败,只需要更换导入... "mp-icon": "weui-miniprogram/icon/icon", "mp-cells": "../components/cells/cells", "mp-cell": "../components/cell/cell

    错误解读

    …/components/cells/cells" 未找到
    很明显插件导入失败,只需要更换导入方式即可

    • 错误示范
    	{
      "navigationBarTitleText": "确认订单",
      "usingComponents": {
        "mp-icon": "weui-miniprogram/icon/icon",
        "mp-cells": "../components/cells/cells",
        "mp-cell": "../components/cell/cell",
        "choose-number" : "/component/choose-number/chooseNumber"
      }
    }
    

    此时就会报错,xxxx未找到

    正确的引入方式是:

    {
      "navigationBarTitleText": "确认订单",
      "usingComponents": {
        "mp-icon": "weui-miniprogram/icon/icon",
        "mp-cells": "/miniprogram_npm/weui-miniprogram/cells/cells",
        "mp-cell": "/miniprogram_npm/weui-miniprogram/cell/cell",
        "choose-number" : "/component/choose-number/chooseNumber"
      }
    }
    

    把 ../components 改为 /miniprogram_npm/weui-miniprogram

    展开全文
  • 大家需要下载微信小程序weUI组件样式表的,可以自行去github上搜索weui.wxss,有个4K多star的就是完整的,直接复制下来就行,我这个就是从那复制的,如果不好搜索的也可以在我这里下载
  • NavigationNavigation是小程序的顶部导航组件,当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏。示例代码:{"usingComponents": {"mp-navigation-bar": "../components/navigation-bar/...
  • 微信小程序 WeUI 使用拓展组件tabs方法 注意:不能使用 引入useExtendedLib 扩展库 的方式,而是用npm构建的方式。 第一步:在项目根目录下打开终端。(我的是miniprogram) 第二步:终端里输入: npm i @...
  • DialogDialog弹窗组件。示例代码:{"usingComponents": {"mp-dialog": "../components/dialog/dialog"}}Dialog对话框确认取消按钮只有确认按钮test contenttest content1Page({data: {dialogShow: false,...
  • 微信小程序 weui-toast 无样式 首先在github上找到weui.wxss:weui才能进行下一步吧。 下载完成将weui.wxss放入小程序目录文件(可以与app.wxss同级) 在app.wxss 引入 weui.wxss: @import "./weui.wxss"; 在需要...
  • 微信小程序引入weui组件

    千次阅读 2017-05-08 15:07:21
    微信小程序引入weui 组件
  • 微信小程序 WeUI form 表单验证

    千次阅读 2019-09-16 17:14:28
    因为公司项目需要,最近在调研微信小程序。小程序不仅提供了丰富的组件帮程序员快速构建app,而且还提供了一套微信风格的UI组件WeUI。 Form 表单数据验证是常用的场景之一。现在小程序中实现 form 表单验证有以下...
  • @import '../static/weui-miniprogram/weui-wxss/dist/style/weui.wxss'; 三、引入组件 (home.json) { "navigationBarTitleText": "嗯嗯", //引入 "usingComponents": { "mp-searchbar": "../.
  • 效果图 wxml代码 <view class="page"> <view class="page__hd"> <view class="page__title">...按钮,WeUI采用
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... <view class="weui-panel weui-panel_access"> ...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... <view class="weui-cells__title">带说明的列表项 ...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • 效果图 wxml代码 &lt;view class="page"&gt; &lt;view class="page__hd"&gt; &lt;view class="page__title"&gt;Uploader&...上传组件&
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... <view class="weui-flex"> ... <view class="weui-flex__item...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: https://edu.csdn.net/topic/huangjuhua ...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... <view class="weui-footer"> ... <view class="weui-footer__...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... <view class="weui-progress"> ... <view class="weui-...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: https://edu.csdn.net/topic/huangjuhua ...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... <view class="weui-form-preview"> ... <view class="weui-...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... <view class="weui-grids"> ... <navigator url="" class="...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 451
精华内容 180
关键字:

微信小程序weui组件

微信小程序 订阅