【技术干货】【微码开发】微码开发入门 - 真机调试

举报
Welink小达人 发表于 2020/04/14 15:18:38 2020/04/14
【摘要】 微码开发入门 - 真机调试

在开发完成后,我们不仅限于在浏览器上模拟调试,我们更需要在真机上进行调试,因为PC浏览器上模拟的调试环境毕竟不是真实的手机浏览器环境。
首先需要在WECODE TOOLS的设置菜单中配置账号密码,也就是welink的租户账号和密码:


debug1.png


1
2
3
4
5
{
  "wlk.user""f****g@cloudlinkwp",
  "wlk.password""******",
  "domain""open.welink.huaweicloud.com"
}


配置完以后点击 “手机调试”,等待welink执行登录和上传的动作,接着会生成一个二维码,使用welink扫码预览:


debug2.png


可以在手机上看到真实效果了:


shot1.jpg


我们注意到页面右下角有一个绿色的浮动按钮 “vConsole” 的按钮,是在index.html中配置的:

1
2
<!-- 控制台脚本,调试阶段可打开  -->
<%= htmlWebpackPlugin.options.vconsole === true ? '<script type="text/javascript" src="../../../../common/js/vconsole.js"></script>' : '' %>


vConsole相当于一个开发者工具,我们可以进行简单的调试,比如我们来尝试一下在控制台输出一些信息,在index.html最底部加入一些调试脚本:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
    // 获取设备信息
    HWH5.getDeviceInfo().then(function (data) {
      console.log(data, '---系统信息');
    }).catch(function (error) {
      console.log('获取设备信息异常', error);
    });
    // 获取app信息
    HWH5.getAppInfo().then(function (data) {
      console.log(data, '---app信息');
    }).catch(function (error) {
      console.log('获取APP信息异常', error);
    });
</script>


shot5.jpg


借助这个工具,我们可以在手机上调试一些在PC上无法出现的场景以及API,不妨尝试一下官方给出的JSAPI的各种能力吧,打开 (https://open.welink.huaweicloud.com/wecode/docs/dev/jsapi/wecode/wecode_cloud.html?v=1547690386)。



【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。