当前位置:网站首页>微信小程序应用开发(一)
微信小程序应用开发(一)
2022-07-19 21:07:00 【uesowys】
1. 前言
微信小程序应用是独立于微信公众号或者微信服务号的一种本地运行的网页程序式应用服务。因为微信小程序应用、微信公众号应用、微信服务号应用三者的服务方式都是以网页程序式提供服务,所以可以使用同一套网页程序。
他们的不同之处是微信公众号应用与微信服务号应用是在服务器端运行网页(BS架构模式),而微信小程序应用是在微信APP端的本地运行网页程序,其运行方式类似于HTML5的本地解析与运行。
微信小程序使用本地的运行模式,有利于提供更好的服务体验以及提供接近原生APP的使用体验。而且,具有跨平台以及便于发布、下载、升级的特性。是云计算时代中一种新的CS架构模式的体现。
1.1. 小程序运行时
1.1.1. 运行环境
微信小程序运行在多种平台上:iOS/iPadOS 微信客户端、Android 微信客户端、Windows PC 微信客户端、Mac 微信客户端、小程序硬件框架和用于调试的微信开发者工具等。
不同运行环境下,脚本执行环境以及用于组件渲染的环境是不同的,性能表现也存在差异:
在 iOS、iPadOS 和 Mac OS上,小程序逻辑层的 JavaScript 代码运行在JavaScriptCore 中,视图层是由 WKWebView 来渲染的,环境有 iOS 14、iPad OS 14、Mac OS 11.4 等;
在 Android 上,小程序逻辑层的 JavaScript 代码运行在 V8 中,视图层是由基于 Mobile Chromium 内核的微信自研 XWeb 引擎来渲染的;
在 Windows 上,小程序逻辑层 JavaScript 和视图层都是用 Chromium 内核;
在 开发工具上,小程序逻辑层的 JavaScript 代码是运行在 NW.js 中,视图层是由 Chromium Webview 来渲染的。
JavaScriptCore 无法开启JIT 编译 (Just-In-Time Compiler),同等条件下的运行性能要明显低于其他平台。
1.1.2. 平台差异
尽管各运行环境是十分相似的,但是还是有些许区别:
JavaScript 语法和 API 支持不一致:语法上开发者可以通过开启 ES6 转 ES5 的功能来规避(详情);此外,小程序基础库内置了必要的Polyfill,来弥补 API 的差异(详情)。
WXSS 渲染表现不一致:尽管可以通过开启样式补全来规避大部分的问题,还是建议开发者需要在各端分别检查小程序的真实表现。
开发者工具仅供调试使用,最终的表现以客户端为准。
1.2.JavaScript 支持情况
1.2.1. 运行限制
基于安全考虑,小程序中不支持动态执行 JS 代码,即:
不支持使用 eval 执行 JS 代码
不支持使用 new Function 创建函数(new Function('return this') 除外)
1.2.2. 标准 ECMAScript 支持
小程序的 JS 执行环境 在不同平台上的执行环境存在差异,因此导致不同平台对 ECMAScript 标准的支持存在差异。
小程序基础库为了尽量抹平这些差异,内置了一份 core-js Polyfill。core-js 可以将平台环境缺失的标准 API 补齐。
需要注意的是,平台对 ECMAScript 语法的支持差异无法抹平,当你需要使用一些高级语法时(如 async/await 时,则需要借助代码转换工具来支持这些语法。
1.3. 小程序的生命周期
小程序从启动到最终被销毁,会经历很多不同的状态,小程序在不同状态下会有不同的表现。
1.3.1. 小程序启动
从用户认知的角度看,广义的小程序启动可以分为两种情况,一种是冷启动,一种是热启动。
冷启动:如果用户首次打开,或小程序销毁后被用户再次打开,此时小程序需要重新加载启动,即冷启动。
热启动:如果用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时小程序并未被销毁,只是从后台状态进入前台状态,这个过程就是热启动。
从小程序生命周期的角度来看,我们一般讲的「启动」专指冷启动,热启动一般被称为后台切前台。
1.3.2. 前台与后台
小程序启动后,界面被展示给用户,此时小程序处于「前台」状态。
当用户「关闭」小程序时,小程序并没有真正被关闭,而是进入了「后台」状态,此时小程序还可以短暂运行一小段时间,但部分 API 的使用会受到限制。切后台的方式包括但不限于以下几种:
点击右上角胶囊按钮离开小程序
iOS 从屏幕左侧右滑离开小程序
安卓点击返回键离开小程序
小程序前台运行时直接把微信切后台(手势或 Home 键)
小程序前台运行时直接锁屏
当用户再次进入微信并打开小程序,小程序又会重新进入「前台」状态。
1.3.3. 挂起
小程序进入「后台」状态一段时间后(目前是 5 秒),微信会停止小程序 JS 线程的执行,小程序进入「挂起」状态。此时小程序的内存状态会被保留,但开发者代码执行会停止,事件和接口回调会在小程序再次进入「前台」时触发。
当开发者使用了后台音乐播放、后台地理位置等能力时,小程序可以在「后台」持续运行,不会进入到「挂起」状态
1.3.4. 小程序销毁
如果用户很久没有使用小程序,或者系统资源紧张,小程序会被「销毁」,即完全终止运行。具体而言包括以下几种情形:
当小程序进入后台并被「挂起」后,如果很长时间(目前是 30 分钟)都未再次进入前台,小程序会被销毁。
当小程序占用系统资源过高,可能会被系统销毁或被微信客户端主动回收。
1.4.小程序更新机制
开发者在管理后台发布新版本的小程序之后,微信客户端会有若干个时机去检查本地缓存的小程序有没有新版本,并进行小程序的代码包更新。但如果用户本地有小程序的历史版本,此时打开的可能还是旧版本。
2. 开发版本
微信小程序的开发方式使用微信官方提供的开发工具。
2.1. 绑定花生壳代理
花生壳服务器端代码的动态域名是:
https://55vl963292.goho.co/
2.2. 绑定微信小程序
- 登录微信小程序管理平台
- 绑定微信小程序消息推送域名地址
- 绑定微信小程序服务器域名地址
2.3. 注册成为开发者
登录微信小程序管理平台注册
2.4. 开发小程序首页
2.4.1. 安装微信开发者工具
2.4.2. 新建小程序项目
新建项目时不使用云服务,所有后端服务接口使用花生壳的动态域名接口
2.4.3. 开发hello-world本地接口
2.4.4. 开发小程序首页
调用本地动态域名接口:
小程序首页展示本地hello world:
2.5. 程序版本发布小程序
2.6. 小程序管理后台发布
2.7. 微信APP查阅小程序
在微信APP中查询对应的小程序名称,即可访问对应的小程序
3. 商业版本
商业版本主要使用腾讯云提供的云服务实现,应用架构主要使用微信云开发以及微信云托管。
(未完待续)
边栏推荐
- 北京邮电大学|RIS辅助室内多机器人通信系统的联合深度强化学习
- 聚合支付满足各行业接入多种支付
- Dest0g3 520 orientation -web-fun_ upload
- Seven artists have changed their lives because of NFT
- Tsukuba University | reward prediction errors, rather than sensory prediction errors, play an important role in the model selection of human reinforcement learning
- [C# 流程控制]-C# 中的 if/switch 选择结构
- 2022 Henan Mengxin League game (2): Henan University of technology G - infinite
- 使用注解方式实现 Redis 分布式锁
- 2022河南萌新联赛第(二)场:河南理工大学 B - 宝石
- Dbeaver connect Oracle user display error and user does not exist?
猜你喜欢
DIY can decorate the mall system, you can also have!
TS learning notes
Redis cluster details
Improper use of BigDecimal caused P0 accident!
Solution to the fourth weekly test of ACM intensive training of Hunan Institute of technology in 2022
2022 Henan Mengxin League game (2): Henan University of technology f - Handmade
Ffmpeg audio and video capture
Enter the real situation of maker education curriculum practice
面試官問我JVM的GC分代收集算法為什麼這麼設計
详解“洋葱架构”
随机推荐
华为|MLGOPerf:用于优化性能的 ML 引导内联器
PyTorch随笔 - ConvMixer - Patches Are All You Need
Dbeaver connect Oracle user display error and user does not exist?
EVE-NG Lab模拟器 Cisco、H3C试验主机别名
Summary of SQL skills in data warehouse development
PCBA方案设计——蓝牙智能营养秤方案
[C# 流程控制]-C# 中的 if/switch 选择结构
2022河南萌新联赛第(二)场:河南理工大学 B - 宝石
记一次爬虫逆向攻防的详细过程
SQL刷题:找出所有员工当前薪水salary情况
Hill sort summary
西北工业大学|使用交互式界面的多智能体模型协作
云计算设计和规划安全控制措施
OTT大屏“新收视率体系”来了,广告主不再迷茫?
Quickly install VMware tool for stm32mp157 development board
Enter the real situation of maker education curriculum practice
PMP practice once a day | don't get lost in the exam -7.19
操作元素案例合集
逃离一线!从上海举家回二线七年,现在怎么样了?
2022河南萌新联赛第(二)场:河南理工大学 J - 签到