标签：
前(che)言(dan)：
近几天，微信小程序的内测引起了众多开发人员的热议，很多人都认为这将会成为一大热门，那么好吧，虽然我是一个小白，但这是个新玩意，花点时间稍稍钻研一下也是无妨的，谁让我没有女朋友呢，给我提供了大量的闲暇时光，对此我只想说：呵呵！。现在微信小程序刚发布还在测试阶段，可以说是1.0版本，所以框架和结构内容都还不多，这时候不学什么时候学？万一成为大牛了呢？万一有哪个妹子看上我了呢？想想还有点小激动呢。。。
正文：
1.什么是微信小程序？
简单的说很像 H5，它将 应用（功能与app相当） 嵌入到微信公众号中，用户无需安装应用，就能访问。相比app轻便了许多。
2.开发者学习
既然我们是程序员，乱七八糟的言论就不说了，像“这个东西以后会不会火啊？会不会取代app啊？好不好用啊？能不能找到女朋友啊？”这些问题，我只想说：除了最后一个问题，其他的管我吊事？好的！bb完了直接过来，干正事，代码看起来
1.首先，我们需要下载安装 微信Web开发者工具，地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
2.打开开发者工具后，扫码进去创建项目，普通用户是没有appid（这里的appid不是普通公众号的appid）的，选择没有appid就好了，然后输入项目名称比如：HelloWorld，选择项目保存地址的时候选择一个新创建的空文件夹，并且勾选 quick start, 它就会帮我们创建一个简易的小程序demo，方便我们学习理解
3.进入我们的项目以后，我们看到了一个简单的demo页面，在左边菜单栏中选择“编辑”，可以查看我们这个项目的文件和结构,从文件结构中我们可以看到他的文件类型无非 4种：
.js : 这就是一个javascript文件，只不过它是微信基于javascript封装过的，所以很多js函数是不能使用的，比如localhost.href，微信加入了很多自身的接口，比如跳转页面是： wx.navigationTo()函数
.json : 配置文件，可以配置页面头部title信息等
.wxml : 视图结构文件，功能就像html文件差不多，用于描述页面结构，只不过它有自己独特的标签，不使用html标签
.wxss : 视图样式文件，格式跟css文件一样，他在css的基础上扩展了几个特性 比如：尺寸单位 / 样式导入
4.这时候我们在项目文件夹下看到了三个特别的文件app.js、app.json、app.wxss，你还别说，这三个文件是一个项目必不可少的文件，删除任意一个文件项目都会崩掉,它们都是干吗用的呢？
app.js: 小程序逻辑，里面用了一个App()函数来注册一个小程序，他有一个object类型的自定义参数，普通页面的js文件中可以通过 getApp()函数拿到App()函数所拥有的参数，并调用其中的数据
app.json: 这里是项目的全局配置 比如 每一个页面（一个页面包括四个部分[js、json、wxml、wxss]）都要在 pages数组中声明不然是访问不到的， windows对象中可以设置窗口的样式
app.wxss: 这里是一个全局的样式文件，会对项目的每个页面其作用，就如一个全局的css文件
5: 项目运行过程：
第一步：加载项目根目录下的 app.js、 app.json、 app.wxss文件，同时会执行app.js文件，并触发其中的onLaunch 和 onShow 函数
第二步：加载app.json中pages数组中配置的第一个页面，作为项目的欢迎页，同时会执行对应页面js文件，并触发 onLoad / onReady 和 onShow 函数
往后：页面可以通过事件与js文件交互，比如 在标签元素上绑定点击事件，并且指向js文件中的一个函数，就能用js中的逻辑去处理这个事件了
6：几个小问题：
第一个问题：他这个东西没有初始访问路径，不科学啊，为什么他一运行就给我进到index.wxml页面了呢？
答：那是因为我们在配置 app.json的时候，在pages数组中声明了所有页面，而它运行的时候就会默认打开第一个页面，简单粗暴，谁排第一谁就是爸爸！
第二个问题：他这个index.wxml文件中没有引入index.js、index.wxss和index.json,他是如何调用到它们呢？
答：我们可以理解为 index 页面被拆分成了四个后缀不同的文件，但事实上他们是一体的，嘻嘻，这种关联方式莫名的很爽 （index页面 = index.js + index.json + index.wxml + index.wxss ， 其中wxss和json文件在没必要时可以没有）
第三个问题：虽然我知道了他们四个文件是互通的，但是我在index.wxml里要如何调用index.js中的数据和函数呢？？
答：index.js中需要调用一个 Page()函数来注册一个页面，他有一个object类型的参数，其中有一个data对象，比如 Page({data:{key:‘hello‘}})，这样我们在页面中就可以直接使用{{key}} 双大括号来指向这个变量了，而且是同步的哟，js文件中data值变化后，页面中调用他的值也会跟着变。如果要调用的是个function对象的话，那我们就需要通过事件来调用了，比如页面加载事件，他会去js中找onLoad函数，这个他是自动的，如果我们想在我们点击了某个元素后调用一个函数处理相应逻辑，那么我们需要在元素标签中添加 属性了 比如 <view bindtap="myTapEvent">按钮</view> ，当我点击了“按钮”文字后， 他就能调用到 js > Page()参数 > myTapEvent函数。
最后我还是把微信 官方的文档放在这里， 大家可以直接看文档，现在初期内容不多，赶紧学起来
https://mp.weixin.qq.com/debug/wxadoc/dev/
好吧。初级的入门学习算是结束啦，之后会写一些更加深入的学习内容。 ^ ^
标签：
原文地址：http://www.cnblogs.com/imyjy/p/5906440.html
