微信小程序开发--入门(1)

之前看到很多专门招微信小程序开发的公司，而且微信团队也已经为小程序开发开发了一个IDE，可见微信对小程序的信心之大。今天在公司电脑上装了一个最新版，界面真是十分清爽，比之前的好多了，不得不说大公司就是不一样，微信开发的这个小程序开发IDE有win64，win32，mac三个版本极其总是用户体验。关于IDE的安装，就看你们自己咯。

下面是安装好的界面:

进入界面之前需要申请AppID,网上干货很多，自行申请即可。界面清爽，结构清晰，实在是开发必备。

IDE

看过这个令人春心荡漾的开发工具，下面就是大头了，嗯，对，大头。

项目结构

首先是 app.json。app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

关于app.json的配置，可以参照下面的配置项。

配置项

pages ： 接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。

每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。文件名不需要写文件后缀，因为框架会自动去寻找路径下 .json, .js, .wxml, .wxss 四个文件进行整合。

window ：用于设置小程序的状态栏、导航条、标题、窗口背景色。

tabBar  ：如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

Tip：

当设置 position 为 top 时，将不会显示 icon

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

tabBar属性

list属性

networkTimeout ：可以设置各种网络请求的超时时间。

属性

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

以上就是关于小程序全局的配置。其实也就是关于小程序整体大一种配置。

pageName.json  : 每一个小程序的页面也可以使用pageName.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，也即是，在app.json中对小程序的初始页面（首页）的样式等进行配置，但是在每一个单独的页面都需要有自己的样式等信息，这些信息需要在pageName.json中进行配置。这些页面中配置项会覆盖 app.json 的 window 中相同的配置项。

例如：logs.json 其实就是对logs页面进行了配置。

pageName.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键，如：

pageName.json

WXML 模板 :  当初使用html 来写页面脚本，现在你开发微信小程序就要写 wxml。其实他们很相似，标签，属性都如出一辙 。但是还是有很多不同的地方。

例如：标签名字，在 wxml 中我们使用的是view ，button，text 等标签。另外微信团队还给我们封装好了包括地图，视频，音频在内的许多组件。除了标签 名字，还有一些表达式性质的属性：wx : if 以及｛｛｝｝这样的表达式。

为了不让 JS 直接操控 DOM，JS只需要管理状态，然后再通过一种模板语法来描述状态和界面结构的关系即可。 小程序的框架也是用到了这个思路，如果你需要把一个 Hello World 的字符串显示在界面上。 WXML 是这么写 :

数据绑定

通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。 更详细的文档可以参考 WXML。

WXSS(WeiXin Style Sheets) ： 是一套样式语言，用于描述 WXML 的组件样式。正如 css 描述html文件 样式一样。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比，WXSS 扩展的特性有：尺寸单位和样式导入。

讲真，css 我都不是很熟悉，看来以后有的忙了。

JS 交互逻辑 ：在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

wxml

js文件

点击 button 按钮的时候，我们希望把界面上 msg 显示成 "Hello World"，于是我们在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应这次点击操作。

此外你还可以在 JS 中调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等。

没想到入门入了这么久，微信小程序的开发，应该会是一个不错的方向，希望这个入门能给你帮助。

Then，that’s all，thank you。