摩拜单车微信小程序开发技术总结
前言
摩拜单车小程序已于微信小程序上线第一天正式发布,刷爆微博媒体朋友圈。本文主要讲讲技术方向的总结,在段时间的开发周期内内如何一步步从学习到进阶。
思维转变
微信小程序没有HTML的常用标签,而是类似
React
的微信自定义组件,比如view
、text
、map
等没有
window
变量,但微信提供了wx
全局方法集没有
a
标签链接,不可嵌套iframe
事件绑定和条件渲染类似
Angular
,全部写在WXML
中数据绑定采用
Mustache
双大括号语法无法操作
DOM
,通过改变page data
(类似React
的state)来改变视图展现
所以如果你熟悉以上提到的所有前端技术栈,开发微信小程序你会得心应手。
生命周期
你可以理解小程序就是一个单页面的H5网页,所有元素的加载都是一次性的,这就引来了生命周期的概念:
首次打开,小程序初始化
小程序初始化完成后,触发
onShow
事件小程序被切换到后台(熄屏,切换APP等),触发
onHide
小程序从后台切换到前台,再次触发
onShow
小程序出错,触发
onError
每个页面也有自己的生命周期:
注意:在微信6.5.3版本中,部分Android机触发不了
onLoad
事件,可以用onReady
替代。
事件广播
“单页面结构”的微信小程序,你可以使用事件广播(统一的事件中心)来注册和触发自定义事件,否则到后期事件管理会越来越乱,而且涉及跨页面传输事件,你更需要这种事件触发机制,可以参考broadcast.js。比如在摩拜单车中有这样的场景:
扫码成功后在开锁页面A提示开锁成功,要跳转到骑行页面B并查询用户骑行状态。
如果没有统一的事件管理中心,你几乎无法完成这样的过程,当然,可以使用Hack的方式解决。因为跳转到页面B会触发B的onShow
事件,所以可以在onShow
中写业务逻辑:
// Page A
// 开锁成功后,跳转到Page B
wx.redirectTo({url: "/pages/riding/index"
})
// Page B
Page({onShow() {// 检查骑行状态}
}
})
但更合理的应该是利用事件广播来处理:
const broadcast = require("libs/broadcast")// 先注册事件
broadcast.on("check_ride_state", () => {// 检查骑行状态
})
const broadcast = require("libs/broadcast")// Page A
// 开锁成功后,触发事件,再跳转到Page B
broadcast.fire("check_ride_state")
wx.redirectTo({url: "/pages/riding/index"
})
数据中心
根目录的app.js
很有用,根目录的app.js
很有用,根目录的app.js
很有用。
因为在它内部注册的变量或方法,都是可以被所有页面获取到,所以利用它也可以处理上面所述的跨页面事件触发问题。而且可以注册globalData
供所有页面取用,例如可以把systemInfo
直接注册到globalData
中,这样就不用在每个页面都获取一遍:
// app.jsconst systemInfo = wx.getSystemInfoSync()
App({globalData: {systemInfo}
})
在页面获取:
// Page Aconst {systemInfo
} = getApp().globalData
性能优化
小程序运行在微信平台,而且可能和众多小程序“共享运行内存”,可想而知,单个小程序的性能极可能遇到瓶颈而Crash或被微信主动销毁!
比如在摩拜单车有这个场景:
首页展示地图找车,扫码成功后跳转到骑行地图。
简单的逻辑,直接两个页面,两个map
组件切换就可以搞定。实际测试场景中,iOS的确如预期,一切正常,但是在Android下,就很有可能会使得小程序Crash,扫码成功后直接退出了小程序。
解决办法就是, 整个小程序只维护一个map
组件 ,通过不同的State
来改变map的不同展现:
index.wxml
<map id="map" controls="{{controls}}" style="{{style}}"></map>
index/index.js
const indexStyle = "width: 750rpx; height: 1260rpx"
const rideStyle = "width: 750rpx; height: 960rpx"Page({data: {style: indexStyle},onUnlock() {this.setData({style: rideStyle})}
}
})
这样就成功解决了部分Android设备小程序Crash的问题。
摩拜单车微信小程序开发技术总结相关推荐
- 微信小程序存在的风险_微信小程序开发技术风险存在,如何规避是重点
微信小程序开发技术风险存在,如何规避是重点 微信小程序自上线以来已经历经三年的时间,不断推陈出新,推展业务,如今已形成了一定规模和影响力,线上购物.在线点餐.预订服务.便捷出行.小游戏等多种多样的小程 ...
- 微信小程序开发技术预研分析报告
预研背景 本次预研是对微信小程序使用流程及开发技术的研究. 预研目的和意义 本次预研在于了解小程序具体语法.接口功能.具体实现方式等. 预研目标 通过微信小程序的技术研究可实现自主完成小程序的功能开发 ...
- 微信小程序开发技术介绍 有哪些?
小程序相对于app大部分公司还是不愿意将主营业务放到微信平台上,以免受制于与腾讯, 不过随着现在小程序生态的逐渐形成,小程序也逐渐融入每个人的生活当中,日活动用户量高达2亿多,学习门槛不高,学习简单, ...
- 微信小程序开发技术栈
uniapp 一个使用 Vue.js (opens new window)开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.Web(响应式).以及各种小程序(微信/支付宝/百 ...
- 前后端微信小程序开发
随着移动互联网的迅猛发展,微信小程序已经成为了一种非常流行的开发方式,它不仅可以节约用户空间,提高用户体验,而且开发成本也相对较低.因此,前后端微信小程序开发技术也日渐成熟. 本篇文章将介绍前后端微信 ...
- 1个月uni-app微信小程序开发上线实战专栏介绍
一.专栏介绍: <uni-app开发微信小程序1个月上线实战>,目标带领1000位同学成功开发上线一个自己的个人小程序! 作者介绍:国服第二切图仔--资深前端开发工程师,具有六年以上的前端 ...
- 云服务器定时启动程序_过去、现在和未来:开发一款微信小程序的技术迭代全过程...
2019 年 10 月 19 日,由腾讯云与微信小程序团队联合举办的"小程序·云开发"技术峰会在北京召开.23 万小程序·云开发注册账户,50 多万开发者上手使用,这是腾讯云与微信 ...
- 微信小程序开发公司的技术发展及行业现状
微信小程序开发公司的技术发展及行业现状 作者:北京朗毓圣元科技 近些年,伴随着互联网,尤其是移动互联网的蓬勃发展,带动了微信小程序开发公司数量的爆炸式增长,依托于微信小程序的丰富应用场景,可以满足传统 ...
- 微信小程序开发导航:精品教程+网友观点+demo源码(5月9日更新)
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- 微信小程序开发分销制度济南_花店微信小程序开发教程
如何将自己的鲜花商品快速配送出去,避免鲜花过期浪费,是很多传统花店商家的难题.不过随着微信小程序的出现,这一难题也渐渐得到了解决.花店商家可以通过自己的小程序商城,打通线上渠道,可以加大推广.扩大销量 ...
最新文章
- 如何使用FaunaDB + GraphQL
- 影响计算机算法世界的十位大师(上)
- node.js 调试 eggs launch.json配置信息
- ABAP和Java SpringBoot的单元测试
- the job was canceled什么意思_宇宙中的第一种颜色是什么?
- PowerDesigner导出表为Excel(转)
- 输入班级人数,根据人数,挨个输入成绩,求平均分,求最高分最低分
- httplistener java_可以使用异常HttpListener吗?
- 故障处理 软件 需求_高线轧机轴承振动在线监测与故障诊断分析
- linux 编译cgal,Linux(Ubuntu)安装CGAL
- 关于web的重定向,js实现重定向的方法
- 安卓按键命令库教程(紫猫版)
- 激光导航AGV的停车精度受环境变化的影响有多大?
- windows优化大师怎么用_必读:我们赖以办公、游戏设计用的电脑该如何正确保养维护...
- 淘宝开店之旅_我要充一充
- open judge 1.7.1
- 浅淡数据结构时间复杂度和空间复杂度
- java.sql.time 格式_java.sql.Date,java.sql.Time和java.sql.Timestamp什么区别
- JavaScript同步与异步
- 星星怎么画?如何画出璀璨的星空?
热门文章
- 无约而来WIN8 PRO WMC X64 201306
- dosubmit 成功不成功_什么是成功,不放弃!
- 距离之和最小 V3 51Nod - 1110(带权中位数或者爆搜)
- 一层循环时间复杂度_数据结构与算法:算法的时间复杂度
- bigdecimal 保留两位小数_五年级数学知识点总结-02小数的除法
- 欧几里得算法、扩展欧几里得算法、求逆元、中国剩余定理、扩展中国剩余定理
- 表达式求值详解(C++)
- 愤怒的小鸟python代码_Python 愤怒的小鸟代码实现:物理引擎pymunk使用
- 【知识蒸馏】Distilling the Knowledge in a Neural Network
- python web 文件管理器_利用Python 1分钟搭建测试Web服务器,可实现linux目录文件共享...