小程序weui_小程序weui单选多选框 - CSDN
精华内容
参与话题
  • 小程序weui组件使用

    2020-06-11 11:38:25
    可以通过npm方式下载构建,npm包名为weui-miniprogram 命令行: npm i weui-miniprogram 如果没有npm前去http://nodejs.cn官网下载 也可以通过微信平台官网文档 ...
         一. 引入下载组件 
    
    1. 可以通过npm方式下载构建,npm包名为weui-miniprogram
      命令行: npm i weui-miniprogram 如果没有npm前去http://nodejs.cn官网下载

    2. 也可以通过微信平台官网文档 https://developers.weixin.qq.com/miniprogram/dev/extended/weui/quickstart.html 去下载想要的组件

      二. 使用组件
      

    示例: 弹窗组件
    假设组件的目录为weui-miniprogram
    3. 首先要在全局的app.wxss里面引入weui.wxss
    @import ‘/weui-miniprogram/src/weui-wxss/dist/style/weui.wxss’;
    .choose_style{} /可改组件样式/
    4. 在当前页面的index. json 文件 usingComponents 字段中配置
    {
    “usingComponents”: {
    “mp-dialog”: “…/weui-miniprogram/miniprogram_dist/components/dialog/dialog”
    }
    }
    5. 在对应页面的 index.wxml 中直接使用该组件

    	<mp-dialog ext-class="choose_style" title="test" show="{{dialogShow}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}">
    		<view>test content</view>
       </mp-dialog>
    
    1. 对应页面的index.js中
      Page({
      data: {
      dialogShow: false,
      buttons: [{text: ‘取消’}, {text: ‘确定’}]
      },
      openConfirm: function () {
      this.setData({
      dialogShow: true
      })
      },
      tapDialogButton(e) {
      this.setData({
      dialogShow: false
      })
      }
      });
    展开全文
  • 推荐微信小程序常用的几个UI组件库

    万次阅读 2019-06-21 19:20:37
    在微信小程序开发的过程中,自己不借助UI组件库开发出来的页面,不但要花费更多的时间,页面的美观度上也有一定差距。 所以在这里我给大家推荐几个好看,常用的几个UI组件库。 WeUI WeUI 是微信官方出品的组件库...

      在微信小程序开发的过程中,自己不借助UI组件库开发出来的页面,不但要花费更多的时间,页面的美观度上也有一定差距。

      所以在这里我给大家推荐几个好看,常用的几个UI组件库。

    WeUI

    WeUI 是微信官方出品的组件库,它沿用了微信的视觉设计与交互设计,提供了各类原生组件的基础样式,风格简约大方。选用这一套组件库,可以让你的小程序与微信本身保持一致的界面风格。

                                                         

    官方组件库能够满足基础的界面需求,但是,如果你想要更加饱满的视觉,更加活泼的动效,恐怕 WeUI 就满足不了你的需要了。

    GitHub 地址:https://github.com/Tencent/weui

    ColorUI 组件库

    ColorUI 是由文晓港发布的高颜值组件库,侧重于视觉交互。比起 WeUI 的低调克制,ColorUI 色彩鲜亮,样式繁多。除了拥有非常丰富的原生组件的自定义样式,它还提供一些常见的页面元素,比如时间轴、步骤条、聊天页、模态窗口等等。

     

    ColorUI 给大家提供了高度自定义的组件,一些比较麻烦的样式,开发者只需调用其组件就能得以实现。不过,ColorUI 也不是万能的,比如,它尚未涉及购物类小程序所需的组件。

    GitHub 地址:https://github.com/weilanwl/ColorUI

    Vant 组件库演示

    Vant 是由有赞发布的,轻量的小程序 UI 组件库。如果你想制作一款电商、餐饮、外卖平台、票务预订等购物类小程序,选用 Vant 是较为合适的。为什么这么说呢?

    首先,我们来看「业务组件」这一块。可以看到,「商品卡片」与「提交订单栏」两个组件可以构成一个基本的「购物车」页面;而「商品卡片」与「商品导航」二者又可以组成一个简单的商店页面。

     

     

    对开发者非常友好,文档可以说是事无巨细了,而且在文档右侧,还可以预览样式哦。

    开发文档:https://youzan.github.io/vant-weapp/#/intro
    GitHub 地址:https://github.com/youzan/vant-weapp

                                                     

    iViewUI

    iViewUI 是由 TalkingData 发布的组件库。作为一款好用的组件库,布局、面板、列表、表单、顶部导航栏、底部导航栏等组件当然必不可少,那么 iViewUI 除了具备这些标配的组件,还有哪些亮点呢?

     

    iViewUI 同样有详细的文档,但是不支持网页预览,只能打开小程序预览。

    开发文档:https://weapp.iviewui.com/docs/guide/start
    GitHub 地址:https://github.com/TalkingData/iview-weapp

                                                  

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

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

    预览:

    这里写图片描述

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

    原文链接 :原文链接

    展开全文
  • 前言 前言: 因为小程序的api描述都比较简单,并没有wxml及wxss的描述,有的人可能会想小程序有没有一个UI库。类似于前端中的常见的UI库...结果当前是当前有的,它就是微信小程序官方推出的小程序UI库WeUI 简介 W...

    前言

    前言:
    因为小程序的api描述都比较简单,并没有wxml及wxss的描述,有的人可能会想小程序有没有一个UI库。类似于前端中的常见的UI库例如Bootstrap、MDUI(简称MD)、Semantic UI(简称Semantic )、uni-app、MUI、Element等等类似的框架UI库

    小程序UI库WeUI:
    结果当前是当前有的,它就是微信小程序官方推出的小程序UI库WeUI

    简介

    WeUI是什么?
    WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。在微信小程序的开发过程中,涉及到的前端复杂的样式界面的问题,就需要使用个UI框架,这样可以省去以后很多麻烦。
    WeUI作为一个开源的移动端UI框架,由于它是微信官方提供的对微信的兼容性没有太大问题,而且和各组件的样式和微信一样,能够很好地和微信融合在一起,给用户较好的体验。

    WeUI

    WeUI for小程序二维码:
    在这里插入图片描述
    WeUI for 小程序,也叫做weui-wxss,是写好的样式库,可以理解为之前的bootstrap。
    1)获取框架文件源码
    两种方式:去github代码托管平台下载WeUI库或者clone源码
    链接:https://github.com/Tencent/weui-wxss
    在这里插入图片描述
    (2)除了上述直接下载文件外,也可以通过git克隆源码到本地
    clone源码
    在这里插入图片描述
    (3)预览项目
    获取文件成功后,接下来首先在小程序开发工具导入项目,进行预览

    	步骤:打开微信开发者工具,点击导入项目,选择weui-wxss项目目录下的dist目录,接着点击导入,就可	以看到weui的预览了。
    

    (4)使用WeUI库开发
    了解了weui的预览方法,接下来就可以使用weui进行开发了。

    使用weui进行开发可以简单分为两个步骤
    ①导入weui.wxss文件→文件位置weui-wxss-master\dist\style\weui.wxss
    ②参照weui提供的例子使用weui组件
    (5)导入weui.wxss文件
    分析:因为weui.wxss是样式文件,所以导入需要在工程的样式文件进行导入,在这里 因为要在项目全局使用weui的,所以在项目根目录的app.wxss文件进行导入。
    步骤:在工程下创建style样式文件目录,把weui.wxss文件拷贝进去。接着,在app.wxss通过@import导入weui.wxss文件。
    引入样式文件weui.wxss:
    在这里插入图片描述
    (6)参照weui提供的例子使用weui组件
    在example目录找到对应组件的视图层代码和逻辑层代码,比如要使用的九宫格,就位 于example目录下的grid,可以直接拷贝使用里面的代码。
    仿照源码,复制相应代码即可,这样就可以简单的调用WeUI组件了
    补充说明:
    ①除了手机扫码,网页也可以浏览效果,官网:https://weui.io
    ②使用WeUI时,有时会出现错误日志,提示相关图标没有找到,把图标路径修改或者按照代码的图标路径放置图标文件即可。
    WeUI基础组件
    WeUI提供非常多的基础组件,列举如下:

    (1)表单组件
    button按钮、input输入框、list列表、slider滑块、Uploader 上传组件
    (2)基础组件
    article 文章、badge 徽章(小红点)、flex 布局、footer 脚注、gallery 画廊、grid九宫格、icons图标、loadmore加载更多、panel面板、preview表单预览、progress进度条
    (3)操作反馈
    actionSheet 弹出式菜单、dialog 对话框、msg 提示页、picker 选择器、toast 弹出式显示
    (4)导航相关
    navbar 导航栏、tabbar 选项栏
    (5)搜索相关
    searchbar搜索栏

    展开全文
  • WeUI for 小程序--使用教程

    万次阅读 多人点赞 2017-06-21 14:40:27
    weUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式...
  • WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。在微信小程序的开发过程中,涉及到的前端复杂的样式界面的问题,就需要使用个UI...
  • weui小程序中的使用

    千次阅读 2018-09-27 14:27:12
    第一次在小程序中使用weui,记录一下 先将weui.wxss引入到小程序项目的根路径,并且在app.wxss中引入:@import 'weui.wxss';    2.将weui下载下来,https://github.com/Tencent/weui-wxss,使用里面的dist/...
  • 目录 1 概述2 使用方法 2.1 安装2.2 开发 3 元素类型 3.1 Button3.2 Cell3.3 Dialog3.4 Progress3.5 Toast3.6 Msg Page3.7 Article3.8 ...WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官
  • 小程序WeUI使用教程(简单易懂)

    千次阅读 2020-09-22 16:19:26
    它最初是为了给在微信端页面提供一致的视觉体验而开发开源的一个样式库,后续随着小程序、企业微信等等的开放能力出现,WeUI也提供了小程序、企业微信等等的版本。我们将要介绍的,就是WeUI小程序版本。 2、使用...
  • 效果图 wxml代码 &lt;view class="page"&gt; &lt;view class="page__hd"&gt; &lt;view class="page__title"&gt;Panel&lt;...lt
  • 微信小程序里使用weui的正确打开方式

    万次阅读 多人点赞 2018-09-29 12:24:51
    自己写微信小程序,发现有weui这样的东西。第一次使用,网上搜到到用法是这样的: 到https://weui.io/#input查看例子,右键查看源码,然后再对照界面和源码使用。 但是这样看到的源码是网页版的,不是小程序风格的...
  • 概述:WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、...
  • WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。 在微信小程序的开发过程中,涉及到的前端复杂的样式界面的问题,就需要使用...
  • WeUI使用步骤

    万次阅读 2019-06-14 10:22:23
    可以将整个文件下载下来,将其中的dist文件夹导入到独立的小程序中作为参考如下图 注意:样式文件可直接引用dist/style/weui.wxss,或者单独引用dist/style/widget下的组件的wxss。 将style文件夹拷贝到小程序根...
  • weui 开发文档

    万次阅读 多人点赞 2020-03-04 16:50:39
    今天需要用到weui,这里记录一下开发文档地址 开发文档: https://github.com/Tencent/weui.js/blob/master/docs/README.md github: https://github.com/Tencent/weui.js 效果展示: https://weui.io ...
  • 1、在小程序根目录内,初始化npm npm init 2、执行命令安装 npm 包: npm install --save weui-miniprogram 3、安装完成后,在微信开发者工具中的菜单栏:工具 ------ 构建 npm : 4、在微信开发者工具中的右上...
  • 在开发微信公众号过程中,对于不熟悉前端的童鞋们来说, 明明引用了css文件,可以就是没有实际效果,瞬间懵逼 ...weui_btn weui_btn_mini weui_btn_default"&gt;按钮&lt;/a&gt; 实际上,应该是...
  • 微信小程序 WeUi.wxss

    千次阅读 2017-07-14 18:36:54
    微信小程序 WeUi.wxss
  • 微信小程序引入weui的操作

    千次阅读 2020-05-18 17:31:06
    在做微信小程序的时候,可能会使用到ui框架,https://github.com/Tencent/weui 通过这个GitHub 下载微信小程序的文档, 然后再你需要的页面中引入weui.wxss 使用@import 引入文件,然后直接用你想用的就可以了。...
  • WeUI for 小程序使用教程文档总结

    千次阅读 2018-09-26 15:41:54
    WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含按钮button、组件cell、弹框dialog、 进度条progress、 提示toast、文章article、...
1 2 3 4 5 ... 20
收藏数 4,660
精华内容 1,864
关键字:

小程序weui