文档章节

TODO:小程序集成WeUI

OneTODO
 OneTODO
发布于 2016/11/15 08:18
字数 525
阅读 224
收藏 3
点赞 0
评论 0

TODO:小程序集成WeUI

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

1.使用微信开发者工具添加新项目MWL

2.下载WeUI的源码,把style文件拷贝到MWL根目录,与pages文件夹同一级

3.WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者,我们的 WXSS 具有 CSS 大部分特性。 同时为了更适合开发微信小程序,我们对 CSS 进行了扩充以及修改。

与 CSS 相比我们扩展的特性有:

尺寸单位

样式导入

4.在app.wxss导入样式,使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。

定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

5.WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。

a)数据绑定

b)条件渲染

c)事件,关键参数是bindtap

6.组件,都包含在容器view里面,组件结合WeUI使用,构建出统一,美观都界面。

7.示例1,导航都标题是设置在*.json里面的 navigationBarTitleText,在app.json设置的参数是全局可使用,定义在page的json是局部页面可以使用。以此类推*.js也是有全局和局部之分。

代码:

看到代码里面有使用了WeUI的样式了,到此简单的WeUI则集成成功。

wxgzh:ludong86

© 著作权归作者所有

共有 人打赏支持
OneTODO
粉丝 1
博文 63
码字总数 26450
作品 0
厦门
程序员
米8抢到没?不急,撸个小程序先😎

前言 小程序发布以来,凭借无需安装、用完即走、触手可及、无需注册、无需登录、以及社交裂变等多个优势,一路高歌,变得愈来愈火爆,它革命性的降低了移动应用的开发成本,也正好迎合了用户...

云中玉卷 ⋅ 06/12 ⋅ 0

微信小程序-自定义NavBar组件(1)

转载请注明出处:王亟亟的大牛之路 最近公司项目忙得不可开交,各种不可描述的事情,然后学习基本停机。这个周末没出去浪,就在家把之前王夫人给我设计的小程序做了做,然后一步步分享做的过...

ddwhan0123 ⋅ 05/14 ⋅ 0

基于 mpvue 框架的小程序选择组件,支持单列,多列,级联

mpvue-picker 前言 在 mpvue开源之初写了 用 vue 写小程序,基于 mpvue 框架重写 weui。当时用的是小程序的原生组件,没有对其进行封装和组件化。而对于现在的前端开发环境,,,以及已经是一...

KuangPF ⋅ 05/14 ⋅ 0

鹅厂优文|:小程序入坑指南

前段时间,手上刚好接手一个小程序的项目,心想之前自学过一段时间的小程序,终于有项目可以练练手了,可惜,万万没想到,加了两个周末的班结果却成了飞机稿。好在有些收获,于是趁思路尚且清...

腾讯云加社区 ⋅ 04/26 ⋅ 0

flask REST API.

http://flask-restful.readthedocs.io/en/0.3.5/quickstart.html#full-example Flask-RESTful 提供了一个 Resource 基础类,它能够定义一个给定 URL 的一个或者多个 HTTP 方法。 addresourc......

阿豪boy ⋅ 02/09 ⋅ 0

WeUI 的轻量级 JS 库--weui.js

概述 WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库。weui.js是WeUI 的轻量级 js 封装。 注意:由于微信小程序不支持dom操作,所以weui.js并不适用于小程序。不过WeUI也为小程...

匿名 ⋅ 2017/06/15 ⋅ 0

关于微信生态的一切

推荐一些打死也舍不得取关的公众号和博客 推荐一些个人认为对程序员而言非常值得推荐的公众号和博客。 微信小程序 - 仿淘宝 这是仿手机淘宝做的微信小程序,项目还在不断完善中。。。 一个小...

掘金官方 ⋅ 01/08 ⋅ 0

微信小程序(应用号)资源汇总整理(转)

微信小应用资源汇总整理 开源项目 WeApp - 微信小程序版的微信 wechat-weapp-redux-todos - 微信小程序集成Redux实现的Todo list wechat-weapp-gank - 微信小程序版Gank客户端 wechat-dribb...

