前言：

一、uniapp项目起步

开始之前还是先看一下官网对 Uniapp 的介绍，也让我们有个更全面的认识；

1. 工具下载

Uniapp 是配个 HBuildx 这个开发工具来使用的，所以我们要先下载 Hbuildx 开发工具；

2. 项目创建

上一步我们已经下载好了 HBuildx 这个开发工具，下一步我们需要创建项目了！

我用的是 Windows 可能和 Mac 稍有差别；左上角点击文件 --> 新建 --> 项目

下图我们能看到有 普通项目，有 uni-app 项目

就我个人而言，一般在工作中，我会选择新建普通项目，因为uni-app示例项目虽然很香，但是并不是很利于开发，需要删除很多东西，所以我个人选择的是普通项目；

3. 安装实用插件

点击工具 --> 插件安装，我们可以看到 Hbuildx 给我们提供了核心插件；

什么是核心插件呢？ 就是利于我们开发，可以提高我们开发效率的东西；

什么是插件市场呢？ 我们在开发过程中，遇到了 UI 框架 或者 uniapp 内置组件满足不了我们的业务需求的，就可以前往插件市场去看看，总会有一个比较满意的！

比如我们使用 Git 往仓库提交代码，我们就可以 下载 Git 插件，辅助我们使用Git！比如我们格式化代码 我们就可以下载 Prettier 插件，ctrl + K 快捷格式化

到这一步开发前的配置基本上已经完成了，我们要运行一下我们的项目看一下了

但是，运行小程序我们需要注意几个地方：

5. 项目运行

项目在运行之前我们需要先添加一点点代码才可以运行以后看到效果，不然只是一个白页面，并不是我们想看到的

pages 下面我们新增两个页面，在 pages.json当中配置一下基础的tabbar部分

index 代码

H5 代码

<template>
	<view class="h5">
		<logo></logo>
		<view class="h5-title">
			<!-- #ifndef H5 -->
			<text>请在H5平台打开</text>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.h5{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	&-title{
		font-size: 48rpx;
	}
}
</style>

6. 个性化小程序

什么是个性化小程序呢？就是不同的Tabbar，不同的导航栏，展示和普通小程序不一样的效果，这个中间凸起的Tabbar 我们可以使用Uview里边的Tabbar，也可以自己去定义一个tabbar，详细的自定义tabbar教程大家可以看 ，其他的个性化设置我们就不一一说了，感兴趣的可以查一下！

7. 开发时如何调用API

以上都是开发环节，下面属于配置环节，做一个上线前的准备

二、微信小程序发布

到这里我相信基础的小程序开发部分大家都已经很了解了，那么产品经理这会儿说了，小程啊，小程序马上要上线了，你告诉我需要什么资料啊？或者说 你准备一下上线吧，这会是不是很懵？别着急，接下来我们一步一步看

获取 UnionID 的条件？

2. 配置小程序主体信息

为什么要提前配置小程序主体信息呢？ 看下图

3. 配置服务器域名

4. 发布上线流程

聊到这里，不知不觉的，我们的小程序已经准备上线了，我分几步给大家展示

① 点击 Hbuildx 工具栏中的发行

这里我们就要注意一下，此时的体验版小程序已经可以正常的给测试大哥做真机测试了

④ 终于到了申请提交审核，正式发布

这一步很简单，直接提交审核，但是我们接下来需要录入部分资料来供我们的审核人员测试

点击继续提交，如果第一次提交的朋友需要验证 用户隐私保护指引设置

如果是第一次提交审核，这个页面之前还有一个 复用资质或者填写资质的页面，大家留意一下就好了，然后提交审核，等待审核通过就可以啦~~~

审核时间多久呢？

这个30分钟至一天不等吧，我第一次审核的时间大概是一个小时，后边每次30分钟左右，还是很快的！

通过审核，现在小程序已经成功上线了~~~