微信小程序入门心得

写这个小程序例子好久了，但是一直也没把总结的东西，写下来，正好最近注册了这个博客，所以把它最为第一篇文章，希望能有地方，帮到大家。

1.开发过程

第一步:

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。主程序 app 主要由三个文件组成，分别是 app.js（小程序逻辑）、app.json（小程序公共设置）和 app.wxss（小程序公共样式表），其中前两个为必备文件。 app.js 这个文件是整个小程序的入口文件,开发者的逻辑代码在这里面实现,同时在这个文件夹里面可以定义全局变量. app.json五个配置项列表.(pages(Array) , window(Object), tabBar(Object), networkTimeout(Object), debug(Boolean))，这其中networkTimeout又有四种网络请求：1.普通HTTPS请求(wx.request) 2. 上传文件(wx.uploadFile) 3.下载文件(wx.downloadFile) 4.WebSocket通信(wx.connectSocket)，前3项都好理解，第4项是H5的一种新的协议，是可以浏览器与服务器双向通信的。大家有时间可以看看http://blog.csdn.net/he90227/article/details/48576039?locationNum=10，这里面介绍的还是挺详细的。

第二步：

第二步我们把要用到的页面分别建三个.js .wxml .wxss 配套的页。然后我们将页面的名字要配在app.json的pages里例如：

"pages":[

　　"pages/index",

　　 "pages/bookList/bookdetails",

　　 "pages/hot/hot",

　　 "pages/login/login"

]

然后就可以开发了。

2.小程序开发需要注意的地方

1. 不能用 jquery也不能操作 dom

2. 部分标签不支持，比如 h1-h6 会编译报错。

3.暂时没找到解决富文本详情页显示的办法。

4.不支持外网的跳转。

5.我们的程序可以在其他编译器编译，但只能在微信自带编译器下查看。

6.异步加载，最多并发请求为5个。

7.整个项目压缩后不能超过1M，所以数据建议都外部加载和请求。但外部请求的大小也有限制。如果真正开发项目，需要一些缓存机制。

8.暂时不支持SVG格式的图片。

9.微信小程序并不支持css3自定义的动画。

10.微信小程序支持rpx；可以达到自适应。

3.根据自己的小demo，具体说说一些细节

1.项目结构

2.具体配置

1.pages 它的作用是配置小程序的页面,这个配置项是必填的。可以看出,每一项分别对应的都是实现文件的路径以及他的文件名. 注意:这个配置里面的第一行配置是它的初始页面,例如上面代码的初始页面就是index。

2.window 它是我们页面上的头，这个头是腾讯为我们写好的，我们可以改变它的颜色，字体，和内容，但是不能用别的头替换。

3.tabBar 是我们可以随意修改的，把下面导航的信息填入list中，其中iconpath为默认图片，selectedIconPath为选中图片样式。

4.networkTimeout 为自定义的超时时间，当超过这个时间时，系统认为请求超时。

页面轮播用封装好的插件swiper，在js中配置如下：

循环用wx:for=””;来实现。我们可以直接引用到js中的变量。{{ item.bookname }}。

scroll-view是微信小程序的一个组件,表示可滚动视图区域。需要注意的是，使用竖向滚动时，需要给scroll-view一个固定高度，不能设置100%。

其中我们需要知道几个属性： 1.bindscrolltoupper：滚动到顶部/左边，会触发scrolltoupper事件。 2.bindscrolltolower：滚动到底部/右边，会触发scrolltolower事件。 3.bindscroll：滚动时触发，event.detail总携带{scrollLeft,scrollTop,scrollHeight,scrollWidth,deltaX,deltaY}