前言
小程序是一种全新的联接用户与服务的方法,它可以在陌陌内被方便地获取和传播,同时具有出众的使用体验。
一、什么是陌陌小程序
微信小程序,是小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。
小程序和普通网页开发的区别
网页开发者须要面对的环境是各式各样的浏览器,PC 端须要面对 IE、Chrome、QQ浏览器等,在移动端须要面对Safari、Chrome以及 iOS、Android 系统中的各色 WebView 。
而小程序开发过程中须要面对的是两大操作系统 iOS 和 Android 的陌陌客户端,以及用于辅助开发的小程序开发者工具,小程序中三大运行环境也是有所区别的,如表所示。
运行环境
逻辑层
渲染层
iOS
JavaScriptCore
WKWebView
安卓
V8
chromium订制内核
小程序开发者工具
NWJS
Chrome WebView
二、使用步骤
1. 进入 。
#b:f:9:7:8:d:e:4:4:0:1:e:1:d:3:7:1:5:d:4:3:c:1:2:6:b:f:c:4:3:4:b#
2. 注册帐号,任何邮箱即可。
#4:1:2:2:f:a:1:0:7:a:d:0:3:6:9:e:7:b:f:b:d:5:3:9:f:e:2:6:1:0:9:2#
3. 去邮箱确认即可。
4. 下载安装陌陌开发者工具,网址 。
#4:9:f:d:5:d:1:1:1:8:2:8:b:6:4:1:c:6:3:1:6:e:e:c:d:9:6:a:5:8:a:3#
根据自己系统选择合适的版本。
5. 双击步入陌陌开发者工具,点击新建。
#a:8:f:7:8:3:e:0:5:c:3:7:f:6:8:6:6:4:9:b:5:a:4:5:8:2:c:4:7:b:2:c#
6. 项目配置
#0:0:1:2:0:8:4:8:e:b:0:7:0:3:c:3:7:c:7:9:8:6:c:1:0:3:2:f:4:9:9:f#
AppID建议用自己的,在微信公众号平台开发->开发管理->开发设置->开发者ID。
三、代码结构
小程序创建完毕,代码结构如下:
#f:3:f:e:e:b:0:7:d:4:b:c:5:e:f:7:9:c:6:6:5:0:a:0:a:6:3:3:0:c:6:b#
1. pages:包含小程序页面。
每个页面都有一个独立的文件夹。
每个页面包含4个文件:js页面逻辑,json页面配置,wxss页面款式,wxml页面结构。
2. app.js:全局入口文件。
3. app.json:全局配置文件。
4.app.wxss:全局式样文件。
5.project.config.json:整个项目的配置文件。
6.sitemap.json:配置小程序及其页面是否容许被陌陌索引。
接下来你们就可以按照自己的项目需求进行开发,一些常用的配置属性可以借鉴官方文档。我们也给你们介绍几个有代表性的功能
#0:8:3:8:d:b:5:3:7:a:2:3:d:a:8:3:9:6:a:c:1:3:4:c:f:1:7:c:0:6:9:c#
四、小程序运行机制
1. 小程序的生命周期。
小程序从启动到最终被销毁,会经历好多不同的状态,小程序在不同状态下会有不同的表现。
#5:b:0:a:c:c:f:1:7:1:6:9:3:5:9:8:d:d:6:0:7:f:d:9:4:6:c:e:3:d:d:6#
2. 小程序冷启动
冷启动:如果用户首次打开,或小程序销毁后被用户再度打开,此时小程序须要重新加载启动,即冷启动。
小程序冷启动时,如果启动时不带 path(A 类场景),默认情况下将会步入小程序的首页。在页面对应的 json 文件中(也可以全局配置在 app.json 的 window 段中),指定 restartStrategy 配置项可以改变这个默认的行为,使得从某个页面退出后,下次 A 类场景的冷启动可以回到这个页面。
代码示例:
#3:4:9:b:9:1:b:d:c:e:0:b:5:f:e:9:4:2:a:4:b:9:e:7:2:0:4:3:7:3:2:0#
3. 小程序热启动
热启动:如果用户早已打开过某小程序,然后在一定时间内再度打开该小程序,此时小程序并未被销毁,只是从后台状态步入前台状态,这个过程就是热启动。
小程序热启动时,打开的页面有以下情况:
(A 类场景)若启动的场景中不带 path,则保留先前的浏览的状态。
(B 类场景)若启动的场景中带有 path,则 reLaunch 到对应 path 的页面。
4.退出状态
每当小程序可能被销毁之前,页面回调函数 onSaveExitState 会被调用。如果想保留页面中的状态,可以在这个回调函数中“保存”一些数据,下次启动时可以通过 exitState 获得这种已保存数据。
代码示例:
#1:2:c:9:4:b:b:a:a:7:5:b:4:1:9:6:1:1:0:1:c:1:9:1:1:6:2:8:4:a:c:f#
#7:1:8:4:3:5:1:8:d:4:7:2:1:d:4:f:e:4:d:d:5:3:d:2:4:7:9:5:7:f:5:b#
注意事项:
如果超过 expireTimeStamp ,保存的数据将被遗弃,且冷启动时不遵守 restartStrategy 的配置,而是直接从首页冷启动。
expireTimeStamp 有可能被手动提早,如陌陌客户端须要清除数据的时侯。
在小程序存活期间, onSaveExitState 可能会被多次调用,此时以最后一次的调用结果作为最终结果。
在个别特殊情况下(如微信客户端直接被系统杀害),这个方式将不会被调用,下次冷启动也不遵守 restartStrategy 的配置,而是直接从首页冷启动。
五、自定义tabBar
自定义 tabBar 可以让开发者愈发灵活地设置 tabBar 样式,以满足更多个性化的场景。
使用流程:
1. 配置信息。
在 app.json 中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整。
所有 tab 页的 json 里需申明 usingComponents 项,也可以在 app.json 全局开启。
#9:e:d:a:d:3:f:d:8:7:d:6:c:d:5:d:6:8:8:1:e:1:c:e:1:6:2:f:5:8:d:8#
2. 添加tabBar代码文件
在代码根目录下添加入口文件:
#b:3:a:9:5:2:6:f:b:2:8:6:e:2:8:8:5:0:3:d:7:1:4:c:0:0:b:c:6:6:c:2#
3. 编写tabBar代码
用自定义组件的形式编撰即可,该自定义组件完全接管 tabBar 的渲染。另外,自定义组件新增 getTabBar 接口,可获取当前页面下的自定义 tabBar 组件实例。
六、微信小程序发包
微信小程序限制了代码包不能超过 2MB,限制大小是对小程序启动速率的考虑,但是2MB 大小严重限制了小程序功能的扩充,业务需求可能须要更大的容积,综合考虑陌陌推出了“分包加载方案”。
目前小程序发包大小有以下限制:
整个小程序所有发包大小不超过20M。
单个发包/主包大小不能超过2M。
具体方式包含:
使用总包、独立发包、分包预下载、分包异步化
我们主要介绍一下使用总包,其他方法可以参考陌陌官方文档。
五、使用总包
1. 配置方式
假设支持发包的小程序目录结构如下:
#a:8:8:d:8:1:d:4:e:e:e:b:9:3:2:a:0:e:3:8:b:9:4:e:e:5:7:0:e:0:1:d#
开发者通过在 app.json subpackages 字段申明项目发包结构:
#4:9:3:e:2:9:4:4:b:d:3:a:8:1:2:6:0:5:b:a:c:e:1:f:9:f:b:e:9:7:d:e#
subpackages 中,每个发包的配置有以下几项:
字段
类型
说明
root
String
分包根目录
name
String
分包别称,分包预下载时可以使用
pages
stringArray
分包页面路径,相对于分包根目录
independent
Boolean
分包是否是独立发包
2. 打包原则
3. 引用原则
4. 低版本兼容
由陌陌后台编译来处理旧版本客户端的兼容,后台会编译两份代码包,一份是发包后代码,另外一份是整包的兼容代码。新客户端用发包,老客户端还是用的整包,完整包会把各个 subpackage 里面的路径放在 pages 中。
总结
小程序有如下特征:
1.无需安装随时可用。
2.触手可及。
3.用完即走,无需卸载。
END
NO.1
往期回顾
看都看完了,还不点这儿试试
#5:1:2:8:6:a:3:d:9:5:9:9:7:b:7:5:9:7:f:8:e:6:b:6:9:4:6:4:c:c:3:1#