微信小程序的文件结构 —— 微信小程序教程系列（1）
文件结构
示例目录：HelloWorld
*******************************************************分割线********************************************************
全局文件
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"
}
微信小程序教程系列
相关连接：http://blog.csdn.net/michael_ouyang/article/details/54700871
注册上线篇
------------------------------------------------------------
微信小程序之如何注册微信小程序
微信小程序之小程序上线
基础篇
------------------------------------------------------------
微信小程序的生命周期实例演示 —— 微信小程序教程系列（2）
微信小程序的动态修改视图层的数据 —— 微信小程序教程系列（3）
微信小程序的如何使用全局属性 —— 微信小程序教程系列（5）
微信小程序标题栏和导航栏的设置 —— 微信小程序教程系列（7）
微信小程序视图层的条件渲染 —— 微信小程序教程系列（10）
微信小程序视图层的列表渲染 —— 微信小程序教程系列（11）
微信小程序的百度地图获取地理位置 —— 微信小程序教程系列（15）
微信小程序使用百度api获取天气信息 —— 微信小程序教程系列（16）
微信小程序获取系统日期和时间 —— 微信小程序教程系列（17）
微信小程序之上拉加载和下拉刷新 —— 微信小程序教程系列（18）
实战篇
------------------------------------------------------------
微信小程序之上拉加载（分页加载）实例 —— 微信小程序实战系列（2）
微信小程序之仿android fragment之可滑动的底部导航栏实例 —— 微信小程序实战系列（4）
微信小程序之自定义toast实例 —— 微信小程序实战系列（6）
微信小程序之自定义抽屉菜单（从下拉出）实例 —— 微信小程序实战系列（7）
微信小程序之自定义模态弹窗（带动画）实例 —— 微信小程序实战系列（8）
电商篇
------------------------------------------------------------
微信小程序之仿淘宝分类入口 —— 微信小程序实战商城系列（2）
微信小程序之购物数量加减 —— 微信小程序实战商城系列（3）
微信小程序之商品属性分类 —— 微信小程序实战商城系列（4）
微信小程序之购物车 —— 微信小程序实战商城系列（5）
更多小程序的教程：http://blog.csdn.net/column/details/14653.html
微信小程序的文件结构 —— 微信小程序教程系列（1）相关推荐
- [转]微信小程序之购物车 —— 微信小程序实战商城系列（5）
本文转自:http://blog.csdn.net/michael_ouyang/article/details/70755892 续上一篇的文章:微信小程序之商品属性分类 -- 微信小程序实战商城 ...
- 微信小程序之组件 —— 微信小程序教程系列（19）
什么是组件: 组件是视图层的基本组成单元. 组件自带一些功能与微信风格的样式. 一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内. <tagname property ...
- 微信小程序的如何使用全局属性 —— 微信小程序教程系列（5）
微信小程序提供了app.js文件,用于放置一些全局的函数和全局的属性. 一般情况下,我都会把一些常用的函数和属性写在app.js文件内,这样不用在页面之间传值,或者不用重复加载. 下面以全局属性为例 ...
- 微信小程序之微信登陆 —— 微信小程序教程系列（20）
简介: 微信登陆,在新建一个微信小程序Hello World项目的时候,就可以看到项目中出现了我们的微信头像,其实这个Hello World项目,就有一个简化版的微信登陆.只不过是,还没有写入到咱们自 ...
- 微信小程序使用百度api获取天气信息 —— 微信小程序教程系列（16）
之前已经介绍过,如何使用百度地图api来获取地理位置信息 微信小程序的百度地图获取地理位置 -- 微信小程序教程系列(15) 下面介绍使用百度api来获取天气信息. 1> 第一步:先到百度开放平 ...
- 微信小程序的网络请求 —— 微信小程序教程系列（14）
网络请求,基本上是必须的环节之一. 小程序提供了wx.request(object),与开发者的服务器实现数据交互的一个很重要的api. 最简单的用法如下(以GET请求为例) <view bin ...
- 微信小程序获取系统日期和时间 —— 微信小程序教程系列（17）
获取当前系统日期和时间 在小程序中,新建项目时,就会有一个utils.js文件,就是获取日期和时间的,代码如下: utils.js: function formatTime(date) {var ye ...
- 微信小程序标题栏和导航栏的设置 —— 微信小程序教程系列（7）
设置标题栏 标题栏window 在app.json文件里面,通过window对象里面的属性进行设置 示例: app.json: 运行: 设置导航栏 导航栏TabBar 如果我们的小程序是一个多 tab ...
- 微信小程序之wx:if视图层的条件渲染 —— 微信小程序教程系列（10）
使用wx:if进行视图层的条件渲染 示例: wxml:使用view <!--index.wxml--> <button bindtap="EventHandle" ...
最新文章
- Java 泛型中? super T和? extends T的区别
- 【洛谷 P4934】 礼物 （位运算+DP）
- 测试必知的150个Linux命令
- oracle--rowid
- Python基础__Python序列基本类型及其操作（1）
- 从尾到头打印链表(六)
- 用glew，glfw实现opengl-学习笔记3着色器
- NVMe驱动详解系列——第一部分：NVMe驱动初始化和注销
- 论文查重算法 python_论文查重降重绝密方法
- 第十二周博客作业西北师范大学|李晓婷
- 用Redis轻松实现秒杀系统
- [易飞]付款条件-账期之理解
- Windows CMD常用命令大全
- 总结一下用面向对象写法调用借口
- linux内核调试环境搭建-
- 计算机专业毕业设计题目大全文库,计算机专业毕业设计论文题目.doc
- WampServer修改MySQL密码
- 谷歌浏览器翻译英文网页功能消失解决方案
- 全国青少年科技创新大赛全国青少年信息学奥林匹克系列比赛（大赛系列第12期）
- 电脑接两个屏幕，其中一个偶尔闪灭