1.4　小程序开发入门

1.3节以Hello World小程序项目为例，简单了解了小程序的目录结构，接下来看看小程序框架，并对Hello World小程序进行简单修改来更深刻地理解微信小程序开发。

1.4.1　微信小程序框架

微信小程序开发主要基于MVC框架，即模型、视图和控制器。模型层在这里体现得不是很明显，大部分时候都以全局变量或页面局部变量的形式存在，一般存在于控制器中。视图由wxml文件表示，它将控制器得到的数据通过wxml文件进行组合和渲染。而视图与控制器的交互通过绑定事件的形式触发控制器各个函数的执行，大部分事件会传递目标节点对象作为其参数。

当新建项目时，会建立小程序主控制逻辑与配置文件，其中包括：app.js（控制小程序逻辑、响应生命周期回调函数操作、定义全局变量等），此文件用于注册小程序；app.json（小程序窗口、特性配置、下拉刷新、导航栏配置、tabBar等）；app.wxss（样式配置）。

接下来具体的页面操作才是和用户交互的真正载体，每个页面都单独存放一个文件夹，以方便管理，同时WAService会对此文件夹中的页面样式文件进行渲染。每个页面都由js文件进行控制，wxml进行布局，wxss进行样式设置。用于响应生命周期的方法有onLoad（监听页面加载）、onReady（监听页面初次渲染完成）、onShow（监听页面显示）、onHide（监听页面隐藏）、onUnload（监听页面卸载）。

1.4.2　Hello World小程序的简单修改

1．修改window属性

打开新建好的Hello World小程序，通过app.json的pages字段可以知道当前小程序的所有页面路径。

     {
       ＂pages＂:[
          ＂pages/index/index＂,
          ＂pages/logs/logs＂
       ]
     }

这个配置说明在Hello World小程序项目定义了两个页面，分别位于pages/index/index和pages/logs/logs。而写在pages字段的第一个页面＂pages/index/index＂就是进入这个小程序之后的首页（打开小程序看到的第一个页面）。于是，微信客户端就把首页的代码装载进来，通过小程序底层的一些机制，即可渲染出首页。小程序启动之后，在app.js定义的App实例的onLaunch回调会被执行。

    App({
      onLaunch:function(){
        //小程序启动之后触发
      }
    })

对于window字段，可以理解为页面外观的一些显示。

    ＂window＂:{
    ＂backgroundTextStyle＂:＂light＂,
    ＂navigationBarBackgroundColor＂:＂#fff＂,
    ＂navigationBarTitleText＂:＂WeChat＂,
    ＂navigationBarTextStyle＂:＂black＂
    }

修改window属性的值，逐一将navigationBarBackgroundColor的值改为0ca，navigationBarTitleText的值改为“微信”，navigationBarTextStyle的值改为white。每修改一个值编译一次代码，观察模拟器中页面的变化，更好地体会每个值对应的作用区域在哪里，修改后的代码如图1-53所示。

修改完上述值，会发现页面发生改变，如图1-54所示。

2．数据绑定

Hello World小程序中涉及的是简单的数据绑定，数据绑定使用Mustache语法（双大括号）将变量括起来。index.wxml和index.js文件对应的代码分别如下：

     <!－－ index.wxml－－>
     <view>{{ message }}</view>
     //index.js
     Page({
       data:{
         message:'HelloM INA!'
       }
     })

在js文件中，在Page（）方法的data数组中定义了message变量，并给message附上初始值Hello MINA!，然后在wxml文件中使用{{message}}，将message的值显示在界面上。以上为数据绑定的例子。

回到Hello World小程序项目中，其中{{motto}}的值为Hello World，userInfo为数组，主要存储用户的信息，{{userInfo.avatarUrl}}和{{userInfo.nickName}}分别为微信用户的头像和昵称，如图1-55和图1-56所示。

接下来可以修改js文件中motto的初始值，如图1-57所示。修改后的效果如图1-58所示。

再修改动态获取的昵称，如图1-59所示，在/pages/index目录下，修改index.wxml文件。

将{{userInfo.nickName}}改为开发者想要的任何名字，如图1-60所示，然后进行编译。

结果如图1-61所示。

3．添加tabBar

给Hello World小程序添加一个tabBar，代码如下：

     ＂tabBar＂:{
        ＂list＂:[
             {
              ＂pagePath＂:＂pages/index/index＂,
              ＂text＂:＂主页面＂,
              ＂iconPath＂:＂images/tab_account1.png＂,
              ＂selectedIconPath＂:＂images/tab_account2.png＂
             },
             {
              ＂pagePath＂:＂pages/logs/logs＂,
              ＂text＂:＂日志＂,
              ＂iconPath＂:＂images/tab_course1.png＂,
              ＂selectedIconPath＂:＂images/tab_course2.png＂
           }
         ]
       }

新建images文件夹，用于存放icon的图片。images的添加方法有两种：①单击目录结构区左上方的“+”按钮，单击“目录”，并命名为images；②打开项目存放目录，在项目文件夹下新建images文件夹，如图1-62所示。

将icon的图片粘贴到images文件夹下，即可将图片放置于images目录下，如图1-63所示。

推荐一个icon的下载网站，网址为www.iconfont.cn，开发者可以在该网址下载自己需要的icon，如图1-64所示。