HBuilder将uniapp项目运行到微信开发者工具进行小程序调试

这篇具有很好参考价值的文章主要介绍了HBuilder将uniapp项目运行到微信开发者工具进行小程序调试。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

HBuilder将uniapp项目运行到微信开发者工具进行小程序调试

前言

  • 有时候我们的项目开发是使用uniapp,而最终是要发布到微信小程序的。
  • 在开发uniapp项目过程中,我们可以使用HBuilderX运行到微信小程序模拟器(微信开发者工具),一边写代码一边调试、预览效果。

准备

电脑安装以下软件

  • HbuilderX(写代码)
  • 微信开发者工具(调试,预览)

具体步骤

1. 小程序运行路径配置

  • 打开HbuilderX里面的【工具】→【设置】
    uniapp 微信小程序调试,小程序,uni-app,uni-app,微信小程序,小程序
  • 在运行配置里面,把微信开发者工具的安装路径填上。
    注意!!:这里路径要选到安装路径的最后一级,把【微信开发者工具】文件夹也选上
    uniapp 微信小程序调试,小程序,uni-app,uni-app,微信小程序,小程序
    如果只配置了这个,运行到小程序模拟器的时候会提示服务端口没有打开,这里的服务端口指的是微信开发工具里面的服务端口

uniapp 微信小程序调试,小程序,uni-app,uni-app,微信小程序,小程序

2. 打开服务端口

我们现在只需在微信开发者工具中的设置→安全 里面 把服务器端口打开
uniapp 微信小程序调试,小程序,uni-app,uni-app,微信小程序,小程序
我们再进行运行编译
uniapp 微信小程序调试,小程序,uni-app,uni-app,微信小程序,小程序
编译成功后,会自动打开微信开发者工具,这时候就能看到我们的uniapp在小程序的运行效果了。在HBuilderX中修改文件并保存,会自动刷新微信模拟器,可以一边写代码一边调试了。
uniapp 微信小程序调试,小程序,uni-app,uni-app,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-600255.html

到了这里,关于HBuilder将uniapp项目运行到微信开发者工具进行小程序调试的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HBuilder X运行微信小程序项目至微信开发者工具失败

    在HBuilder X中运行微信小程序项目时,此步于以下过程,无法进一步打开界面   解决方案: 导入项目即可,但是需要注意导入项目的路径信息。 需要是当前项目unpackage==dist==dev==mp-weixin下面的文件,微信开发者工具才能识别。    

    2024年02月11日
    浏览(54)
  • HBuilderX 开发的uniapp项目在微信开发者工具中调试运行

    第一步下载需要的开发工具: 下载HBuilderX:https://www.dcloud.io/hbuilderx.html 下载微信开发者工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/nightly.html 第二步将自己在HBuilderX 开发的uniapp项目打开并保证能运行,然后点击 工具 进行配置微信开发者工具路径: 第三步打开微信开

    2024年02月11日
    浏览(38)
  • HbuilderX运行uniapp项目到微信小程序时,自动打开了微信小程序开发工具但是进不去项目

    这样选择之后,运行时一直停在打开微信开发者工具不能进入项目,如图: 这是因为你当前不是这个微信小程序的开发者,联系管理员添加你为当前小程序的开发者就行了。 或者是更换appid

    2024年02月11日
    浏览(49)
  • uni-app从创建到运行到微信开发者工具

    uni-app是一个基于Vue.js开发跨平台应用的前端框架 解决了原生小程序编写的繁琐,只要你会vue就可以通过uni-app编写小程序 首先开发工具我推荐HBuilder,虽然我比较喜欢VScode,但这个真的很适合写uni-app,而且uni-app官方推荐使用HBuilderX来开发uni-app类型的项目 好处:模板丰富、有

    2024年02月09日
    浏览(55)
  • 附录1-将uni-app运行到微信开发者工具

    目录 1  在manifest.json写入AppID 2  配置微信开发者工具的安装路径 3  微信开发者工具的安全设置 4  运行 5  修改一些配置项 如果你忘了安装在哪里了,可以右键快捷方式看一下属性 在运行设置中找到微信开发者工具路径,然后选择到文件夹一级就可以了 写完了直接关闭

    2024年02月15日
    浏览(36)
  • uni-app运行到微信开发者工具-没有打印的情况

    前言 到我们进场使用微信开发者工具时,就会发现它经常会有bug,特别是在软件更新,组件库更新之后 最近在更新微信开发者工具之后发现所有打印都不显示了,虽然是小问题-但对于强迫症很烦 以为是代码配置问题-结果是更新之后打印开关开启不打印 查看地方-来到微信开

    2024年02月09日
    浏览(55)
  • uni-app 使用axios发请求 运行到微信开发者工具报错 Adapter “http‘ is not available in the build

    场景 最近在使用uni-app开发H5移动端,跟往常一样使用axios发请求,做一些全局的请求拦截响应拦截操作 uni-app数据存储,uni-ui组件开发,配置axios,vuex。配置了vue.config.js文件做跨域操作 运行到谷歌浏览器一切正常,但是运行到微信开发者工具就开始报错,Adapter-适配器不可用

    2024年02月08日
    浏览(46)
  • hbuilder启动微信开发者工具失败问题汇总

    打开hbuilder中的Settings.json 运行=运行到小程序模拟器=运行设置 找到 微信开发者工具路径 ,检查配置是否有误 打开微信开发者工具,在 安全 选项里开启 服务端口 如果上面的两步都没有问题,那么应该就是appid的问题了。 首先要搞清楚的是 DCloud的AppId和微信开发者工具的A

    2024年02月04日
    浏览(35)
  • uniapp和springboot微信小程序开发实战:前端架构搭建之HBuilder X创建项目以及目录介绍

    HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开

    2024年02月09日
    浏览(44)
  • vscode开发小程序项目并在微信开发者工具运行

    需求:vscode开发uniapp之后在微信开发者工具运行,更改的时候微信开发者也同步更改 创建微信小程序所需插件,在vscode的插件管理里面安装就可以了 1.微信小程序开发工具 2.vscode weapp api 3.vscode wxml 4.vscode wechat 1.创建小程序命令 这里的uniapp-vue是项目名称,不能大写 2.选择un

    2024年02月09日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包