微信小程序开发与实践（1）

1.认识小程序的基本文件结构

1.1.根目录下的三个文件

app.js属于必选项，是小程序的逻辑文件
app.json属于必选项，是小程序的配置文件
app.wxss不是文件的必选项，是全局公共样式文件

1. 与三个应用程序平行的是pages文件夹 ，一个小程序由若干个页面文件构成，上图中的pages文件夹下有两个页面【index、logs】；
2. 每个页面可由四部分组成，分别是.js【必填项、页面逻辑】、.wxml【必填项、页面结构】、.wxxs【不是必填项、页面样式表】、.json【不是必填项、页面配置】；；
3. wxml文件类似于HTML文件，是用来编写页面的标签和骨架，不同扥是wxml文件的标签元素不可使用HTML标签，只能使用小程序自己封装的一些组件；
4. wxxs文件的作用类似于CSS文件，用于编写小程序的样式，是加上小程序的样式编写语言就是CSS；
5. json文件用来配置页面的样式与行为；
6. js用来编写小程序的页面逻辑；
7. 除了pages文件，上图示例项目中还有一个utils文件，用来存放一些公共的js文件了

2.编写第一个小程序之旅

2.1开始编写小程序

2.1.1创建文件

首先根据上述知识新建对应的文件以及文件夹

2.1.2 写入文件内容

在index.wxml文件中输入文本内容

Welcome

2.1.3 注册相关页面

显示小程序中文本内容：要让小程序的MINA框架知道这个页面的存在以及这个页面的具体位置（文件路径），因此需要在某个应用程序级别配置文件中注册这个index页面

2.1.4 全局配置

app.json文件就是小程序提供的全局配置文件，在app.json中注册index页面

{  
	"pages": [    
		"pages/index/index"  
	]
}

上图代码是一个典型的json对象，可以将index页面注册到小程序中，这个对象的第一个属性pages接受一个数组，数组的每一项都是一个字符串，用来指定小程序是由哪些页面组成的，每一项由对应的页面的【路径+文件名组成】（这里强调文件名无需加后缀名，路径前面禁止出现"/"）MINA框架会自动寻找页面路径，将.json、.js、.wxml、.wxss四个文件进行整合

2.1.5 正确调用pages()方法

Page({  })

页面的js文件不可以完全为空，否则小程序会报错。
index.json也不能为空

{  }

2.2.构建intex页面的元素和样式表

2.2.1在index.wxml文件中编写代码

<view>  
	<image></image>  
	<text>Hello</text>  
	<view>    
		<text>开启小程序之旅</text>  
	</view>
</veiw>

上述代码中用到的三个微信小程序组件，view组件通常作为容器，相当于HTML中的div；text组件用来显示文本，类似于HTML中的span标签；image组件用来显示一张图片；
与HTML类似，image组件需要设置一个src属性，用来指向图片的路径，在image目录下创建avatar文件用来存放图片。

注：图片大小会被MINA框架设置成宽度300px，高度225px，这是小程序默认的图片大小。

2.2.2 编写index的样式表

在index.wxml文件中给每个需要样式的组件添加样式名class name ，进行简单布局，最后的测试结果图如图所示

<view class="container">
<image class="avatar" src="/image/avatar/avatar-1.png"></image><text class="motto ">Hello</text>
<view class="journey-container">
  <text class="journey">开启小程序之旅</text>
 </view>
</view>

.container{
  display: flex;  
  flex-direction: column;  
  align-items: center;}
.avatar{
  width: 200rpx;  
  height: 200rpx;  
  margin-top: 160rpx;  
  border-radius: 50%;}
.motto{
  margin-top: 100rpx;  
  font-size: 35rpx;  
  font-weight: 
  bolder;  color: 
  blueviolet;}
.journey-container{
  margin-top: 200rpx;  
  border: 2px solid rgb(215, 41, 250);  
  width: 300rpx;  
  height: 30px;  
  border-radius: 5px;  
  text-align: center;}
.journey{
  font-size: 25rpx;  
  font-weight: bold;  
  line-height: 50rpx;  
  color: blueviolet;}

6种css选择

2.3.Flex布局

2.3.1 Flex也叫弹性布局

display:flex将view变成一个弹性盒子
flex布局的关键性概念：轴；
flex-dorection 属性决定主轴是水平轴（row自左到右、row-reverse自右到左）或者垂直轴（column自上到下、column-reverse自下到上）
使用flex-dorection属性指定view内元素的排列方向，属性有四个值：row、column、row-reverse、column-reverse

2.4.小程序自适应单位rpx简介

rpx使组件自适应屏幕的高度和宽度
1rpx = 0.5px

2.5.全局样式文件app.axss

全局样式表中可以一次性设置所有页面的样式，小程序会优先选择页面内的

2.6.app.json中的window配置项

navigationBarbackgroundColor属性设置window导航栏的背景颜色
window这个选项下并不是只有navigationBarbackgroundColor这一个属性，它还有以下几种属性：
• navigationBarTextStyle　配置导航栏文字颜色，只支持black/white。
• navigationBarTitleText　配置导航栏文字内容。
• backgroundColor　配置窗口颜色。
• backgroundTextStyle　下拉背景字体，仅支持dark/light。
• enablePullDownRefresh　是否开启下拉刷新。