背景：

在项目开发中，搭建项目的技术栈包括如下：uniapp+vue2+uni内置组件+uview-ui组件库

项目搭建依赖环境以及文档目录结构：

运行到浏览器：

备注：可能会有跨域问题，推荐配置浏览器的访问权限

谷歌浏览器解决跨域问题，博客链接：点击跳转

运行到手机：

HBuilder点击运行，运行到手机，运行到Android App基座

等待HBuilder运行成功，成功截图：

备注：可能会遇到HBuilder识别不到手机的情况。

我的手机是荣耀，系列是MagicOS9会有识别不到手机的情况

uniapp 荣耀手机 运行到手机 识别不到手机，解决方式链接：点击跳转

一、Hbuilder X 安装v4.76

Hbuilder大幅提升你的vue开发效率，更优秀的vue支持。

官网链接：点击跳转

二、uniapp创建项目

uniapp开发一次，多端覆盖。

uni-app支持vue3和vue2，这里勾选vue2，根据开发实际情况。

新建一个项目选择模版：

manifest.json如下：

uniapp官网链接：点击跳转

官网链接：点击跳转

新建一个uniapp项目的目录结构如下：

引入插件以及各种配置之后的目录结构如下：

三、hbuilder运行项目

npm i下载项目依赖：

看package.json知道项目有其它插件的依赖，需要npm i下载依赖。下载完成之后，会有一个node_modules文件夹。

uniapp插件市场的插件下载之后引入项目，放置在uni_modules文件夹下：

开发阶段可以运行到浏览器，便于使用浏览器的开发者工具进行调试；真机测试可以查看手机或者平板上的运行效果。

HBuilder运行项目：

运行到浏览器：

打开控制台，和普通的浏览器调试是一样的。

运行到真机：

在Android设备会自动安装真机运行基座HBuilder APP，并自动启动运行，iOS设备需要开发者手动点击手机桌面的HBuilder App图标。

写完代码后，我们可以通过真机运行来查看效果，真机运行有3个特点：

1. 真实：
   虽然PC端HBuilderX右侧的内置浏览器也可以看大致的页面，但真实的布局效果以及手机上的特殊能力调用，还是必须在真机测试。
2. 边改边看：
   在HBuilderX更改页面并保存后，可立即同步在真机上看到保存后的显示效果。比开发原生应用还方便。
3. 检查错误和log：
   手机运行HTML等文件时如果发生错误以及打印的console.log，都可以在真机运行时从手机端反馈回到HBuilderX的控制台，在控制台直接查看。
   注意只有移动App项目（uni-app、Wap2App、5+ App）才可以真机联调。

四、HBuilder打包发行

manifest.json

在HBuilder开发工具，打开manifest.json文件，在里面配置发行版本号、图标、启动图等参数。图片如下：

基础配置：

以下是对这三个配置的详细解释：

基础配置：

图标配置：

发行打包：

背景：

完成应用页面的编辑后，需要正式打包为原生的apk或ipa安装包。

HBuilderX提供的打包有云打包和本地打包两种。
HBuilderX提供的云打包对正常开发者是免费的。但过多浪费服务器资源会额外收费。用本地打包无任何限制。
云打包的特点是DCloud官方配置好了原生的打包环境，可以把HTML等文件编译为原生安装包。

1. 对于不熟悉原生开发的前端工程师，云打包大幅降低了他们的使用门槛。
2. 对于没有mac电脑的开发者，他们也可以通过云打包直接打出iOS的ipa包。

无论云打包还是本地打包，在HBuilderX的菜单“发行”菜单中有链接。

点击发行：

Android平台打包

对于Android平台，可以选择使用DCloud生成的公用证书或自己生成的证书，两者不影响安装包的发布，唯一的差别就是证书中开发者和企业信息不同。
应用在开发测试阶段可以使用公共测试证书打包体验，发布时请使用自有证书打包，

使用自有证书

以自有证书打包为例，使用公共测试证书时不用配置证书相关信息，其它配置一致：

HBuilder打包app需要依赖插件【App云打包】：

下载插件：

是我HBuilder安装路径，需要权限，【用新建一个文件夹来测试】

打开权限，读写、修改的权限：

解决权限问题之后，重新下载【App云打包】的相关插件：

打包非项目成员：

需要联系项目创建的所有者，让他邀请你成为项目成员。

比对项目所有者和参与者的appid：

成为项目成员之后，项目所有者和项目参与者的AppID就会是一样的

重新App打包：

点击链接之后跳转一个新页面：

实名认证之后才能打包APP：

IOS平台打包。。。这儿就先不写了。。。