小程序云开发学习笔记（一）

json文件，和上面的app.json作用基本相同，只是app.json控制的是整个小程序的设置，而页面的json文件只控制单个页面的配置（因为有时候全局配置就够用了，所以页面配置有时候是空的）；
wxml文件，小程序的页面结构，文字、图片、音乐、视频、地图、轮播等组件都会放在这里；
wxss文件，小程序的页面样式，和app.wxss一样是控制样式，而页面的wxss文件是控制单个页面的样式；
js文件，这个是控制小程序页面的逻辑

小程序的全局配置

json语法

大括号{}保存对象，我们来看一下app.json，哪些地方用到了大括号{}，{}里面就是对象；
中括号[]保存数组，我们可以看到中括号[]里有
“pages/index/index”等（这是小程序页面的路径），那这些页面路径就是数组啦；数组里的值都是平级的关系；
各个数据之间由英文字符逗号,隔开，注意这里的数据包括对象、数据、单条属性与值，大家可以结合app.json仔细比对逗号,出现的位置，平级数据的最后一条数据不要加逗号,，也就是只有数据之间才有逗号。
字段名称（属性名）与值之间用冒号:隔开，字段名称在前，字段的取值在后；
字段名称用双引号””给包着；

设置小程序窗口表现

使用开发者工具打开app.json文件，可以看到如下代码里有一个window的字段名（如前面所说，字段名要用双引号””包着），它的值是一个对象（如前面所说，{}大括号里的就是对象），可见对象可以是一组数据的集合，这个集合里包含着几条数据。

"window": {

"backgroundTextStyle": "light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "WeChat",

"navigationBarTextStyle": "black"

这些就是window配置项，可用于设置小程序的状态栏、导航条、标题、窗口背景色。

通过app.json新建页面

pages配置项是设置页面的路径，也就是我们在小程序里写的每一个页面都需要填写在这里。使用开发者工具打开app.json文件，在pages配置项里新建一个home页面（页面名称可以是任意英文名），代码如下：

"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	规定文本的字体尺寸。
fo

最低0.47元/天解锁文章

小张的快乐码农生活

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
小程序云开发学习笔记（一）

目录小程序开发入门小程序的文件结构小程序的页面组成小程序的全局配置json语法设置小程序窗口表现新建小程序页面小程序开发入门小程序的文件结构小程序源文件的根目录下有app.js、app.json和app.wxss，这是小程序必不可少的三个主体文件。app.json：小程序的公共设置，可以对小程序进行全局配置，决定页面文件的路径、窗口表现、设置多 t...
复制链接

扫一扫