零基础前端自学入门：小程序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. 《ArcGIS Runtime SDK for Android开发笔记》——（8）、关于ArcGIS Android开发的未来（“Quartz”版Beta）

    1.前言 今天再一次在官网看到了ArcGIS Runtime SDK for Android下一个版本“Quartz”版的更新资料,它将是一个非常重要的更新,包括API接口的重构和开发思路的调整.具体 ...

  2. [COM Interop学习小结]实现一个C#调用C++的示例

    最近在研究产品的架构代码,发现其中涉及到Com组件技术,即项目中的C# Project会通过Com接口来调用C++ Project中的方法,研究一下,实现一个小的例子,供自己学习. 一. 什么是COM ...

  3. ecommerce学习

     http://blog.csdn.net/dhx20022889/article/details/8977121 

  4. ASP.NET设置母版页

    母版页允许开发人员创建具有指定的可编辑区域的站点级模板.随后,此模板可应用到网站中的 ASP.NET 页面上.这些 ASP.NET 页面只需为母版页中指定的可编辑区域提供相应内容 – 在使用母版页的所 ...

  5. 【CSS】等高布局

    1. 负margin:   margin-bottom:-3000px; padding-bottom:3000px; 再配合父标签的overflow:hidden属性即可实现高度自动相等的效果.   ...

  6. 第二章 LCD液晶显示屏&声控装置&播放音乐&遥控器

    这节我将带大家了解亮宁机器人编程的基础部分. LCD液晶显示屏 LCD液晶显示屏是在实现某种功能和调试中不可缺少的部分,接下来我带大家学习,如何使用LCD液晶显示屏. 首先我们把LCD液晶显示屏插入主 ...

  7. java 内存举例

    1. java内存的主要划分 2.  OOTest02.java 的内存划分 public class OOTest02{ public static void main(String[] args) ...

  8. **611. Valid Triangle Number three pointer O(n^3) -> square(binary search larget number smaller than target)

    Given an array consists of non-negative integers, your task is to count the number of triplets chose ...

  9. Xapian简明教程(未完成)

    第一章 简介 1.1 简介 Xapian是一个开源的搜索引擎库,它可以让开发者自定义的开发一些高级的的索引和查找因素应用在他们的应用中. 通过阅读这篇文档,希望可以帮助你创建第一个你的索引数据库和了解 ...

  10. CPU体系结构

    http://blog.csdn.net/liuxc0116/article/details/17004313 1.算术逻辑单元ALU(Arithmetic Logic Unit)ALU是运算器的核心 ...