老朱教授 ⋅ 2017/10/09 ⋅ 0

softtime/ThinkWechat

#ThinkWechat 为thinkphp提供的微信SDK,集成opensns管理后台,wechat-php-sdk, WEUI 实现快速开发微信企业号,微信服务号,钉钉办公套件,内置二维码生成,邮件短信微信消息发送,也许是thi...

softtime ⋅ 2017/03/23 ⋅ 0

微凉/ThinkWechat

#ThinkWechat 为thinkphp提供的微信SDK,集成opensns管理后台,wechat-php-sdk, WEUI 实现快速开发微信企业号,微信服务号,钉钉办公套件,内置二维码生成,邮件短信微信消息发送,也许是thi...

微凉 ⋅ 2017/02/13 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring发展历程总结

转自与 https://www.cnblogs.com/RunForLove/p/4641672.html 目前很多公司的架构,从Struts2迁移到了SpringMVC。你有想过为什么不使用Servlet+JSP来构建Java web项目,而是采用SpringMVC呢?...

onedotdot ⋅ 34分钟前 ⋅ 0

Python模块/包/库安装(6种方法)

Python模块/包/库安装(6种方法) 冰颖机器人 2016-11-29 21:33:26 一、方法1: 单文件模块 直接把文件拷贝到 $python_dir/Lib 二、方法2: 多文件模块,带setup.py 下载模块包(压缩文件zip...

cswangyx ⋅ 53分钟前 ⋅ 0

零基础学习大数据人工智能,学习路线篇!系统规划大数据之路?

大数据处理技术怎么学习呢?首先我们要学习Python语言和Linux操作系统,这两个是学习大数据的基础,学习的顺序不分前后。 Python:Python 的排名从去年开始就借助人工智能持续上升,现在它已经...

董黎明 ⋅ 今天 ⋅ 0

openJdk和sun jdk的区别

使用过LINUX的人都应该知道,在大多数LINUX发行版本里,内置或者通过软件源安装JDK的话,都是安装的OpenJDK, 那么到底什么是OpenJDK,它与SUN JDK有什么关系和区别呢? 历史上的原因是,Ope...

jason_kiss ⋅ 今天 ⋅ 0

梳理

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。 它是JS的状态容器,是一种解决问题的方式,所以即可以用于 react 也可以用于 vue。 需要理解其思想及实现方式。 应用中所有的 stat...

分秒 ⋅ 今天 ⋅ 0

Java 后台判断是否为ajax请求

/** * 是否是Ajax请求 * @param request * @return */public static boolean isAjax(ServletRequest request){return "XMLHttpRequest".equalsIgnoreCase(((HttpServletReques......

JavaSon712 ⋅ 今天 ⋅ 0

Redis 单线程 为何却需要事务处理并发问题

Redis是单线程处理,也就是命令会顺序执行。那么为什么会存在并发问题呢? 个人理解是,虽然redis是单线程,但是可以同时有多个客户端访问,每个客户端会有 一个线程。客户端访问之间存在竞争...

码代码的小司机 ⋅ 今天 ⋅ 0

到底会改名吗?微软GVFS 改名之争

微软去年透露了 Git Virtual File System(GVFS)项目,GVFS 是 Git 版本控制系统的一个开源插件,允许 Git 处理 TB 规模的代码库,比如 270 GB 的 Windows 代码库。该项目公布之初就引发了争...

linux-tao ⋅ 今天 ⋅ 0

笔试题之Java基础部分【简】【二】

1.静态变量和实例变量的区别 在语法定义上的区别:静态变量前要加static关键字,而实例变量前则不加。在程序运行时的区别:实例变量属于某个对象的属性,必须创建了实例对象,其中的实例变...

anlve ⋅ 今天 ⋅ 0

Lombok简单介绍及使用

官网 通过简单注解来精简代码达到消除冗长代码的目的 优点 提高编程效率 使代码更简洁 消除冗长代码 避免修改字段名字时忘记修改方法名 4.idea中安装lombnok pom.xml引入 <dependency> <grou...

to_ln ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部