微信小程序学习一初探“小程序”

   <p>最近这两天，“微信小程序”这个词占据了朋友圈，大有一番风起云涌之势，当然，还不可能夸张到使原生App开发人员失业这种程度。当然，作为一名技术人员，时刻保持对新技术的好奇心是必须的，所以在网上找大神的教程，搭建了一下开发环境，来学习一下这个新的开发框架。</p>    <p>一 项目文件结构</p>    <p>当打开微信小程序的Demo的时候，我个人习惯是先看整个项目的文件结构，先大致弄清这部分是干什么的，那部分又是干什么的，微信小程序基本的文件结构如下图：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/dc85ab01f7355ffdf65506ee2af4f5db.png"></p>    <p style="text-align: center;">图1-微信小程序基本文件结构</p>    <p>首先我们一眼就可以看到，在项目根目录有三个文件，app.js，app.json，以及app.wxss，下面来谈谈我对这三个文件的理解。</p>    <h3><strong>1 . app.js</strong></h3>    <p>app.js中包含一个App()函数，我把它理解为微信小程序真正意义上的入口，也就是说当启动一个小程序的时候，首先会执行到这里。App()函数用来注册一个小程序，参数为Object类型，可以在其中指定小程序的生命周期函数（理解还不是很透彻）, 当然，也可以定义一个全局的数据和函数，</p>    <p>我们可以在页面中调用全局的getApp()方法，获得小程序实例，从而来调用我们定义的全局数据和函数。</p>    <h3><strong>2 . app.json</strong></h3>    <p>app.json可以对小程序进行全局的配置，比如我们可以配置小程序有哪些页面、窗口表现形式、设置网络超时时间、设置多tab等。下面就是一个简单的配置：</p>    <pre>  {   "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  }</pre>    <h3><strong>3 .app.wxss</strong></h3>    <p>app.wxss文件比较好理解了，它相当于一个全局的样式表，等同于前端中的css文件，任何页面都可以使用这个样式表，当然，如果某个页面重复定义了某个属性的表现形式的话，则会覆盖app.wxss文件中定义的。</p>    <p>以上三个文件中，app.js和app.json是每个微信小程序必须要有的，app.wxss则根据需要来添加。</p>    <p>在图一的文件结构中，还有三个文件夹目录：images，pages，utils，这种形式就类似我们开发中分包的做法（其实就是）-将具有类型性质的文件或者类分目录存放，这样便于维护项目。</p>    <p>我们来关注下pages目录,这个目录存放了小程序的所有页面。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/dbdb3fb4273228cbd81690490cc353cd.png"></p>    <p style="text-align: center;">图2-小程序的页面结构</p>    <p>这里我们定义了两个页面，index（首页）和logs（显示某种日志）。</p>    <p>可以看到，在每个页面中，也有类似前边儿我们所说的app.js，app.json等文件，下面我们就来看看它们具体是什么。</p>    <p>以logs页面为例：</p>    <h3><strong>1 .logs.js</strong></h3>    <p>我们看一下这个文件中简单的代码：</p>    <pre>  //logs.js  var util = require('../../utils/util.js')  Page({    data: {      logs: []    },    onLoad: function () {      this.setData({        logs: (wx.getStorageSync('logs') || []).map(function (log) {          return util.formatTime(new Date(log))        })      })    }  })</pre>    <p>如果你有过开发经验或者是js开发经验，那么一样就可以看出，这个类的结构很简单：1.引入了一个外部文件，2.有一个函数，进行了某种处理。</p>    <p>我们看一下官方文档是怎么介绍这个以js结尾的文件的：包含一个Page()函数，Page()函数用来注册一个页面。接受一个object参数，其指定页面的初始数据、生命周期函数、事件处理函数等。它是页面的逻辑文件，页面逻辑在这里处理。</p>    <p>在这个文件中，我们可以定义变量，函数等。</p>    <h3><strong>2 .logs.json</strong></h3>    <p>app.json是小程序的全部配置文件，那么不难理解，logs.json则是logs页面的配置文件，在这里我们可以配置页面标题等属性。</p>    <h3><strong>3 .logs.wxml</strong></h3>    <p>wxml文件是页面独有的，它相当于界面，它是与用户交互的入口，微信提供了很多基础组件，例如按钮，文本以及进度条等，都可以在这个文件中配置并显示出具体的效果。</p>    <h3><strong>4 .logs.wxss</strong></h3>    <p>wxss跟app.wxss文件一样，都是样式表文件，不过每个页面下的这个文件时对于某个页面的，而app.wxss则是全局的样式配置，相同属性的话，logs.wxss会覆盖掉app.wxss中的。</p>    <p>对于页面下的文件配置，我们来看一下官方的说明：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/36bc4c01a63ec48d85c817842fe41543.png"></p>    <p style="text-align: center;">图3-页面文件配置</p>    <h3><strong>结语</strong></h3>    <p>以上就是微信小程序的整体项目文件结构，由宏观到具体，弄清整体框架后，再一步一步学习其中的细节，可能会更加轻松。</p>    <p> </p>    <p>来自：http://www.jianshu.com/p/545ba8737f4f</p>    <p> </p>