云社区 博客 博客详情
云社区 博客 博客详情

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

Welink小达人 发表于 2020-04-14 15:18:38 04-14 15:18
Welink小达人 发表于 2020-04-14 15:18:38 2020/04/14
1
1

【摘要】 微码开发入门 - 真机调试

在开发完成后,我们不仅限于在浏览器上模拟调试,我们更需要在真机上进行调试,因为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)。



登录后可下载附件,请登录或者注册

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

评论 (1)


Welink小达人

1楼2020-04-14 15:19:17
教程来啦  微码开发入门 - 真机调试
0/1000
评论

登录后可评论,请 登录注册

评论

您还没有写博客的权限!

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

删除操作无法恢复,请谨慎操作。

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

登录超时或用户已下线,请重新登录!!!

确定
取消