一系列文档地址

今天需要用到weui，这里记录一下开发文档地址

开发文档：http://old.jqweui.com/components

js文档： https://github.com/Tencent/weui.js/blob/master/docs/README.md

github： https://github.com/Tencent/weui.js

菜鸟教程：http://www.runoob.com/w3cnote/weui-for-weixin-web.html

效果展示： https://weui.io

这里简单介绍一下小程序如何引入weui及其简单的使用

项目中使用步骤

1、在GitHub上https://github.com/weui/weui-wxss/下载程序代码，解压后可以看到如下目录：

2、我们只需要将weui-wxss-master\dist\style\weui.wxss文件导入到小程序项目的根目录下：

3、新建微信小程序项目，将weui.wxss文件导入到小程序项目的根目录下：

4、在项目中引用：在全局app.wxss中加入weui.wxss的引用- @import "weui.wxss";

5 根组件使用class=”page”

<view class="page"></view>

6 页面骨架

<view class="page"><view class="page__hd"></view><!--页头--><view class="page__bd"></view><!--主体--><view></view><!--未设置页脚-->
</view>

7 除此之外都是按照weui-开头后接组件名称，例如class=”weui-footer”

<view class="weui-footer">我是页脚</view>

8 组件的子组件样式，例如view.weui-footer组件还有链接和版权信息。

<view class="weui-footer">
<view class="weui-footer__links"><navigator url="" class="weui-footer__link">上海物联网科技有限公司</navigator>
</view>
<view class="weui-footer__text">Copyright © 程序媛专用</view>
</view>

本地起测试demo

为了更直观的查看效果和方便使用，我在小程序中新建个项目，地址指向weui-wxss-master\dist（即从git上克隆的代码对应的dist目录），这样就可以随时查找自己要的效果，剩下的就是复制粘贴了，在项目中使用weui的样式如下：

示例代码：

<view class="page"><view class="page__hd"><view class="page__title">Button</view><view class="page__desc">按钮，WeUI采用小程序原生的按钮为主体，加入一些间距的样式。</view></view><view class="page__bd page__bd_spacing"><button class="weui-btn" type="primary">页面主操作 Normal</button><button class="weui-btn" type="primary" disabled="true">页面主操作 Disabled</button><button class="weui-btn" type="default">页面次要操作 Normal</button><button class="weui-btn" type="default" disabled="true">页面次要操作 Disabled</button><button class="weui-btn" type="warn">警告类操作 Normal</button><button class="weui-btn" type="warn" disabled="true">警告类操作 Disabled</button><view class="button-sp-area"><button class="weui-btn" type="primary" plain="true">按钮</button><button class="weui-btn" type="primary" disabled="true" plain="true">按钮</button><button class="weui-btn" type="default" plain="true">按钮</button><button class="weui-btn" type="default" disabled="true" plain="true">按钮</button><button class="weui-btn mini-btn" type="primary" size="mini">按钮</button><button class="weui-btn mini-btn" type="default" size="mini">按钮</button><button class="weui-btn mini-btn" type="warn" size="mini">按钮</button></view></view>
</view>

weui 开发文档相关推荐

weui开发文档_58小程序云 | 一站式跨平台小程序开发解决方案
引言目前,小程序风头正劲,微信.百度.阿里.头条等厂商都纷纷推出了自家的小程序. 众多的小程序平台对于各业务而言,又多了很多的流量入口,可以覆盖更多的用户,但也引入了新的问题:开发.维护成本陡增. ...
微信小程序开发文档
官方开发文档: 小程序公众平台小程序开发者指南小程序开发者文档学习资源: 微信:官方入门教程微信:WeUI 是一套同微信原生视觉体验一致的基础样式库微信:微信小程序示例视频: 学堂在线:学 ...
小程序开发文档中没有告诉你的一些事情
来源:有用!关于微信小程序,那些开发文档没有告诉你的作者:王婷婷本文由广研微信小程序的开发团队所做,作者为UI开发工程师王婷婷.本文从UI开发的角度,结合OM小程序的案例,剖析小程序的组件用法与传 ...
DotNet 项目开发文档的自动生成和相关工具的使用
在 VS.Net 的 IDE 中对C#提供了一些可以自动生成的 XML 注释,使用这些注释可以对代码中定义的对象进行说明.注解:通过设置项目属性,在生成项目时,可以让VS.Net自动的将这些注释信息输 ...
【IT基础】常见的开发文档
Perface 随着技术的进步,小作坊式的软件开发年代已经过去.目前的软件开发能力在不断提升,用户对软件的功能和性能要求也越来越高,软件开发质量受到关注. 在软件开发过程中,各种数据和代码的管理需要经 ...
开源轻量级办公系统Sandbox介绍以及配套开发文档连载
1.Sandbox介绍 Sandbox是一个基于django框架开发的轻量级办公平台,主要模块有:权限控制.资产(库存)管理.设备管理.客户信息管理和工单流程管理,其目的在于建立一套规范化.统一化和清 ...
python软件开发-如何编写Python软件开发文档（7个技巧）
开发文档是经常被程序员忽略的工作,有时也会被管理者忽略.这往往是由于在项目生命周期结束的后期缺乏时间,以及人们认为自己不擅长写作,其中一些人确实写不好,但他们中的大多数能够完成一个良好的文档. 在任何 ...
开发文档之　概要设计说明书　详细设计说明书　数据库设计说明书
软件工程是一门技术含量高设计极其复杂的学科.为了控制好软件产品质量和规范,就必须用大量的文档约束软件工程的进度和状态.浩大的软件工程对于缺少工作和项目经验的人来说,必然是摸不着头脑不知从何开始.[ ...
Android 界面滑动实现---Scroller类从源码和开发文档中学习（让你的布局动起来）...
在android学习中,动作交互是软件中重要的一部分,其中的Scroller就是提供了拖动效果的类,在网上,比如说一些Launcher实现滑屏都可以通过这个类去实现.. 例子相关博文:Androi ...
Autodesk Infrastructure Map Server 2014的开发文档在哪里？
Autodesk Infrastructure Map Server(AIMS) 2014已经发布,请看一下产品主页来了解产品的最新特性,然后下载个试用版亲自试一下吧.那么AIMS 2014的开发文档 ...

weui 开发文档

weui开发简单入门

一系列文档地址

项目中使用步骤

本地起测试demo

weui 开发文档相关推荐

最新文章

热门文章