一个完整的微信小程序是由一个App实例和多个Page实例构成,其中App实例表示该小程序应用,多个Page表示该小程序的多个页面。
此外,微信小程序并没有提供自定义组件的方式,这就导致微信小程序在开发较复杂应用时,可能会比较艰难。
微信小程序本身很简单,和一个模板语言的难度几乎相当,翻翻官方教程就可以开始动手搞。
我也建议大家先动起来,然后再细致啃啃官方文档。由于微信官方文档仍在不断大幅更新中,所以务必查看最新官方文档。
实战项目源代码:http://t.cn/ExJMe95
微信小程序的基础知识主要分为以下几个部分:
✦ 两种配置文件 && 两个核心函数
✦ WXML模板语法,页面渲染
✦ 页面间的跳转
✦ 交互事件
✦ 官方组件和官方API
两种配置文件 && 两个核心函数
app.json 应用的全局配置文件
app.json是针对微信小程序的全局配置,主要包含以下几个配置:
✦ pages:页面路径的数组,表示小程序要加载的所有页面,其中数组第一项代表小程序的初始页面。
✦ window:微信原生功能,定制化不强。可设置小程序的状态栏、导航条、标题以及窗口背景色。
✦ tabBar:微信原生功能,定制化不强。适用于常规的Tab应用,Tab栏可置于顶部或底部;tabBar是一个数组,仅支持2-5个tab。
✦ networkTimeout:配置小程序网络请求的超时时间。
✦ debug:调试模式开关,开发模式下建议开启,正式发布别忘了关闭。
app.json配置的主要区域
page.json 页面的全局配置文件
除了上面提到的全局配置,每个页面还可以单独配置page.json,page.json会覆盖app.json中的配置,并只对当前页面生效。
page.json只能对window配置,有两个比较有用的配置项分别是:
✦ enablePullDownRefresh:是否开启下拉刷新
✦ disableScroll:只能在page.json配置,禁止页面上下滚动,猜测可以实现完美滑屏滑动(未验证)
App() 小程序注册入口,全局唯一
App()用来注册一个小程序,全局只有一个,全局的数据也可以放到这里面来操作。
// 注册微信小程序,全局只有一个
let appConfig = {
// 小程序生命周期的各个阶段
onLaunch: function(){},
onShow: function(){},
onHide: function(){},
onError: function(){},
// 自定义函数或者属性
...
};
App(appConfig);
// 在别的地方可以获取这个全局唯一的小程序实例
const app = getApp();
小程序并没有提供销毁的方式,所以只有当小程序进入后台一定时间、或者系统资源占用过高的时候,才会被真正的销毁。
Page() 页面注册入口
Page()用来注册一个页面,维护该页面的生命周期以及数据。
// 注册微信小程序,全局只有一个
let pageConfig = {
data: {},
// 页面生命周期的各个阶段
onLoad: function(){},
onShow: function(){},
onReady: function(){},
onHide: function(){},
onUnload: function(){},
onPullDownRefresh: function(){},
onReachBottom: function(){},
onShareAppMessage: function(){},
// 自定义函数或者属性
...
};
Page(pageConfig);
// 获取页面堆栈,表示历史访问过的页面,最后一个元素为当前页面
const page = getCurrentPages();
…未完
讲的通俗易懂,赞
实战项目源代码:http://t.cn/ExJMe95