零基础前端自学入门：小程序UI容器组件

这是一节以UI布局、容器组件的使用为主题的live，专注于布局与容器这一个点，努力把这一点讲透。这是继4月22日整体入门live“零基础周末学习小程序开发”之后，从小处着眼、细处学习的尝试。

以下是课堂计划：

  1. 最流行的布局之flex布局讲解，附《讲义：flex布局.pdf》分享
  2. flex布局实践，讲解view、scroll-view、swiper、cover-view等组件的使用，附《讲义：小程序容器组件布局实践.pdf》分享，附demo源码分享
  3. 问答：什么是flex布局？
  4. 问答：如何理解flex-wrap的属性值wrap-reverse？
  5. 问答：如何调整侧轴方向上某个子元素的对齐方式，实现琴键按下的效果？
  6. 问答：如何记忆align-items与justify-content谁是主轴谁是副轴？
  7. 问答：如何实现边栏宽度固定，其余部分自由伸展的布局？
  8. 问答：有哪些属性是调整子元素个体行为的？
  9. 问答：flex做为属性值和属性名的不同？
  10. 问答：当flex-direction为row时，justify-content、align-items和align-content各有哪些表现？

会有两篇讲义，有一个独立的随堂demo分享：

以上资料，仅限于参加live的同学下载学习，请勿外传分享。

参加这节课，请戳这里：零基础前端自学入门：小程序UI容器组件

微信小程序 | 51，live新课“小程序UI容器组件”的课堂计划的更多相关文章

  1. 微信小程序，创业新选择

    微信小程序,创业新选择 创业者们 总是站在时代的风口浪尖,他们踌躇满志无所畏惧,这大概就是梦想的力量.但是,如果没有把梦想拆解成没有可预期的目标和可执行的实现路径那么一切都只能叫做梦想. 小程序 张小 ...

  2. 微信小程序之提高应用速度小技巧

    作者:vicyao, 腾讯web前端开发 高级工程师商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. 原文链接:http://wetest.qq.com/lab/view/294.htm ...

  3. 微信小程序怎样提高应用速度小技巧

    作者:vicyao, 腾讯web前端开发 高级工程师商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. 原文链接:http://wetest.qq.com/lab/view/294.htm ...

  4. 微信小程序开发教程 #043 - 在小程序开发中使用 npm

    本文介绍了如何在微信小程序开发中使用 npm 中包的功能,大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频版更新. 微信小程序在发布之初没有对 npm 的支持功能,这也是目前很多前端开发 ...

  5. 微信小程序开发——打开另一个小程序

    微信小程序打开另一个小程序,有两种方法:1.超链接:2.点击按钮. 全局配置: 跳转到其他小程序,需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下: App.json { ... &quo ...

  6. Authing新功能——小程序扫码登录

    近期,Authing 发布了新功能--小程序扫码登录. 小程序扫码登录指使用Authing小程序身份管家在网页端或其它客户端执行微信登录,目前的SDK仅支持客户端JavaScript.其它语言若想使用 ...

  7. 微信小程序开发公测，小程序账号申请办法攻略

    11月3号晚上 10 点,微信公众平台发布公告,宣布微信小程序正式开放公测.此次小程序公测允许开发者将产品提交至微信公众平台审核,但是暂时不支持发布,也就是说普通消费者若想体验小程序,还需要等待一段时 ...

  8. 挑战App Store，微信通过“跳一跳”秀了一下“小程序”的肌肉

    2017年即将结束的时候,微信放了一个大招.随着最新的微信v6.6.1版本更新,基于小程序的"小游戏"板块正式上线.微信上首发的这款"小游戏"叫"跳一 ...

  9. 微信小程序开发——前端如何区分小程序运行环境

    前言: 之前用vue做h5项目,对于接口请求,都是根据前端访问域名来判断运行环境,然后自动适配对应的服务器地址的.这样的好处就是在开发.测试及发布上线全程都不需要手动去改接口请求地址,只要提前配置好就 ...

随机推荐

  1. Java 笔记 —— java 和 javac

    Java 笔记 -- java 和 javac h2{ color: #4ABCDE; } a{ text-decoration: none !important; } a:hover{ color: ...

  2. SSM事务

    问题描述:查询用户信息时想级联查出用户订单以及订单详情,在查询用户的时候JDBC是will be managed by Spring,但懒加载用户订单以及订单详情时就will not be manag ...

  3. 自定义 Firefox TLS支持版本s

    如果目前正在运行火狐26,你可能已经注意到,浏览器仅支持SSL 3.0和TLS 1.0,默认不开启TLS 1.1或TLS 1.2.另外我们知道Firefox 27 已经实现了对TLS 1.2的支持. ...

  4. gcc常用参数列举

    [参数详解] -c    只激活预处理,编译,和汇编,也就是他只把程序做成obj文件  例子用法:  gcc -c hello.c  他将生成.o的obj文件    -S  只激活预处理和编译,就是指 ...

  5. 1.4 配置备份策略（Policy）

    1.1 配置备份策略(Policy) 一个备份策略由四部分组成. Attributes(属性) Policy是否Active Policy类型 由此Policy产生的任务的优先级 使用的Storage ...

  6. linq 查询的两种方法 (在EF model中实现)

    众所周知:linq查询有两种方式 1.通过linq表达式查询 2.是通过linq方法查询 代码中 每一步都有注释

  7. 实现接口Controller定义控制器

    实现接口Controller定义控制器 控制器提供访问应用程序的行为,通常通过服务接口定义或注解定义两种方法实现. 控制器解析用户的请求并将其转换为一个模型.在Spring MVC中一个控制器可以包含 ...

  8. PHP中的生成XML文件的4种方法分享

    生成如下XML串 Xml代码 <?xml version="1.0" encoding="utf-8"?> <article> < ...

  9. JavaScript 十行原生代码实现复制内容到剪贴板

    十行原生代码,不引入任何 JS 库,目前大部分浏览器与移动平台都可兼容. function copyToClipboard(value, callback) { var textarea = docu ...

  10. 使用IDEA将本地项目上传到GitHub

    00.首先保证git和github能够使用ssh连接. 01.在GitHub上新建仓库 需要注意的是不要勾选Initialize this repository with a README. 02.在 ...