小程序开发1

https://mp.weixin.qq.com/debug/wxadoc/dev/index.html

第一步，你需要拥有一个小程序帐号，通过这个帐号你就可以管理你的小程序。

  https://mp.weixin.qq.com/wxopen/waregister?action=step1  

pages/index/index

1. JSON 配置文件
2. WXML 模板文件
3. WXSS 样式文件
4. JS 脚本逻辑文件

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

pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序 页面定义在哪个目录 。

window字段 —— 小程序所有页面的顶部背景颜色，文字颜色在这里定义。

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

工具配置 project.config.json

这个不重要，是你开发工具的一些设置。

页面配置

如 pages/logs 目录下的 logs.json ，是和小程序页面相关的配置。

如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 页面配置 json，让开发者可以 独立定义每个页面的一些属性 ，例如刚刚说的顶部颜色、是否允许下拉刷新等等。

可以参考文档  小程序的配置 page.json  。

WXML 模板

WXML 充当的就是类似 HTML 的角色

wx:if 这样的属性

如果你需要把一个 Hello World 的字符串显示在界面上。 WXML 是这么写 :

<text></text>

JS 只需要管理状态即可:

this .setData({ msg: "Hello World" })

WXSS 样式

全局的样式和局部样式。和前边 app.json,概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 .wxss 仅对当前页面生效。

JS 交互逻辑

<view>{{ msg }}</view><button bindtap="clickMe">点击我</button>

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

Page({ clickMe: function () { this .setData({ msg: "Hello World" }) }})

可以在 JS 中调用小程序提供的丰富的 API

参考文档  小程序的API  。