入坑微信小程序

自从去年张小龙提出小程序的概念以来，小程序这个词在这一年间就一直萦绕在大家的耳边，而小程序也不负众望，经过一年的准备终于在今年1月8日正式与大家见面。它依托微信平台，采用hybird技术，既能有接近native应用的交互体验，又具有H5应用随用随取免安装的方便快捷，一时间受到了相当程度的热捧。那么今天，就向大家介绍一下如何利用微信提供的开发工具来开发微信小程序。

开发工具下载链接

小程序开发工具下载地址：小程序开发工具

开始正式旅程

• 安装过后进入的第一个页面，微信扫码下一步，按照截图一步一步来

  
  
  

  首次进入开发工具
  
  
  

  选择第一个

设置项目目录和文件名

开发界面

开发界面

从这里正式进入到开发页面，左侧三个主选项卡，分别为编辑，调试，项目。

• 编辑:点击编辑，右侧会出现项目目录，选中文件后就可以进行代码编写了。

  
  
  

  编辑界面
• 调试：点击界面我们会看到如图内容，主要作用是查看查看报错信息，网络请求状态，页面层次结构，动态调试JS等

调试界面

• 项目:主要显示项目配置信息，在 0.10.101000 以及之后版本的开发工具中，会默认使用 babel 将开发者代码 ES6 语法转换为三端都能很好支持的 ES5 的代码，帮助开发者解决环境不同所带来的开发问题。开发者可以在项目设置中关闭这个功能。

  
  
  

  项目界面

项目文件结构

代码文件主要有.json(全局配置文件)，.js(JavaScript)，.wxml(布局文件)，wxss(样式文件)这4种格式的文件。

.wxml类似于web开发中的.html文件，而.wxss类似于.css文件。

文件结构

小程序的入口

小程序在启动时会创建App instance,也就是我们当前小程序的实例，其中会利用这三个文件app.json、app.js、app.wxss，对小程序进行全局配置。

app.json

该文件用于对小程序进行全局配置。其实每个页面也都可以有一个这样的配置文件，不过与app.json不同的是，页面json文件只能设置window下的样式。

配置包括:
pages：页面文件路径
window：窗口表现
networkTimeout：设置各种网络请求的超时时间
tabBar：设置多 tab
debug：是否开启 debug 模式

app.json内容说明

app.js

小程序逻辑层代码在这里实现，通过js编写，小程序的生命周期就在这里实现，同iOS appdelegate里面的生命周期类似。

App({
onLaunch: function() {
// Do something initial when launch.
},
onShow: function() {
// Do something when show.
},
onHide: function() {
// Do something when hide.
},
onError: function(msg) {
console.log(msg)
}, globalData: 'I am global data'})

app.js初始代码解析

app.wxss

这个不多说，类似于web开发中css的一个外联文件，设置整个应用程序的样式。