微信小程序云开发基础知识扫盲篇（一）文档结构

文件结构

全局文件

app.js文件

这个是小程序的脚本代码文件，可以在这个文件上进行监听，并处理小程序的一些生命周期（比如一些全局变量）

在这个app.js文件内，需要使用App()函数，来注册程序。

演示：

//app.js

App({

onLaunch: function () {

//当小程序初始化完成时，会触发onLaunch（全局只触发一次）

},

onShow: function () {

//当小程序启动，或从后台进入前台显示，会触发onShow

},

onHide: function () {

//当小程序从前台进入后台，会触发onHide

},

onError: function (msg) {

//当小程序发生脚本错误，或者api调用失败时，会触发onError并带上错误信息

},

other:function(){

//全局函数，可以被项目上的其他js文件调用

},

globalData:{

//全局对象

},

})

app.json文件

小程序的全局配置文件

pages

来指定小程序由哪些页面组成

接受一个数组，每一项都是字符串。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对pages数组进行修改。

文件名不需要写文件后缀，因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。

例如：

{

"pages":[

"pages/index/index",

"pages/logs/logs"

]

}

备注：pages内只需要写wxml文件的路径，其他文件不用写

window

用于设置小程序的状态栏、导航条、标题、窗口背景色

示例：

{

"window":{

"navigationBarBackgroundColor": "#ffffff",

"navigationBarTextStyle": "black",

"navigationBarTitleText": "微信接口功能演示",

"backgroundColor": "#eeeeee",

"backgroundTextStyle": "light"

}

}

tabBar

如果我们的小程序是一个多 tab应用（客户端窗口的底部或顶部有 tab栏可以切换页面），那么我们可以通过 tabBar配置项指定 tab栏的表现，以及 tab切换时显示的对应页面。

Tip： 通过页面跳转（wx.navigateTo）或者页面重定向（wx.redirectTo）所到达的页面，即使它是定义在 tabBar配置中的页面，也不会显示底部的 tab栏。

tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab按数组的顺序排序。

示例：

{

"tabBar": {

"color":"#818181",

"selectedColor":"#0082D7

"borderStyle":"white",

"list": [{

"pagePath": "pages/index/index",

"text": "首页",

"iconPath":"images/tabbar/index@2x.png",

"selectedIconPath":"images/tabbar/index_selected@2x.png"

}, {

"pagePath": "pages/me/me",

"text": "设置",

"iconPath":"images/tabbar/me@2x.png",

"selectedIconPath":"images/tabbar/me_selected@2x.png

}]

}

}

networkTimeout

可以设置各种网络请求的超时时间。

示例

{

"networkTimeout": {

"request": 10000,

"downloadFile": 10000

}

}

debug

可以在开发者工具中开启 debug模式，在开发者工具的控制台面板，调试信息以 info的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题。

示例：

{

"debug": false

}

app.wxss文件

定义全局的样式

基本上与css差不多，这里不用多

一个页面的内部

xxx.js

逻辑主函数

Page({

})

示例：

//index.js

Page({

data: {

text: "This is page data."

},

onLoad: function(options) {

// Do some initialize when page load.

},

onReady: function() {

// Do something when page ready.

},

onShow: function() {

// Do something when page show.

},

onHide: function() {

// Do something when page hide.

},

onUnload: function() {

// Do something when page close.

},

onPullDownRefresh: function() {

// Do something when pull down.

},

onReachBottom: function() {

// Do something when page reach bottom.

},

onShareAppMessage: function () {

// return custom share data when user share.

},

// Event handler.

viewTap: function() {

this.setData(

text: 'Set some data for updating view.'

})

},

customData: {

hi: 'MINA'

}

})

示例：

Page({

onShareAppMessage: function () {

return {

title: '自定义分享标题',

desc: '自定义分享描述',

path: '/page/user?id=123'

}

}

})

xxx.wxml

使用微信提供的组件来代替html元素

示例：

xxx.wxss

小程序样式，与css样式基本相似，这里不重复论述

在当前页面的wxss文件内编辑的css样式，只能使用在当前页

xxx.json

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json中的 window配置项的内容，页面中配置项会覆盖 app.json的 window中相同的配置项。

页面的.json只能设置 window相关的配置项，以决定本页面的窗口表现，所以无需写 window这个键

示例：

{

"navigationBarBackgroundColor": "#ffffff",

"navigationBarTextStyle": "black",

"navigationBarTitleText": "微信接口功能演示",

"backgroundColor": "#eeeeee",

"backgroundTextStyle": "light"

}