uni-app创建小程序项目并运行到微信开发者工具上@令狐张豪

最新推荐文章于 2025-01-15 17:38:47 发布
原创 最新推荐文章于 2025-01-15 17:38:47 发布 · 599 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
uni-app

当前文章被收录于：

uni-app
8 篇文章 0 人学习
订阅专栏 查看详情
本文详细介绍了使用uni-app创建并配置微信小程序项目的步骤。主要内容包括：创建项目、配置manifest.json文件（填写AppID）、设置HBuilderX工具及微信开发者工具路径、获取外部web服务器调用url等。

在这直接说步骤

1. 创建uni-app小程序项目

在这里插入图片描述

2. 打开项目中的manifest.json文件进行配置

在这里插入图片描述

  • 2.1 写入微信小程序AppID

在这里插入图片描述

  • 2.2 打开HBuilder X 工具-设置 填写外部web服务器调用url和微信开发者工具路径，下图展示

在这里插入图片描述

在这里说下2.2 微信开发者路径我们填写各自的就行，外部web服务器调用url怎么获取呢下面说一下

web服务器调用url：http:// 加上你的本地ip（本地ip查看方式：cmd：命令ipconfig回车）
在这里插入图片描述
端口号获取：打开微信开发者工具-设置-通用设置-选择安全-打开服务端口开关，下面有端口号

在这里插入图片描述

一个完整的外部web服务器调用url就是 http:// +你本地ip : + 你微信开发者工具刚看到的端口号

3. 最后全部配置完后我我们就运行-运行到小程序模拟器-微信开发者工具

在这里插入图片描述

在这里插入图片描述

end~~~

如有错误或观点不一致的请评论留言共同讨论，本人前端小白一枚，根据自己实际项目遇到的问题进行总结分享，谢谢大家的阅读！
文章对您有所帮助请给作者点个赞支持下，谢谢~

