如何用Hbuilder创建一个微信小程序的前端界面

这篇具有很好参考价值的文章主要介绍了如何用Hbuilder创建一个微信小程序的前端界面。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1.下载Hbuuilder软件https://www.dcloud.io/hbuilderx.html

2.打开软件

3.选择默认模板

4.创建项目成功

5.获取APPid

6.立即注册小程序

7.注册完成之后,登录小程序

8.复制Appid到微信小程序发行

9.在目录manifest.json配置中,配置Uni-app的(AppID)

10.点击发行

11.下载微信开发者工具

12.假如遇到报错,解决方案

13.点击上传

14.用手机微信扫码可以预览


1.下载Hbuuilder软件https://www.dcloud.io/hbuilderx.html

2.打开软件

点击新建,右侧栏会出现“项目”两个字,选择项目

3.选择默认模板

填写项目名称和选择存放路径。vue版本可以选择2或3

4.创建项目成功

hbuilder怎么开发小程序,小程序,前端,vue

5.获取APPid

在微信小程序电脑后台获取APPID
这个方法适用于自己申请的微信小程序(自己用的小程序)
打开微信小程序官网:https://mp.weixin.qq.com/并登陆

hbuilder怎么开发小程序,小程序,前端,vue

6.立即注册小程序

hbuilder怎么开发小程序,小程序,前端,vue

7.注册完成之后,登录小程序

hbuilder怎么开发小程序,小程序,前端,vue

可以看到自己的AppID

8.复制Appid到微信小程序发行

hbuilder怎么开发小程序,小程序,前端,vue

hbuilder怎么开发小程序,小程序,前端,vue

9.在目录manifest.json配置中,配置Uni-app的(AppID)

hbuilder怎么开发小程序,小程序,前端,vue

10.点击发行

hbuilder怎么开发小程序,小程序,前端,vue

11.下载微信开发者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

12.假如遇到报错,解决方案

hbuilder怎么开发小程序,小程序,前端,vue

解决方案

hbuilder怎么开发小程序,小程序,前端,vue

先运行到小程序模拟器,微信开发者工具

hbuilder怎么开发小程序,小程序,前端,vue

在微信开发者工具里就可以正常运行了

13.点击上传

hbuilder怎么开发小程序,小程序,前端,vue

点击上传后,可以正式应用到现在的微信小程序中,需要正式的小程序号AppID才行。普通的测试号AppID只能做到上图这样展示。

14.用手机微信扫码可以预览

hbuilder怎么开发小程序,小程序,前端,vue

hbuilder怎么开发小程序,小程序,前端,vue

想学习更多,可以扫码关注公众号,程序员柚子,可以直接问我问题,为你答疑解惑。

文章来源地址https://www.toymoban.com/news/detail-854894.html

到了这里,关于如何用Hbuilder创建一个微信小程序的前端界面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 微信小程序学习—配置HBuilder运行微信小程

    第一次接触微信小程序开发。在网上找了个项目想要运行,遇到了一些问题,记录一下运行的问题,以及解决方式,供大家参考。 遇到的报错  于是上网搜索结果 第一步 在微信小程序中打开 设置—安全设置 打开服务端口 但是我还是报错 第二步 检查HBuilder中的微信小程序运

    2024年02月13日
    浏览(50)
  • 简单分享下怎么创建一个微信小程序

    怎么创建一个微信小程序?三招教你这样做!!微信小程序不会做没关系,看我这篇文章就够啦!!实现0基础到大神的瞬间飞跃不是梦!! 戳下方链接即可直达官网,上千种行业精美模板任君挑选,快一起来试试吧!让小程序制作不再困难!上千个行业精美模板等你来挑,拖拽式搭建小

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

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

    2024年02月09日
    浏览(52)
  • uniapp HBuilder 无法运行微信小程序的问题解决

    当在 HBuilder 中新建一个空白项目,以微信小程序运行的时候,提示以下信息且没有运行成功。 原因其实已经在错误信息中写的很明白了,就是 微信开发工具 里的 安全设置 中没有 开启对应的服务端口 。 并且也写了如何操作: 打开微信开发者工具 点击 【设置】 - 【安全设

    2024年02月12日
    浏览(45)
  • hbuilder X发布微信小程序失败的解决方法

    多种情况: 如果是包太大,就先分包;(分包后,主包仍然很大,而且也无法继续拆分的话,就试试在【发行】里面点【发布】!而不是在【运行】里面上传代码!) 参考: uniapp 超过2m无法上传代码!uni-module太大了,小程序无法上传怎么办?_南北极之间的博客-CSDN博客 虽

    2024年02月13日
    浏览(43)
  • HBuilder X运行微信小程序项目至微信开发者工具失败

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

    2024年02月11日
    浏览(65)
  • uni-app使用HBuilder X工具和微信小程序工具开发微信小程序

    选择uni-app的原因是什么 需要使用到的工具 关于HBuilder X工具和微信小程序工具的介绍  怎么下载HBuilder X工具和微信小程序工具  如何使用HBuilderX工具 如何使用微信小程序工具  结尾 什么是uni-app uni-app是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到

    2024年02月08日
    浏览(64)
  • Hbuilder无法正常运行微信小程序模拟器到指定页面为启动页

    来龙去脉 我们在使用hbuilderx软件运行uni-app项目时, pages.json pages 数组的首项为应用启动页,默认情况下,选择运行项目预览,打开的页面路径自然是 pages/index/index 。 但是我这里选择 pages/my/my.vue 文件,然后选择菜单【运行】【运行到小程序模拟器】【微信开发者工具 - 指定

    2024年02月11日
    浏览(66)
  • 创建一个uni-app项目并运行再浏览器及微信小程序

    第一步: 打开HBuilder X 点击文件列表 新建 项目 第二步: 如图所示(根据项目所需要的进行选择) 第三步: 创建完成之后项目文件的(介绍以及作用) 第四步: 如何将uni-app项目运行到不同的浏览器,我在这里运行的是微信小程序 (1) 点击运行可以查看到项目的多种运行方式 (2

    2024年02月12日
    浏览(69)
  • uniapp(HBuilder X)实现微信小程序转发好友和分享朋友圈(携带多个参数)

    1.转发好友 2.分享朋友圈 需要注意的一些地方: 分享和转发内部不得有嵌套方法返回,也就是不可异步,否则在执行的时候,只会执行当前页面,自定义标题等都不会生效 转发代码块的存放级别与生命周期同级,分享代码块需要放进方法中(methods),不然不会生效 分享的参数携

    2024年02月16日
    浏览(66)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包