写这个小程序例子好久了,但是一直也没把总结的东西,写下来,正好最近注册了这个博客,所以把它最为第一篇文章,希望能有地方,帮到大家。
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}
1.wx.request就类似于我们熟知的ajax,是请求数据的。 跟ajax一样,也有成功和失败的函数。
2.wx.getSysteminfo是获取系统信息的,其中可以获取,手机型号,像素比,窗口的宽度和高度。这里我们就用到了窗口高度。
3.下拉刷新,在滑动到顶部时,bindscrolltoupper被调用,根据自己的业务逻辑请求即可.
4.上拉加载,在滑动到底部时,bindscrolltolower被调用,我这里是页数加一,根据自己的业务逻辑修改,然后将获取到的集合添加到scroll-view的数据集合里即可.
因为没写后台,所以这里只在js中写死了用户名密码,只是测试一下登录的过程。
因为微信小程序不支持对dom操作,所以我们获取input内容时,要用事件event.detail.value方法。
因为微信小程序是单向数据绑定,所以我们传数据是对data操作,在这里定义了login方法,设置islogin为true,只要我们不重新编译,登录状态都不会改变,
this.setData({})就是改变{}中变量的值。 如果我们需要在多个页面都取到登录状态,我们可以在app.js中,设置 globalData:{}这个是一个全局方法。 我们可以用var app = getApp() 引用app.js.
以上这些只是自己总结的一些小程序知识,希望能帮到刚接触小程序的同学。
如有说的不对的地方,请大牛们指出并见谅。
来源:https://www.cnblogs.com/szbblogs/p/7263374.html