标签
#前端 #uni-app
uni-app创建并运行微信小程序项目
qq_40860800的博客
02-08 7000
今天分享一下我在uni-app创建并运行微信小程序项目时遇到的问题和解决办法，分两步给大家说明，第一步是没有任何报错下的流程，第二部是遇到的问题和解决办法； 一、正常情况（无报错）下的流程： 1、打开HBuilder X,点击文件,选择新建一个项目 创建成功后选中项目 2、点击HBuilder X菜单栏工具下面的 设置，然后在运行配置里面设置微信开发者工具的安装路径 3、在微信开发者工具中,点击 设置 下面的 安全设置，然后开启服务端口 4、最后在HBuilder X运行配置中填写web服务调
uni-app使用HBuilder X工具和微信小程序工具开发微信小程序
qq_64047601的博客
06-15 4244
uni-app是一个使用vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5 以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝等)、快应用等多个平台。HBuilderX，H是HTML的首字母，Builder是构造者，X是HBuilder的下一代版本。我们也简称HX。HX是轻如编辑器、强如IDE的合体版本。HBuilder X工具的扩展性强HX支持java插件、nodejs插件，并兼容了很多vscode的插件及代码块。
【微信小程序】微信小程序开发环境搭建：创建uni-app项目
墨夶的博客
11-12 1693
通过本文的介绍，你应该已经成功安装并配置了 HBuilderX，为使用 uni-app 开发微信小程序做好了准备。接下来，你可以开始编写你的第一个小程序项目，探索更多有趣的功能和特性。祝你开发顺利，创造更多优秀的作品！
微信小程序开发-uni-app创建项目
最新发布
Jean·z的博客
01-15 1300
Vue代码不能直接运行到小程序端，安装uni-app（Vue3）编译器插件4.需要设置微信开发者路径5.微信开发者工具安全服务端口开启1. npx degit ......创建项目2. manifest.json 添加 appid3. pnpm install 配置依赖4. pnpm dev:mp-weixin 编译微信小程序命令5. 导入到微信开发者工具中。打开微信开发者工具导入项目代码！！！注意这里导入的目录文件是dist下的dev文件
HBuilderX配置外部服务器（tomcat）查看编辑jsp界面
安装求助：鱼搜索：你行为
12-24 3965
这两种方法虽然解决了使用HBuilderX对jsp查看编辑问题，但是由于HBuilderX软件的问题，还是比较麻烦的，如果编辑jsp代码还是建议直接在eclipse中进行吧，如果需要调整jsp中的html代码，可以这样进行 配置使用。最后一提，进行上述配置，HBuilderX中在非webapps下的任何文件都是无法运行，只需要把配置中的外部web服务器调用url删掉就可以恢复正常了。
hbuilderx 尝试
bxbfx
03-12 1787
前言 记录一些使用的hbuilerx的情况 小小的麻烦 html项目用二维码在同一局域网无法正确显示。 首先查看内置浏览器的地址。例如 http://127.0.0.1:8848/neeeee-5star/index.html 打开工具->设置->运行配置->浏览器运行配置里面有一个 外部web服务器调用url，在这里填上 http://ip:port 勾选下面的...
如何利用HBuilder快速设置外部web服务器来测试移动web
热门推荐
东雄平的专栏
10-25 4万+
HBuilder 关于HBuilder工具的简介：HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML...
Eclipse中修改Web项目的URL访问路径
petercnmei的专栏
02-28 3万+
1 tomcat启动的URL 在自己的项目名称上，点右键，properties，web project settings，然后修改右边的context root，一般默认是项目名，但是，如果是复制别的项目工程，还是原来复制过来的项目名 2 maven工程：项目名称就是artifactId，即f2pdj，在哪里启动，就是哪里，不管是不是父子工程。还有，改的时候要小心，别把  标签里面的a
Javaweb开发中URL路径的使用
G11176593的博客
08-27 1577
首页
uni-app微信小程序开发小白教程（有手就会）
x737510的博客
10-06 2万+
uni-app 就是 用 Vue.js 开发所有前端应用 的框架用vue去写，uni-app会帮我们生成 各个终端适配的一个应用可以实现开发者编写一套代码，就能发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。【即：一次开发 多端覆盖】
小程序 -- uni-app开发微信小程序环境搭建（HBuilder X+微信开发者工具）
herui的博客
12-25 1万+
uni-app开发小程序的已经很普遍了，当然肯定有很多人已经发过环境搭建这些，我这边只是记录我搭建的时候遇到的问题记录一下，防止之后自己网咯，有问题可以指出就行。
Uni-app运用HBuilderX和微信web开发者工具做微信小程序
m0_75260695的博客
06-14 8159
Uni-app的介绍:uni-app是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5以及各种小程序、快应用等多个平台.HBuilderX中的H是HTML的首字母，Builder是构造者，X是HBuilder的下一代版本。简称HX。HX是轻如编辑器、强如IDE的合体版本。微信web开发者工具的介绍:为帮助开发者更方便、更安全地开发和调试基于微信的网页，我们推出了微信 web 开发者工具。
如何使用uni-app开发微信小程序
yong_19930826的博客
06-14 1万+
uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。详细的 uni-app 官方文档，请翻阅。
uni-app启动本地开发环境，修改默认端口号
weixin_35426913的博客
09-01 516
vite.config.js:登录后复制 import { defineConfig } from "vite"; import uni from "@dcloudio/vite-plugin-uni"; // https://vitejs.dev/config/ export default defineConfig...
uniapp开发公众号，微信开发者工具进行本地调试
效率开发者手札
08-12 1698
uniapp开发公众号，微信开发者工具进行本地调试
创建一个uni-app项目并运行到微信开发者工具（真机调试）
苦涩精灵的博客
11-15 5181
创建一个uni-app项目并运行 1. 下载HBuilderX、微信开发者工具 HBuilderX官方下载链接: HBuilderX 选择开发版，这样就不用再下载各种插件了 微信开发者工具官方下载链接:微信开发者工具 小程序选择稳定版 2. 创建uni-app项目 在点击工具栏里的文件 -> 新建 -> 项目： 选择uni-app类型 -> 输入工程名 -> 选择模板 -> 创建： 3.运行项目 因为是一个使用 Vue.js 开发所有前端应用的框架，所以学过Vue.js
HBuilderX开发的uniapp项目运行到微信小程序开发者工具上的方法
phplife的技术专栏，专注于php,golang,ai等技术应用
05-11 1万+
用HBuilderX开发的uniapp版的微信小程序项目，开发，测试，联调时需要把项目运行到小程序模拟器，如何运行到小程序模拟器，需要做以下几点设置: 一、在项目的manifest.json配置模块里需要配置一下申请好的小程序appid 如果有正式的appid,这里就直接用正式的appid，如果没有，我们刚开始时可以直接申请一个测试号使用，我这里打开小程序开发者工具，直接点击创建小程序--->再点击测试号，生成一个测试用的appid,复制这个测试的appid，但不实际创建小程序 把刚.
【小程序专栏】第一个uniapp项目编译到微信开发者工具以及android真机运行
字母哥博客
07-01 4658
本文为大家创建第一个uniapp项目，并将项目以andorid应用的形式运行到真机进行调试，以“微信小程序”为例编译运行到微信开发者工具。
uniapp运行到开发者工具中
xiaowude_boke的博客
01-02 3275
uniapp运行到微信开发者工具中
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值