微信小程序开发工具安装及项目结构介绍

一、微信小程序介绍

1、什么是微信小程序

传说中的微信“应用号”终于要来了，但它的正式名称很有可能是“微信小程序”。那么什么是小程序呢？小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。
小程序传承了企业号、服务号：触手可得，不用安装，用完即走的优点。小程序的前景是非常不错的，小程序生态很可能成为移动原生生态的下一代替代品。

2、微信小程序的优点

    触手可得、不用安装、用完即走

3、微信小程序对行业的冲击

• 原生生态下生存的很多公司的商业模式会受到很大冲击
• 原生开发、 UI 设计、流量运营这些领域的人的失业率会增加
• 对浏览器生态也会产生影响

4、学习微信小程序开发需要具备的基础

• html、css、js基础
• ajax基础
• 简单的面向对象基础

前面扯了一大通的废话，下面转入正题吧，正式介绍微信小程序开发流程

二、开发工具下载及安装

官网地址：https://mp.weixin.qq.com/wiki
注意：打开界面后，点开左侧‘微信公众平台’下拉菜单——>选择‘微信公众平台-小程序’菜单，即可看到小程序开发的相关文档手册的链接
下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

下载完成安装包之后和安装通常的软件一样安装，安装完成后打开开发工具界面如下(下面是我已经创建了一个小demo哦)：

注意：首次打开工具的时候需要扫描二维码来绑定你的微信账号，做过微信开发的都知道，上图的图标就是你的微信图像哦。

三、微信小程序：Hello World创建

1、点击’添加项目’菜单弹出具体的添加界面

AppID：目前没有正式版本，所以选择‘无AppID’，等发布正式版本后可以根据情况修改；如果你有内测邀请，你可以登录：https://mp.weixin.qq.com，在网站的“设置”-“开发者设置”中，查看到微信小程序的 AppID；

项目名称：设置一个本地项目的名称（非小程序名称），比如“我的第一个项目”；

项目目录：选择一个本地的文件夹作为代码存储的目录。类似于Eclipse的工作空间，用来保存你的项目(注意，小程序创建的时候不会自动生产一个项目文件夹哦，所以要注意了)

参数设置完成后，点击’添加项目’按钮，即可创建自己的第一个小程序了。
注意：在创建过程中，如果选择的本地文件夹是个空文件夹，开发者工具会提示，是否需要创建一个 quick start 项目。选择“是”，开发者工具会帮助我们在开发目录里生成一个简单的 demo。

2、项目界面—菜单

编辑：可以查看和编辑我们的代码
注意：每次编辑完成后，需要切换到’调试’菜单，然后点击‘重启’功能才能生效哦。

调试：可以测试代码并模拟小程序在微信客户端效果

项目：可以发送到手机里预览实际效果(似乎没有内测AppID无法上传手机预览哦)

四、微信小程序目录结构介绍

目录介绍看下图及简易结构(建议向创建一个demo，结合demo来看哦)：

详细介绍：

根目录：
    |-- app.js(必须)           脚本文件，小程序的逻辑文件：定义了一个应用实例，可通过getApp()获取到。
    |                       语法：app(json对象)
    |
    |-- app.json(必须)         公共配置文件，例如配配置导航条样式，底部tab菜单等
    |                    是一个JSON对象，pages属性类似于定义了路由数组，pages的第一个元素表示小程序的首页
    |
    |-- app.wxss         公共样式文件，公共的css文件
    |
    |-- untils           存放公用js文件的文件夹
    |    |
    |    |-- util.js
    |
    |-- pages            页面相关的文件夹名称不能修改
         |
         |-- index       index页面文件夹（注意：为了减少配置项，建议页面文件夹名称和文件夹下的文件名保持一致，且js/wxml/wxss/json四个文件有相同的路由）
              |
              |-- index.js(必须)       当前页面对应的js文件，可通过var app = getApp()来获取当前应用实例。
              |                  语法：Page(json 对象)
              |
              |-- index.wxml(必须)
              |-- index.wxss

         |
         |-- logs       logs页面文件夹
              |
              |-- logs.js
              |-- logs.json     logs页面的数据及配置文件
              |-- logs.wxml     logs页面的页面布局展示文件，相当于html
              |-- logs.wxss     logs页面的独立样式文件

建议：查看第四部分项目目录结构是，请先创建一个简单的小程序demo，然后结合实际demo查看，并且根据简易结构中的文字注意，查看没有文件并试着修改看看效果。

总结：这篇博文前半部分是长见识，后半部分在具体到小程序的开发流程，写的有些简单，有兴趣的可以去看看官网哦，后续我也会进行完善。此外后续的博文将进行一系列的小程序开发的介绍。

欢迎程序猿小火把的关注和支持，欢迎大家来吐槽哦。我是湖北-我家小菜。