uni-app开发小程序：通过HBuilderX可视化界面创建uni-app项目
uni-app支持通过 可视化界面、vue-cli命令行 两种方式快速创建项目。可视化的方式比较简朴，HBuilderX内置相关环境，开箱即用，无需配置nodejs。
开始之前，开发者需先下载安装如下工具：
[*]HBuilderX：官方IDE下载地址
HBuilderX是通用的前端开发工具，但为uni-app做了特殊强化。
#创建uni-app
在点击工具栏里的文件 -> 新建 -> 项目（快捷键Ctrl+N）：
https://img-blog.csdnimg.cn/img_convert/299f3b4fccf6945bf0a145ebff9aab8e.png
选择uni-app范例，输入工程名，选择模板，点击创建，即可成功创建。
uni-app自带的模板有 默认的空项目模板、Hello uni-app 官方组件和API示例，还有一个紧张模板是 uni ui项目模板，日常开发保举利用该模板，已内置大量常用组件。
https://img-blog.csdnimg.cn/img_convert/d3ab00d7f5b44b6665858cde6bc30942.jpeg
开发者也可以利用cli方式创建项目，另见文档。
差别是：HBuilderX创建的项目根目录就是源码，可直接编辑。uni-app的编译器在HBuilderX的插件目录下，跟随HBuilderX升级而一起升级。
如果开发者习惯于node模式的项目，对HBuilderX可视化方式感到狐疑，可另行参考文档：## cli创建项目和HBuilderX可视化界面创建项目标区别
#运行uni-app
[*] 欣赏器运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到欣赏器 -> 选择欣赏器，即可体验 uni-app 的 web 版。
[*] 运行App到手机或模拟器：利用电压足够的usb端口连接手机，设置中开启USB调试，手机上答应电脑设备调试手机，进入hello-uniapp项目，点击工具栏的运行 -> 运行App到手机或模拟器，即可在该设备里面体验uni-app。
[*]如手机或模拟器无法识别，请点击常见故障排查指南。
[*]如需运行在苹果手机真机上，注意需利用自定义基座。详见
[*] 在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。
注意：如果是第一次利用，必要先配置小程序ide的相关路径，才气运行成功。如下图，需在输入框输入微信开发者工具的安装路径。
注意：微信开发者工具必要开启服务端口 在微信工具的设置->安全中。
[*] 在支付宝小程序开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 支付宝小程序开发者工具，即可在支付宝小程序开发者工具里面体验uni-app。
[*] 在百度、抖音、QQ、快应用（分同盟和华为）、快手、飞书、360、京东等小程序开发工具里运行：内容同上，不再重复。
Tips
[*]如果是第一次利用，必要配置开发工具的相关路径。点击工具栏的运行 -> 运行到小程序模拟器 -> 运行设置，配置相应小程序开发者工具的路径。
[*]微信小程序工具必要配置答应权限，不然HBuilder无法调用微信小程序开发工具的命令行
[*]支付宝/百度/抖音/360小程序工具，不支持直接指定项目启动并运行。因此开发工具启动后，请将 HBuilderX 控制台中提示的项目路径，在相应小程序开发者工具中打开。
[*]如果自动启动小程序开发工具失败，请手动启动小程序开发工具并将 HBuilderX 控制台提示的项目路径，打开项目。
运行的快捷键是Ctrl+R。
HBuilderX 还提供了快捷运行菜单，可以按数字快速选择要运行的设备：
https://img-blog.csdnimg.cn/img_convert/ee73c81fdebd92b6522fd84ffeeb2e71.png
如需调试，可参考：uni-app调试
#发布uni-app
#打包为原生App
在HBuilderX工具栏，点击发行，选择原生app-云端打包，如下图：
https://img-blog.csdnimg.cn/img_convert/3c7775b474ef75250ccdea13753dfb25.png
出现如下界面，点击打包即可。
https://img-blog.csdnimg.cn/img_convert/e0bac5c812c7f8b78890fc28df963a95.png
云端打包支持安心打包，掩护用户隐私，不会上传代码和证书，通过差量包制作方式实现安心打包。详见：https://ask.dcloud.net.cn/article/37979
云打包也支持cli模式，通过HBuilderX的cli方式（不是uni-app的cli），可以调用命令行打包，方便持续集成。详见：https://hx.dcloud.net.cn/cli/pack
虽然安心打包已经满意需求，但如仍然希望自己利用 xcode 或 Android studio 举行离线打包，则在 HBuilderX 发行菜单里找到当地打包菜单，生成离线打包资源，然后参考离线打包文档操作：https://nativesupport.dcloud.net.cn/AppDocs/README。
App打包时，注意如果涉及三方sdk，需举行申请并在manifest.json
里配置，否则相关功能无法利用。
iOS App打包必要向Apple申请证书。
#发布为Web网站
[*] 在
manifest.json
的可视化界面，举行如下配置（发行在网站根目录可不配置应用根本路径），此时发行网站路径是 www.xxx.com/h5，如：
https://hellouniapp.dcloud.net.cn
。
[*] 在HBuilderX工具栏，点击发行，选择网站-H5手机版，如下图，点击即可生成 H5 的相关资源文件，保存于 unpackage 目录。
https://img-blog.csdnimg.cn/img_convert/e2afbd026e59ff94153faf5140c25b02.png
https://img-blog.csdnimg.cn/img_convert/5584e27a1e19cb4ab4ff83ab41526569.png
注意
[*]history 模式发行必要后台配置支持，详见：history 模式的后端配置
[*]打包后，保举利用前端网页托管服务，一键上传，自带CDN加快，无需购买假造机，无需安装nginx等；
[*]若利用传统服务器摆设，发起在服务器端开启 gzip 压缩。参考网上的分享：https://juejin.im/post/5af003286fb9a07aac24611b
#发布为小程序
#发布为微信小程序：
[*] 申请微信小程序AppID，参考：微信教程。
[*] 在HBuilderX中顶部菜单依次点击 “发行” => “小程序-微信”，输入小程序名称和appid点击发行即可
如果手动发行，则点击发行按钮后，会在项目标目录 unpackage/dist/build/mp-weixin 生成微信小程序项目代码。在微信小程序开发者工具中，导入生成的微信小程序项目，测试项目代码运行正常后，点击“上传”按钮，之后按照 “提交稽核” => “发布” 小程序标准流程，渐渐操作即可，详细检察：微信官方教程。
如果在发行界面勾选了自动上传微信平台，则无需再打开微信工具手动操作，将直接上传到微信服务器提交稽核。
#发布为百度小程序：
[*] 入驻小程序并申请百度小程序AppID，参考：百度小程序教程。
[*] 在HBuilderX中顶部菜单依次点击 “发行” => “小程序-百度”，输入小程序名称和appid点击发行即可在
/unpackage/dist/build/mp-baidu
生成百度小程序项目代码。
[*] 在百度小程序开发者工具中，导入生成的百度小程序项目，测试项目代码运行正常后，点击“上传”按钮上传代码，之后在百度小程序的 管理中心 选择创建的应用点击前去发布，选择对应的版本然后提交稽核。
#发布为支付宝小程序：
[*] 入驻支付宝小程序，参考：支付宝小程序教程。
[*] 在HBuilderX中顶部菜单依次点击 “发行” => “小程序-支付宝”，即可在
/unpackage/dist/build/mp-alipay
生成支付宝小程序项目代码。
[*] 在支付宝小程序开发者工具中，导入生成的支付宝小程序项目，测试项目代码运行正常后，点击“上传”按钮上传代码，在 支付宝小程序后台，选择刚提交的版本点击提交稽核，详见：支付宝小程序文档。
#发布为抖音小程序：
[*] 入驻抖音小程序，参考：抖音小程序教程。
[*] 在HBuilderX中顶部菜单依次点击 “发行” => “小程序-抖音”，即可在
/unpackage/dist/build/mp-toutiao
生成抖音小程序项目代码。
[*] 在抖音小程序开发者工具中，导入生成的抖音小程序项目，测试项目代码运行正常后，点击“上传”按钮上传代码，在 抖音小程序后台，选择刚提交的版本点击提交稽核，详见：抖音小程序文档。
#发布为360小程序：
[*] 入驻360小程序，参考：360小程序教程。
[*] 在HBuilderX中顶部菜单依次点击 “发行” => “小程序-360”，即可在
/unpackage/dist/build/mp-360
生成360小程序项目代码。
[*] 在360欣赏器中，导入生成的360小程序项目
注意
[*]目前仅windows平台支持。360欣赏器自身不支持mac平台。
#发布为快应用(webview)：
[*] 入驻快应用(webview)，参考：快应用(webview)教程。
[*] 在HBuilderX中顶部菜单依次点击 “发行” => “快应用同盟”，即可在
/unpackage/dist/build/quickapp-webview
生成快应用(webview)项目代码。
[*] 在快应用同盟工具中，导入生成的快应用同盟项目，测试项目代码运行正常后，点击”构建“打包正式版，在快应用同盟后台上传
#发布为快应用(webview) - 华为：
[*] 入驻华为快应用，参考：华为快应用教程。
[*] 在HBuilderX中顶部菜单依次点击 “发行” => “快应用-华为”，即可在
/unpackage/dist/build/quickapp-webview
生成华为快应用项目代码。
[*] 在华为开发者工具中，导入生成的华为快应用项目，测试项目代码运行正常后，点击”构建“打包正式版，在华为快应用后台上传。
#发布为QQ、快手、飞书、京东小程序：
内容同上，不再重复。
发布的快捷键是Ctrl+u。同样可拉下快速发布菜单并按数字键选择。
links：
uni-app官网
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]