我的编程空间,编程开发者的网络收藏夹
学习永远不晚

微信小程序 | 小程序开发

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

微信小程序 | 小程序开发

🖥️ 微信小程序专栏:小程序开发 初级知识
🧑‍💼 个人简介:一个不甘平庸的平凡人🍬

✨ 个人主页:CoderHing的个人主页

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力❤️


目录

一、认识小程序开发

什么是小程序?

各个平台小程序的时间线:

各个平台为什么都需要支持小程序?

二、小程序开发选择

小程序由谁来开发

三、小程序开发前准备

开发小程序的技术选型

uni-app 和 taro

需掌握的预备知识

注册账号 - 申请AppID

下载小程序开发工具

使用VSCode开发

创建小程序项目

开发工具的解析

四、小程序目录的结构

项目目录结构

阅读官方文档

五、小程序的开发体验

小程序开发体验

六、小程序MVVM架构


什么是小程序?

        小程序(Mini Program)是一种不需要下载安装即可使用的应用,它实现了“触手可及”的梦想

使用起来方便快捷,用完即走

        事实上,目前小程序在我们生活中已经随处可见(特别是这次疫情的推动,不管是什么岗位、什么年龄阶段的人,到哪都需要打开健康码)

最初我们提到小程序时,往往指的是 微信小程序:

        但是目前小程序技术本身已经被各个平台所实现和支持;

那么目前常见的小程序有哪些呢?

微信小程序、支付宝小程序、淘宝小程序、抖音小程序、头条小程序、QQ小程序、美团小程序等

各个平台小程序的时间线:

各个平台小程序大概的发布时间线:
2017年1月 微信小程序上线,依附于微信App;
2018年7月 百度小程序上线,依附于百度App;
2018年9月 支付宝程序线,依附于支付宝App;
2018年10月 抖音小程序上线,依附于抖音App;
2018年11月 头条小程序上线,依附于头条App;
2019年5月 QQ小程序上线,依附于QQApp;
2019年10月 美团小程序上线,依附于美团App;

各个平台为什么都需要支持小程序?

你有,我也得有

        大厂竞争格局中一个重要的一环。

小程序作为介于H5页面和App之间的一项技术,它有自身很大的优势;

        体验比传统H5页面要好很多;

        相当于传统的App,使用起来更加方便,不需要在应用商店中下载安装,甚至注册登录等麻烦的操作

小程序可以间接的动态为App添加新功能

        传统的App更新需要先打包,上架到应用商店之后需要通过审核(App Store);

        小程序可以在App不更新的情况下,动态为自己的应用添加新的功能需求

目前 这么多小程序的竞争格局中,哪一个是使用最广泛的呢?

        显示是微信小程序,目前支付宝、抖音小程序也或多或少有人在使用;

        其实我们透过小程序看本质,他们本身还是应用和平台之间的竞争,有最大流量入口的平台,对应的小程序也是用户更多一些

        目前在公司开发小程序主要开发的还是微信小程序,其他平台的小程序往往是平台本身的一些公司或者顺手开发的

所以一定要重点学习 微信小程序的开发

小程序由谁来开发

我们确定一下小程序的定位是怎么样的

        介于原生App和手机H5页面之间的一个产品定位。

那么,由此我们也会产生一个疑惑:小程序是由谁来开发呢

        难道搞出一个《小程序开发工程师》

        由谁开发事实上是由它的技术特点所决定的,比如微信小程序WXML、WXSS、JavaScript;

        它更接近于我们前端的开发技术栈,所以小程序都是由我们前端来开发

也就是说呢,你想要成为一个前端工程师或者找一份前端的工作,小程序是你必须学会的。

开发小程序的技术选型

原生小程序开发:

        微信小程序:(浏览器直接搜索 微信小程序)

                主要技术包括 : WXML WXSS Js

        支付宝小程序:(浏览器直接搜索 支付宝小程序)

                主要技术包括:AXML ACSS Js

