微信小程序- 2.创建项目-项目结构介绍

1.创建项目

打开我们上一篇刚刚安装的微信web开发工具，会弹出下面的一个页面如图1.1，如果我们之前创建过项目，他会在下面展示，我们点击添加项目。

图1.1

下面会弹出我们创建项目的页面如图1.2，当然AppID我们现在还没有，我们可以点击无AppID ,这样也不会影响我们开发的，项目名字我们可以随便填写。项目目录，不管是什么程序目录一定要是英文的。

图1.2

我们创建完毕会看到项目目录，我在下面简单的介绍了每个项目目录是做什么的。了解他的结构如图1.3。

图1.3

2.创建一个项目文件夹，基本所需文件

app.js 项目主入口文件(用于创建应用程序对象)

//App()函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。
App({

//全局数据对象(整个应用程序共享)
globalData:{...},

//应用程序全局方法
method1(p1,p2){...},
method2(p1,p2){...},

//---------生命周期方法--------

//应用程序启动触发一次
onLaunch(){...},

//当应用程序进入前台显示状态时触发
onShow(){...},

//当应用程序进入后台状态时触发
inHide(){...}

})

注意：
App()必须在app.js中注册，且不能注册多个。
不要在定义于App()内的函数中调用getApp()，使用this就可以拿到 app 实例。
不要在 onLaunch 的时候调用getCurrentPage()，此时 page 还没有生成。
通过getApp()获取实例之后，不要私自调用生命周期函数。

app.json 项目配置声明文件(指定项目的一些信息)

{
//当前程序是由哪些页面组成的(第一项默认为初始页面)

//所有使用到的组件或页面都必须在此体现
//https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages 
"pages":[...],

//应用程序窗口设置
//https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window
"window":[...],

//应用程序导航栏设置
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar 
"tabBar":[...],

//网络超时设置
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout 
"networkTimeout":{},

//是否在控制台输出调试信息
// https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug 
"debug":true

}

app.wxss 【！可选】项目全局的样式文件，内容遵循CSS标准语法

/**app.wxss
CSS代码用来设置整个应用的样式
**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}