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

本文涉及的产品
密钥管理服务KMS,1000个密钥,100个凭据,1个月
简介: 从零开始搭建uni-app框架的小程序开发环境

一、 小程序账号的开通

1、注册小程序账号

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

82a9efc3bb8d4fb4957035ed2a768261.png

71d74532ecc14c39bcfe3380fc183a97.png


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

e0855e12eaed5894badeec53065ebc75.png

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


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

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


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

  • (1)获取 AppID

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

77375849c4d779d5538ab0b1ddf0e76e.png


(2)获取AppSecret

AppSecret的作用:AppSecret相对于AppID来说,两者的功能不一样。我们刚才说AppID是小程序的身份证,那么AppSecret这个字符串就相当于你的会员卡。

-->[在网络的通信过程中我们为了保证接口的数据安全,我们通常会采用对接口进行加密的方式,也就是所说的那些对称加密和非对称加密。微信的接口通信采用的是非对称加密的方式进行同行,而这个AppSecret正是在调用微信所开放的接口过程中必备的密钥。所以,这就好比你在微信系统中的会员卡。其获取的方式跟AppID一致,也是在菜单: “开发”-“开发管理”-“开发设置”。]

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


二、 微信开发工具的下载

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

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

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

ed8452d76d1f9f962ad984b0b1f2a3d0.png


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

2d8bfbfba6ca201c1b4859080c843560.png


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

7f61d552e8206653de4e66d0396645a6.png


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

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


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

7952e068f14f8b245a75069508b9db5d.png


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

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


三、HBuilderX工具的下载与配置

1、Node环境的搭建

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


  • Windows系统安装node:

(1)根据系统属性下载相应的版本,下载地址:Node.js下载

a3c4523a241597d770ba24ac321f123c.png


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

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

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

  • 首先找到你的node包解压路径

5ffc7f70f28fd04fecc739495b2ec1e9.png


然后打开你的环境变量配置界面,将刚才拷贝的路径粘贴到Path变量下即可.

0af77a81f01009f3546ff618157587ea.png


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的安装情况,直到确切出现了版本号之后就说明安装成功。

4e6366d0f6d7751c225915500e4a3e38.png

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


Mac系统安装node:

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

详情可参考教程:不会使用mac?HomeBrew让你效率倍增!


2、HBuilderX工作环境配置

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

6b97925db0d7ade621bf14f90e1443fe.png

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


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

b7c8ad6a8b7add72b3d7221eabe2b913.png


(2)进行小程序相关的配置

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

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

ca68c1a47b3e50770ca35e61d8bb2f52.png


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

278d6d4ec6dda51aa6a7c793d2368f50.png


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

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


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

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

ac6cba8cbed807c12f7a8bc799464f47.png


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

27562cfb94e42b643342c41303addcef.png


2、联调开发功能测试

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

c30193f91d4e20558c5a49162aa86513.png


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

相关文章
|
23天前
|
机器学习/深度学习 存储 人工智能
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
MNN-LLM App 是阿里巴巴基于 MNN-LLM 框架开发的 Android 应用,支持多模态交互、多种主流模型选择、离线运行及性能优化。
1338 14
MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
|
5月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
1026 7
|
5月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
961 1
|
2月前
|
Dart 前端开发 架构师
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
170 26
|
3月前
|
人工智能 小程序 数据处理
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。
|
4月前
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路,而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者,旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择,再到具体模块的封装与实现,包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示,便于理解和实践。
214 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
|
5月前
|
开发框架 人工智能 小程序
小程序常见的 UI 框架
【10月更文挑战第17天】小程序 UI 框架为开发者提供了便捷的工具和资源,帮助他们快速构建高质量的小程序界面。在选择框架时,需要综合考虑各种因素,以找到最适合项目的解决方案。随着技术的不断进步,UI 框架也将不断发展和创新,为小程序开发带来更多的便利和可能性。
272 2
|
5月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
351 1
|
5月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1804 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
5月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
808 0

热门文章

最新文章

  • 1
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
  • 2
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
  • 3
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 4
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 5
    【Azure App Service】基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢?
  • 6
    1688APP 原数据 API 接口的开发、应用与收益
  • 7
    PiliPala:开源项目真香,B站用户狂喜!这个开源APP竟能自定义主题+去广告?PiliPala隐藏功能大揭秘
  • 8
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
  • 9
    语音app系统软件源码开发搭建新手启蒙篇
  • 10
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