微信小程序引入WeUI

WeUI 为微信小程序量身设计的UI库

一、前言

    在做微信小程序的时候就想着找一个UI库，方便我们前端开发，然后查找资料，发现了这个WeUI特别适合放在微信小程序里。下面就简单的了解一下。
    WeUI是一套跟微信原生的视觉体验类似的一套样式库，由微信官方设计团队为微信内网页和小程序设计的，让用户视觉更加统一。包含了外卖常用标签的各种元素。


二、预览

使用微信开发者工具打开weui-wxss-master 中的dist目录。
下载地址：https://github.com/Tencent/weui-wxss

PS:
组件的wxml结构请看dist/example/下的组件
样式文件可直接引用dist/style/weui.wxss，或者单独引用dist/style/widget下的组件的wxss
WeUI的视觉标准：https://github.com/weui/weui-design

小程序中引入样式就好，不需要引入WeUI的js

原文地址：http://blog.51cto.com/9886022/2150491

时间： 2024-11-05 22:53:24

微信小程序引入WeUI的相关文章

微信小程序——引入背景图片【六】

前言 之前写了一些小程序的博文只是看文档边看边写,了解下他,这次可是真枪真刀的做了! 框架使用的是美团的mpvue,我也是一边学习,一边写的,如有错误之处,还望大家指出. 在这里我有个问题,为什么微信小程序不支持css里面直接导入本地图片作为背景图呢? 内联式 <view class="img" style="background-image: url(/static/images/draw.png)"></view> 外部引入 如果css是

微信小程序引入外部组件 iView Weapp

iview Weapp组件的使用方法: 1. 下载小程序组件库 (前提是你已经有了项目目录) 你可以直接去github把iView Weapp的代码下载下来,也可以用过npm来下载. github地址:https://github.com/TalkingData/iview-weapp 2. 将组件库复制到工程的static目录下 下载完成后,到它的目录中寻找名为dist的目录并复制到你的工程目录下,然后给这个dist目录改个名字,比如叫iview. 3.  为需要使用自定义组件的Page进行配

微信小程序——引入Vant组件库

背景 在微信小程序开发过程中,使用第三方组件库,高效便捷的使用 步骤 安装npm 右键小程序根目录,打开终端 输入:npm init Next 安装vant组件 右键小程序根目录,打开终端 输入:npm i @vant/weapp -S --production 构建npm 使用npm模块 完成 原文地址:https://www.cnblogs.com/zuiyue_jing/p/12260245.html

微信小程序中weui使用方法

1.git下载,找到dist文件: https://github.com/wechat-miniprogram/weui-miniprogram 2.把dist文件中的style复制到根目录 app.wxss引入这个文件 @import '/style/weui.wxss'; 3.dist文件中example目录复制到根文件,(里面是设置相关的代码,直接复制出来使用) 4.app.json把需要引用的文件引到里面 "pages": [ //比如使用button,把他引入 "e

微信小程序引入Vant组件库

前期准备 Vant Weapp组件库:https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.json文件:输入命令:npm init 然后一路回车默认的即可: npm init 项目就回产生一个package.json文件: { "name": "miniprogram", "version": "1.0.0", &quo

微信小程序引入方式

WXML提供两种文件引用方式 1.使用<include src="" /> include可以将目标文件除了<template/>的整个代码引入,相当于是拷贝到include位置 如: 在header.wxml中 <text> 这里是头部 </text> 在first.wxml中引入header.wxml的内容 <include src="../ttttt/header"/> <!-- 使用inclu

【微信小程序】引入外部js 方法

微信小程序引入外部js 方法 步骤: 1.首先将外部js放在你指定的文件夹里  如:utils/fecth.js 2.接下来 将该js文件中你要使用的方法给暴露出来 3.在您要使用的js中引入该js ,并使用暴露出来的方法 步骤1:使用utils文件夹下的 fetch.js 方法 步骤2:将我要使用的方法用 module.exports 给暴露出来 下面是一个网络请求的js方法: module.exports = (url, data) => { return new Promise((reso

微信小程序最新开发资源汇总，对学习微信小程序的新手有一定帮助

微信小程序最新开发资源汇总,希望给想学习或正在学习微信小程序开发的同学们带来一定帮助,汇总的小程序资源有点繁杂,各种类型的小程序demo都有,大家可以选择自己想要的demo进行下载学习.这些微信小程序资源大多是整理自github,如果可以,希望大家能够给github上的原作者一颗star,感谢原作者的无私奉献. 这里整理的是资源的原帖子,下载链接也在帖子里,当然本人也只体验了部分demo,有兴趣的同学可以都下载试试. 下载地址: 仿微信聊天,朋友圈小程序源码wepy框架开发的小程序商城源码,功能

微信小程序从零开始开发步骤-引入框架WeUI

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