iKcamp官网：http://www.ikcamp.com访问官网阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享》。包括：文章、视频、源码第2章：小程序中级实践课预备部分 项目结构设计教学视频地址：https://v.qq.com/x/page/q0554...beforeyoustart请将ch2-1分支中的code/目录导入到微信开发工具中在前面的章节中，我们已经完成了小程序的准备工作，熟悉了小程序的基本配置。在下一章中，我们将开始一个真正的项目。你兴奋吗？其实不难发现，小程序的门槛是比较低的。基本掌握前端开发基础的同学，可以不费吹灰之力完成一个简单的小程序。Step1.基本结构经过前面几章的学习，我们已经知道了小程序的基本配置。话不多说，先搭建基本的项目结构，先搭建框架，再丰富细节。在/codes/ch2-1的基础上，我们创建了以下文件：├──lib/├──styles/├──base.wxss├──pages/├──app.js├──app.json├──app.wxss至此，最基本的框架搭建完毕。app.js是小程序的主要逻辑文件，app.json是小程序的全局配置文件，app.wxss当然是小程序的全局样式文件。后面会用到pages来存放小程序的页面。app.jslethandler={//小程序初始化onLaunch(){console.log('appinit...');},//小程序全局数据globalData:{user:{name:'',avator:''}}};App(handler);app.js包含了小程序的一些生命周期函数。项目一开始，我们先从简单的开始，只用到onLaunch这个生命周期函数。当小程序初始化时，会触发onLaunch（全局只触发一次）。globalData可以用来存放小程序的全局数据。我们可以通过页面上的getApp()方法获取小程序的实例，通过小程序实例可以访问到全局对象，后面会详细说明。app.json{"pages":[],"window":{"navigationBarBackgroundColor":"#fff","navigationBarTextStyle":"black","navigationBarTitleText":"Demo","backgroundColor":"#f8f8f8","backgroundTextStyle":"light","enablePullDownRefresh":false},"networkTimeout":{"request":10000,"connectSocket":10000,"uploadFile":10000,"downloadFile":10000},"debug":true}小程序主要配置文件的基本结构已经写好了。当然不是所有配置文件，可以参考小程序配置API。官方文档已经给出了非常详细的解释，这里不再赘述。提示：debug为true，在debug的时候可以起到一点帮助，但是review的时候建议改成false。app.wxss.green{color:#26b961;}page{height:100%;background-color:#f8f8f8;}app.wxss中定义的样式是全局样式，作用于每个页面。页面的wxss文件中定义的样式是本地样式，只作用于对应的页面，覆盖app.wxss中相同的选择器。Step2.添加页面接下来，我们需要为小程序添加页面。小程序的页面存储在页面文件夹下。我们不断完善目录结构├──lib/├──styles/│├──base.wxss├──pages/│├──detail/│├──index/├──app.js├──应用程序。json├──app.wxss首先我们在pages目录下添加detail和index两个文件夹，其中detail代表小程序的文章详情页，index代表小程序的首页。只有文件夹是不够的。小程序中，每个页面有四个文件[name].js页面的主要逻辑文件[name].json页面的配置文件[name].wxml页面内容和前面一个html文件类似[name].wxss页面的样式文件，类似于前面的css文件提示：值得注意的是每个页面中的四个文件必须保持相同的名称。继续完善文件目录├──lib/├──styles/│├──base.wxss├──pages/│├──detail/│├──detail.js││├──detail.json││├──detail.wxml│├──detail.wxss│├──index/│├──index.js│├──index.json│├──index.wxml│├──index.wxss├──app.js├──app.json├──app.wxssindex.js和前面的app.js类似，小程序的页面也有对应的逻辑文件。比如index.js代表项目中首页的逻辑（小程序的首页不一定要是index，其他名字也可以）。Page({data:{text:"Thisispagedata."},onLoad:function(options){console.log('小程序加载完毕')//生命周期函数--监控页面加载},onReady:function(){//生命周期函数--监听页面第一次渲染完成},onShow:function(){//生命周期函数--监听页面显示},onReachBottom:function(){//拉取页面底部事件处理函数},//其他一些业务函数hello:function(){this.setData({text:'helloworld'})}})Page()函数用于注册页面。接受一个对象参数，指定页面的初始数据、生命周期函数、事件处理程序等。index.json每个小程序页面也可以使用.json文件配置本页面的窗口性能。页面的配置比app.json的全局配置要简单的多。它只是在app.json中设置了window配置项的内容，页面中的配置项会覆盖app.json的window中的相同配置项。页面的.json只能设置window相关的配置项来决定本页面的window性能，所以不用写windowkey。由于本项目比较简单，可以先使用全局配置。暂时可以放一个空的json对象{}index.wxml.wxml是小程序的页面文件。WXML（WeiXinMarkupLanguage）是由该框架设计的一套标签语言。结合基础组件和事件系统，可以构建页面结构。
