微信小程序入门一：入门准备

一、开发工具

微信提供了专门的开发工具：
下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

二、开发须知

目前微信公众号只针对企业，政府，个体经营等性质用户提供了AppID，所以个人学习的话就选择“无AppID”开发即可。

三、技术基础

HTML+CSS+JavaScript，懂一些IOS及Android知识会更好

四、项目入门Hello World

一个项目的目录结构大致如下：

4.1 根目录：

app.js ：应用程序的主入口，一个小程序只有唯一的一个app.js文件
app.json:配置文件，页面渲染所用到的一些配置就放在这里面（注意：里面不能写注释）
app.wxss:[可选项]，.wxss后缀可以理解为css的变种，其写法和css一致，用于页面样式
pages：文件目录用于存放应用的各页面
utils:用于存放公有的文件

4.2 pages目录

pages目录是整个程序中重要的一个目录，用于存放各页面组件，每个页面可以独立为一个文件夹，而每一个文件夹又可以包括index.js,index.wxml,index.wxss ，index.json四个文件
（wxml可以理解为html的变种，写法相似，只是里面的标签替换成了wx封装好的标签，这有点类似于react组件的写法）
总结：写一个页面的三要素：js,wxml,wxss
注意事项
微信了为方便减少开发的配置项，要求每个页面中js，wxml，wxss,json文件的文件名都具有相同的路径和文件名。
如：在index文件夹下的四个文件依次是：index.js,index.wxml,index.wxss,index.json

五、小程序配置项（app.json）

5.1 简介

app.json文件是用来对小程序进行全局配置的，它决定了页面文件的路径、窗口表现，设置网络超时时间、设置多 tab 等。
可以说，app.json就是整个小程序启动时查询各页面的命令参照点。

1、pages属性

作用：设置页面路径；
类型：数组；
写法如下：

 "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],

注意：因为每个页面的js,wxml,wxss,json文件都是用的相同的文件名，所以这里不需要写文件后缀，微信会自动根据文件名找到相应的文件进行加载和渲染

2、window属性

作用：用于设置小程序的状态栏、导航条、标题、窗口背景色。
类型：对象
写法如下：

{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

如上：上面代码依次设置了：导航条背景色，导航条文本颜色，导航条文字内容，页面背景色等；页面设置了一些基本的样式及内容（这些内容的变化不大，所以可以通过window进行设置）

3、tabBar属性

作用：页面切换的触发点，生成工具条，用户通过触模工具条进行页面跳转或重定向
类型：对象Object
写法：

 "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },

注意：
1、tabBar 只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
2、更多tabBar的属性配置可参看微信官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

4、networkTimeout属性

作用：设置网络超时时间
类型：对象
写法：

 "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },

属性：
request/connectSocket/uploadFile/downloadFile

5、debug属性

作用：设置是否开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出
类型：Boolean
写法：

 "debug": true

可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题。

6、页面配置项page.json

除了在根目录配置app.json外，每个页面也可以配置对应的*.json
可以把app.json看成是全局配置文件，而*.json则是各页面对应的配置文件

六、几个重要函数

6.1 App（） ：注册应用程序

App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。
用法：

App({
  onLaunch: function() { 
    // 页面初始化完成时触发此函数（全局只触发一次，生命周期函数）
  },
  onShow: function() {
      //小程序启动时或由后台进入前台时触发（生命周期函数--监听显示）
  },
  onHide: function() {
      //小程序从前台进入后台时触发（生命周期函数--监听隐藏）
  },
  onError: function(msg) {
  //发生脚本错误或调用app失败时触发
    console.log(msg)
  },
  //自定义的数据，可通过this访问
  globalData: 'I am global data'
})

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

6.2 Page() :注册页面

Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。
示例：

<view>{{text}}</view>
<view>{{array[0].msg}}</view>

Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})