微信小程序简介

最新推荐文章于 2024-04-20 15:47:54 发布

在逆境中蜕变

最新推荐文章于 2024-04-20 15:47:54 发布

阅读量690

点赞数

分类专栏：微信小程序 Web前端/后端文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_40301728/article/details/124395364

版权

Web前端/后端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

微信小程序

2 篇文章 0 订阅

订阅专栏

引言

什么是小程序？
小程序是一种无需下载安装即可使用的应用。它通常依托于某个平台级应用运行

在这里插入图片描述
13年：
百度推出轻应用，由于体验不佳和依托H5（此时H5技术还未成为主流），反响平平

16年：
1月，“微信之父”张小龙宣布微信公众号将推出“应用号”，也就是小程序前身
9月，微信小程序开放内测

17年：
1月，微信小程序正式发布
5月，支付宝小程序内测
9月，支付宝小程序宣布面向用户开放公测

18年：
3月20日，9家手机厂商（华为、小米、OPPO、vivo、中兴、金立、联想、魅族、努比亚），推出快应用
7月4日，百度小程序发布，年底开源。无缝运行在百度系App（百度App、百度贴吧、百度网盘等）以及外部App（如哔哩哔哩、58同城等）上
8月18日，支付宝小程序正式发布

最后为人熟知的仅有微信小程序，依托其庞大的用户群体

什么是微信小程序？
微信小程序就是“能用微信打开和浏览的网站”

为什么这么说？
微信小程序可以分为 “视图层” + “逻辑层”

1、在“视图层”，微信小程序采用的是 wxml + wxss 相结合的形式，其实质就是微信封装过的 html + css，也就是我们开发网站所需的两种语言
2、在“逻辑层”，微信和网站开发一样采用的是JavaScript语言

因此，小程序页面本质上就是网页！！！

好了！没有网页基础的可以退出去了解一下网页怎么做了！如果你有网页基础的！那么恭喜你，微信小程序你已经会一半了！哈哈哈哈哈哈哈

1、小程序的基础架构

在这里插入图片描述
入口文件：app.js
全局配置：app.json
全局样式：app.wxss
页面文件夹：pages下，每个页面再按文件夹划分，每个页面4个文件
（1）视图层：wxml，wxss
（2）逻辑层：js，json
其中 wxss 和 json 文件不是必须

1、app.js

该文件作为小程序的入口文件，指定了小程序的生命周期回调，App()作为整个小程序的入口，下面举例几个生命周期内的回调:
在这里插入图片描述

onLaunch(Object object)：生命周期回调——监听小程序初始化
onShow(Object object)：生命周期回调——监听小程序启动或切前台
onHide()：生命周期回调——监听小程序切后台
onError(String error)：小程序发生脚本错误或 API 调用报错时触发

2、app.json

该文件为小程序的全局配置文件，其内部含有丰富的字段供用户选择，用于定义小程序的表现，下面举几个常用的例子：

entryPagePath：小程序默认启动首页
pages：页面路径列表
window：全局的默认窗口表现
tabBar：底部 tab 栏的表现

3、app.wxss

全局样式文件，微信小程序定义或者说封装了一些自己的样式，比如：

swiper：滑块视图容器
scroll-view：可滚动视图区域
视图容器API

4、生命周期

web生命周期：
在这里插入图片描述

状态	描述
Active	页面可见document.visibilityState === 'visible' 并且有 input focus
Passive	页面可见且没有input 处于 focus
Hidden	页面不可见document.visibilityState === 'hidden'且不被冻结
Frozen	frozen状态浏览器会挂起任务队列中可冻结任务的执行，这意味着例如 JS timer或fetch回调不会执行。正在执行的任务能被完成，但是可执行的操作和运行的时间会被限制。浏览器冻结是为了节约 CPU、内存、电量的消耗。同时使前进后退更加快速，避免从网络重新加载全量页面
Terminated	terminated状态表示浏览器已卸载页面并回收了资源占用，不会有新的任务执行，已运行的长任务可能会被清除。
Discarded	discarded状态发生在系统资源受限，浏览器会主动卸载页面释放内存等资源用于新进/线程。该状态下任何任务、事件回调或任何类型的JS都无法执行。尽管页面不在了，但浏览器 Tab 页的标签名和 favicon用户仍可见

小程序“页面”生命周期：
在这里插入图片描述
此处与上文的小程序的生命周期回调不同的是，这里针对的是各个页面，而上面是针对的整个小程序。
同样的的，对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，Page()作为每个页面的入口，指定页面的初始数据、生命周期回调、事件处理函数等。

回调	描述	作用
onLoad	生命周期回调—监听页面加载	发送请求获取数据
onShow	生命周期回调—监听页面显示	请求数据
onReady	生命周期回调—监听页面初次渲染完成	获取页面元素（少用）
onHide	生命周期回调—监听页面隐藏	终止任务，如定时器或者播放音乐
onUnload	生命周期回调—监听页面卸载	终止任务