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 作为视觉稿的标准

目录
相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
19天前
|
人工智能 小程序
【一步步开发AI运动小程序】五、帧图像人体识别
随着AI技术的发展,阿里体育等公司推出的AI运动APP,如“乐动力”和“天天跳绳”,使云上运动会、线上健身等概念广受欢迎。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。文章分为四部分:初始化人体识别功能、调用人体识别功能、人体识别结果处理以及识别结果旋转矫正。下篇将继续介绍人体骨骼图绘制。
|
20天前
|
人工智能 小程序 vr&ar
AI运动小程序开发常见问题集锦二
截至当前,我们的AI运动识别小程序插件已迭代至第23个版本,广泛应用于健身、体育、体测、AR互动等场景。本文针对近期用户咨询,汇总了常见问题,帮助用户减少开发成本,提高效率。主要涵盖计时与计数模式的区别、综合排行榜生成方法、全屏模式适配及无开发能力用户的解决方案。
|
20天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
30天前
|
存储 传感器 小程序
跳绳计数小程序开发系统
首先,我们需要明确跳绳计数小程序的核心功能:为用户提供跳绳计数的便捷方式。这意味着小程序需要能够准确地记录用户的跳绳次数,并为用户提供清晰、直观的计数展示。
|
30天前
|
人工智能 编解码 小程序
【一步步开发AI运动小程序】四、小程序如何抽帧
随着AI技术的发展,阿里体育等公司推出的“乐动力”、“天天跳绳”等APP使云上运动会、线上健身等概念备受关注。本文将引导您从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”。文中详细介绍了微信小程序抽帧的相关API、设置及注意事项,帮助开发者更好地实现AI运动功能。下篇将介绍人体识别技术,敬请期待。
|
1月前
|
传感器 存储 小程序
跳绳计数小程序开发
跳绳计数小程序旨在通过智能设备(如手机或智能手表)记录用户在跳绳过程中的次数、时间、速度等关键数据,为用户提供便捷的运动记录和数据分析服务
|
30天前
|
小程序 搜索推荐 前端开发
小剧场短剧影视小程序开发
小剧场短剧影视小程序旨在为用户提供一个便捷、互动的平台,让用户能够随时随地观看、分享和评论各类小剧场短剧。通过小程序,用户可以浏览热门短剧、搜索感兴趣的内容、参与社区互动,以及享受个性化的推荐服务。
|
1月前
|
小程序 搜索推荐 前端开发
短剧小程序开发案例
首先,明确你的短剧平台的目标用户群体和他们的需求。比如,年轻用户可能更倾向于轻松、幽默的短剧内容,而家庭用户则可能更偏爱教育、亲子类的短剧。了解用户需求有助于你设计更符合他们口味的功能和界面
|
1月前
|
机器学习/深度学习 人工智能 小程序
【一步步开发AI运动小程序】三、运动识别处理流程
随着人工智能技术的发展,阿里体育等公司推出的“乐动力”、“天天跳绳”等AI运动APP备受关注。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。文章介绍了视频帧、帧率FPS、抽帧和人体识别等基本概念,并详细说明了处理流程,包括抽帧、人体识别检测、骨骼图绘制和运动分析等步骤。下篇将介绍如何在小程序中实现抽帧。