QQ讨论群：785071190

需要学会一种技术需要丛整体结构来了解，本文主要对微信小程序的代码结构做一个介绍。后期博文将对每一个知识做详细介绍。

json、wxml、wxss、js认识

小程序主要包含后缀是.js.json.wxml.wxss的文件。

.js文件主要完成业务逻辑并控制页面需要展现的数据，完成网络请求，用户点击事件等功能。

.json主要完成应用配置或页面属性配置。

.wxml类似于html，描述页面结构展示。

.wxss类似于css，页面展示样式控制。

app

app.js、app.json、app.wxss这三个文件是微信小程序真个应用的全局配置。

小程序配置app.jsonapp.json是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。app.json配置内容如下：

{"pages":["pages/index/index","pages/logs/index"],"window":{"navigationBarTitleText":"Demo"},"tabBar":{"list":[{"pagePath":"pages/index/index","text":"首页"},{"pagePath":"pages/logs/logs","text":"日志"}]},"networkTimeout":{"request":10000,"downloadFile":10000},"debug":true}以上所有参数在官方文档中都有详细的介绍此处不重复编写，此处给出部分相关配置实例。官网地址(https://developers.weixin.qq.com/miniprogram/dev/framework/config.html)

小程序应用逻辑控制app.js

1.app.js包含整个应用的生命周期函数，其中数据是全局的，可以在小程序所有js中调用，其他js中只需要通过getApp()获取app对象即可调用。以下是app.js的基本结构。官网详细介绍

App({onLaunch:function(options){//Dosomethinginitialwhenlaunch.},onShow:function(options){//Dosomethingwhenshow.},onHide:function(){//Dosomethingwhenhide.},onError:function(msg){console.log(msg)},globalData:'Iamglobaldata'})小程序全局样式app.wss

2.app.wss中定义的样式可在所有页面中使用。方便码农们统一定义样式。

3.app.wss内容如下：

/**app.wxss**/.container{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;background-color:#bfbfbf;padding:200rpx0;box-sizing:border-box;}

4.index.wxml如下使用：

!--index.wxml--viewclass='container'/viewPage小程序页面主要包含四个文件.js、.json、.wxml、.wxss

5.小程序页面Page

6.小程序页面生命周期函数在.js文件中，其中包含有onLoad、onReady、onShow、onHide、onUnload生命周期函数等。官方文档

//index.jsPage({data:{text:"Thisispagedata."},onLoad:function(options){//Dosomeinitializewhenpageload.},onReady:function(){//Dosomethingwhenpageready.},onShow:function(){//Dosomethingwhenpageshow.},onHide:function(){//Dosomethingwhenpagehide.},onUnload:function(){//Dosomethingwhenpageclose.},onPullDownRefresh:function(){//Dosomethingwhenpulldown.},onReachBottom:function(){//Dosomethingwhenpagereachbottom.},onShareAppMessage:function(){//returncustomsharedatawhenusershare.},onPageScroll:function(){//Dosomethingwhenpagescroll},onTabItemTap(item){console.log(item.index)console.log(item.pagePath)console.log(item.text)},//Eventhandler.viewTap:function(){this.setData({text:'Setsomedataforupdatingview.'},function(){//thisissetDatacallback})},customData:{hi:'MINA'}})

7.小程序页面视图

8.小程序页面编写在.wxml文件中，此处内容比较多，后期博文会对其一一介绍。官方文档

!--index.wxml--formbindsubmit='submit'view用户名：/viewinputtype='text'name="username"/inputview密码：/viewinputtype='text'password='true'name="password"/inputbuttonform-type='submit'登陆/button/form小程序页面配置json

页面中.json文件主要是对页面标题栏，以及其他属性进行配置。官方文档

{"navigationBarTitleText":"查看启动日志"}小程序页面样式wxss.wxss类似于css，页面展示样式控制。

.log-list{display:flex;flex-direction:column;padding:40rpx;}.log-item{margin:10rpx;}

​