微信小程序是近些年一项新的事物。互联网的发展过程中，总会不断出现新的事物，因为逆水行舟不进则退，创新才是互联网科技发展的原动力。

大家想一下，这种开发模式对Android和IOS肯定会造成一些冲击，因为这样微信等于自己成为了一个操作系统的平台，里面可以有各种各样的应用。

另外听说支付宝最近也有小程序了，说明这是今后的一个趋势。

抱着一定的好奇，另外最近闲暇时间也在做自己的小程序，所以边学编边写，供大家参考。

那么小程序开发怎么入门？今天主要介绍下开发工具、项目结构、全局配置文件及页面跳转等。

小程序账号的注册、开放工具的下载比较简单，此处不在赘述。

一、开发工具

开发工具的名字就叫“微信开发者工具”，非常直白利于记忆。

启动之后，我们来看一下它的长相，开发工具界面如下：

可以看到，界面有三个区域：模拟预览区、编辑代码区、调试区。这和我们开发其他软件的必备的操作区域是一样的。

这三个开发区域，分别对应左上角三个绿色按钮，点击它们就可以进行对不同区域的隐藏，非常方便。

建议大家，初学期间，先下载一个demo项目，打开之后，边看边学，在开发工具上边点边试，效率最高。

下面我们就以这个“石头剪刀布”小游戏为例进行介绍。

二、项目四大文件类型

微信小程序的项目，共有四种文件类型，这是最最基础的入门知识了。

1.wxml：微信模板文件，类似网页开发的html文件。

2.wxss：微信样式表文件，用于定于页面样式。

3.js：脚本文件，代码逻辑写在这。

4.json：静态数据配置文件。

三、 项目结构

整体结构图如下：

可以看出：

（一）有一个page文件夹：page文件夹种的子文件夹就代表一个个页面，每个页面（文件夹）信息都至少包括3个文件，json文件不是必须的 一般情况下我们只需要用全局配置的 app.json文件配置就可以了。

（二）有一个utils的文件夹：可以看出utils和pages文件是并列的，所以他就不代表页面的信息了，里面只有一个js文件，这个js文件其实就是把代码模块化了，这里面是将日期的转换封装好了，直接引入使用就可以了。

（三）还有一系列app开头的全局配置文件，pages里面的代表的仅仅是某个界面的配置，而app系列文件的代表的是整个项目的配置。

本篇重点介绍这些全局配置文件

四、全局配置文件

1.文件app.json—小程序全局配置文件

代码示例如下

{
  "pages": [
    "pages/index/index"
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#363527",
    "navigationBarTitleText": "石头剪刀布",
    "navigationBarTextStyle": "white"
  },
  "sitemapLocation": "sitemap.json"
}

此文件主要管理小程序的全局配置，包括小程序页面路径，界面风格(标题，背景色，字体色)，网络超时时间，底部tab等；

page配置项说明：

提供页面入口和页面控制功能，后面会介绍到。

window配置项说明：

这个配置项是用来设置小程序的状态栏、导航条、标题、窗口背景色。六个属性功能如下:

• navigationBarBackgroundColor 它是用来设置导航栏背景颜色,这个属性要输入的是十六进制颜色值.

• navigationBarTextStyle 它是用来导航栏标题颜色的,它的输入类型是字符串(String),但是现在官网给出的文档目前仅支持(black和white)这两种颜色.

• navigationBarTitleText 这个属性是显示导航栏标题内容的,开发者可以根据自己的需要来进行设置. - backgroundColor 这个属性是设置窗口的背景色的,它需要输入的也是十六进制颜色值的.

• backgroundTextStyle 这个属性我的理解是设置窗口内容的样式的,官方给出的标准说明是下拉背景字体、loading 图的样式,这个属性

• navigationBarTextStyle属性一样目前仅支持两种颜色(dark和light).

• enablePullDownRefresh 这个属性是设置是否开启下拉刷新,默认是开启的,注意: 在这个配置文件(app.json)中如果关闭了下拉刷新,当你在你自己开发的页面中想要设置下拉刷新也是行不通的,也就是说如果你想要在以后页面中使用下拉刷新这个功能,就必须保证这个配置文件中的这一项设置是打开的。

  官方文档中解释如下：
  
  注意：每个文件夹中的json中也有windows配置项，定义了文件夹内的wxml的界面风格，可覆盖app.json中的全局风格

其他配置项含义如下：

2.project.config.json—开发者工具配置

此文件用于定义开发者工具的个性化定制，比如界面颜色，编译配置等等。

project.config.json保存了你对于开发者工具的相关配置，如果你换电脑了，你可以通过此文件直接还原你最初习惯的开发设置。

3.app.js

app.js文件是项目的入口文件

onLaunch : function(){}：调用API从本地缓存中获取数据
onLoad:function(options){}：页面初始化 options 为页面跳转所传递过来的参数
onReady:function(){}：页面渲染完成
onShow:function(){}：页面显示
onHide:function(){}：页面隐藏
onUnload：function(){}：页面关闭

还可以在 app.js里面定义一些全局的方法：
例如：获取用户信息的方法(wx.getSetting)和属性(globalData)：

示例如下

//app.js
App({
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  }
})

五、页面跳转

1.首次进入程序，入口由文件app.json控制，如下所示，入口为pages/index/index.wxml文件

{
  "pages": [
    "pages/index/index",（说明：第一行的这个页面代表小程序的入口）
    "pages/logs/logs"
  ],

2.微信小程序页面之间怎么跳转

方法一：
在pages/index/index.wxml文件中设置一个按钮，给按钮绑定一个跳转事件，则点击跳转到另一个页面。

index.wxml文件，代码示例

        <navigator url="../ts/ts" 
        hover-class="navigator-hover"
         open-type="switchTab">我是个按钮demo
         </navigator>

方法二：
在小程序底部加选项卡控件，点击不同选项卡进入不同页面

代码就是在app.json里放一个list就可以了，list中将页面和选项卡绑定，示例如下：

"list": [
      {
        "pagePath": "pages/xxx/xxx",
        "text": "选项卡一",
        "iconPath": "image/xxx.png",
        "selectedIconPath": "image/xxx.png"
      },
      {
        "pagePath": "pages/yyy/yyy",
        "text": "选项卡二",
        "iconPath": "image/yyy.png",
        "selectedIconPath": "image/yyy.png"
      },
      {
        "pagePath": "pages/zzz/zzz",
        "text": "选项卡三",
        "iconPath": "image/zzz.png",
        "selectedIconPath": "image/zzz.png"
      },
      {
        "pagePath": "pages/ddd/ddd",
        "text": "使用说明",
        "iconPath": "image/ddd.png",
        "selectedIconPath": "image/ddd.png"
      }
    ]

六、新增页面

最佳做法是：

1.直接在app.json文件的pages数组中新增一条页面路径

2.按ctrl+s,保存，pages文件夹会自动生成一个新的页面，这样做更加方便和保险。