爱收集资源网

微信小程序与网页开发有何不同?揭秘其中差异

网络整理 2023-09-29 00:03

前言

小程序是一种全新的联接用户与服务的方法,它可以在陌陌内被方便地获取和传播,同时具有出众的使用体验。

一、什么是陌陌小程序

微信小程序,是小程序的一种,英文名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#

小程序与普通网页区别