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;
}
网友评论