评论

小程序实战项目源代码分享(1)

小程序有着微信近十亿的用户作为基础,加上公众号、小程序码、微信群转发等多种传播途径,非常容易就获取到直接的用户,跟地推等传统获客方式相比,它的成本是非常低的,低成本高转换的获客,对品牌营销帮助非常大。

一个完整的微信小程序是由一个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();

…未完

最后一次编辑于  2019-03-21  
点赞 4
收藏
评论

2 个评论

登录 后发表内容