初探“微信小小程序”
时间：2024/3/8作者：未知来源：争怎路由网人气：
- 微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序是一种不用下载就能使用的应用，也是一项门槛非常高的创新，经过将近两年的发展，已经构造了新的小程序开发环境和开发者生态。
最近，“微信小程序”这个词占据了朋友圈，大有一番风起云涌之势，当然，还不可能夸张到使原生App开发人员失业这种程度。当然，作为一名技术人员，时刻保持对新技术的好奇心是必须的，所以在网上找大神的教程，搭建了一下开发环境，来学习一下这个新的开发框架。
一 项目文件结构
当打开微信小程序的Demo的时候，我个人习惯是先看整个项目的文件结构，先大致弄清这部分是干什么的，那部分又是干什么的，微信小程序基本的文件结构如下图：
图1-微信小程序基本文件结构
首先我们一眼就可以看到，在项目根目录有三个文件，app.js，app.json，以及app.wxss，下面来谈谈我对这三个文件的理解。
1 . app.js
app.js中包含一个App()函数，我把它理解为微信小程序真正意义上的入口，也就是说当启动一个小程序的时候，首先会执行到这里。App()函数用来注册一个小程序，参数为Object类型，可以在其中指定小程序的生命周期函数（理解还不是很透彻）, 当然，也可以定义一个全局的数据和函数，
我们可以在页面中调用全局的getApp()方法，获得小程序实例，从而来调用我们定义的全局数据和函数。
2 . app.json
app.json可以对小程序进行全局的配置，比如我们可以配置小程序有哪些页面、窗口表现形式、设置网络超时时间、设置多tab等。下面就是一个简单的配置：
{ "pages": [ "page/index/index", "page/logs/index" ], "window": { "navigationBarTitleText": "Demo" }, "tabBar": { "list": [{ "pagePath": "page/index/index", "text": "首页" },{ "pagePath": "page/logs/logs", "text": "日志" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true }3 .app.wxss
app.wxss文件比较好理解了，它相当于一个全局的样式表，等同于前端中的css文件，任何页面都可以使用这个样式表，当然，如果某个页面重复定义了某个属性的表现形式的话，则会覆盖app.wxss文件中定义的。
以上三个文件中，app.js和app.json是每个微信小程序必须要有的，app.wxss则根据需要来添加。
在图一的文件结构中，还有三个文件夹目录：images，pages，utils，这种形式就类似我们开发中分包的做法（其实就是）-将具有类型性质的文件或者类分目录存放，这样便于维护项目。
我们来关注下pages目录,这个目录存放了小程序的所有页面。
图2-小程序的页面结构
这里我们定义了两个页面，index（首页）和logs（显示某种日志）。
可以看到，在每个页面中，也有类似前边儿我们所说的app.js，app.json等文件，下面我们就来看看它们具体是什么。
以logs页面为例：
1 .logs.js
我们看一下这个文件中简单的代码：
//logs.js var util = require('../../utils/util.js') Page({ data: { logs: [] }, onLoad: function () { this.setData({ logs: (wx.getStorageSync('logs')关键词：初探“微信小小程序”