如何使用HbuilderX运行小程序项目

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

一、创建一个新的项目(导入已有项目忽略)

1.新建项目

如何使用HbuilderX运行小程序项目

2.设置项目名

如何使用HbuilderX运行小程序项目

3.HbuilderX运行项目

如何使用HbuilderX运行小程序项目

4.运行成功,会自动打开微信开发者工具

如何使用HbuilderX运行小程序项目

5.uni-app 项目目录结构


┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─main.js               Vue初始化入口文件
├─App.vue               应用配置,用来配置小程序的全局样式、生命周期函数等
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息

二、配置环境

1.填写自己的微信小程序的AppID

如何使用HbuilderX运行小程序项目

2.在HBuilderX中,配置“微信开发者工具”的安装路径:

注意:配置完成之后,在HbuilderX点击运行到小程序模拟器,会自动启动微信开发者工具

如何使用HbuilderX运行小程序项目

3.在微信开发者工具中开启服务端口:

如何使用HbuilderX运行小程序项目

三、新建页面

1.创建新的tab页面

如何使用HbuilderX运行小程序项目

2.创建非tab页面

如何使用HbuilderX运行小程序项目

四、使用 Git 管理项目

1.本地管理

1.1 在项目根目录中新建 .gitignore 忽略文件,并配置如下:


# 忽略 node_modules 目录
/node_modules
/unpackage/dist
注意:忽略 unpackage 目录,默认 unpackage 目录不会被 Git 追踪
此时,为了让 Git 能够正常追踪 unpackage 目录,按照惯例,我们可以在 unpackage 目录下创建一个叫做 .gitkeep 的文件进行占位

1.2 打开终端,切换到项目根目录中,运行如下的命令,初始化本地 Git 仓库:


git init
git add .
git commit -m "init project"

2.把项目托管到码云

  1. 注册并激活码云账号( 注册页面地址:注册 - Gitee.com )

  1. 生成并配置 SSH 公钥

  1. 创建空白的码云仓库

  1. 把本地项目上传到码云对应的空白仓库中文章来源地址https://www.toymoban.com/news/detail-429224.html

到了这里,关于如何使用HbuilderX运行小程序项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • HbuilderX运行uniapp项目到微信小程序时,自动打开了微信小程序开发工具但是进不去项目

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

    2024年02月11日
    浏览(66)
  • 【Golang入门教程】如何使用Goland创建并运行项目

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站: 人工智能 前言 在Go语言的开发过程中,选择一个合适的集成开发环境(IDE)是提高效率和编写可维护代码的关键一步。 JetBrains的Goland作为一款专门为Go语言开发的

    2024年01月25日
    浏览(68)
  • 如何使用vue ui创建一个项目?

    首先打开cmd 输入vue ui 等待浏览器打开一个窗口,按照下图操作  在\\\"功能页面\\\"中,各个插件代表以下意思: Babel:Babel是一个JavaScript编译器,用于将ES6+代码转换为向后兼容的JavaScript版本,以确保代码在旧版本的浏览器上正常运行。 TypeScript:TypeScript是一种由微软开发的静态

    2024年02月13日
    浏览(52)
  • 如何使用pycharm创建一个python项目

    1.打开pycharm,点击new project 2.修改项目存放位置,点击第二个圆圈,点击add interpreter添加解释器 3.选择一个系统内置的解释器 4.点击创建按钮即可 5.打开该项目 6.在工程的地方点击鼠标右键–》选择new–》选择python file 7.给你的python文件取一个文件名,按回车键,创建成功

    2024年02月12日
    浏览(39)
  • 学习如何在VS Code中创建一个Golang/Go项目,并运行一个简单的Golang程序

     学习如何在VS Code中创建一个Golang项目,并运行一个简单的Golang程序。 在VS Code 手动输入命令创建一个Golang项目 在VS Code 不输入命令创建一个Golang项目 1. 在VS Code 手动输入命令创建一个Golang项目 步骤1:在VS Code中创建一个新文件夹,用于存放Golang项目文件。 步骤2:打开VS

    2024年02月14日
    浏览(61)
  • 如何使用Visual Studio创建第一个新项目

    第一步,打开Visual Studio进行创建新项目 这里可以选择空项目 在这里设置项目名称及位置(建议新建一个文件夹存放自己的代码) 在源文件里新建 新建源文件进行编写代码 这里可以选择文件类型设置名称 编写程序后,进行运行 如果没有错误的话,运行成功 到这里的话,你

    2024年02月12日
    浏览(73)
  • 如何使用Vue的ui界面创建一个新项目

    第一步: win+r打开命令提示符,然后输入cmd后回车。 第二步: 在命令行输入命令vue ui(中间有空格)后回车,弹出ui界面。 第三步: 点击创建,双击地址栏确定我们要保存框架的地址,回车确定该地址,然后点击下面的   第四步: 完成第三步进入以下界面: 依次输入项目名

    2024年02月05日
    浏览(68)
  • 如何使用社区版IDEA创建一个Spring Boot项目

    这篇博客,我们要教大家如何使用社区版IDEA来创建一个Spring Boot的项目。 首先我们要下载一个插件——Spring Boot Helper,只有安装了这个插件我们才能创建Spring Boot项目,如下图所示:  【注意】这个时候和平时下载插件不同,不要直接点“下载”按钮, 因为这个插件是需要

    2024年02月12日
    浏览(63)
  • 如何自己创建一个工具项目并上传到npm上使用

    选择框架:   选择语言: 在项目中使用命令安装项目依赖:   运行项目:  运行成功界面: 注意: version:当前发布的版本号,项目每次改动后需要修改版本后再发布,  默认要0.0.1开始才能上传,相同版本是传不上去的,一定要记得每次更改了代码都改下版本号。 name: 包

    2024年02月12日
    浏览(42)
  • 【JavaEE】Tomcat的安装和使用、创建Mevan项目使用Servlet写一个程序

    目录 前言 一、Tomcat的下载和安装 二、写一个简单的Servlet项目 1、创建一个Maven项目 2、引入依赖  3、创建目录   4、编写Servlet代码。 5、打包程序 6、将程序部署到Tomcat上 7、验证程序运行结果  三、在IDEA上安装Smart Tomcat插件 四、Servlet中的一些常见错误 我我们制作一个网站

    2024年02月17日
    浏览(48)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包