小程序
小程序
清云小程序
这个作者很懒,什么都没留下…
展开
-
清云小程序教程二:小程序的组织结构
原文链接:http://www.0575yun.com/articledetail/id/59.html教程一讲了小程序的4种文件类型,和现在教程二的组织结构是有一定区别的,那么接下来,我们来讲讲小程序的组织结构。首先,每一个小程序都有3个全局文件,一个是全局配置文件(app.json),另一个是全局样式文件(app.wxss),还有一个是全局业务文件(app.js)。基本上所有的小程序都...原创 2019-07-23 16:34:01 · 823 阅读 · 0 评论 -
清云小程序教程十四:justify-content属性解析二
原文链接:http://www.0575yun.com/articledetail/id/57.html今天我们继续来讲讲justify-content属性的几个取值,上次说了”justify-content“的2个取值:”flex-start“、”flex-end“,那么本节课我们再来看看”justify-content“其他一些取值。上节课我们已经看到了”flex-start“和”f...原创 2019-07-24 09:25:57 · 3196 阅读 · 0 评论 -
清云小程序教程十五:主轴与交叉轴一
原文链接:http://www.0575yun.com/articledetail/id/66.html今天我们来介绍flex里非常重要的一个新概念——轴。那么在flex里面有2个轴,一个叫”主轴“;一个叫”交叉轴“。等会儿我们来看一下主轴和交叉轴有什么意义和作用,现在我们先来实现一种效果。先改一下我们的”justify-content“:.container{displa...原创 2019-07-24 16:46:43 · 1267 阅读 · 0 评论 -
清云小程序教程十六:主轴与交叉轴二
原文链接:http://www.0575yun.com/articledetail/id/67.html上节课我们介绍了主轴和交叉轴,这节课我们再来深入讲解一下主轴和交叉轴。其实对于主轴和交叉轴大家充分理解上节课讲的内容就可以了,但是,出于知识的严谨性和全面性,我还是在这里进一步在来讲解一下主轴和交叉轴。上节课我们讲了,当”flex-direction“取”column“或“row”的时候...原创 2019-07-25 10:07:28 · 280 阅读 · 0 评论 -
清云小程序教程二十:组件概述
原文链接:http://www.0575yun.com/articledetail/id/71.html清云小程序从本节课开始就要着手实现旧岛这个产品的第一个页面,就是“流行”这个页面。在之前的小程序教程中,当我要实现一个页面的时候,我必然是要给大家去剖析整个页面的结构的,但是我们旧岛这个产品不太一样,因为我之前就说过,我们这个产品是需要用组件的形式来完成整个项目的构建的。所以说,我们有必要首...原创 2019-07-30 16:34:04 · 209 阅读 · 0 评论 -
清云小程序教程十七:stretch和baseline
原文链接:http://www.0575yun.com/articledetail/id/68.html之前我们讲了“justify-content”和“align-items”2个属性,我们已经知道“justify-content”常用有5种取值:“flex-start”、“flex-end”、“center”、“space-between”和“space-around”;而“ali...原创 2019-07-26 11:40:16 · 742 阅读 · 0 评论 -
清云小程序教程一:小程序的4种文件类型
原文链接:http://www.0575yun.com/articledetail/id/58.html小程序的文件类型大体可以分为:样式文件、骨架文件、业务文件和配置文件。在小程序中,样式文件的文件后缀名为:.wxss(例:app.wxss);骨架文件的文件后缀名为:.wxml(例:logs.wxml);业务文件的后缀名为:.js(例:app.js);配置文件的文件后缀名为:....原创 2019-07-23 11:15:24 · 895 阅读 · 0 评论 -
清云小程序教程十八:flex-wrap以及消除间距
原文链接:http://www.0575yun.com/articledetail/id/69.html本节课我们再来讲讲flex里面一个常用的属性。上节课我们学习了baseline和stretch,这节课我们首先把“align-items”还原成“flex-start",先不要用“baseline”,还是用“flex-start”来学习一下换行。目前在我们各个参数下面,这3个元素是...原创 2019-07-27 10:32:31 · 5819 阅读 · 2 评论 -
清云小程序教程十九:细节决定成败
原文链接:http://www.0575yun.com/articledetail/id/70.html今天我们正式来讲讲小程序的项目开发阶段,必备的基础知识呢,我个人认为也就是flex布局是需要讲解的,剩下的其他更多的知识让我们放到实践开发中来学习。如果我们要开发一个项目,第一件事情就是你要了解这个项目的需求,换句话来说,就是你要知道这个项目或者说我们旧岛这个产品它有哪些个功能,很多情况...原创 2019-07-28 11:21:56 · 249 阅读 · 0 评论 -
清云小程序教程二十一:定义引用和使用组件
原文链接:http://www.0575yun.com/articledetail/id/72.html清云小程序教程本节课就来教你实现一个一个的组件。之前我们说过,旧岛这个小程序是要用组件来构建的,所以我们所要编写的组件数量是非常多的,所以我们先来为我们所有的小程序组件新建一个文件夹。新建一个盛放所有组件的文件夹叫做“components”,新建在与“Pages”同级目录下,再在“com...原创 2019-08-01 19:59:25 · 197 阅读 · 0 评论 -
清云小程序教程十三:justify-content属性解析一
原文链接:http://www.0575yun.com/articledetail/id/56.html我们先来给我们的容器一个背景颜色,以便于我们更好地看清楚接下来的操作:.container{display:flex;flex-direction:column-reverse;height:400px;background-color:#...原创 2019-07-24 09:21:34 · 3710 阅读 · 0 评论 -
清云小程序教程十二:reverse倒序排序
原文链接:http://www.0575yun.com/articledetail/id/55.html上节课给大家留了一个思考题:3个小方块在列方向上的颠倒,以前和现在都是从我们的导航条开始排列的;但是行方向上的排列却是之前是顶在左边的,颠倒之后却是顶在右边了,这是为什么呢?按照我们的之前的思路,竖直排列的色块它在做了倒叙之后应该是顶在最下方的,可是它怎么没有到下面去呢?这是因为整个容器的高...原创 2019-07-24 09:16:10 · 930 阅读 · 0 评论 -
清云小程序教程三:新建一个小程序页面
原文链接:http://www.0575yun.com/articledetail/id/60.html从本节课开始我们就要逐步讲解小程序的编写,小程序的基本知识,我们就在小程序的编写中逐步为大家一一去讲解介绍。我们将在项目中为大家一条一条讲解,在项目中发现问题,在项目中解决问题,在项目中学习小程序的知识。如果我们要自己去开发一个全新的小程序,通常来说有2种方式,第一种是,新建一个官方的示...原创 2019-07-23 16:36:38 · 529 阅读 · 0 评论 -
清云小程序教程四:app.json配置之导航栏
原文链接:http://www.0575yun.com/articledetail/id/61.html首先在这里补充一点,上节课里面有一点忘记说了,就是当你打开调试器的时候,你会发现,有一些报错,那么我们怎么来解决这个问题呢?消除错误提示:在app.js里面加上一段代码:App({ onlaunch:function(){ }})这样就可以消除错误提示。具体怎么...原创 2019-07-23 16:54:09 · 587 阅读 · 0 评论 -
清云小程序教程五:app.json配置之background窗口
原文链接:http://www.0575yun.com/articledetail/id/62.html今天来学习以”background“开头的四个属性,”background“指的是窗口,那么窗口这个概念是对应的小程序的哪个区域呢?这个是小程序的初学者需要去知道和掌握的。现在我们来看看,到底哪个区域是小程序的窗口呢?这个小程序的窗口区域很多初学者掌握不了是因为,窗口区域是在小程序上直接看不...原创 2019-07-23 17:00:15 · 384 阅读 · 0 评论 -
清云小程序教程六:wxml与组件
原文链接:http://www.0575yun.com/articledetail/id/63.html之前,我们主要是围绕着app.json来讲解小程序的,从中讲解了一些app.json的配置项的知识,从这次开始,我们要把关注度放到小程序的一种另外的基本文件类型,也就是.wxml上面来。前面我们在新建classic这个文件的时候,小程序已经自动帮我们生成了4个基本的文件,其中的class...原创 2019-07-23 17:05:50 · 249 阅读 · 0 评论 -
清云小程序教程七: 小程序代码编写规范
原文链接:http://www.0575yun.com/articledetail/id/64.html今天来说说微信小程序的一些代码编写规范,对于规范呢,大家要有一定的清晰和明确的认识。这里的规范不是一成不变的,很多时候的规范其实只是一种约束,它其实并没有对错。什么意思呢?比如说这个“image”组件,它可以成对出现,也可以不成对出现,并没有一个特别的规定。那么到底要成对出现还是不成对出现呢...原创 2019-07-23 17:08:34 · 260 阅读 · 0 评论 -
清云小程序教程八:flex布局之所谓布局
原文链接:http://www.0575yun.com/articledetail/id/65.html从这节课开始,我们要为大家讲解flex布局。那么,什么是flex布局呢?Flex是Flexible Box的缩写,顾名思义为”弹性盒子“或者“弹性布局”,用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex 布局。那什么是布局呢?布局也就是我们用代码来控制页面上面的每一个元...原创 2019-07-23 17:11:31 · 160 阅读 · 0 评论 -
清云小程序教程九:flex布局之block、inline、inline-block
原文链接:http://www.0575yun.com/articledetail/id/52.html首先,我们打开我们的classic.wxml文件,在我们的classic.wxml来写一些代码,来打造一些我们要使用的小色块。这个小色块我们可以通过我们的”view“组件来实现,因为这些小色块中不需要添加其他元素,我们就直接用”<view />“这样单行的形式来写,不需要再...原创 2019-07-23 17:16:34 · 3508 阅读 · 0 评论 -
清云小程序教程十:flex容器将消除item的块状特性
原文链接:http://www.0575yun.com/articledetail/id/53.html今天就来好好讲解一下flex。首先大家一定要对flex有一个基本的概念。Flex就是Flexible Box的缩写,顾名思义为“弹性盒子”或者“弹性布局”,用来为盒装模型提供最大的灵活性。“弹性盒子”它有2个基本的概念,大家是一定要知道的。一个是“flex container”,弹性容...原创 2019-07-23 17:32:22 · 444 阅读 · 0 评论 -
清云小程序教程十一:flex-direction的应用
原文链接:http://www.0575yun.com/articledetail/id/54.html上节课我们实现了3个小色块的横向排列,那么怎么让它们再重新呈现纵向排列呢?之前我们使这3个小色块呈现纵向排列是在小色块上添加“display”属性,使它为“block”,块级元素,那么我们现在再来设置一下:.chunk{display:block;width:100...原创 2019-07-24 09:12:03 · 207 阅读 · 0 评论 -
清云小程序教程二十二:相对路径与绝对路径
原文链接:http://www.0575yun.com/articledetail/id/73.html清云小程序教程在上节课中提到了一个使用组件后出现了路径的错误,那么,本节课我们就来探讨一下这个问题。这个问题的本质原因在于,我们在“classic.json”中使用的是相对路径,那么如果是相对路径的话,它所标识的这个组件的位置是不正确的。“相对路径”表示的是一个相对的位置。如果是“com...原创 2019-08-02 10:53:00 · 1483 阅读 · 2 评论