01-小程序:开发入门篇

简介: 01-小程序:开发入门篇

一、什么是微信小程序



  • 1、简称小程序(Mini Program),是一种不需要下载安装即可使用的应用,于 2017 年1月9日正式上线,其实就是在微信内镶嵌app
  • 2、小程序的 4 大特性:无需安装、触手可及、用完即走、无需卸载;其实小程序在使用之前还是需要下载安装的:下载->安装->使用;只不过官方对小程序的安装包(release包)有大小限制,比如目前是限制不能超过 2M;下载的速度非常的快,给用户感觉不需要安装的感觉;所以在开发中用到的资源文件(大图片、音频、视频等) 也尽量放在服务器端
  • 3、目前小程序的主要入口主要有:扫码、微信内搜索、点击聊天中分享的小程序、点击公众号菜单;目前无法分享到朋友圈,但是可以分享微信超程序的图片到朋友圈。
  • 4、小程序的一些应用场景:不经常使用,但是刚需、不会停留太久的简单工具;比如:天气预报、出行、住宿、话费、缴费、外卖、快递、买票(车票、机票、门票、电影票)等等。


二、微信小程序与其他的对比



  • 2.1、小程序开发 VS 网页开发:它们有很大的相似性


image.png

  • 2.2、在小程序开发中
  • 编写样式时建议多使用 flex 布局
  • 支持 TypeScript
  • 也可以自行搭建 less、sass 开发环境
  • 2.3、小程序开发 VS 网页开发
  • 网页开发中的渲染线程和脚本线程是互斥的,长时间的监本运行可能会导致页面失去响应
  • 网页开发者可以使用到各种浏览器暴露出来的 DOM API,进行DOM选中和操作
  • 在小程序中,页面渲染和业务逻辑是分开的,分别运行在不同的线程中
  • 逻辑层运行在JSCore 中,并没有一个完整浏览器对象,因而缺少相关的 DOM API 和 BOM API
  • 因此熟悉的一些库,例如 Query、Zepto等,在小程序中是无法运行的
  • 同时 JSCore 的环境同 NodeJS 环境也是不完全相同的,所以一些 NPM 的包在小程序 中也是无法运行的
  • 小程序的性能介于 纯网页开发原生 (native)开发之间


  • 2.4、小程序的运行环境


image.png

  • 2.5、小程序 VS APP
  • 安装使用
  • 小程序:无声安装、无需卸载、简单易用、占用内存较小
  • APP:需要主动联网下载安装APP、不想用了需要主动卸载
  • 开发
  • 小程序:跨平台、开发门槛低、开发周期短、开发成本低
  • APP:开发成本高、每一个平台都要维护一套代码(目前也有ReactiveNative、Flutter等夸平台方案)
  • 发布上线
  • 小程序:提交到微信公众平台审核
  • APP:提交到对应的应用商店(Apple 的 App Store 常有审核不通过的情况,审核周期长)
  • 其他:小程序用户体验、功能丰富度、开放性不如APP


三、微信小程序的一些链接



  • 3.1、微信小程序相关链接**
  • 3.2、开源项目

*

四、注册微信小程序**




image.png

4.3、注册完会有一个小程序的 AppID(唯一标识)


image.png

4.4、新建项目

image.png


4.5、开发文档


image.png

4.6、对 JS 代码的断点调试

  • 断点调试1:在需要调试的地方加一行 debugger 代码


image.png


断点调试2:在对应的 [sm] 文件中打断点调试([sm]文件是 Source Map处理之后的文件)


image.png

断点调试3:下图中的index.js 并没有 [sm] 后缀,但也是 Source Map 处理后的文件


image.png

4.7、目录结构


  • 小程序主要包含 1 个描述整体程序的 app 和多个描述各自界面的 page
  • app 部分由 3 个文件组成,必须放在项目的根目录(文件名固定)


image.png

1 个页面由 4 个文件组成(这 4 个文件必须有相同的路径和文件名)


image.png

4.8、尺寸单位


  • rpx(responsive pixel):可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx;如在 iPhone6 上,屏幕的宽度为 375px,则 750rpx = 375px = 750 物理像素,1rpx = 0.5px = 1 物理像素


image.png


官方建议:开发微信小程序时设计师可以使用 iPhone6 作为视觉稿的标准

目录
相关文章
|
16天前
|
人工智能 小程序
【一步步开发AI运动小程序】十五、AI运动识别中,如何判断人体站位的远近?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,无需后台支持,具有快速、体验好、易集成等特点。本文介绍如何利用插件判断人体与摄像头的远近,确保人体图像在帧内的比例适中,以优化识别效果。通过`whole`检测规则,分别实现人体过近和过远的判断,并给出相应示例代码。
|
10天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力,支持本地原生识别,无需后台服务,具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别,包括视频解码抽帧和人体识别的实现方法。
|
15天前
|
人工智能 小程序 UED
【一步步开发AI运动小程序】十六、AI运动识别中,如何判断人体站位?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,本地引擎无需后台支持,具备快速、体验好、易集成等优势。本文介绍如何利用插件的`camera-view`功能,通过检测人体站位视角(前、后、左、右),确保运动时的最佳识别率和用户体验。代码示例展示了如何实现视角检查,确保用户正或背对摄像头,为后续运动检测打下基础。
|
21天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
|
21天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十二、自定义一个运动分析器,实现计时计数01
随着AI技术的发展,AI运动APP如雨后春笋般涌现,如“乐动力”、“天天跳绳”等,推动了云上运动会、线上健身等热潮。本文将指导你从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”,介绍运动识别原理、计量方式及运动分析器基类的使用,帮助你在小程序中实现运动计时和计数功能。下篇将继续探讨运动姿态检测规则的编写。
|
15天前
|
移动开发 小程序 PHP
校园圈子论坛系统采取的PHP语音和uni账号开发的小程序APP公众号H5是否只需要4800元?是的,就是只需要4800元
关于校园圈子论坛系统采用PHP语言和uni-app开发的小程序、APP、公众号和H5是否仅需4800元这个问题,实际上很难给出一个确定的答案。这个价格可能受到多种因素的影响
49 8
|
11天前
|
人工智能 小程序 数据处理
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。
|
23天前
|
数据采集 人工智能 小程序
【一步步开发AI运动小程序】十、姿态动作相似度比较
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,重点讲解姿态动作相似度比较功能的运用,包括样本动作帧的采集和姿态相似度的计算方法,以及在组合运动中的应用实例。
|
16天前
|
人工智能 小程序 JavaScript
【一步步开发AI运动小程序】十四、主包超出2M大小限制,如何将插件分包发布?
本文介绍了如何从零开始开发一个AI运动小程序,重点讲解了通过分包技术解决程序包超过2M限制的问题。详细步骤包括在uni-app中创建分包、配置`manifest.json`和`pages.json`文件,并提供了分包前后代码大小对比,帮助开发者高效实现AI运动功能。
|
22天前
|
人工智能 小程序 开发者
【一步步开发AI运动小程序】十一、人体关键点跳跃追踪
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,涵盖云上运动会、健身打卡等热门应用场景。通过示例代码展示如何调用插件功能,实现动作追踪与分析,助力开发者快速上手。

热门文章

最新文章