从零开始搭建uni-app框架的小程序开发环境

📌个人主页：个人主页
​🧀 推荐专栏：小程序开发成神之路
📝作者简介：一个读研中创业、打工中学习的能搞全栈、也搞算法、目前在搞大数据的奋斗者。
⭐️您的小小关注是我持续输出的动力！⭐️

---

---

一、 小程序账号的开通

1、注册小程序账号

在开始小程序开发的第一步就是在微信的生态中获取一张门票。微信将小程序和公众号的入口都统一在一起了，所以我们只需要登录微信公众平台，然后点击右上角立即注册，然后我们选择小程序。

---

---

特别要注意：这里的邮箱没有限制，你可以用任意厂商的邮箱（如QQ邮箱、网易邮箱、谷歌邮箱等），只要你填的这个邮箱可以接受邮件就没有任何问题。但是要注意：每个邮箱只能注册一个小程序账号。那么这个时候我们可以借助网易163邮箱一个手机号可以注册多个免费163邮箱。

地址：网易163邮箱登陆注册地址

---

• 按照系统提示然后登陆自己的邮箱点击相应的激活链接即刻完成账号的激活。
• 然后，再按照表单要求填入相应的个人信息即可完成注册。

---

2、 获取小程序身份证：AppID & AppSecret

在注册号微信小程序账号之后，你会有个微信管理员账号，平时就可以用这个微信在微信公众平台进行扫码登录。

在这个小程序管理平台，你可以管理你的小程序的权限，查看数据报表，发布小程序、小程序接口配置、获取AppID和AppSecret等操作。

• （1）获取 AppID

AppID的作用：AppID相当于小程序的身份证，是你在开发和上线过程必备的一个编号。我们可以在菜单 “开发”-“开发管理”-“开发设置”中看到小程序的 AppID 了 。

• （2）获取AppSecret

AppSecret的作用：AppSecret相对于AppID来说，两者的功能不一样。我们刚才说AppID是小程序的身份证，那么AppSecret这个字符串就相当于你的会员卡。
-->[在网络的通信过程中我们为了保证接口的数据安全，我们通常会采用对接口进行加密的方式，也就是所说的那些对称加密和非对称加密。微信的接口通信采用的是非对称加密的方式进行同行，而这个AppSecret正是在调用微信所开放的接口过程中必备的密钥。所以，这就好比你在微信系统中的会员卡。其获取的方式跟AppID一致，也是在菜单： “开发”-“开发管理”-“开发设置”。]

如果现在不理解也没关系，在后续章节时候到的时候我们在详细讲解。

二、 微信开发工具的下载

1、微信开发者工具的安装

有了小程序帐号之后，我们需要一个工具来开发小程序。

前往开发者工具下载页面 ，根据自己的操作系统下载对应的安装包进行安装。

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

根据你电脑系统型号选择相应的版本进行安装。下载好之后直接双击安装包进行安装，按照程序的指引点击下一步直到完成。

【注意：要注意软件盲目点击然后安装到C盘的情况发生，按照你自己的需求修改该工具的安装路径】

2、打开工具并登录你的小程序账号

打开小程序开发者工具后，会出现一个扫码登录的界面，这个时候就需要使用你申请的小程序过程中所绑定的管理员微信进行扫码登录：

扫码之后你会发现会让你选择小程序登录。[为什么会出现选择小程序登录的场景：因为一个微信号可以同时成为多个小程序的管理员]

到此位置，你可以选择关闭微信开发者工具或者缩小，不用担心重复登录的问题。他会缓存你的登录信息，直到你下次打开工具的时候他会自动登录你的账号。

那么接下来就需要对uni-app的开发环境进行配置了。

三、HBuilderX工具的下载与配置

1、Node环境的搭建

正如前文所说，我们采用的是uniapp框架进行小程序的多端开发。该框架的运行基本环境为nodejs，所以在开发前我们需要先安装好node。

• Windows系统安装node：

（1）根据系统属性下载相应的版本，下载地址：Node.js下载

msi版本:windows中的软件安装包，有“下一步”等操作指引。

zip版本:解压缩版本，直接解压即可使用.

区别于软件安装包配置的方式，node解压版本需要进行环境变量的配置才可进行全局使用。

• 首先找到你的node包解压路径
  
• 然后打开你的环境变量配置界面，将刚才拷贝的路径粘贴到Path变量下即可.
  

（2）配置软件下载源以及验证效果
nodejs是JavaScript的运行环境，其中npm是用户下载和安装软件依赖的包管理工具，在我们的项目中所要用到的组件都需要通过npm来安装。但是，按照工具默认的配置来使用的话，由于其下载软件的服务器在国外，而导致其下载速度特别慢的情况。

这个时候我们需要修改npm的下载源，将其改为国内的淘宝源或者使用cnpm工具代替npm：

// 设置源
npm config set registry https://registry.npm.taobao.org
// 验证源是否修改成功（返回刚刚设置的地址即成功）
npm config get registry

// 使用cnpm工具取代npm：先安装后使用。
npm install -g cnpm --registry=https://registry.npm.taobao.org
// 以后即可使用cnpm进行软件的安装
cnpm install xxx

再用node -v指令确认node的安装情况，直到确切出现了版本号之后就说明安装成功。

到此位置node的运行环境就算完成了配置，工作可到一段落。

---

• Mac系统安装node：
  对于在Mac系统中进行nodejs的安装工作来说，也有两种办法：第一，可以采用跟上文一样的形式，通过在官网进行软件安装包进行安装。第二，也是我个人十分推荐的方式，通过第三方包管理工具HomeBrew进行软件的安装，简单高效、一步到位！

详情可参考教程：不会使用mac？HomeBrew让你效率倍增！

2、HBuilderX工作环境配置

uniapp框架官方配置的开发者工具为HBuilder X.使用官方提供的工具最重要的原因在于：可以兼容uniapp的插件生态大幅度提高生产力！

你可以根据你的系统对软件进行相应版本的下载使用。在下载好之后我们需要做的就是熟悉创建项目的流程，并为后续的开发配置好环境。

（1）创建uniapp项目。在菜单栏选项中：文件-新建-项目，然后选择uni-app项目。在现有版本的工具都提供了一些示例模板。如果你是第一次使用，个人建议你选一个内容相对丰富的模板进行创建，这样能让你更快的熟悉项目的目录结构！

（2）进行小程序相关的配置

在创建好新项目之后，第一时间我们需要配置的有两点：

生成你的项目专属的uni-app应用标识和应用名(生成uni-app应用标识是为后续从插件市场下载应用模版、对项目运行调试和发布做好准备)

配置小程序的appId以及取消【检查安全域名和TLS版本】功能的选中（取消该功能的选中也就是取消工具对请求接口的https协议的校验，从而方便本地调试）

四、 HBuilderX和微信开发者工具联调

在以上工作的基础下，接下来就需要将两个工具进行联通操作。也就是让你在HBuilderX开发环境中写好的代码可以顺利地在微信开发者工具中跑通（小程序的上线和调试都是需要依托于微信开发者工具的环境而展开）。

1、打开小程序的联调端口

在微信开发者工具中打开设置-安全设置

将服务端口的功能按钮切换至激活状态即可。

2、联调开发功能测试

在打开了小程序开发者工具的联调功能后，我们就可以在HBuilderX工具中，对项目进行运行测试了：运行-运行到小程序模拟器-微信开发者工具

最后，HBuilderX会成功调起你的微信开发者工具，在界面功能预览界面可以看到你实时的内容修改。

---

我是陶人，带你玩转小程序。更为全面的小程序开发内容正在撰写中，敬请期待。