小程序入门

要开发小程序首先要明白下面几个问题

我们如何创建小程序，如何对项目的目录结构分析？
一个小程序页面的生命周期是什么？
如何增加页面？
如何设置导航栏的属性？
小程序是如何将视图层和逻辑层进行绑定的？

小程序的文件结构

一个小程序首先有四个应用入口文件：

app.js：设置一些项目的全局变量,小程序逻辑，初始化APP
app.json：小程序的全局配置，比如导航、窗口、页面http请求跳转等。全局配置页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
app.wxss：项目全局样式
project.config.json：项目配置文件

一个页面主要是包含以下四个文件，这四个文件必须是相同的名字和路径，最好以页面所在的文件夹名字为标准：

xxx.wxml：页面的结构（必须）
xxx.wxss：页面的样式
xxx.json：页面的配置文件
xxx.js：页面的脚本文件（必须）

页面可以嵌套页面，但是建议不要超过5个层级。

app.json文件

"pages": [ //设置页面的路径
  "pages/index/index", //不需要写index.wxml,index.js,index,wxss,框架会自动寻找并整合
  "pages/logs/logs"
],
"window": { //设置默认窗口的表现形式
  "navigationBarBackgroundColor": "#ffffff", //顶部导航栏背景色
  "navigationBarTextStyle": "black", //顶部导航文字的颜色 black/white
  "navigationBarTitleText": "微信接口功能演示", //顶部导航的显示文字
  "backgroundColor": "#eeeeee", //窗口的背景色
  "backgroundTextStyle": "light", //下拉背景字体、loading 图的样式，仅支持 dark/light
  "enablePullDownRefresh": "false"， //是否支持下拉刷新 ，不支持的话就直接不写！
  "disableScroll": true, //  设置true不能上下滚动，true/false，注意！只能在 page.json 中有效，无法在 app.json 中设置该项。
},
"tabBar": { //底部tab或者顶部tab的表现，是个数组，最少配置2个，最多5个
  "list": [{ //设置tab的属性，最少2个，最多5个
    "pagePath": "pages/index/index", //点击底部 tab 跳转的路径
    "text": "首页", //tab 按钮上的文字
    "iconPath": "../img/a.png", //tab图片的路径
    "selectedIconPath": "../img/a.png" //tab 在当前页，也就是选中状态的路径
  }, {
    "pagePath": "pages/logs/logs",
    "text": "日志"
  }],
  "color": "red", //tab 的字体颜色
  "selectedColor": "#673ab7", //当前页 tab 的颜色，也就是选中页的
  "backgroundColor": "#2196f3", //tab 的背景色
  "borderStyle": "white", //边框的颜色 black/white
  "position": "bottom" //tab处于窗口的位置 top/bottom
  },
"networkTimeout": { //默认都是 60000 秒一分钟
    "request": 10000, //请求网络超时时间 10000 秒
    "downloadFile": 10000， //链接服务器超时时间 10000 秒
      "uploadFile": "10000", //上传图片 10000 秒
    "downloadFile": "10000" //下载图片超时时间 10000 秒
  },
"debug": true //项目上线后，建议关闭此项，或者不写此项

可以看到共有五个部分可以配置，分别是pages, window, tarBar, networkTimeout和debug

pages：定义的是这个小程序由哪些页面组成。在以后需要新增或者减少页面时，都需要在这里进行设置，有几个页面pages数组就有几项。pages是一个数组，而数组的第一项就是小程序的初始页面.

window: 定义的是窗口的配置信息。

属性类型默认值描述

navigationBarBackgroundColorHexColor#000000导航栏背景颜色，如"#000000"

navigationBarTextStyleStringwhite导航栏标题颜色，仅支持 black/white

navigationBarTitleTextStringa导航栏标题文字内容

backgroundColorHexColor#ffffff窗口的背景色

backgroundTextStyleStringdark下拉背景字体、loading 图的样式，仅支持 dark/light

enablePullDownRefreshBooleanfalse是否开启下拉刷新

tarBar: 用来定义 tabBar 的表现

tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

我们可以在项目目录下添加一个images文件，用来存放我们的图片文件。

注意：目前小程序只支持网络图片或者base64图片，使用本地图片需要将图片转为base64代码

networkTimeout: 用来设置各种网络请求的超时时间。

属性类型必填说明

requestNumber否wx.request的超时时间，单位毫秒

connectSocketNumber否wx.connectSocket的超时时间，单位毫秒

uploadFileNumber否wx.uploadFile的超时时间，单位毫秒

