一、创建一个新的项目（导入已有项目忽略）

1.新建项目

2.设置项目名

3.HbuilderX运行项目

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

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

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

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

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

三、新建页面

1.创建新的tab页面

2.创建非tab页面

四、使用 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.把项目托管到码云

注册并激活码云账号（注册页面地址：https://gitee.com/signup ）

生成并配置 SSH 公钥

创建空白的码云仓库

把本地项目上传到码云对应的空白仓库中

如何使用HbuilderX运行小程序项目相关推荐

【图片消消乐】单机游戏-微信小程序项目开发入门
这是一个微信小程序项目,是类似开心消消乐的休闲小游戏,老少皆宜,游戏互动里面的图片是用的任何图片素材,根据自己的需求更换图片即可.想要做游戏不知道怎么做,建议从这个小程序入手,花时间研究学习,很快就拥 ...
用git拉取微信小程序项目到本地运行(简单实用)
一.找到git项目的页面,点击复制链接二.在本地磁盘找一个文件夹存放你项目的路径,右键选择Git Bash 然后会弹出git命令窗口,输入 git clone 右键选择Paste粘贴你复制的链接一 ...
HBuilder X运行微信小程序项目至微信开发者工具失败
在HBuilder X中运行微信小程序项目时,此步于以下过程,无法进一步打开界面解决方案:导入项目即可,但是需要注意导入项目的路径信息. 需要是当前项目unpackage==>dist==&g ...
uni-app创建小程序项目并运行到微信开发者工具上@令狐张豪
在这直接说步骤 1. 创建uni-app小程序项目 2. 打开项目中的manifest.json文件进行配置 2.1 写入微信小程序AppID 2.2 打开HBuilder X 工具-设置填写外部w ...
HBuilder X运行小程序时，打开了微信开发者工具，但微信开发者工具未运行项目但又没有错误提示
1.HBuilder X运行小程序,调用微信开发者工具后,最终结果如下所示上图结果所示,微信开发者工具已打开,但是微信开发者工具并没有运行小程序,两个工具都没有错误提示 2.出现上面这种情况的原因是 ...
小程序项目从Hbuilder转移到vscode步骤
小程序项目HbuilderX转移到vscode开发步骤步骤总览一.安装一个脚手架版本vue-cli@4,注意是@4版本的 npm install -g @vue/cli@4 二.在vue中创建一个 ...
uniapp微信小程序项目-优购商城
原网页笔记文档: https://www.escook.cn/docs-uni-shop/ 1. 起步 #1.1 uni-app 简介 uni-app 是一个使用 Vue.js 开发所有前端应用的框架 ...
用HBuilderX开发小程序的一些问题
第一步:你要有一个微信小程序,在微信开发者平台上至于怎样申请微信开发者appid和微信开发者平台上面的东西可以自己去百度下,重点讲的是在HBuilderX开发小程序第二步:在你的微信开发者工具里面 ...
uniapp微信小程序项目启动步骤
如何创建项目就不说了,可以参考该链接: 如何创建开发uniapp微信小程序项目?链接: link 这里主要记录的是,从代码仓库拉取到本地后, 本地启动运行项目,遇到的问题. 1.下载项目使用git ...

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

一、创建一个新的项目（导入已有项目忽略）

1.新建项目

2.设置项目名

3.HbuilderX运行项目

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

5.uni-app 项目目录结构

二、配置环境

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

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

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

三、新建页面

1.创建新的tab页面

2.创建非tab页面

四、使用 Git 管理项目

1.本地管理

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

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

2.把项目托管到码云

如何使用HbuilderX运行小程序项目相关推荐

最新文章

热门文章