小程序开发.概述与环境搭建

---

本文介绍 微信小程序、支付宝小程序、字节跳动小程序，mpvue框架、 uniapp 开发环境的搭建以及开发前的相关准备工作。

jcLee95 的个人博客

邮箱 ：291148484@163.com

CSDN 主页：https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343

本文地址：https://blog.csdn.net/qq_28550263/article/details/125860530

---

目 录

---

1. 开题

• 1.1 开启小程序分享之旅
• 1.2 原生、mpvue、uniapp
  • 1.2.1 原生小程序
  • 1.2.2 mpvue 和 uniapp

2. 搭建小程序的开发环境

• 2.1 微信开发者工具
• 2.2 支付宝小程序开发者工具
• 2.3 字节小程序开发者工具

3. 安装NodeJS

4. 使用 mpvue 开发前的准备

• 4.1 NodeJS 环境
• 4.2 在 vue 项目基础上搭建
• 4.3 使用 mpvue/cli （命令行工具）

5. 使用 uniapp 开发前的准备

• 5.1 HBuilder X 工具
• 5.2 让使用更方便

---

1. 开题

1.1 开启小程序分享之旅

上周 C站运营静静同学联系我说有三个方向需要征集大量文章，分别是 云原生、小程序、Rust。正巧这都是我感兴趣的方向。遗憾的是由于时间有限，在接下来的一段时间里，我只能选择一个方向分享，思前想后，觉得还是想介绍一下小程序。相对于另外两个领域，小程序的特点是 更加简单、更加有趣，它能够很容易地看到效果，适合更多，哪怕是业余地爱好者进行学习。因此这是一个十分有意义，值得付出时间投入的一项工作。

1.2 原生、mpvue、uniapp

从 2016 年 至今，小程序正逐渐发展，衍生出了多种相关技术话题。从微信小程序、支付宝小程序，到众多企业纷纷推出自己的小程序架构，到底选择什么进行开发？对于初学的开发者来说，抉择总是困难的。除了各种原生小程序外，一些企业也推出了自己的小程序开发框架，其中最有影响力的是 由美团推出的 mpvue（mini vue）以及 北京数字天堂推出的 uniapp。下面分别进行介绍。

1.2.1 原生小程序

毫无疑问不同公司推出的原生小程序在开发上是彼此互不兼容的，虽然从技术上看，他们似乎没有太大本质区别。因此从学习的成本上来考虑，掌握各种原生小程序的开发将耗费更多的时间和精力。除了学会触类旁通，我们当然有更为便捷的方法，那就是抛开原生，使用框架。

1.2.2 mpvue 和 uniapp

uniapp 是内嵌mpvue框架进行开发的，因此如果你已经掌握mpvue 是可以直接迁移到 uniapp的。 目前为止uniapp号称所谓的 “开发一次，多端覆盖”，但对于如IOS、安卓等原生应用开发可以认为是应该被忽略的开发工具并且以后也看不到太多发展的希望，只能开发一些适用于web套壳小应用。从企业角度看，当然不希望做同一个界面，要搞web前端、安卓端、iOS端的多个团队，但是要开发在生产环境能用的产品，uniapp离它设定的目标还有很长的路要走，并且未必比IT巨头谷歌的 flutter 等框架走得更快。因此说到底 uniapp 目前主要也不过是用于更方便地开发小程序。我个人认为如果兼顾快速上手，但又希望做出更好的app，选择 flutter 会比使用uniapp前景更好。

单从小程序开发这一块看，mpvue 和 uni-app 都是基于 vue 的体系， mpvue 更完整接收了小程序的组件和Api，更贴近于原生小程序开发。不论是项目结构还是内容上，mpvue 又都与 vue 更加接近，它是更容易短期上手的。uniapp 的优点是（据其官网说，2019年比较）性能更加优秀（参考其官网页面：https://ask.dcloud.net.cn/article/35947），跨端能力更好。

2. 搭建小程序的开发环境

2.1 微信开发者工具

你可以在页面 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 中找到找适用于你软硬件的微信小程序开发者工具：

这里我下载了稳定版本，等下载完成后双击进行安装。选择目录后点击下一步，等待程序安装完成：

点击完成，首次启动应用。你需要使用微信扫码登录你的账号：

