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

上一篇文章中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文件夹下的页面文件,可以发现

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

2019-01-24 10:50:06 qq_29384639 阅读数 4651

问题:

 解决:

 

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

微信开发者工具-调试器

调试器常用的 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-08-31 21:07:11 qq_41184530 阅读数 45

微信开发者工具(一)

一、微信开发者工具基本信息

1.1 微信开发者工具的下载

直接打开下面网址进行下载:

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

1.2 下载以后登录

登录微信开发者工具.png

1.3 新建项目

1.4 微信开发者工具详情页

[外链图片转存失败(img-gmV5PArB-1567256776341)(https://i.loli.net/2019/08/30/yvtRNblSdWjp4K5.png)]

  1. 模拟器:

    • 可以调整对应的机型

    • 可以调整展示页面的大小

    • 模拟网络状态:WIFI、2G、3G、4G和Offline(断网)

    • 模拟操作

      模拟操作.png

该操作的模拟前后端,前后端的切换操作,

例如当用户从小程序中回到聊天窗口,会触发一个小程序被设置为后台的回调。

  1. 调试工具:

    • **Wxml:**帮助开发者开发,wxml转发后的界面。可以看到真实的页面结构,和结构对应的wxss属性,同时可以通过更改wxss属性,实时的看到修改的情况

    • Sources panel: 用于显示当前的脚本文件,在Sources panel的脚本是已经编译好的脚本,已经处理之后的脚本文件。在Sources panel运行的时候,运行到断点,会导致整个小程序停止运行。

    • AppData panel: 用于展示目前运行小程序时的具体数据

    • Storage panel: 可以直接对数据进行删除、新增和修改
      用于显示当前项目使用的wx.setStorage或者wx.setStorageSync后的数据储存情况

    • Network Panel: 用于观察和显示 request 和 socket 的请求情况

    • **Console panel:**两大功能:

      1. 开发者可以在此输入和调试代码
      2. 可以再次查看小程序的报错

      在控制台可以输入命令

      build:编辑小程序

      Preview: 预览

      upload:上传代码

      openVendor:打卡基础库所在目录

      openToolsLog:打开工具日志目录

      checkproxy(url):检查指定url的代理使用情况

    • Sensor panel:
      两个功能:

      1. 开发者可以在这里选择模拟地理位置
      2. 开发者可以在这里模拟移动设备表现,用于调试重力感应API

      重力测试.gif

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