精华内容
下载资源
问答
  • 微信小程序使用WeUI入门教程 在学习微信小程序过程中,很多组件的样式需要自己调整,且很多不是我们想要的样子。所以找到了WeUI这样的扩展组件库,预览了组件库,真的非常nice! 但是找不到怎么去引用。网上资料又很...

    微信小程序使用WeUI入门教程

    在学习微信小程序过程中,很多组件的样式需要自己调整,且很多不是我们想要的样子。所以找到了WeUI这样的扩展组件库,预览了组件库,真的非常nice!

    但是找不到怎么去引用。网上资料又很少,最后还是要依赖官方文档去学习,下面把如何入使用总结一下。

    这是一套基于样式库weui-wxss开发的小程序扩展组件库,同微信原生视觉体验一致的UI组件库,由微信官方设计团队和小程序团队为微信小程序量身设计,令用户的使用感知更加统一。

    1. 学习参考

    WeUI样式库展示https://weui.io/

    微信官方WeUI相关文档https://wechat-miniprogram.github.io/weui/docs/

    WeUI-wxss 项目地址https://github.com/Tencent/weui-wxss

    直奔主题,如何使用!

    直接预览WeUI-wxss示例代码,直接引用上手~

    打开[WeUI-wxss](https://github.com/Tencent/weui-wxss)项目地址,可以看到有一个dist目录,这个目录就是WeUI示例代码,下载下来,用小程序打开该dist目录,一定是该目录哦!

    然后,想用什么直接copy吧!

    在这里插入图片描述

    2.NodeJs初始化

    这里如果没有安装NodeJs的自行安装。

    确保有NodeJs,在你小程序项目根目录,执行以下命令,然后一路回车键即可安装完成。

    npm init
    

    执行完以后,会在项目根目录看到package.json文件

    在这里插入图片描述

    3.安装WeUI组件库

    项目根目录执行以下命令:

    npm install --save weui-miniprogram --production
    

    会在根目录出现node_modules目录

    4.配置

    4.1 构建npm

    打开微信小程序开发工具,点击顶部菜单【工具】–【构建npm】,构建完成后会在项目根目录生成miniprogram_npm文件夹,如下图:

    在这里插入图片描述

    4.2 支持npm

    点击小程序开发工具右上角【详情】–【本地设置】,勾选上【使用npm模块】,这里有个坑需要注意一下,记得把基准库选择最新的。

    在这里插入图片描述

    5.项目使用WeUI

    在小程序根目录app.wxss中引入样式文件(按照自己的路径引入)

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

    在需要页面的json文件引入需要的组件,例如:

    "usingComponents": {
        "mp-form_page": "/miniprogram_npm/weui-miniprogram/form/form_page"
      }
    

    在对应的wxml页面就可以使用了,示例

    <page-meta root-font-size="system"/>
    <view class="page" data-weui-theme="{{theme}}">
    	<view class="weui-form">
    		<view class="weui-form__text-area">
    			<h2 class="weui-form__title">表单结构</h2>
    			<view class="weui-form__desc">展示表单页面的信息结构样式, 分别由头部区域/控件区域/提示区域/操作区域和底部信息区域组成。</view>
    		</view>
    		<view class="weui-form__control-area">
    			<view class="weui-cells__group weui-cells__group_form">
    				<view class="weui-cells__title">表单组标题</view>
    				<view class="weui-cells weui-cells_form">
    					<view class="weui-cell weui-cell_active">
    						<view class="weui-cell__hd"><label class="weui-label">微信号</label></view>
    						<view class="weui-cell__bd">
    							<input class="weui-input" placeholder="填写本人微信号" placeholder-class="weui-input__placeholder" />
    						</view>
    					</view>
    					<view class="weui-cell weui-cell_active">
    						<view class="weui-cell__hd">
                                <label class="weui-label">昵称</label>
                            </view>
    						<view class="weui-cell__bd">
    							<input class="weui-input" placeholder="填写本人微信号的昵称" placeholder-class="weui-input__placeholder" />
    						</view>
    					</view>
    					<view class="weui-cell weui-cell_active">
    						<view class="weui-cell__hd">
                                <label class="weui-label">联系电话</label>
                            </view>
    						<view class="weui-cell__bd">
    							<input class="weui-input" placeholder="填写绑定的电话号码" type="number" placeholder-class="weui-input__placeholder" />
    						</view>
    					</view>
    				</view>
    			</view>
    		</view>
    		<view class="weui-form__opr-area">
    			<a aria-role="button" class="weui-btn weui-btn_primary">确定</a>
    		</view>
    	</view>
    </view>
    
    展开全文
  • 微信小程序使用weui设计界面

    千次阅读 2020-03-09 22:43:25
    微信小程序使用weui设计界面 刚入门微信小程序开发,使用微信web开发者工具,对界面的设计有时会有按钮等的位置大小不好设置,但是微信web开发者工具有一个很好的工具是weuiWeUI 是一套同微信原生视觉体验一致的...

    微信小程序使用weui设计界面

    刚入门微信小程序开发,使用微信web开发者工具,对界面的设计有时会有按钮等的位置大小不好设置,但是微信web开发者工具有一个很好的工具是weui,WeUI 是一套同微信原生视觉体验一致的基础样式库,为微信 Web 开发量身设计,可以令用户的使用感知更加统一,包含button、cell、dialog、toast、article、icon等各式元素。weui 我们只需要他的样式,引入微信UI库即可,对weui的内容可以在官网上看到很详细的介绍,在使用时需要对其中的代码进行修改,下面是我的小程序中对基础组建panel中图文组合列表的使用:

    Marker.wxml

    <view class="page">
    
        <text class="t1">---采收记录---</text>
    
        <view class="weui-panel weui-panel_access">
    
            <view class="weui-panel__bd">
    
                    <navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
    
                        <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
    
                            <image class="weui-media-box__thumb" src="/image/icon20.jpg"></image>
    
                        </view>
    
                        <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
    
                            <view class="weui-media-box__title">名称</view>
    
                            <view class="weui-media-box__desc">编号: 日期: 可采收数量: 单价: </view>
    
                        </view>
    
                    </navigator>
    
                    <navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
    
                        <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
    
                            <image class="weui-media-box__thumb" src="/image/icon20.jpg"></image>
    
                        </view>
    
                        <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
    
                            <view class="weui-media-box__title">名称</view>
    
                            <view class="weui-media-box__desc">编号: 日期: 可采收数量: 单价: </view>
    
                        </view>
    
                    </navigator>
    
                    <navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
    
                        <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
    
                            <image class="weui-media-box__thumb" src="/image/icon20.jpg"></image>
    
                        </view>
    
                        <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
    
                            <view class="weui-media-box__title">名称</view>
    
                            <view class="weui-media-box__desc">编号: 日期: 可采收数量: 单价: </view>
    
                        </view>
    
                    </navigator>
    
                <navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
    
                        <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
    
                            <image class="weui-media-box__thumb" src="/image/icon20.jpg"></image>
    
                        </view>
    
                        <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
    
                            <view class="weui-media-box__title">名称</view>
    
                            <view class="weui-media-box__desc">编号: 日期: 可采收数量: 单价: </view>
    
                        </view>
    
                    </navigator>
    
                <navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
    
                        <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
    
                            <image class="weui-media-box__thumb" src="/image/icon20.jpg"></image>
    
                        </view>
    
                        <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
    
                            <view class="weui-media-box__title">名称</view>
    
                            <view class="weui-media-box__desc">编号: 日期: 可采收数量: 单价: </view>
    
                        </view>
    
                    </navigator>
    
            </view>
    
            <view class="weui-panel__ft">
    
                <view class="weui-cell weui-cell_access weui-cell_link">
    
                <view class="weui-cell__bd">查看更多</view>
    
                <view class="weui-cell__ft weui-cell__ft_in-access"></view>
    
                </view>
    
            </view>
    
        </view>
    
    </view>
    
    

    在这里插入图片描述

    展开全文
  • 微信小程序使用weui样式框架

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

    WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
    以下内容是纯UI库,如果想使用逻辑封装版本,请看小程序组件库 - WeUIWEUI的组件库

    这篇文章只介绍样式如何引入↓↓↓

    1. github下载:weui-wxss

    2. 将dist文件导入到微信开发者工具

    在这里插入图片描述* 项目
    3.看到这个界面就说明你git拉下来的项目可以使用的
    在这里插入图片描述
    进入到这里你就可以看到weui的所有组件了,建议保存这个项目,方便你去找到你所需要的样式

    4.把weui.wxss复制到你的项目中
    在这里插入图片描述
    5.在你的项目中引入weui.wxss
    在这里插入图片描述
    6.将你需要的html标签复制到自己到项目中
    在这里插入图片描述

    展开全文
  • 微信新版本通过useExtendedLib引入即可,不用使用npm构建 1、引入weui 在app.json页面,设置"weui":true { "pages": [ "pages/index/index", "pages/login/index" ], "window": { "backgroundTextStyle": ...

    微信新版本通过useExtendedLib引入即可,不用使用npm构建

    1、引入weui

    在app.json页面,设置 "weui": true 

    {
      "pages": [
        "pages/index/index",
        "pages/login/index"
      ],
      "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black"
      },
      "style": "v2",
      "sitemapLocation": "sitemap.json",
      "useExtendedLib": {
        "weui": true
      }
    }

    2、在要使用组件的.json页面注册组件,这里使用了徽章组件

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

    3、在页面的.wxml页面使用组件

    <mp-badge content="8"></mp-badge>

    效果如下:

    展开全文
  • 最近在做微信小程序,引入weui的时候踩坑了好久,这里记录一下遇到的问题。 微信官方文档给了两种weui引入方式: 通过useExtendedLib 扩展库的方式引入,这种方式引入的组件将不会计入代码包大小。 可以通过npm...
  • 最近接触了微信小程序,一个项目中需要在微信小程序做电费查询模块,前端采用WeUI设计。 方法:单列选择器 页面效果: 图1.未选择时 图2.点击进行选择选择时 图3.点击进行选择选择后 index.wxml 文件: <!-- ...
  • WeUI 是一套同微信原生视觉体验一致的基础样式库,由于功能需求这里直接使用搜索组件Searchbar 1,引入组件 可以通过npm方式下载构建,npm包名为weui-miniprogram 也可以通过页面按需下载 2,将下载的压缩包解压,...
  • 在一个微信小程序中想要用到两种不同的tabbar样式,可以使用微信小程序自带插件tabbar 首先在页面json文件中引入 tabbar { "navigationBarTitleText": "个人中心", "usingComponents": { "mp-tabbar": "/...
  • 微信小程序使用weui组件的方式

    千次阅读 2019-03-25 20:53:17
    Github 地址:https://github.com/weui/weui 首先下载项目压缩包,解压后目录如下: dist和src目录结构一样,dist里面的文件内容和src一样(估计),相比src里面的文件删除了空格和空行等 使用方式: 第一步:将...
  • 网上有很多类似的说法,都是用npm构建的方式,... "weui": true } 然后在你要用的页面json文件里,引入对应你需要用的组件 { "usingComponents": { "mp-badge": "weui-miniprogram/badge/badge", "mp-form": "we
  • 解决安装扩展能力组件的坑:https://www.cnblogs.com/panda-programmer/p/13138588.html
  • 微信小程序weui使用

    千次阅读 2019-05-11 16:25:38
    微信小程序weui使用
  • 主要介绍了微信小程序weui用法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 微信小程序 npm weui

    2019-09-26 16:50:08
    微信小程序使用npm安装腾讯weui包 分步骤完成安装,并在微信开发工具中设置NPM。
  • 微信小程序引入weui组件

    千次阅读 2017-05-08 15:07:21
    微信小程序引入weui 组件
  • WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。 在微信小程序的开发过程中,涉及到的前端复杂的样式界面的问题,就需要使用个UI...
  • 开发工具直接新增项目即可,小程序示例weui 真实有效,真机测试过
  • WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。 在微信小程序的开发过程中,涉及到的前端复杂的样式界面的问题,就需要使用...
  • 查看weui是否是想要的表单样式,样式大致为: 下载weui ... 引入weui (1)将src->style->weui.wxss复制到自己项目...(3)在界面中使用相应的class就可以了呢 因为不知道对应的class属性是什么,可以将查看下载的文件
  • 原标题:微信小程序设计weui框架weui-wxss是微信官方提供的ui框架,用起来也很方便(copy)。下载地址:https://github.com/weui/weui-wxss第一步:需要把下载的内容copy到项目中,主要是dist目录下的style目录下的...
  • 微信小程序原生WEUI网页开发样式库 psd&sketch下载 PSD、主题包、小应用UI、小程序、微信psd、微信UI界面、微信UI设计、微信小应用psd、微信设计流程、微信设计规范

空空如也

空空如也

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

微信小程序使用weui

微信小程序 订阅