其界面是这样子的：

2.2 支付宝小程序开发者工具

你可以在页面 https://opendocs.alipay.com/mini/ide/download 中找到找适用于你软硬件的支付宝小程序开发者工具：

这里我下载了稳定版本，等下载完成后双击进行安装。选择目录后点击下一步，等待程序安装完成：


点击完成，首次启动应用。可以看到其界面和微信小程序的界面还是很类似的：

2.3 字节小程序开发者工具

字节小程序开发者平台的官方地址是 https://microapp.bytedance.com/ ，你可以在这里找到相关的文档和其他信息：

同样，字节跳动也提供了 开发者工具。字节跳动开发者工具 是面向字节系小程序开发者推出的桌面端集成开发环境（Integrated Development Environment，IDE）。IDE 支持小程序开发、调试、预览、上传等基本功能，并且集成开发者服务（包含智能客服等），支持在 Windows、Mac 平台上运行，旨在帮助开发者更高效地开发小程序。你可以选择安装对应于你的软硬件设备的版本下载安装。其地址为：https://microapp.bytedance.com/docs/zh-CN/mini-app/develop/developer-instrument/download/developer-instrument-update-and-download/

如果你正打算开发字节小游戏的话，可以安装字节跳动的 小游戏开发者工具，其地址为：https://microapp.bytedance.com/docs/zh-CN/mini-game/develop/developer-instrument/developer-instrument-update-and-download/。

字节开发者工具的安装方式与其他小程序的也基本相似。下载完成后，双击开始进行安装。选择你安装该应用的用户：

选择安装的位置，等待程序安装完成：



点击完成，首次启动应用，你需要进行登陆：

登陆后，就进入到了开发页面了，这看上去与微信和支付宝开发者工具也是类似的：

3. 安装NodeJS

你可以在 Nodejs 中文网（http://nodejs.cn/）选择下载适合你软硬件环境的安装包。如果是下载最新版的，可以直接访问http://nodejs.cn/download/current/上查找。一般来说，以上线为目的的开发我们都会选择长期支持版进行安装（LTS 版）。

下载后双击安装包进行安装，这里不再进行演示。

4. 使用 mpvue 开发前的准备

4.1 NodeJS 环境

使用mpvue前，你需要先安装好 NodeJS。关于NodeJS的安装方式，见3. 安装NodeJS。你可以通过以下方式来查看NodeJS是否安装成功，如果安装成功，将返回NodeJS的版本号：

node -v
1

比如：

为了是网络更快，可以先考虑将 npm 源设置为一个国内源如淘宝源：

npm set registry https://registry.npm.taobao.org/
1

4.2 在 vue 项目基础上搭建

然后全局安装 vue-cli。目前为止， mpvue 仍然是使用 vue2 进行开发，因此暂时只能考虑安装 vue2的脚手架：

npm install --global vue-cli@2.9
1

4.3 使用 mpvue/cli （命令行工具）

这是相对便捷的方式，就是直接使用 mpvue/cli 生成你的初始项目模板。首先你仍然需要全局安装 vue-cli：

npm install --global vue-cli
1

接着，你可以使用vue命令中直接来初始化你的 mpvue 项目：

vue init mpvue/mpvue-quickstart my-project
1

5. 使用 uniapp 开发前的准备

5.1 HBuilder X 工具

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE，其下载地址为 https://www.dcloud.io/hbuilderx.html。

HBuilderX 简称HX，是一个轻量级编辑器。它具有以下特点：

下载后你得到的不是安装程序，而是一个压缩包：

是的，HBuilder X是一个绿色软件，你只需要将其解压到你喜欢的目录：

5.2 让使用更方便

由于是绿色软件，有一些工作还得我们自己来做。比如，解压完成侯就不会自己生成桌面快捷方式，要运行 HBuilder X， 还需要我们每次都手动打开解压目录，这当然很麻烦。找到你的解压位置，将 HBuilderX.exe 发送到桌面。

双击 HBuildX.exe 或其快捷方式，首次打开系统会自动提示你选择 编辑界面风格 和 快捷键方案：

你完全可以依据自己的爱好来选择。选择完成后，点击 开始体验 即进入打开自述文件，就像你安装后第一次使用很多其他软件一样：