移动端开发基础【2】uni-app项目调试
<p>上一期我为大家分享了uniapp项目的基本开发环境以及基本的一些工具的配置，本期我将为大家接着分享uniapp项目调试这一块的知识。有兴趣的朋友可以进来看看。</p><p align="center"><strong>调试uni-app项目</strong></p>
<p><strong>1</strong><strong>、浏览器项目</strong><strong>调试</strong></p>
<p>uni-app支持多个端同时调试，调试之前我们首先要配置一下浏览器的安装路径，默认HBuilder是检测不到的。点击【运行】->【运行到浏览器】->【配置web服务器】<img src="https://img2020.cnblogs.com/blog/1980103/202003/1980103-20200331230527409-1549994338.png"></p>
<p align="center"> </p>
<p align="left">在这里需要注意的是:你要在那种浏览器上调试，就将你要调试的浏览器的安装路径粘贴到对应的框中。然后就可以点击>>运行>>运行到浏览器>>选择你要运行的浏览器。就可以调试了。</p>
<p align="left"> <img src="https://img2020.cnblogs.com/blog/1980103/202003/1980103-20200331230540271-501129554.png"></p>
<p> </p>
<p><strong>2</strong><strong>、手机真机调试</strong></p>
<p><strong> </strong><strong>真机调试第一步需要安装真机调试插件</strong>，点击“运行”>>“运行到手机”>>“下载真机调试插件”，等待安装完成。</p>
<p>需要注意的是，对于安卓手机，需要在手机上开启开发者模式才能进行调试。打开手机【设置】>> 【关于本机】，找到【软件版本】，连续点击五次，就可以开启开发者选项。</p>
<p> 进入打开 【USB调试】，插上数据线连接手机，就会自动打开开发者选项列表，找到【设置】 >> 【高级设置】>> 【开发者选项】，如下：</p>
<p> <img src="https://img2020.cnblogs.com/blog/1980103/202003/1980103-20200331230550490-621179937.png"></p>
<p> </p>
<p>完成以上步骤就正常使用真机调试了。</p>
<p>在操作的过程中可能会遇到中途需要进行一次授权，点击确认就可以了，授权成功后你的手机上会安装一个HBuilder app，之后在开发环境开发的所有内容都会在app中显示。</p>
<p>iphone手机相比安卓手机来说简单一些，连接手机后直接运行，但是，他会报错，需要在手机里面进行设置。如下：</p>
<p>【设置】>> 【通用】>> 【设备管理】,信任一下HBuilder即可。</p>
<p><strong>3</strong><strong>、小程序调试：</strong></p>
<p>Uni-app小程序的调试使用的是微信开发者工具，如果你是第一次使用，需要在小程序的运行配置中进行配置微信开发者工具的路径。</p>
<p>点击 【运行】 >> 【运行到小程序模拟器】>> 【运行设置】</p>
<p> <img src="https://img2020.cnblogs.com/blog/1980103/202003/1980103-20200331230559989-1379689076.png"></p>
<p>以上运行配置完成之后，在HBuilder中点击【运行】 >> 【运行到小程序模拟器】>> 【运行需要调试的项目】，就可以在微信开发者工具上运行我们的项目了。</p>
<p>使用微信开发者工具的时候需要注意两个点:</p>
<p> 1）微信开发者工具必须是官方最新版。</p>
<p> 2）微信开发者工具需要授权。</p>
<p>完成以上步骤之后，就可以运行uniapp项目了，但是在编译的时候还会报一种错</p>
<p align="left"> <img src="https://img2020.cnblogs.com/blog/1980103/202003/1980103-20200331230611885-1684070473.png"></p>
<p> </p>
<p>报错原因：“我们不是开发者”，需要进行开发者设置。</p>
<p>解决方法是前往微信公众平台，登录小程序账号。</p>
<p>登陆官网地址：https://mp.weixin.qq.com/</p>
<p>登录之后进行如下操作:</p>
<p> 第一步:联系管理员，因为只有管理员才有权限分配开发者权限。</p>
<p align="left"> <img src="https://img2020.cnblogs.com/blog/1980103/202003/1980103-20200331230627205-2102055274.png"></p>
<p> </p>
<p>第二步:管理>>成员管理>>点击【添加成员】，注意这里只有管理员的界面才有“添加成员”这一选项，普通开发者是没有这一选项的。</p>
<p align="left"> <img src="https://img2020.cnblogs.com/blog/1980103/202003/1980103-20200331230634738-422567776.png"></p>
<p> </p>
<p align="left">第三步: 新增成员微信号并勾选权限。</p>
<p align="left"> <img src="https://img2020.cnblogs.com/blog/1980103/202003/1980103-20200331230641815-309723662.png"></p>
<p> </p>
<p align="left">第四步:管理员扫描二维码</p>
<p align="left"> <img src="https://img2020.cnblogs.com/blog/1980103/202003/1980103-20200331230651918-1218408068.png"></p>
<p> </p>
<p align="left">管理员完成以上步骤开发者就可以正常调试程序了。</p>
<p align="left"> 还有一种方法就是使用小程序账号登录微信公众平台，在开发>>开发设置中，复制appid。</p>
<p align="left"> <img src="https://img2020.cnblogs.com/blog/1980103/202003/1980103-20200331230658654-1947963190.png"></p>
<p> </p>
<p align="left">在HBuilderX中找到需要调试的项目，将复制的appid粘贴到下面标注的框中。</p>
<p align="left"> <img src="https://img2020.cnblogs.com/blog/1980103/202003/1980103-20200331230705351-308473921.png"></p>
<p> </p>
<p>只要确定两个地方的appid一致，开发者就可以正常调试程序了。</p>
<p>以上就是本人亲自使用，并且记录的三种项目调试的过程了。希望可以帮助到你。关注我，下期我将为大家分享项目运行和发布这两个方面的知识。</p>
</div>
<div id="MySignature" role="contentinfo">
官网：http://www.lenbor.com<br><br>
来源：https://www.cnblogs.com/lenbor/p/12609460.html
頁:
[1]