选择框架开发小程序:

        Mpvue:

                Mpvue是一个使用Vue开发小程序的前端框架,也是 支持 微信小程序、百度智能小程序,头条小程序 和 支付宝小程序;
该框架在2018年之后就不再维护和更新了,所以目前已经被放弃;

        Wepy:

                WePY是由腾讯开源的,一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。

                该框架目前维护的也较少,在前两年还有挺多的项目在使用,不推荐使用;

uni-app 和 taro

Uni-app:

        由DCloud团队开发和维护;

        uni-app是一个 使用Vue开发 所有前端应用的框架,开发者编写一套代码,可发布到IOS 安卓 Web(响应式) 及各种小程序 快应用等 多个平台

        uni-app目前是很多公司的技术选型,特别是希望适配移动端App的公司;

Taro:

        由京东团队开发和维护;

        taro 是一个开放式 跨端 跨框架 解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用

        taro因为本身支持React、Vue的选择,给了我们更加灵活的选择空间

        特别是在Taro3.x之后,支持Vue3、React Hook写法

uni-app和taro开发原生App

        无论是适配原生小程序还是原生App,都有较多的适配问题,所以还需要多了解原生的一些开发知识

        产品使用体验整体相较于原生App差很多

        也有其他的技术选项来开发原生App:ReactNative、Flutter;

需掌握的预备知识

小程序的核心技术主要是三个:

        页面布局: WXML 类似 HTML

        页面样式 WXSS 几乎就是CSS(某些不支持,某些增强,基本一致)

        页面脚本 JavaScript + WXS(WeixinScript)

 

如果你之前已经掌握了Vue或者React等框架开发,那么学习小程序是更简单的

        因为里面的核心思想都是一致的(比如组件化开发 数据响应式 mustache语法 事件绑定等等)

注册账号 - 申请AppID

注册账号:申请AppID

        接入流程: (百度 微信小程序)

 

 

下载小程序开发工具

小程序的开发工具:

        微信开发者工具: 官方提供的开发工具,必须下载,安装

        VSCode:很多人比较习惯使用它来编写代码

微信开发者工具下载:(百度)

 

使用VSCode开发

推荐插件:

 

创建小程序项目

 

开发工具的解析

 

项目目录结构

 

阅读官方文档

 

小程序开发体验

小程序开发初体验

        1 数据绑定

        2 列表渲染

        3 事件监听

 

Vue的MVVM和小程序MVVM对比

 

 

MVVM为什么好用?

        DOM Listeners: ViewModel层可以将DOM的监听绑定到Model层

        Data Bindings: ViewModel层可以将数据的变量, 响应式的反应到View层

MVVM架构将我们从 命令式编程 转移到 声明式编程

来源地址:https://blog.csdn.net/coderHing/article/details/127976348

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

微信小程序 | 小程序开发

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

如何开发微信小程序?

如何开发微信小程序?这篇文章详细讲解了如何开发微信小程序的步骤:前期准备、项目搭建、接口调用、数据绑定、事件处理、生命周期函数、样式管理和调试与发布。此外,还提供了最佳实践建议,包括遵循开发规范、使用模块化开发方式、利用版本控制工具和优化小程序性能。
如何开发微信小程序?
2024-04-02

微信小程序开发介绍微信开发者工具以及小程序框架

小编给大家分享一下微信小程序开发介绍微信开发者工具以及小程序框架,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!(一)微信开发者工具小程序团队推出了自己的开发工具-
2023-06-14

微信小程序|基于小程序+云开发制作一个菜谱小程序

今天吃什么?这是一个让强迫症左右为难的问题,跟随此文基于小程序+云开发制作一个菜谱小程序,根据现有食材一键生成菜谱,省心又省力。 一、小程序 1. 创建小程序
2023-08-20

微信小程序的开发方法

本篇内容主要讲解“微信小程序的开发方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序的开发方法”吧!1、准备工作用没有注册过微信公众平台的邮箱注册一个微信公众号, 申请帐号 , 根据指
2023-06-29

