canvas教程

微信小程序全面实战,架构设计 躲坑攻略

字号+ 作者:H5之家 来源:H5之家 2017-01-11 08:00 我要评论( )

最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版),直接上图: 本文将结合具体的实战经验,主要介绍微信小程

微信小程序全面实战,架构设计 && 躲坑攻略

来源:INFOCOOL   发布时间: 2017-01-08   作者:网友   浏览次数:

微信 (WeChat)是腾讯公司于2011年1月21日推出的一个为智能终端提供即时通讯服务的免费应用程序, 微信支持跨通信运营商、跨操作系统平台通过网络快速发送免费(需消耗少量网络流量)语音短信、视频、图片和文字。
 

微信开发官网

摘要: 最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版),直接上图: 本文将结合...

最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版),直接上图:

微信小程序全面实战,架构设计 && 躲坑攻略

本文将结合具体的实战经验,主要介绍微信小程序的基础知识、开发中遇到的难点、项目的架构设计、最佳实践以及踩过的坑。 文章内容较多,如果想看架构设计和躲坑技巧,请直接浏览后面的正文 ,简书没有目录,也挺伤感的。

值得再次声明的是: 微信小程序的内容部分是hybrid模式,并非原生 ,所以性能并不好,绑定的tap事件也有明显的延迟。

微信小程序全面实战,架构设计 && 躲坑攻略

每一个由边框围起来的部分,都是一个最小粒度的原生view

如上图所示,每一个由边框围起来的部分,都是一个最小粒度的原生view,可以看出,整个微信小程序的内容部分,就是一个原生view。

小程序有哪些基础知识?

一个完整的微信小程序是由一个App实例和多个Page实例构成,其中App实例表示该小程序应用,多个Page表示该小程序的多个页面。

此外,微信小程序并没有提供自定义组件的方式,这就导致微信小程序在开发较复杂应用时,可能会比较艰难。

微信小程序本身很简单,和一个模板语言的难度几乎相当,翻翻官方教程就可以开始动手搞。

我也建议大家先动起来,然后再细致啃啃官方文档。由于微信官方文档仍在不断大幅更新中,所以务必查看最新官方文档。

微信小程序的基础知识主要分为以下几个部分:

两种配置文件 && 两个核心函数

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();

关于各个生命周期的细节以及流程,参考下图,可以细细品味:

微信小程序全面实战,架构设计 && 躲坑攻略

Paste_Image.png

app.json 和 page.json 维护了应用和页面的配置属性。 App() 和 Page() 维护了应用和页面的各个生命周期以及数据。

那么, APP 和 Page 如何将数据传递到页面呢?页面又是如何渲染呢?

WXML模板语法,页面渲染

小程序虽然是hybrid模式,但并不使用HTML渲染,而是全部通过自定义标签来渲染页面。这样做的好处我不清楚,但问题却不少:不能跨浏览器、富文本解析困难,iframe视频不支持,没办法外链跳转。

和所有的模板语言一样,WXML支持数据绑定、条件渲染、循环、模块化等功能。

数据绑定

在 WXML 中可以使用 {{}} 将 Page 的变量或者表达式包裹起来,实现数据绑定,举个例子:

// 将message的值渲染到view中 <view> {{ message }} </view> // 将id的值渲染到view的id属性中 <view> </view> // 根据isSelected的值,输出不同的class <view> HelloWorld </view> // 结合template,可以传入更复杂的数据 <template is="objectCombine" data="{{...article, categoty, tag: '埃隆马斯克'}}"></template>

条件渲染

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 微信开发者平台,微信开发者社区,微信小程序开发者社区

    微信开发者平台,微信开发者社区,微信小程序开发者社区

    2016-12-24 12:00

网友点评