2019-07-23 19:56:48 weixin_38131507 阅读数 139

微信开发者工具-调试器

调试器常用的 6 大功能模块有:Console、Sources、Network、Appdata、Storage、Wxml

Console

Console有两大功能:
1)开发者可以在此输入和调试代码
在这里插入图片描述

2)小程序的错误输出,会显示在此处
在这里插入图片描述

Sources

Sources 用于显示当前项目的脚本文件,同浏览器开发不同,微信小程序框架会对脚本文件进行编译的工作,所以在 Sources 中开发者看到的文件是经过处理之后的脚本文件,开发者的代码都会被包裹在 define 函数中,并且对于 Page 代码,在尾部会有 require 的主动调用。
小程序编译出错时,点击错误,可以跳转到这里,方便查错(黄色背景处为出错处)
在这里插入图片描述

Network

Network 用于观察和显示 request 和 socket 的请求情况
点击Headers可以查看请求数据,点击Preview和Response可以查看响应数据
在这里插入图片描述

Appdata

Appdata 用于显示当前项目当前时刻 appdata 具体数据,实时地反馈项目数据情况,可以在此处编辑数据,并及时地反馈到界面上。
在这里插入图片描述

Storage

Storage 用于显示当前项目的使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况。
在这里插入图片描述

Wxml

Wxml用于帮助开发者开发 Wxml 转化后的界面。在这里可以看到真实的页面结构以及结构对应的 wxss 属性,同时可以通过修改对应 wxss 属性,在模拟器中实时看到修改的情况。通过调试模块左上角的选择器,还可以快速找到页面中组件对应的 wxml 代码。
在这里插入图片描述

2019-04-17 11:54:39 qq_43793255 阅读数 167

关于微信开发者工具无法输入中文问题

解决方法:

重新启动微信开发者工具即可,亲测有用。(重启电脑效果一样 [手动狗头])

2019-07-25 15:47:42 weixin_38364280 阅读数 325

解决微信开发者工具报错:当前开发者未绑定此AppID,请到小程序后台操作重试

首先要在微信公众平台注册小程序账号,注意与公众号(订阅号)账号区别开来,小程序账号不是公众号账号,登录后小程序账号的界面是这样的:微信公众品台--小程序
然后用点击上图的添加开发者进入到如下界面:添加开发者
邀请登录微信开发者工具的微信 成为该小程序的开发者后就解决该问题了。
要注意的是:
1.区分公众号的AppID与小程序的AppID,他们登录微信开放平台的账号是不一样的,登录后的主界面也是不一样的
2.获取小程序的AppID:
小程序APPID

2019-01-19 17:08:03 man_zuo 阅读数 5822

参考教材:《微信小程序开发入门与实践》 雷磊

前言

微信提供了小程序的官方开发工具—微信开发者工具,当然,这个微信开发者工具 还可以用来调试运行在微信上的网页以及微信JS-SDK。
微信开发者工具官方下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
注意,Windows版本的仅支持window7及以上版本。
笔者所用的系统为window10 64位

下载与安装

笔者下载的版本是目前的最新版本(2019.01.17更新),点击相应的系统的版本即可下载。
在这里插入图片描述
安装的过程也很简单,双击安装程序,根据提示点击就可以。
在这里插入图片描述
这里可以自定义安装的目录,我安装在了D盘。也可以直接安装默认路径进行安装。
在这里插入图片描述
点击安装后,等待一两分钟后就安装好了。
在这里插入图片描述
运行程序,出现登陆界面,用手机微信扫一扫,然后在手机端确认。就可以登陆了
在这里插入图片描述
在这里插入图片描述
关于微信开发者工具的使用教程,可以查看微信提供的官方用户手册 https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

AppID的申请

AppID代表小程序的ID号,必须拥有微信小程序账号才能申请这个ID号。如果没有AppID,小程序就不能在真机上演示(即不能发布到线上给用户使用),只能在微信开发者工具里模拟运行。但是如果你只是想要学习小程序的开发,没有AppID也是可以的,可以通过开发者工具提供的模拟器运行你的小程序
小程序账号申请网址:https://mp.weixin.qq.com/wxopen/waregister?action=step1
根据页面提示的要求,填入相应的信息。
在这里插入图片描述
点击注册之后,微信会发一封确认邮件到你注册的邮箱,你需要进入你注册的邮箱点击确认激活

在这里插入图片描述
在这里插入图片描述
点击链接后,会跳到信息认证界面,在主体类型中选择个人,然后在页面中填好你个人的相关信息。

在这里插入图片描述
填好信息,并用微信扫描确认后,就完成了信息认证了。
在这里插入图片描述
点击前往小程序,会自动跳转到小程序的管理界面,在开发里的开发设置里就可以看到你的AppID了
在这里插入图片描述

2019-06-02 21:01:55 u014650759 阅读数 145

上一篇文章中https://blog.csdn.net/u014650759/article/details/90701866,我们已经安装好了微信开发者工具,并导入了一个Demo项目,这篇文章,将就开发者工具进行简单的介绍,方便你开发实用编译器,更好的开发小程序。

1.机型选择:小程序以IPhone7的屏幕尺寸为设计标准,让UI以IPhone7屏幕尺寸来切图。
2.预览界面:写好视图布局后点击编译,视图界面刷新显示
3.编译:代码更改后刷新编译。
4.预览界面:查看编译后的效果,仅限于登录开发工具的开发者本人可以扫码并预览,其他人无法扫码预览。
5.真机调试:扫描生成的二维码,真机进行调试。
6.资源文件:对应项目的文件目录,一般可以在这里进行断点调试。
7.数据存储:显示的是本地存储的数据,对应的相关API是wx.setStorageSync(key,data)
8.视图代码:标组件以子父层级结构呈现,方便查看调试。
9.9-1:代码体积,微信限制 2M 以内。  5-2:ES语法转换,开发中一般不校验合法域名信息 。5-3:域名信息:小程序后台要做配置服务器域名,有request 域名,socket 域名以及uploadFile和downloadFile域名。注意:域名小程序要求必须是https
10.项目信息:展示项目所包含的文件,以及进行相关操作
11.代码区域:进行项目下具体文件的代码编辑

接下来,通过上面打开的项目,可以看到小程序框架以及目录结构,下面开始对代码架构目录做简要介绍:app.js、app.json、app.wxss

  1. app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量,调用框架提供的丰富的 API。例如上面的界面展示了该代码文件中,数据存储操作,跳转登录页面,以及获取用户信息。
  2. ​app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序的窗口、背景色,配置导航条样式,配置默认标题,添加新的页面后也要在此文件中添加新页面申明。注意该文件不可添加任何注释。
  3. app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。其格式和写法,类似于css,不过是css的一个子集,也就是说有些css写法是不支持的。
  4. project.config.json是小程序的工具配置文件,可以做一些个性化配置,例如界面颜色、编译配置等等。在工具上做的任何配置都会写入到这个文件,当重新安装时,只要载入同一个项目的代码包,开发者工具就会自动配置,通常无需修改。
  5. sitemap.json是用来配置小程序及其页面是否允许被微信索引,当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索词条触发该索引时,小程序的页面将可能展示在搜索结果中,通常无需修改。

这里上面讲解了小程序的项目文件,而小程序的交互是通过页面来进行的,所以同时我们也需要知道,小程序的页面组成,查看page文件夹下的页面文件,可以发现

总结,至此,我们已经大概知道了小程序的开发工具内部区域功能布局,及其项目结构文件介绍。

没有更多推荐了,返回首页