微信小程序已经出来了很久,最为一名前端攻城狮也是充满了好奇心的去google了一把, 被各种所谓得小程序得天下的文章洗脑之后,开始了探索之旅。。。。
第一步——工具
对于开发小程序的工具,百度已经有很多正解,这边也不多啰嗦,贴出地址:
https://github.com/gavinkwoe/weapp-ide-crack
第二步——小程序整体结构
app.js:在根目录下的app.js文件是整个小程序的js文件。在这个文件里面使用APP()来注册一个小程序。整个app有一个生命周期:onLanuch,onShow,onHide(加载,呈现,隐藏),暂时还没有对这生命周期做过操作(TODO).在App对象中还有一个全局对象,这个全局对象可以存放全局的参数或者是方法,在不同的页面中使用getApp()来调用。
app.json:在根目录下的app.json文件是整个小程序的配置文件。在配置文件中可以配置小程序的页面pages,顶部状态栏window,底部切换tabbar,网路超时networkTimeout。
app.wxss:在根目录下的app.wxss文件是整个小程序的样式文件。对于整个小程序一些公用的样式可以配置在这里。
第三步——单页面开发
在根目录下创建单页面文件夹
index.js:通过Page注册单页面程序。一个完整的单页面具有一个完整的生命周期---onload,onready,onshow,onhide,onupload;在脚本中可以设置单页面的变量(相当于全局变量),把页面中需要用的参数定义在data中,方便页面的一些状态的改变和页面的动态渲染。
index.wxml:单页面页面结构
index.wxss:单页面页面样式
index.json:单页面配置文件,目前用到了就是覆盖全局配置文件中的window对象,用来修改每个单页面上的title
第四步——页面渲染
动态页面渲染需要几个条件:数据,模板。数据通过请求拿到之后,设置在当前页面的data中,在视图层通过{{data}}获取请求渲染数据。当数据有了之后,就需要渲染的模板。小程序中使用template标签来表示一个模板。模板中的name代表了这个模板。在页面中使用的时候template标签上使用is属性来对应模板的name,在这里还需要把我们请求到的数据传到模板中,这时候需要在template中添加data属性来传递。对于模板外部应用还没有研究出来如何使用(据说是通过include).
页面的数据一般都需要遍历渲染,小程序使用Block标签来遍历渲染模板,这个标签没有意义不会在页面中渲染出来。
第五步——组件
目前用到的组件:幻灯片swiper,使用方法比较简单,官网给的文档比较详细
滚动组件scroll-view,组件方法属性很多,我这边在列表页中使用了这个组件。列表页需要在纵向滚动,所以在组件上需要配置scroll-y属性,横向同理。列表页中还需要上拉刷新,这时候需要使用bindscrolltolower方法在脚本中处理上拉刷新的事件,有个比较坑的是,做上拉刷新的时候,需要个滚动组件一个高度,不然无效。
第六步——模块
在小程序中对于一些频繁使用,并且可以抽象出来的可以做成单独的一个模块,便于代码的复用。
目前我把异步请求单独作为一个模块使用。前面说过根目录下的app,js中有一个全局对象,在这个对象中可以存放数据和方法,所以在这个脚本中引用了模块,方法存放在全局属性中,在单页面中通过getApp()来获取。
总的来说,开发小程序让我有一种在做RN的感觉(框架的原理其实也是React),视图层,逻辑层比较清楚。官方提供的组件使用起来也比较方便,但是不能引用第三方组件。。。
预告:第二弹——小程序的滑动删除。