小程序云开发入门学习笔记 
小张的快乐码农生活 于 2020-03-16 14:56:53 发布目录
小程序开发入门
小程序的文件结构
小程序的页面组成
小程序的全局配置
json语法
设置小程序窗口表现
通过app.json新建页面
配置项的书写方式
配置tabBar配置项
WXML与WXSS
WXSS选择器
id与class选择器
CSS参考手册
字体属性与文本属性
盒模型
链接与图片
相对路径与绝对路径
尺寸单位rpx
背景属性
图片的边框美化
view、navigator、image组件嵌套（超好看内容卡片）
WeUI框架
WeUI的使用
Flex布局
全局样式与局部样式
WeUI框架的核心与延伸
渐变与动画
CSS的渐变Gradient
Filter滤镜
变形属性Transform
过渡属性Transition
动画属性Animation（动画就是一直都在变）
CSS3 动画库 Animate.css
数据绑定
数据类型与组件属性的渲染
小程序组件
组件的属性
开发者工具的使用
小程序配置的细节
模板
小程序开发入门
小程序的文件结构
小程序源文件的根目录下有app.js、app.json和app.wxss，这是小程序必不可少的三个主体文件。
app.json：小程序的公共设置，可以对小程序进行全局配置，决定页面文件的路径、窗口表现、设置多 tab 等； app.wxss：小程序的公共样式表，可以配置整个小程序的文字的字体、颜色、背景，图片的大小等样式； app.js：小程序的逻辑 pages文件夹：这里存放着小程序的所有页面，展开pages文件夹就可以看到有index和logs两个页面文件夹；小程序的页面组成
在每一个页面文件夹里都有四个文件，这四个文件的名称都是一样的，它们分别为：
json文件，和上面的app.json作用基本相同，只是app.json控制的是整个小程序的设置，而页面的json文件只控制单个页面的配置（因为有时候全局配置就够用了，所以页面配置有时候是空的）； wxml文件，小程序的页面结构，文字、图片、音乐、视频、地图、轮播等组件都会放在这里； wxss文件，小程序的页面样式，和app.wxss一样是控制样式，而页面的wxss文件是控制单个页面的样式； js文件，这个是控制小程序页面的逻辑小程序的全局配置
json语法 大括号{}保存对象，我们来看一下app.json，哪些地方用到了大括号{}，{}里面就是对象； 中括号[]保存数组，我们可以看到中括号[]里有“pages/index/index”等（这是小程序页面的路径），那这些页面路径就是数组啦；数组里的值都是平级的关系；
各个数据之间由英文字符逗号,隔开，注意这里的数据包括对象、数据、单条属性与值，大家可以结合app.json仔细比对逗号,出现的位置，平级数据的最后一条数据不要加逗号,，也就是只有数据之间才有逗号。 字段名称（属性名）与值之间用冒号:隔开，字段名称在前，字段的取值在后； 字段名称用双引号””给包着； 设置小程序窗口表现使用开发者工具打开app.json文件，可以看到如下代码里有一个window的字段名（如前面所说，字段名要用双引号””包着），它的值是一个对象（如前面所说，{}大括号里的就是对象），可见对象可以是一组数据的集合，这个集合里包含着几条数据。
1
2
3
4
5
6
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
这些就是window配置项，可用于设置小程序的状态栏、导航条、标题、窗口背景色。
通过app.json新建页面
pages配置项是设置页面的路径，也就是我们在小程序里写的每一个页面都需要填写在这里。使用开发者工具打开app.json文件，在pages配置项里新建一个home页面（页面名称可以是任意英文名），代码如下：
1
2
3
"pages/home/home",
"pages/index/index",
"pages/logs/logs"
在模拟器就能看到我们新建的这个首页了.
配置项的书写方式
每个配置项比如pages、window都用引号””包住，冒号:后面是配置项的属性与值； 每个配置项之间用逗号,隔开，最后一项没有逗号，配置项是平级关系，不要把tabBar配置项写到window配置项里面了；配置tabBar配置项
icon资源：iconfont阿里巴巴矢量图标库
大家可以留意下手机微信的tabBar的每一个icon其实是一组两个，也就是选中时的状态和没有选中时的状态，他们的颜色也是不一样的，而在iconfont里大家除了选择图标还可以选择不同的颜色来下载哦。比如我们要让tabBar有四个切换tab，那么我们就需要下载4个icon的两种配色共8张图片。
icon的配色最好是一明一暗，而且与你的小程序的整体颜色风格保持一致，这样切换起来才不会突兀；选择的这4个icon的风格最好一致，不然tabBar就不会好看啦。icon的名称最好也一致，比如home对应的icon可以为home.icon和home-active.icon。
WXML与WXSS
WXSS选择器
id与class选择器 id，用于精准的选择； class，用于分类选择。 CSS参考手册技术文档：CSS参考手册
学技术千万不要在没有看到实际效果的情况下来死记概念。概念没有记住一点关系都没有，因为大家可以随时来查文档。
字体属性与文本属性
font-size，font-weight，text-align称之为属性，冒号:后面的我们称之为值，属性:值这一整个我们叫做声明，每个声明我们用分号;隔开。 当我们希望两个不同的选择器有相同的css代码时，可以简化一起写，然后用逗号,隔开。如.desc,.item-desc{
color: #333;
}
#wxmlinfo,#studyweapp{
font-size:16px;
font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
line-height: 1.6;
}
.title{
font-size: 20px;
font-weight: 600;
text-align: center;
}
.item-title{
border-left: 3px solid #c60;
padding-left: 15px;
}
字体属性 font-family 规定文本的字体系列。 font-size 规定文本的字体尺寸。 font-weight(重量) 规定字体的粗细。 文本属性
