用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

3

主题

211

帖子

1734

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1734
2017-4-22 12:59:49 天下钞票开发者认证 版主 楼主 2620697
本帖最后由 天下钞票 于 2017-5-9 12:42 编辑

官方开发者工具使用,雪大已经有过一次介绍
地址: http://www.wxapp-union.com/forum ... =158&extra=page%3D1
开发工具版本:2017.05.08 0.17.170800)新增部分功能,详见#4楼。
官方开发者工具功能还是比较全的,更新也比较多,用起来越来越方便,今天就自己的体验写点东西,给新来的同学一点帮助。
先对界面一些细节介绍一下吧。
(一)        编辑界面
11.png
1、        帮助列表,在帮助/查看更新日志,可以直达 小程序文档,很方便
2、        手机选择列表,在里面可以选择不同机型,来判断页面设计在不同手机上显示是否有问题,一般来说,如果使用微信的专用的长度单位(rpx),问题应该不大。
3、        网络选择,也是测试网络用,用的不多。
4、        点击可以隐藏目录框,对于小屏幕的电脑,可以点击隐藏目录,增大代码编辑区域
5、        在这里添加目录、文件什么的,很方便
6、        当前界面的目录及场景值(经常有人跟踪页面时找不到当前页面,打开各个页面找,下次记得看看这里哦)。
7、        这里删除缓存用。
(二)        认识调试界面:
12.png
1、        Console标签,就是在js代码里面使用console.log()时显示在这里,并且代码的各种警告和错误会出现在这里,黄色背景是警告,红色的是错误。
2、        Storage标签,这里是缓存数据
121.png
3、        AppData标签,这个是每个页面的数据,由于setData函数异步的原因,有些同学在setData后直接打印某个数据,会发现数据没有变化,会怀疑setData没有成功。到底有没有成功,在这里就可以查到了。
另外, data数据在这个界面是可以修改的,某些时候调试时,需要修改参数看页面效果,在这里修改也是可以的,并且不会影响代码,很方便。
122.png
4、        Wxml标签 在这里,可以查看当前页面的wxml代码,主要在设计界面阶段发现布局问题的时候用到,非常方便,左边选择标签,右边有css样式,在这里,也可修改样式查看效果的哦,有没有注意到?
123.png
其他几个标签,平时我很少用到,如果有人对其他几个标签有特殊见解,可以跟帖并私密我一下。
(三)        项目界面:
13.png
这里只介绍3个点吧。
1、        使用其他开发工具编写程序时,其他工具保存代码,本开发工具自动更新。
2、        调试阶段,或没有https网站时,记得勾选该选项
3、        删除项目,就是在开发工具中删除该项目而已,并未删除源文件。
(四)        其他
另外再讲几点开发工具中的小技巧
1、        代码的折叠功能,在微信小程序的几个标准文件中,把鼠标移动到函数名前面的空白、控件前面的空白等,会有“-”符号,点击可折叠该函数、控件,这个在分析结构的时候非常有用。
2、        自动补全功能也很不错,比如新建的js空白页面,直接输入page,并选择,可以直接补全整个page页面,还有各个控件的补全,也都非常不错。

以上只是个人的一点浅薄的认识,业余编程爱好者而已,如果有其他的未写明白的地方,欢迎指正。同时也欢迎跟帖发表其他技巧。
最新demo列表:


评分

参与人数 3浮云 +10 收起 理由
fxd + 1 赞一个!
amis + 8 很给力! 能下钞票就更好了
天下雪 + 1 占几楼,以便你以后增加内容

查看全部评分

开发工具版本:2017.05.08 (0.17.170800)更新内容简略说明:

1、编辑菜单内新增“编辑器设置”功能,如下图:
1设置.png
(注意是编辑区域,就是右边那一块),从上到下分别是设置编辑器背景颜色、字体、字号、行距,这里注意设置字号以后,行距需要重新设置一次,即便不更改,也要触发一次焦点,否则行距会自行变大或变小。其他默认就可以了。个人感觉编辑器背景变深色比白色舒服一点。
2、很多快捷键可以查询到了,常用的汇总如下:
保存:ctrl+S
保存所有文件:shift+ctrl+S
关闭当前文件:ctrl+W
格式化代码:shift+alt+F
全局搜索:Shift+Ctrl+F
跳转到文件:Ctrl + P
跳转到最近文件:Ctrl + E
编译:Ctrl + B

3、新增“开发者文档”“开发者社区”两个链接,很顺手,不错。
顺便,@天下雪,如果能联系官方把微信小程序联盟网址也加进来,就完美了,哈哈。
退而求其次,如果能联系个破解高手,来个第三方插件把小程序联盟网址加进来也可以啊。^_^

4、编译选项新增“设置应用进入的场景”选项。

5、项目选项卡 新增“基础库版本”选项, 可通过 wx.canIUse 获取兼容性

暂时发现这么多更新,如果有未发现的,欢迎提醒更新。
好棒啊
腻害
2017-5-16 11:21:45 alwxkxk 攻城狮
5#
学习了

腻害
学到了
棒棒的
2017-8-3 17:18:22 hzlei 攻城狮
10#
哪里有下载吗?
非常感谢, 提供了好多的demo
感谢, 提供了好多的demo,小白必备
天下钞票 发表于 2017-5-9 12:34
开发工具版本:2017.05.08 (0.17.170800)更新内容简略说明:

1、编辑菜单内新增“编辑器设置”功能,如 ...

666
学习
太好了
12下一页
发新帖
您需要登录后才可以回帖 登录 | 立即注册