微信小程序简介

网友投稿 871 2022-05-29

什么是小程序

是一种介于原生App、和Web App的Hybrid。通过微信进行加载,达到类似原生App的流畅体验。相对原生App来说,小程序更加轻量、能实时更新、跨平台;相对Web App来说,小程序资源离线,体验更流畅。

可以归纳为是用类ReactNative/Weex框架编写的,在手机微信环境中运行的应用。

小程序的实现机制

小程序是基于微信提供的一套框架进行开发的。微信通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能,对上层提供了一套完整的javaScript API,使得开发者能够非常方便的使用到微信客户端提供的各种基础功能,快速构建一个小程序。框架设计如下:

框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的应用逻辑层。视图层与逻辑层之间通过单向数据绑定进行数据传输,开发者能更加聚焦于数据与逻辑上。

开发者如何编写小程序

微信小程序简介

微信官方提供了一个IDE,编码、调试、编译、项目管理、提交等功能都涵盖在其内。

在IDE中新建项目后,会自动初始化几个简单的代码文件。最关键也是必不可少的,是 app.js、app.json、app.wxss 这三个。其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件。微信小程序会读取这些文件,并生成小程序实例。

app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口�背景色,配置导航条样式,配置默认标题等。

app.wxss 可以看做全局的公共样式表,凡是在这里写过的CSS样式,在各自子页面里面可以直接使用。写在其他.wxss文件里的样式是不能跨page使用的,可以通过@import进行样式导入。

app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。通过js的一个全局函数getApp()可以获得当前app实例对象。

小程序的每一个页面是由同一路径下4个同名但不同后缀的文件组成,如:HomePage.js、HomePage.wxml、HomePage.wxss、HomePage.json。.js后缀的文件是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件,.wxml后缀的文件是页面结构文件。

HomePage.js 是这个页面的业务逻辑,当你在空白js里面输入page的时候会自动出现代码补全,帮你补全了一个page的所有生命周期,onLoad,onHide等。

HomePage.wxss 是这个页面专属的样式,别的页面不能使用,只在这个页面才可以用,但是可以被import到app.wxss里面,实现全局通用。wxss的代码提示非常完善。

HomePage.wxml 描述页面的结构,wxml语法虽然乍看与HTML类似,但并不是HTML。我们必须用wx提供的wxml相关组件完全重写,条件渲染,循环渲染,数据绑定,都需要按照微信文档制定规则编码,并且提供了最简单的模板模块功能,实现一定程度的复用。

HomePage.json 是页面的配置文件: 页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用 app.json 中的默认配置。

通过.js和.wxml实现MVC模型

微信小程序的调试模式,和Chrome的debug模式基本一模一样,里面应该是封装一套WebKit,有人在反编译出的源码里发现Chrome Debug tool的js代码。

小程序开发完成之后,通过IDE可以将项目代码文件上传到微信开发平台,具有管理员权限的用户登录平台后,可以提交给微信官方审核。

管理员将其他同事微信添加到体验组里后,可以在手机微信中体验小程序运行效果。

主动推送模板消息

数据统计

底层API与基础组件库

微信主要为开发者提供了基于微信APP的底层API 和 一套基础组件库。

网络:发起请求、文件上传与下载、WebSocket

媒体:图片、录音、音频播放控制、音乐播放控制、文本文件、视频

数据:数据缓存同步、摘要、移除

位置:获取、查看详情

设备:网络状态、系统信息、重力感应、罗盘、拨打电话

界面:交互反馈、设置导航条、导航、动画、绘图

开放接口:登录、用户信息、微信支付、模板消息

视图容器:view、scroll-view、swiper

基础内容:icon、text、progress

表单组件:button、checkbox、form、input、label、picker、radio、slider、switch、textarea

操作反馈:action-sheet、modal、toast、loading

导航:navigator

媒体组件:audio、image、video

地图:map

画布:canvas

小程序

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:走过内卷的To C,走向实体的To B
下一篇:HDC2021现场速递Day1丨以技术之名重回校园,为青春加“码”, 先锋少年slay全场!
相关文章