downloadFileNumber否wx.downloadFile的超时时间，单位毫秒

小程序的生命周期

（1）App()生命周期

用户首次打开小程序，触发 onLaunch（全局只触发一次）。
小程序初始化完成后，触发onShow方法，监听小程序显示。
小程序从前台进入后台，触发 onHide方法。
小程序从后台进入前台显示，触发 onShow方法。
小程序后台运行一定时间，或系统资源占用过高，会被销毁。
小程序出错，触发onError

前台、后台定义：当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台

  //app.js
  App({
    onLaunch: function() { 
        //小程序初始化(全局只触发一次)
    },
    onShow: function() {
        //小程序显示
    },
    onHide: function() {
        //小程序隐藏
    },
    onError: function(msg) {
        //小程序错误
    },
  })    
  //其他 开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问

（2）Page页面生命周期（每个页面也有自己的生命周期）

小程序注册完成后，加载页面，触发onLoad方法。
页面载入后触发onShow方法，显示页面。
首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。
当小程序后台运行或跳转到其他页面时，触发onHide方法。
当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。
当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload

//index.js
Page({
onLoad: function(options) {
//页面加载-----(一个页面只会调用一次)
},
onReady: function() {
//页面渲染-----(一个页面只会调用一次)
},
onShow: function() {
//页面显示-----(每次打开页面都会调用一次)
},
onHide: function() {
//页面隐藏-----(当navigateTo或底部tab切换时调用)
},
onUnload: function() {
//页面卸载-----(当redirectTo或navigateBack的时候调用)
},
})
//其他开发者可以添加任意的函数或数据到 object 参数中，在页面的函数中用 this 可以访问

（3）应用生命周期影响页面生命周期

小程序初始化完成后，页面首次加载触发onLoad，只会触发一次。
当小程序进入到后台，先执行页面onHide方法再执行应用onHide方法。
当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法

视图层和逻辑层数据绑定

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{obj.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>


//index.js
Page({
  data: {
    text: 'init data',
    array: [{text: 'init data'}],
    object: {
      text: 'init data'
    }
  },
  changeText: function() {
    this.setData({
      text: 'changed data'
    })
  },
  changeItemInArray: function() {
    this.setData({
      'array[0].text':'changed data'
    })
  },
  changeItemInObject: function(){
    this.setData({
      'object.text': 'changed data'
    });
  },
  addNewField: function() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})

创建小程序页面步骤

在pages 中添加一个目录 ,选中page,右击鼠标新建一个文件夹test（或者点击+号，逐个添加目录，添加目录下面所需要的文件）

新建一个wxml 文件,在test文件夹底下新建一个wxml空文件

编辑test.wxml 文件

 <view class="container">  
        <text>这是test页面！！！</text>  
 </view>

同样的方法，创建test.js文件，编辑test.js文件

 //test.js  
 //获取应用实例  
 var app = getApp()  
 Page({  
   data: {  
     userInfo: {}  
   },  
   onLoad: function () {  
     console.log('onLoad test');  
   }  
 })

将test 页面加入 app.json,打开全局文件 app.json，在文件里面添加 "pages/test/test"（加入一条 test 页面所在的目录）

在首页加入跳转访问链接, 在首页写一个页面入口，跳转到我们要测试的页面上，直接在首页 pages/index/index.wxml 添加一段代码一句链接
```
 <view class="btn-area">  
    <navigator url="/pages/test/test" hover-class="navigator-hover">跳转test页面</navigator>  
  </view>  
```
测试,保存代码，点击上面的编译按钮，所有代码运行起来，点击首页的“跳转到test页面”，跳转成功。
设置页面标题,找到 pages/test/ 目录新建一个 test.json 文件加入如下代码。
```
 {
   "navigationBarTitleText": "test详情页"
 }
```

小程序入门

要开发小程序首先要明白下面几个问题

小程序的文件结构

一个小程序首先有四个应用入口文件：

一个页面主要是包含以下四个文件，这四个文件必须是相同的名字和路径，最好以页面所在的文件夹名字为标准：

app.json文件

window: 定义的是窗口的配置信息。

tarBar: 用来定义 tabBar 的表现

networkTimeout: 用来设置各种网络请求的超时时间。

小程序的生命周期

（1）App()生命周期

（2）Page页面生命周期（每个页面也有自己的生命周期）

（3）应用生命周期影响页面生命周期

视图层和逻辑层数据绑定

创建小程序页面步骤

推荐阅读更多精彩内容