精华内容
下载资源
问答
  • 微信小程序weui
    2022-09-16 10:59:18
    1. 引入:

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

    使用页面or组件xxx.json

    "usingComponents": {
         "mp-form": "weui-miniprogram/form/form"
      }
    
    1. wxml构建、
    <view class="add-from" mut-bind:tap="empty">
        <mp-form id="addform" ref="addform" rules="{{dynamicRules}}" models="{{formData}}">
            <view class="uni-forms-item" required name="membersOf">
                <label for="membersOf">关系</label>
                <input value="{{formData.membersOf}}" bindinput="handInputChange" type="text" id="membersOf" name="membersOf" placeholder="请输入关系" />
            </view>
            <view class="uni-forms-item" required label="姓名" name="name">
                <label for="name">姓名</label>
                <input value="{{formData.name}}" bindinput="handInputChange" type="nickname" id="name" name="name" placeholder="请输入关系人姓名" />
            </view>
            <view class="uni-forms-item" required label="手机号码" name="phone">
                <label for="phone">手机号码</label>
                <input value="{{formData.phone}}" bindinput="handInputChange" type="text" id="phone" name="phone" placeholder="请输入手机号码" />
            </view>
            <view class="uni-forms-item" required label="身份证号码" name="cardId">
                <label for="cardId">身份证号码</label>
                <input value="{{formData.cardId}}" bindinput="handInputChange" type="idcard" id="cardId" name="cardId" placeholder="请输入身份证号码"/>
            </view>
        </mp-form>
        <button bindtap="submitForm" class="form-submit" type="primary">确定</button>
    </view>
    
    1. js 部分
    import {getMembersOfFamily,addMembersOfFamily} from '../../../utils/api'
    import {checkIDCard} from '../../../utils/util'
    Page({
    
        /**
         * 页面的初始数据
         */
        data: {
            formData: {
                cardId: '',
                membersOf:'',
                name:'',
                phone:''
            },
            dynamicRules: [
                {
                    name: 'cardId',
                    rules: [{required: true, errorMessage: '请输入身份证号码'}, {
                        validator: (rule: AnyObject,value: string) => {
                            if(checkIDCard(value)) {
                                return rule.message
                            }
                        }, message: '身份证号码格式不正确'
                    }]
                },
                {
                    name: 'membersOf',
                    rules: [{required: true, errorMessage: '请输入所属关系'}, {maxLength: 10}]
                },
                {
                    name: 'name',
                    rules: [{required: true, errorMessage: '请输入所属姓名'}, {maxLength: 20}]
                },
                {
                    name: 'phone',
                    rules: [{required: true, errorMessage: '请输入所属手机号'},{mobile: true, message: '电话格式不对'}]
                }
            ]
        },
        // 简易双向数据绑定
        handInputChange (e:any) {
            this.setData({
                [`formData.${e.target.id}`]: e.detail.value
            })
        },
        submitForm () {
            this.selectComponent('#addform').validate((valid:Boolean, errors:any) => {
                if(valid) {
                    // 验证通过
                    return
                    addMembersOfFamily({
                        ...this.data.formData
                    }).then(res => {
                        if((res as AnyObject).code === 200) {
                            wx.showToast({
                                title: '新增成功',
                                icon: 'none'
                            })
                        
                            this.getMembers()
                        } else {
                            wx.showToast({
                                title: (res as AnyObject).msg,
                                icon: 'none'
                            })
                        }
                    })
                    
                } else {
                    const firstError = Object.keys(errors)
                    if(firstError.length) {
                        wx.showToast({
                            title: errors[firstError[0]].message,
                            icon: 'none'
                        })
                    }
                }
            })
        },
    
        onShow() {
            this.getMembers()
        }
    
    })
    
    更多相关内容
  • 之前上传过wxss后缀的样式表,今天把整个ui组件从github上拷贝下来方便大家下载,下载完直接用微信web开发者工具打开整个文件夹即可
  • 在做微信小程序的时候就想着找一个UI库,方便我们前端开发,然后查找资料,发现了这个WeUI特别适合放在微信小程序里。下面就简单的了解一下。 WeUI是一套跟微信原生的视觉体验类似的一套样式库,由微信官方设计团队...
  • weui微信团队自己出的sketch控件,里面都是最新的小程序控件,可直接添加到sketch里面使用。需要的自取。
  • :就是企鹅公司告诉你,你的小程序要和我微信要保持一个尿性,一样式的。  咋使呢?:把东西下载下来,怎么用呢,不然不白下了吗?网吧的两块钱不白花了吗?往下瞅 1.找到你下载的目录  注意是在【weui-wxss/dist/...
  • 微信小程序weui.wxss

    2018-12-05 08:36:28
    微信小程序weui.wxss,WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。
  • 微信小程序 || 拓展组件库weui的npm引入 1.首先项目中要先初始化npm得到 项目的命令行:npm init 1 2 2.然后会有一些默认配置,全程回车,最后会得到这3个文件 在这里插入图片描述 3.安装weui的依赖 npm i weui-...

    微信小程序 || 拓展组件库weui的npm引入

    1.首先项目中要先初始化npm得到

    项目的命令行:npm init

    .然后会有一些默认配置,全程回车,最后会得到这3个文件
    2.安装weui的依赖

    npm i weui-miniprogram -S --production
    

    3.然后再在开发者工具中:工具–构建npm 得到一个新的文件

    4.设置勾选:在这里插入图片描述

    5.app.wxss中引入组件的样式

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

    6.然后可以在页面中引入 dialog 弹窗组件

    首先在页面的 json 文件加入 usingComponents 配置字段

    {
      "usingComponents": {
       "mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"
      }
    }
    

    8.然后可以在对应页面的 wxml 中直接使用该组件

    <mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
        <view>test content</view>
    </mp-dialog>
    
    展开全文
  • 微信小程序 WeUI

    2017-03-28 14:25:14
    微信小程序UI,demo可以看效果,直接引入文件有样式
  • 微信小程序 weui.wxss

    2019-02-15 22:01:49
    微信小程序UI--集成weui.wxss源码。WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。
  • 微信小程序weui的使用

    2021-03-08 09:38:39
    WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各...

    官方文档

    一、前言

    WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

    二、下载

    1. git 下载:weui

    点击链接进入 GitHub ,进入下面的页面,点击 Code 选择方式进行下载。

    在这里插入图片描述

    下载好打开应该是这个样子的:
    使用:

    样式文件可直接引用dist/style/weui.wxss,或者单独引用dist/style/widget下的组件的wxss
    组件的wxml结构请看dist/example/下的组件

    在这里插入图片描述

    2. 官网按需下载:

    weui下载

    在这里插入图片描述

    勾选自己需要用到的组件,直接下载就可以,下载好放到自己的项目中就可以直接使用。非常方便,不需要下载其他额外组件文件。

    三、引入 weui.wxss

    1. 手动引入:
      将 dist/style/weui.wxss 下的 weui.wxss 样式文件复制到项目根目录下;
      在全局 app.wxss 中加入 @import “weui.wxss”,完成样式文件的引入
    /**app.wxss**/
    @import 'weui.wxss';
    page { ... }
    
    

    以下两种方式使用方法见官网就可以:

    1. useExtendedLib 扩展库 :useExtendedLib 扩展库
    {
      "useExtendedLib": {
        "weui": true
      }
    }
    
    
    1. npm构建:npm包名为 weui-miniprogram

    具体使用方式见:npm构建支持

    四、使用dist/example/下的组件

    在这里插入图片描述

    这个文件夹下的就是 WeUI 组件库的所有组件了,我们可以在 WeUI 上查看相关组件的样式展示,然后根据我们的具体需求来选择某个组件的使用。

    因为example 下的组件文件太多,我们不可能全都用到,因此不可能全部放到我们的小程序中,这样会导致我们的小程序体积会变大,所以我们要按需引入即可。

    比如,我们要在某个页面中用到button组件,我们就需要在这个页面的json文件中引入该组件:

    // index.json
      "usingComponents": {
        "botton": "../example/botton/botton"
      },
    
    

    五、示例代码

    使用一个组件的完整示例代码:Dialog组件

    // index.json
    {
      "usingComponents": {
        "mp-dialog": "../example/dialog/dialog"
      }
    }
    
    // index.wxml
    <mp-dialog title="弹窗" show="{{dialogShow}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}">
    	<view>提示内容</view>
    </mp-dialog>
    
    // index.js
    Page({
        data: {
            dialogShow: false,
            buttons: [{text: '取消'}, {text: '确定'}],
        },
        openConfirm: function () {
            this.setData({
                dialogShow: true
            })
        },
        tapDialogButton(e) {
            this.setData({
                dialogShow: false,
            })
        }
    });
    
    
    

    六、参考文档

    WeUI 官网:WeUI 官网
    WeUI 官网按需下载:WeUI 官网按需下载
    GitHub WeUI:GitHub WeUI
    微信小程序 npm 支持:微信小程序 npm 支持
    useExtendedLib 扩展库:useExtendedLib 扩展库

    参考博客:
    微信小程序之WeUI组件库的使用

    展开全文
  • WeUI组件库 更新微信开发者工具 (因为更新后的开发者工具有自带的终端,会使npm构建方法变得简单) 1)在微信开发者工具终端输入 npm init 然后一直回车 2)回车完毕后输入 npm install weui-miniprogram 然后等待...

    WeUI组件库

    更新微信开发者工具 (因为更新后的开发者工具有自带的终端,会使npm构建方法变得简单)

    1)在微信开发者工具终端输入 npm init 然后一直回车
    2)回车完毕后输入 npm install weui-miniprogram 然后等待安装

    安装成功后在微信开发者工具的上面点击工具下面的构建npm然后等待一会会弹出一个弹框显示构建成功,用了多少毫秒。这样就算构建成功

    接下来点击右上角详情→本地设置选择使用npm模块
    在这里插入图片描述

    接下来开始使用

    首先在app.wxss中导入WeUI样式

    (ps:如果没有动过新增的文件或文件夹路径应该跟我是一致的)
    在这里插入图片描述
    接下来在app.json中配置(我这里引用的是搜索组件)
    在这里插入图片描述
    然后在相应的页面中调用此组件的
    在这里插入图片描述
    在js中调用组件页面的方法

    在这里插入图片描述
    这样就算结束(谢谢观看,撒花撒花)

    展开全文
  • json { "usingComponents": {"mp-searchbar": "weui-miniprogram/searchbar/searchbar"}, "navigationBarTitleText": "搜索页面" } wxml <view class="page"> <view class="page__hd"> <view class="page__title">...
  • 微信小程序 weui mp-dialog组件

    千次阅读 2021-08-12 17:46:42
    html: <mp-dialog ext-class="dialog" show="{{dialogShow}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}"> <view> <image src="{{avatarurl}}" class="head_p">...
  • 微信小程序 WeUI 使用拓展组件tabs方法 注意:不能使用 引入useExtendedLib 扩展库 的方式,而是用npm构建的方式。 第一步:在项目根目录下打开终端。(我的是miniprogram) 第二步:终端里输入: npm i @...
  • 微信 weui. weui,复制到根目录下,再入aap.wxss里【】@import "weui.wxss",就可以直接调用了。微信官方 weui下载地址:https://github.com/weui/weui-wxss/ weui。自己备份在这里留用。
  • 微信小程序 WeUI 的轻量级补充
  • 微信小程序weUI 提交清空input框的值

    千次阅读 2021-12-13 09:50:35
    {rules}}" models="{{formData}}"> 当使用mp-form...姓名" > <input bindinput="formInputChange" model:value="{{name}}" data-field="name" class="weui-input" placeholder="请输入姓名"/> mp-cell> 手机号码" > ...
  • DialogDialog弹窗组件。示例代码:{"usingComponents": {"mp-dialog": "../components/dialog/dialog"}}Dialog对话框确认取消按钮只有确认按钮test contenttest content1Page({data: {dialogShow: false,...
  • 微信小程序weui导入项目的各种坑

    千次阅读 2022-01-20 10:05:28
    微信小程序使用weui,使用npm方法构建
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... <view class="weui-panel weui-panel_access"> ...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • 1.指定需要引入的扩展库 在小程序的根目录app.json中引入 2.在需要使用独立页面的json目录下添加对应所用到的组件的名字 3.这样就可以在该页面使用此组件
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... <view class="weui-cells__title">新消息提示跟摘要信息后...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • 微信小程序 WeUI form 表单验证

    千次阅读 2019-09-16 17:14:28
    因为公司项目需要,最近在调研微信小程序。小程序不仅提供了丰富的组件帮程序员快速构建app,而且还提供了一套微信风格的UI组件库 WeUI。 Form 表单数据验证是常用的场景之一。现在小程序中实现 form 表单验证有以下...
  • 但wx.showModal样式并不好看,在官方推荐的weui库上有一个Dialog弹窗组件可以实现和wx.showModal一样的效果并且样式要好看一点。 于是我打算直接用dialog组件,并且将之前的wx.showModal修改,封装一下让dialog组件...
  • 图片上传Uploader组件。示例代码:{"usingComponents": {"mp-uploader": "../components/uploader/uploader","mp-cells": "../components/cells/cells","mp-cell": "../components/cell/cell"},...
  • 按照官方说明, git clone https://github.com/wechat-miniprogram/weui-miniprogram 在windows主机下clone下来,按照上面说明进行编译操作,发现只能显示demo的主页,无法显示具体的组件,报各种组件不存在的BUG,...
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... <view class="weui-progress"> ... <view class="weui-...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • 微信小程序样式表提供给大家。11111111111111111111111111111111111
  • 效果图 微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程: ... ... <view class="weui-grids"> ... <navigator url="" class="...欢迎大家学习我的视频教程:微信小程序-WeUI界面布局设计入门到精通
  • Refs微信小程序weui元件库,Refs微信小程序weui元件库Refs微信小程序weui元件库Refs微信小程序weui元件库Refs微信小程序weui元件库Refs微信小程序weui元件库

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,092
精华内容 2,436
关键字:

微信小程序weui