微信开发者工具项目显示

2019-07-06 15:33:39 jlq_diligence 阅读数 2654

微信开发者工具集成git,实现多人协调开发,下面就拿GitHub举例,一一说明。

一、在GitHub创建远程仓库。这里忽略,网上很多。

 

二、在微信开发者工具中配置Git,并实现文件上传。

1.点击开发者工具右上角的【版本管理】,初始化本地仓库。

2,点击设置,添加远程仓库信息和网络认证

 

 3.抓取Git仓库,达到和开发者工具配置的远程仓库同步 

点确认后,就会在【远程】中显示所拉取的源代码,即:

4.接下来将本地master提交的东西进行HEAD重置一下,然后工作区就会出现文件了,首先填写这次提交的信息,填写完成推送到远程

 

大功告成,集成完毕。 

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

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

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

2016-12-18 14:46:22 testcs_dn 阅读数 6929

微信公众平台小程序开放公测。小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。小程序已经风风火火这么久了,但是开放时间还未确定,到现在也没用上小程序,不知道它究竟有多大的魔力。今天先来了解一下微信小程序的开发者工具。

下载

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=20161122

最新版本 0.11.112301

windows 64 、 windows 32 、 mac

安装

没什么可说的,大家看看就是。





安装完成启动之后可能会提示要求访问网络,允许访问。

登录



选择调用类型

创建项目


我只是想安装一下看看,还没有申请AppID,所以这里选择无AppID。

项目创建后开发工具的首页,默认就是调试页面

用过Chrome的开发者工具的小伙伴看这界面是不是感觉很亲切?感觉就是一个模子里出来的。

是不是?

是不是?

编辑界面,只是图中的一个菜单项有点特别:硬盘打开,是打开项目文件目录

项目界面:由于创建的项目没有填写AppID,所以没办法上传体验。

结束语

为什么它和Chrome的开发者工具那么像?
我用SPY++查看了一下微信小程序的开发者工具:

发现和Chrome显示网页内容的窗口标题及类完全一致; 
由此看来微信小程序的最终呈现还是基于浏览器。
我们在开发的时候使用的是转义后的标签,而实际部署后用户端使用的应该还是HTML。
为什么这么说?
小程序也好,轻应用也好,为的就是一个轻,无处不在,随便一个浏览器就可以打开。
但这也是只是一个猜测,而如果不是这样,微信内置一个支持小程序的类浏览器的内核,
虽然在小程序的封装上起到了保护源码的作用,但就设置了一个壁垒,也就是如果想使用小程序还必须安装微信才可以;
当然,现在微信的装机率已经不是问题了。
小伙伴们,你们怎么看?
===========文档信息============ 
版权声明:非商用自由转载-保持署名-注明出处 
署名(BY) :testcs_dn(微wx笑) 
文章出处:[无知人生,记录点滴](http://blog.csdn.net/testcs_dn)
2017-04-25 17:05:29 u014755255 阅读数 8615

微信开发者工作是微信官方提供的针对微信小程序的开发工具,集中了开发,调试,预览,上传等功能。下面来介绍下自己的针对小程序和微信开发者工具的使用心得。

下载地址:开发者工具下载地址

1.下载并安装以后打开,需使用微信号扫码登录开发者工具

登陆新建一个quick start项目


如果还没有注册,可以填写无AppID,它会显示部分功能受限,实际上并没有太大影响。

2.添加一个quick start项目


3.目录结构

从上图的右侧可以很清晰地看出来一个微信小程序的结构,一个微信小程序的页面包括四个文件:

a.“.js”后缀的是脚本文件,主要是写一些业务逻辑的代码,基本和JavaScript一样。(在开发过程中发现一些函数JS有而微信没有,毕竟这是微信自己的一套东西)。

b.“.json”后缀的是配置文件,例如tab的各种属性,实际中每个小页面的使用的并不多,涉及全局配置的app.json使用比较多,app.json中包括定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

c.“.wxml”后缀的是前端显示页面文件,你也可以把它理解为html页面,规则也和html5很类似,还是那句话,并不是完全一样,有些H5实现的东西wxml并不能实现。

d.“wxss”后缀的是样式表文件,类似于css。

以上是每个微信小程序页面的四种基本构成,微信开发者工具会根据这些,编译生成相应的小程序实例。


2020-01-05 12:38:53 i042416 阅读数 468

假设我用vue开发了一个web应用,需要在手机微信里访问并调试, 可以按照本文介绍的步骤,使用微信开发者工具来调试.

假设我的web应用的访问入口是如下公众号菜单的"预约"按钮:

那么为了能够在微信开发者工具里调试,需要首先进入该公众号的后台,在web开发者工具里,将我本人的微信号添加进去:

点击"绑定开发者账号":

输入待绑定的微信账号:

点击绑定,该微信号会收到一条消息,询问是否绑定:

点击同意操作完成绑定.

接下来,把要调试的web应用的url放到微信开发者工具地址栏里,回车之后,微信开发者工具就会弹出一个询问窗口,点击Allow之后,就可以在微信开发者工具提供的类似Chrome开发者工具调试器一样的界面里进行单步调试了.

这个粘贴到地址栏的url很有讲究。

https://open.weixin.qq.com/connect/oauth2/authorize?appid=yyyy&redirect_uri=https%3a%2f%2fwww.xxx.com%2fsmart&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect
其中appid=后面的值,是从微信公众号控制台里拷贝出来的appid:

redirect_uri, 即为我们开发的web应用,部署到服务器之后生成的url,需要经过url encode处理:https://www.xxx.com/smart

这个url准备好之后,将其粘贴到微信开发者工具地址栏里,回车,即可看到一个对话窗口,要求获得我们公开信息的许可:

点击Allow之后,就可以像使用Chrome开发者工具的调试器一样,在微信开发者工具里进行单步调试了:

要获取更多Jerry的原创文章,请关注公众号"汪子熙":