本文开始一步步教大家如何利用微信开发工具编写小程序，该节介绍微信小程序源码的文件和目录结构

1.开发前准备
首先要安装小程序开发工具，不然你连代码都敲不了
百度搜索微信小程序开发工具即可。

然后到微信公众平台注册登录
https://mp.weixin.qq.com/

在开发工具开启新项目，他会自动生成一个目录。
初始化之后的目录结构如下

pages/
utils/
app.js
app.json
app.wxss
project.config.json
sitemap.json

app.js

程序主体
在这里面要写逻辑的代码，用于初始化，初始化的代码可以写在这里

app.json
程序配置文件

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

pages

是放页面的目录，记录着小程序有哪些页面，"pages/index/index"就代表index页面。

pages下会有很多目录，pages下一个目录代表一个页面。例如pages下有一个index目录，这就代表index页面。index目录下有4个文件，这4个文件组成一个页面
index.js
index.json  该页面的配置
index.wxss  该页面的样式
index.wxml  页面结构即html
第一和第四个文件是必须的

app.wxss
样式文件，在这里设置样式，所有页面都会有这个样式

project.config.json

这个文件我们不需要改东西，不管他就行

2.程序和页面配置
这节我们看 app.json 的一些参数

程序配置(app.json)
pages : 页面路径
window ：页面的窗口表现
tabBar : 底部tab切换
networkTimeout
debug

pages:
怎样设定主页，只要把页面路径放在pages参数下的第一条，他就会变成首页。

window:
然后window参数，这个参数下的配置可以在微信小程序文档中查：

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

比如：

{
    "window":{
	    #开启下拉刷新
    	"enablePullDownRefresh":true,
	
	    #设置顶部颜色
    	"navigationBarBackgroundColor":"#28B2E6"
    }
}

这些只要查文档就好

networkTimeout:
设置网络请求的超时事件，默认60秒。

debug：
调试工具,会显示一些调试信息

"debug":true 即可

tabBar:
就是底部的切换栏

"tabBar":{
	#表示底部栏有几个栏目，最多5个最少2个
	'list':[
		{
			#pagePath和text是必不可少的
			"text":"首页",
			"pagePath":"pages/index/index",
			
			#设置每个栏目的图标
			'iconPath':"common/img/1.png"
			
			#选中时图标，不设置则选中该栏目是看不到图标的
			"selectedIconPath":"xxx"
		},
		{
			"text":"视频页",
			"pagePath":"pages/index/moviw"
		},
		{
			"text":"图片页",
			"pagePath":"pages/index/pic"
		}
	],
	
	#默认字体颜色
	'color':"#707070",
	
	#选中也的颜色
	"selectedColor":"blue"
	
	
}

页面配置：
window 页面的窗口配置

3.注册程序和页面
要运行小程序，就要注册程序
要运行一个页面，就要注册页面

注册程序在app.js
如下所示：
App({...}) 就是注册程序

注册页面就是在每个页面的js文件调用Page({...})

在app.js调用App({})后会返回一个app实例，在app实例中定义的变量可以在所有页面的js中访问。比如

App({
    gldData:{  //这个可以随便取
        a:1
    }
});

在index.js中：
const app = getApp();
console.log(app.gldData); //可以打印出{a:1}
这段代码可以写在Page({})外也可以在PAge({})内

在页面中
Page({})会返回页面实例，在页面实例中定义的变量只能在该页面实例中使用。

定义变量不能向平时写js一样用
var a=1
的方式去定义
而是必须写成json的形式去定义：
Page({
    a:1
});

在注册程序App({})的时候，onLaunch事件会被触发
在注册页面Page({})时，onLoad事件会被触发。

例如：
Page({
    a:1,
    onLoad:function(){
        console.log(a);
    }
});

那么一进入这个页面就会打印1

4.程序的生命周期和页面的生命周期
程序APP的生命周期
onLaunch 程序启动时执行，每一次刷新都算启动一次小程序

onShow 小程序从后台切换回来之后执行

onHide 小程序后台运行时执行

你在电脑的小程序开发工具点击真机调试，然后会出现一个二维码，扫一扫，就可以再手机上运行你这个小程序

页面的声明周期
onLoad 
页面加载时执行，只会执行一次

onReady
在页面第一次渲染完之后执行，只执行1次

onShow
页面显示时执行， 可执行多次

onHide 
页面隐藏时执行， 可执行多次

onUnload
页面关闭时执行

细节：执行的顺序是onLoad,onShow,onReady 
如果从A页面跳转到B页面，而且是以tab（底部导航）形式切换时，A页面没有卸载，只是隐藏了起来而已，所以onUnload不会执行，onHide会执行，跳会A页面时不会执行onLoad只会执行onShow

但是如果是以navigatorTo的形式跳转，A页面也是被隐藏，不是卸载；B页面被加载。回退会去(navigatorBack)，A页面会显示，但B页面就会被卸载而不是隐藏。
执行卸载时是不会执行隐藏的。

更多内容请关注微信公众号