微信小程序demo理解

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Verdana }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Verdana; min-height: 17.0px }
span.s1 { }

最近加的一个做广告联盟的朋友,看他每天都发什么关于微信小程序开发的消息，然后打算空余时间了解一下，下午没事就在网上搜索了微信小程序开发,点进去居然是一个官方网站，进去详细了解，居然还有专门的开发工具， 之前一直以为微信小程序只是一个类似通过分享发给朋友通过浏览器打开的网页版app。

接下去我使用官方的demo来说说我对这案例的理解，算自己做的一个笔记，之后关于这个微信小程序开发框架的文章我因该会持续更新。

1.安装开发工具倒入demo

开发工具官方下载地址:http://bing.aliaii.com/wxopen/download.html

官方demo下载地址：http://bing.aliaii.com/wxopen/demo.html

步骤:安装开发工具，点击打开后用微信扫描进入，如果你是个人只能下来学习，我当前也是如此。。

2.案例详解

下面是打开官方demo的截图，这里我先从app启动文件说起，这里其实也是全局文件，因为自己创建的页面或组件都需要在这里引入。

入口文件 app.js、app.json、app.wxss

app.js=对app整体行为的一个监听。

app.json=引入自己创建的页面或组键，app布局框架布局,navigationbar tabbar都写在这里面。

app.wxss=整体框架样式

一个完整页面组成部分.    .js  .json .wxml .wxss

demo中 是将绑定数据放在.js中的，.json为空,这里因该是这样，如果真是通过网链接访问数据，数据应该在.json中，.wxml页面布局文件 .wxss样式表文件。

接下去我详细说下布局文件今天我就不会再说了。

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial; color: #333333 }
span.s1 { }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial; color: #333333 }
span.s1 { }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial; color: #333333 }
span.s1 { }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Arial; color: #333333 }
span.s1 { }