HBuilderx 创建 、运行uniapp项目

uni-app官网介绍的 通过 HBuilderX 可视化界面

跟着小颖来创建一个自己的小程序

创建小程序

依次点击HBuilderx 左上方的按钮：文件->新建->项目

然后打开该界面，输入项目名称，点击 浏览 按钮，可以选择项目保存的目录，这些完成后点击 创建 按钮就好了

比如小颖的项目名叫 ：test-ying

如果大家第一次运行到微信小程序模拟器的话，需要配置下它的信息

配置微信小程序运行地址

依次点击按钮：运行->运行到小程序模拟器->运行设置（s）（这个是菜单里最后一个，就找最后一个就好啦），然后就看到了下面的界面：

小颖圈起来的地方就是要去配置微信开发者工具路径的地方。

运行小程序

一切准备就绪后，那就开始运行吧，先选中你的项目，然后依次点击按钮：运行->运行到小程序模拟器->微信开发者工具（记得压缩代码哦：要点一下：运行时是否压缩代码）

然后微信开发者工具就会自己打开啦

虽然开发者工具中能看到小程序的样子，但如果想拿手机看下效果，发现小颖圈起来的地方是禁用的哦，这时候怎么办嘞，看提示说：登录用户不是该小程序的开发者，那就配置开发者账号，将自己的微信小程序AppID配置给我们创建的小程序就好啦

配置微信小程序AppID

manifest.json 配置

打开 manifest.json 文件，找到 微信小程序配置，填写 微信小程序AppID，此 AppID 必须是本人有权限的 ID。具体配置如下图。

获取 AppID

登录 微信公众平台，点击 开发管理 -> 开发设置，即可查看。

然后将 AppID 复制粘贴到  manifest.json  中，然后我们再重新运行小程序，这时就发现它就可以预览、真机调试啦

手机预览

点击微信开发者工具中的 预览 按钮，然后用自己的手机扫描二维码，然后就可以在手机上看到小程序的样子啦

题外话

当我们运行小程序时，在微信开发者工具的右下角有个 代码质量

这个我们在 HBuilderx 中点击项目的  manifest.json  ->源码视图（最后一个）

给其加入  "lazyCodeLoading": "requiredComponents",  然后重新运行小程序，然后在代码质量那里点击  重新扫描 ，如果重新扫描没反应，就把微信开发者工具关了，停止运行，然后再重新运行，在新进入的界面里点击重新扫描就好啦。

掘金地址：HBuilderx 创建 、运行uniapp项目