微信小程序开发知识点

本文全面介绍了微信小程序开发相关知识点,涵盖基础知识、页面开发、数据管理、用户交互、进阶知识、调试与部署以及最佳实践。涉及的内容包括小程序生命周期、组件系统、数据绑定、事件系统、页面布局、样式设置、数据管理、事件响应、动画、插件开发、云开发、支付功能、离线能力、小程序安全、调试工具、发布流程、设计原则、代码风格、性能优化、用户体验和安全考虑等方面,旨在帮助开发者深入掌握小程序开发技术。
微信小程序开发知识点
2024-04-02

编程热搜

  • Android:VolumeShaper
    VolumeShaper(支持版本改一下,minsdkversion:26,android8.0(api26)进一步学习对声音的编辑,可以让音频的声音有变化的播放 VolumeShaper.Configuration的三个参数 durati
    Android:VolumeShaper
  • Android崩溃异常捕获方法
    开发中最让人头疼的是应用突然爆炸,然后跳回到桌面。而且我们常常不知道这种状况会何时出现,在应用调试阶段还好,还可以通过调试工具的日志查看错误出现在哪里。但平时使用的时候给你闹崩溃,那你就欲哭无泪了。 那么今天主要讲一下如何去捕捉系统出现的U
    Android崩溃异常捕获方法
  • android开发教程之获取power_profile.xml文件的方法(android运行时能耗值)
    系统的设置–>电池–>使用情况中,统计的能耗的使用情况也是以power_profile.xml的value作为基础参数的1、我的手机中power_profile.xml的内容: HTC t328w代码如下:
    android开发教程之获取power_profile.xml文件的方法(android运行时能耗值)
  • Android SQLite数据库基本操作方法
    程序的最主要的功能在于对数据进行操作,通过对数据进行操作来实现某个功能。而数据库就是很重要的一个方面的,Android中内置了小巧轻便,功能却很强的一个数据库–SQLite数据库。那么就来看一下在Android程序中怎么去操作SQLite数
    Android SQLite数据库基本操作方法
  • ubuntu21.04怎么创建桌面快捷图标?ubuntu软件放到桌面的技巧
    工作的时候为了方便直接打开编辑文件,一些常用的软件或者文件我们会放在桌面,但是在ubuntu20.04下直接直接拖拽文件到桌面根本没有效果,在进入桌面后发现软件列表中的软件只能收藏到面板,无法复制到桌面使用,不知道为什么会这样,似乎并不是很
    ubuntu21.04怎么创建桌面快捷图标?ubuntu软件放到桌面的技巧
  • android获取当前手机号示例程序
    代码如下: public String getLocalNumber() { TelephonyManager tManager =
    android获取当前手机号示例程序
  • Android音视频开发(三)TextureView
    简介 TextureView与SurfaceView类似,可用于显示视频或OpenGL场景。 与SurfaceView的区别 SurfaceView不能使用变换和缩放等操作,不能叠加(Overlay)两个SurfaceView。 Textu
    Android音视频开发(三)TextureView
  • android获取屏幕高度和宽度的实现方法
    本文实例讲述了android获取屏幕高度和宽度的实现方法。分享给大家供大家参考。具体分析如下: 我们需要获取Android手机或Pad的屏幕的物理尺寸,以便于界面的设计或是其他功能的实现。下面就介绍讲一讲如何获取屏幕的物理尺寸 下面的代码即
    android获取屏幕高度和宽度的实现方法
  • Android自定义popupwindow实例代码
    先来看看效果图:一、布局
  • Android第一次实验
    一、实验原理 1.1实验目标 编程实现用户名与密码的存储与调用。 1.2实验要求 设计用户登录界面、登录成功界面、用户注册界面,用户注册时,将其用户名、密码保存到SharedPreference中,登录时输入用户名、密码,读取SharedP
    Android第一次实验

目录