uniapp 开发小程序 准备工作

前言:

在本地使用vue2.0 实现网页版拍照功能,本地开发老是报错 NotFoundError: Requested device not found ,原因是 浏览器主要用于处理网络协议(如 HTTP、HTTPS)相关的数据交互,它的运行环境被设计为相对安全和隔离的。出于安全考虑,浏览器默认没有权限直接操作硬件设备。 但在特定场景下可以间接访问,如 ssl证书引入代码中,将本地开发环境变成 https 就能运行啦

然后就和老板商量 用小程序 或者 app开发,绕过https环境,实现拍照功能,对比了开发成本和跨平台兼容这些点,最总选择 小程序 开发

一、准备工作

打算用 uniapp 开发小程序,所以选择他的专属搭配 Hbuilder;

还有微信开发者工具,看看编译好的页面;

1. 下载 工具

hbuilder首页:https://www.dcloud.io/hbuilderx.html

下载hbuilder编辑器,选择对应的系统,Windows和mac正式版即可,下载好安装路径不要放在C盘,此编辑器作为主要开发编辑器,我选择的是windows

微信开发者工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

下载微信开发者工具,选择对应的系统,正式版即可,下载好安装路径不要放在C盘,此工具主要用于开发是预览小程序

2. 申请 微信小程序

微信公众平台:https://mp.weixin.qq.com/

进入微信公众平台-> 点击立即注册-> 点击小程序-> 点击前往注册

填写信息。

注意:邮箱需要,未被微信公众平台注册,未被微信开放平台注册,未被个人微信号绑定的邮箱

注册好后,扫码登陆平台,页面向下滚动,找到左边的开发,选择开发管理,右边页面选择开发设置,这里会有一个AppID,作为绑定开发者工具用(注意不要暴露,使用在后文)

哦空空,到这里可以啦,主要是获取开发者ID -- AppID

二、项目搭建 配置 运行

依据https://uniapp.dcloud.net.cn/quickstart-hx.html官方文档来来搭建项目

  1. 在点击工具栏里的文件 -> 新建 -> 项目(快捷键Ctrl+N):
  1. 选择uni-app类型,输入工程名,选择模板,点击创建,即可成功创建。
  1. 如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功。

    如下图,需在输入框输入微信开发者工具的安装路径。

  1. 在微信开发者工具里面配置:

    设置->安全设置-》开启服务端口

    右边详情基本信息也要注意 AppId

  2. 在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app。

这样 微信开发者工具 会自动弹出来,项目运行成功

到此,项目搭建 配置 运行 就基本完成啦!!!

相关推荐
weixin_4222013021 小时前
如何解决小程序图标点击热区小,落点不准问题?
前端·小程序·样式·点击热区·扩大
河北清兮网络科技1 天前
直播APP商用开发深度解析:为什么模板系统无法支撑规模化直播平台
运维·网络·人工智能·小程序·短剧app
今年下半年1 天前
【微信小程序】uni-app + Vue3 + Vite 的小程序项目实现「进入指定范围才能打卡」的考勤功能
微信小程序·uni-app·定位·考勤
Geek_Vison1 天前
政务APP新增鸿蒙客户端,如何复用已有的业务单元?
小程序·harmonyos·mpaas·政务·小程序容器
沐子a~1 天前
小程序实战:萌宠案例
小程序
火眼金睛记单词1 天前
零基础成人重拾英语:第一个月的30天行动地图
前端·经验分享·学习·小程序
xinraynet1 天前
沈阳企业小程序开发选型:五个可核验维度,附设备数据采集与私域商城的技术实现要点
大数据·科技·ai·微信小程序·小程序
小码哥0682 天前
Java医院陪诊系统陪护系统陪诊小程序,三端齐全可定制
大数据·小程序·陪诊陪护·陪诊小程序·陪护系统·陪诊系统·陪护小程序
连涨- AI脑波英语2 天前
机构小程序对接词汇课程,测试账号怎样与正式学生账号隔离?
小程序·接口安全·脑机单词速记
扶风ff2 天前
练题簿在线免费刷题:题目导入、章节管理、Excel 与 Word 导出,让题库更好用
学习·小程序·word·excel