邂逅【小程序】开发

分手后的思念是犯贱 2023-10-02 20:34 36阅读 0赞

### 小程序开发介绍 ###

#### 小程序介绍 ####

**小程序是什么呢?**

> 小程序 (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添加新功能**。

> 传统的App更新需要先打包，上架到应用商店之后需要通过审核（App Store）, 一般来说这个审核周期是非长的, 而且很有可能审核不通过；
> 
> 但是小程序可以在App不更新的情况下，动态为自己的应用添加新的功能需求, 可以看成小程序是绕过了应用商店的；

**那么目前在这么多小程序的竞争格局中，哪一个是使用最广泛的呢？**

> 显然是`微信小程序`，目前支付宝、抖音小程序也或多或少有人在使用；
> 
> 其实我们透过小程序看本质，他们本身还是应用和平台之间的竞争，有最大流量入口的平台，对应的小程序也是用户更多一些；
> 
> 目前在公司开发小程序主要开发的还是微信小程序，其他平台的小程序往往是平台本身的一些公司或者顺手开发的；

**所以重点学习的一定是微信小程序开发, 那么又会有一个疑问, 小程序由谁开发呢?**

**首先，我们确定一下小程序的定位是怎么样的呢？**

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

**那么，由此我们也会产生一个疑惑：小程序是由谁来开发呢？**

![在这里插入图片描述][c84c8e73e5664758840cf66e1d7a6401.png_pic_center]

> 难道搞出一个《小程序开发工程师》？显然是不可能, 而且目前任何一个公司都没有小程序开发工程师这样一个岗位
> 
> 由谁开发事实上是由它的技术特点所决定的，比如微信小程序WXML、 WXSS、 JavaScript, 分别对应html 、css、js, 它更接近于我们前端的开发技术栈，所以小程序都是`由我们前端来开发`的；

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

--------------------

#### 小程序开发技术选型 ####

**原生小程序开发**：

> 微信小程序： https://developers.weixin.qq.com/miniprogram/dev/framework/
> 
> 主要技术包括： WXML、 WXSS、 JavaScript；

> 支付宝小程序： https://opendocs.alipay.com/mini/developer
> 
> 主要技术包括： AXML、 ACSS、 JavaScript；

**选择框架开发小程序**：

*  mpvue：

> mpvue是一个使用Vue开发小程序的前端框架，也是 支持 微信小程序、百度智能小程序，头条小程序 和 支付宝小程序；
> 
> 这个框架在曾经非常流行, 但是目前该框架在2018年之后就`不再维护`和更新了，所以目前`已经被放弃`；

*  wepy：

> WePY (发音: /'wepi/)是由腾讯开源的，一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己 喜欢的开发风格去开发小程序。
> 
> 该框架目前`维护的也较少`，在前两年还有挺多的项目在使用，`不推荐使用`；

**现阶段比较流行的小程序开发框架是下面两个**:

*  uni-app：

> 由DCloud团队开发和维护；
> 
> uni-app 是一个`使用 Vue 开发所有前端应用的框架`, 所以使用uni-app的前提是会使用Vue开发，开发者编写一套代码，可发布到原生App: iOS、 Android、 H5页面: Web（响应式）、以及各种小程序（微信/支付宝/ 百度/头条/飞书/QQ/快手/钉钉/淘宝）等多个平台。
> 
> uni-app目前是`很多公司的技术选型`，特别是希望适配移动端App的公司；

*  taro：

> 由京东团队开发和维护；
> 
> taro 是一个开放式 `跨端 跨框架` 解决方案，支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用；
> 
> taro因为本身支持React、 Vue的选择，给了我们更加灵活的选择空间, 特别是在Taro3.x之后，`支持Vue3、 React Hook`写法等；
> 
> taro\['tɑ:roʊ\]，名字由来是: 泰罗·奥特曼，宇宙警备队总教官，实力最强的奥特曼；

**uni-app和taro都可以开发原生App**：

> 但是使用uni-app和taro无论是适配原生小程序还是原生App，都有较多的适配问题，所以你还是需要或多或少的了解原生的一些开发知识 (iOS、 Android) , 所以uni-app和taro并不是最终的解决方案；
> 
> uni-app和taro开发的产品使用体验整体相较于原生App差很多, 所以最终是否采用uni-app或taro是由公司决定的, 而作为开发者的我们需要掌握uni-app和taro；
> 
> 也有其他的技术选型来开发原生App： ReactNative、 Flutter；

--------------------

#### 小程序预备知识 ####

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

> 页面布局： WXML，类似HTML；
> 
> 页面样式： WXSS，几乎就是CSS(某些不支持，某些进行了增强，但是基本是一致的) ；
> 
> 页面脚本： JavaScript+WXS(WeixinScript) ；

![在这里插入图片描述][140260ca8acc4ac88946704da8835c50.png_pic_center]

> 如果你之前已经掌握了Vue或者React等框架开发，那么学习小程序是更简单的；
> 
> 因为里面的`核心思想都是一致`的（比如组件化开发、数据响应式、 mustache语法、事件绑定等等）

--------------------

#### 小程序开发工具 ####

**在开发小程序之前, 我们需要注册账号, 申请App ID**

> 接入流程： https://mp.weixin.qq.com/cgi-bin/wx

**小程序的开发工具**：

> 微信开发者工具：官方提供的开发工具，`必须下载、安装`, 可以直接使用微信开发者工具开发小程序；
> 
> VSCode：相对于微信开发者工具, 很多人比较习惯使用VSCode来编写代码, 我们也可以用VSCode来开发, 下面会讲到使用VSCode如何进行开发；

**微信开发者工具下载地址**：

> https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
> 
> 推荐下载安装稳定版

![在这里插入图片描述][68c12ec4a5464c27bcdb63525174fe4f.png_pic_center]

**安装完成后, 打开微信开发者工具, 创建项目, 输入刚刚注册账户的的App ID创建项目, 选择不使用云服务**

![在这里插入图片描述][e761370fd8f246cdaf84cb7b68570517.png_pic_center]

![在这里插入图片描述][e6e4a7a5d20f4db1aad0c227660f2cb6.png_pic_center]

**如果想要使用VSCode进行开发, 使用微信开发者工具创建完成后, 在VSCode中打开对应的项目文件夹即可**

![在这里插入图片描述][1420ce00049b41f783242bea462077d6.png_pic_center]

**但是对于wxml和wxss文件, 在VSCode中代码没有高亮**

![在这里插入图片描述][14af27f6ef5744beb2e42fc999e6f7c0.png_pic_center]

**因此使用VSCode的开发, 我们可以安装如下一些插件**

> 注意: 在VSCode中开发, 我们模拟器和调试器还是需要使用微信开发者工具中的

![在这里插入图片描述][ec97a3356bf3443991006a6a9323c4f0.png_pic_center]

[c84c8e73e5664758840cf66e1d7a6401.png_pic_center]: https://img-blog.csdnimg.cn/c84c8e73e5664758840cf66e1d7a6401.png#pic_center
[140260ca8acc4ac88946704da8835c50.png_pic_center]: https://img-blog.csdnimg.cn/140260ca8acc4ac88946704da8835c50.png#pic_center
[68c12ec4a5464c27bcdb63525174fe4f.png_pic_center]: https://img-blog.csdnimg.cn/68c12ec4a5464c27bcdb63525174fe4f.png#pic_center
[e761370fd8f246cdaf84cb7b68570517.png_pic_center]: https://img-blog.csdnimg.cn/e761370fd8f246cdaf84cb7b68570517.png#pic_center
[e6e4a7a5d20f4db1aad0c227660f2cb6.png_pic_center]: https://img-blog.csdnimg.cn/e6e4a7a5d20f4db1aad0c227660f2cb6.png#pic_center
[1420ce00049b41f783242bea462077d6.png_pic_center]: https://img-blog.csdnimg.cn/1420ce00049b41f783242bea462077d6.png#pic_center
[14af27f6ef5744beb2e42fc999e6f7c0.png_pic_center]: https://img-blog.csdnimg.cn/14af27f6ef5744beb2e42fc999e6f7c0.png#pic_center
[ec97a3356bf3443991006a6a9323c4f0.png_pic_center]: https://img-blog.csdnimg.cn/ec97a3356bf3443991006a6a9323c4f0.png#pic_center