精华内容
下载资源
问答
  • 作为一个开发者,官方API文档使用会非常频繁。 快捷方式:点击工具栏中的【微信开发者工具】,然后点击【开发者文档】即可。

    作为一个开发者,官方API文档使用会非常频繁。

    快捷方式:点击工具栏中的【微信开发者工具】,然后点击【开发者文档】即可。

    展开全文
  • 微信自成一个生态,微信开发者工具让用户能够自行设计自己的小程序界面、添加各种需要的功能,软件相对比较容易上手,可以与公众号对接,提升流量。功能介绍菜单栏微信web开发者工具切换帐号:快速切换登录用户关于...

    微信自成一个生态,微信开发者工具让用户能够自行设计自己的小程序界面、添加各种需要的功能,软件相对比较容易上手,可以与公众号对接,提升流量。

    功能介绍

    菜单栏

    微信web开发者工具

    切换帐号:快速切换登录用户

    关于:关于开发者工具

    检查更新:检查版本更新

    开发者论坛:前往开发者论坛

    开发者文档:前往开发者文档

    调试:调试开发者工具、调试编辑器;如果遇到疑似开发者工具或者编辑器的 bug,可以打开调试工具查看是否有出错日志,欢迎在论坛上反馈相关问题

    更换开发模式:快速切换公众号网页调试和小程序调试

    退出:退出开发者工具

    项目

    新建项目:快速新建项目

    打开最近:可以查看最近打开的项目列表,并选择是否进入对应项目

    查看所有项目:新窗口打开启动页的项目列表页

    关闭当前项目:关闭当前项目,回到启动页的项目列表页

    文件

    新建文件

    保存

    保存所有

    关闭文件

    编辑:可以查看编辑相关的操作和快捷键

    工具

    编译:编译当前小程序项目

    刷新:与编译的功能一致,由于历史原因保留对应的快捷键 ctrl(?) + R

    编译配置:可以选择普通编译或自定义编译条件

    前后台切换:模拟客户端小程序进入后台运行和返回前台的操作

    清除缓存:清除文件缓存、数据缓存、以及授权数据

    界面:控制主界面窗口模块的显示与隐藏

    设置:

    外观设置:控制编辑器的配色主题、字体、字号、行距

    编辑设置:控制文件保存的行为,编辑器的表现

    通知设置:设置是否接受某种类型的通知

    工具栏

    点击用户头像可以打开个人中心,在这里可以便捷的切换用户和查看开发者工具收到的消息。

    用户头像右侧是控制主界面模块显示/隐藏的按钮。至少需要有一个模块显示。

    工具栏中间,可以选择普通编译,也可以新建并选择自定义条件进行编译和预览。

    通过切后台按钮,可以模拟小程序进入后台的情况

    工具栏上提供了清缓存的快速入口。可以便捷的清除工具上的文件缓存、数据缓存、还有后台的授权数据,方便开发者调试。

    工具栏右侧是开发辅助功能的区域,在这里可以上传代码、版本管理、查看项目详情

    工具栏管理

    在工具栏上点击鼠标右键,可以打开工具栏管理

    模拟器可以模拟小程序在微信客户端的表现。小程序的代码通过编译后可以在模拟器上直接运行。

    开发者可以选择不同的设备,也可以添加自定义设备来调试小程序在不同尺寸机型上的适配问题。

    在模拟器底部的状态栏,可以直观地看到当前运行小程序的场景值,页面路径及页面参数

    独立窗口

    点击 模拟器/调试器 右上角的按钮可以使用独立窗口显示 模拟器/调试器

    软件特色

    1、调试:通过使用微信web开发者工具,从此开发者可以直接在 PC上进行调试了。

    2、模拟JSSDK权限校验:可以模拟 JSSDK 在微信客户端中的请求,并直观地看到鉴权结果和 log。

    3、移动调试:基于 weinre 的,并且做了一些改进,让开发者无须手工在页面中加入 weinre 调试脚本,还可以在 weinre

    的网络请求页卡中,看到完整的 http 请求 log,非局限于 ajax 请求。

    4、Chrome DevTools:集成了 Chrome DevTools,同之前在 PC 上的调试体验一致,可以快速上手。

    使用方法

    一、下载安装微信开发者工具并打开软件。

    二、打开软件后使用微信扫描登录。

    三、按照自己的需求可以在小程序、小游戏点击新建或者导入项目制作新的程序。

    四、选择公众号网页功能可以对公众号进行WEB进行功能调试。

    小编点评

    微信开发者工具拥有丰富的编译工具,用户可以方便地在开发进程和显示效果间切换,每一个开发项目都能获得独立窗口,你还能实时模拟用户的使用体验,精致打磨自己的产品。

    以上就是微信开发者工具 v1.03.2010240免费版的全部内容了,IE浏览器中文网站为您提供最新最实用的软件!

    展开全文
  • 微信小程序概述 小程序介绍 微信小程序是腾讯于2017年1月9日推出的一种不需要下载安装即可在微信平台上使用的应用。小程序微信原生功能应用在本质上都是——Web App 小程序优势 微信有海量用户,依赖性很强,微信...

    微信小程序概述

    小程序介绍

    微信小程序是腾讯于2017年1月9日推出的一种不需要下载安装即可在微信平台上使用的应用。小程序和微信原生功能应用在本质上都是——Web App

    小程序优势

    • 微信有海量用户,依赖性很强,微信开发的产品更容易触达用户
    • 推广app或公众号成本太高
    • 开发适配成本低
    • 容易小规模试错,快速迭代
    • 跨平台

    对于创业者的优势

    • App流量成本太高
    • 移动互联网格局基本已定,用户主要需求场景已被巨头把持
    • 面向所有产品对用户时间的竞争

    开发环境的准备

    注册过程简单,略过

    下载微信开发者工具

    前往官网进行下载,或者[点我](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)!!!

    下载后新建项目,进去之后的界面是这样子的:

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4j4ivAZg-1572602410230)(https://i.loli.net/2019/11/01/rHAebtnaYEQmoRu.png)]


    小程序的结构目录

    小程序框架的目标是尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。

    小程序框架提供了自己的视图层描述语言WXMLWXSS,以及JavaScript,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑

    小程序文件结构和传统Web对比

    结构 传统Web 微信小程序
    结构 HTML WXML
    样式 CSS WXSS
    逻辑 JavaScript JavaScript
    配置 JSON

    通过以上对比得出,传统Web是三层结构。而微信小程序是四层结构,多了一层配置.json

    基本的项目目录

    话不多说,先看下图:

    KF9UNJ{6.png

    这个图已经解释的非常明了了,下面对各个文件进行详细的介绍。


    配置文件的介绍

    一个小程序应用程序会包括最基本的两种配置文件。一种是全局的app.json和页面自己的page.json

    特别注意:配置文件中不能出现注释

    全局配置app.json

    app.json是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。在我们最开始创建的项目里,app.json大概是这样的:

    {
      "pages": [
        "pages/index/index",
        "pages/logs/logs"
      ],
      "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
      },
      "sitemapLocation": "sitemap.json"
    }
    

    下面是app.json的一些属性:

    pages属性

    pages属性包含了小程序的所有目录,例如在最开始的代码中:

     "pages": [
        "pages/index/index",
        "pages/logs/logs"
      ],
    

    这里面包含了两个页面,一个是index页面,一个是logs(日志)页面,如果我们想增加新的页面,只需要在这个属性里面添加一个路径就好了,文件目录也会帮助我们自动生成一个页面;例如,新增一个index2页面,在代码中添加:

    "pages/index2/index2",
    

    整个pages属性是这样的:

      "pages": [
        "pages/index/index",
        "pages/index2/index2",
        "pages/logs/logs"
      ],
    

    我们点击保存ctrl + s,就会发现目录栏中多了一个文件夹,如下图所示:

    C$~RAJ7XX(5TXT8DWUBF()X.png

    哪个页面放在pages最上面,哪个就会先显示出来
    比如,我们把logs页面放在最上面,即

     "pages": [
       "pages/logs/logs",
       "pages/index/index",
       "pages/index2/index2"
     ],
    

    点击保存后,会发现,日志页面出现了最上面,这里不再贴图,读者自己动手实践!!!

    window属性

    用于设置小程序的状态栏、导航条、标题、窗口背景色。在最开始的代码中:

     "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
      },
    

    最开始的window属性包含了backgroundTextStylenavigationBarBackgroundColornavigationBarTitleTextnavigationBarTextStyle,下表展示了window的所有属性:

    属性 类型 默认值 描述
    navigationBarBackgroundColor HexColor #000000 导航栏背景颜色
    navigationBarTextStyle string white 导航栏标题颜色,仅支持 black / white
    navigationBarTitleText string 导航栏标题文字内容
    navigationStyle string default 导航栏样式,仅支持以下值:default 默认样式、custom 自定义导航栏,只保留右上角胶囊按钮
    backgroundColor HexColor #ffffff 窗口的背景色
    backgroundTextStyle string dark 下拉 loading 的样式,仅支持 dark / light
    backgroundColorTop string #ffffff 顶部窗口的背景色,仅 iOS 支持
    backgroundColorBottom string #ffffff 底部窗口的背景色,仅 iOS 支持
    enablePullDownRefresh boolean false 是否开启全局的下拉刷新
    onReachBottomDistance number 50 页面上拉触底事件触发时距页面底部距离,单位为 px
    pageOrientation string portrait 屏幕旋转设置,支持 auto / portrait / landscape

    下面是对window属性的几个属性的调用演示:

    例如,把导航栏标题颜色改为蓝色,把标题改为你妈喊你回家吃饭啦,顺便把导航栏标题颜色改为白色,然后加一个下拉刷新功能,只需要在window里面加几个属性就可以了~~

      "window": {
        "backgroundTextStyle": "dark",
        "navigationBarBackgroundColor": "#4e91f6",
        "navigationBarTitleText": "你妈喊你回家吃饭啦",
        "enablePullDownRefresh": true,
        "navigationBarTextStyle": "white"
      },
    

    代码已经写好,来看一下效果好了,下面是一张gif图:

    tabBar属性

    如果小程序是一个多tab应用(底部或顶部有tab栏可以切换页面),可以通过tabBar配置项指定tab栏的表现,以及tab切换时显示的对应页面。下表是tab的属性:

    属性 类型 必填 默认值 描述
    color HexColor tab 上的文字默认颜色,仅支持十六进制颜色
    selectedColor HexColor tab 上的文字选中时的颜色,仅支持十六进制颜色
    backgroundColor HexColor tab 的背景色,仅支持十六进制颜色
    borderStyle string black tabbar 上边框的颜色, 仅支持 black / white
    list Array tab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab
    position string bottom tabBar 的位置,仅支持 bottom / top
    custom boolean false 自定义 tabBar

    其中list接受一个数组,只能配置最少2个、最多5个tab。tab按数组的顺序排序,每个项都是一个对象,下表是list的属性值:

    属性 类型 必填 说明
    pagePath string 页面路径,必须在 pages 中先定义
    text string tab 上按钮文字
    iconPath string 图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。当 positiontop 时,不显示 icon
    selectedIconPath string 同上

    下面通过一个样例演示一下tab的作用:

    这次我想加一个底部栏,栏目里面有首页日志两个选项,并且底部栏和导航栏的颜色一致,并且要有四个图标,其中两个作为未被选中时的的图标,另外两个作为被选中时的图标。这里给大家推荐一个网站:https://www.easyicon.net/ 这个网站上有大量icon图标哟~

    "tabBar": {
        "color": "#000",
        "selectedColor": "#000000",
        "backgroundColor": "#4e91f6",
        "borderStyle": "black",
        "list": [
          {
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "icon/index.png",
            "selectedIconPath": "icon/Selindex.png"
          },
          {
            "pagePath": "pages/logs/logs",
            "text": "日志",
            "iconPath": "icon/log.png",
            "selectedIconPath": "icon/Sellog.png"
          }
        ]
      }
    

    效果请见下方gif图:

    选的icon略丑,请忽略我的审美…………

    展开全文
  • 做小程序开发、或微信公众号开发和对应的自动化测试,首推使用微信开发者工具。小程序提供了一个简单、高效的...想要更具体了了关于框架、组件、API的详细内容,请参考对应的参考文档:小程序框架参考文档小程序组...

    e3058f5d4163037b9d86a49d0007cc5d.png

    做小程序开发、或微信公众号开发和对应的自动化测试,首推使用微信开发者工具。

    小程序提供了一个简单、高效的应用开发框架和丰富的组件及API,帮助开发者在微信中开发具有原生 APP 体验的服务。

    本章分主题的介绍了小程序的开发语言、框架、能力、调试等内容,帮助开发者快速全面的了解小程序开发的方方面面。

    想要更具体了了关于框架、组件、API的详细内容,请参考对应的参考文档:

    • 小程序框架参考文档

    • 小程序组件参考文档

    • 小程序 API 参考文档

    • 小程序服务端 API 参考文档

    先看几张图,大概了解下微信开发者工具的魅力。

    e173a34da5de923488f1d6225e1c2e51.png

    这是一个新增一个小程序项目基本的demo的样子。

    我选择使用了javascript,来进行开发,这样你会发现,其实小程序开发没有那么的复杂,本质上,这套工具提供了一整套易入门,易使用的开发解决方案。

    下面我们一起看下官方文档

    846e897d2e250c895dfcc10c368df6c4.png

    从上图,会发现,微信提供出来的开发文档分类清晰,从开发到运营、从demo到组件,从调试到优化齐全了,只需要你花点时间去学习和研究。

    不管做什么开发,必不可少的就是社区交流,微信官方提供了开发者社区,如下所示:

    f55ae45d39f61fbe8513c6c83c245184.png

    先去社区了解一圈大家在问什么,你可能会在后续的学习和开发的过程中少走很多弯路,可以更快的深入到其中成长起来

    在微信学院提供了各种课程,免费供你学习,每天学习一点,很快你就理解了其机制,在测试实践时,就不会因为出现一些新的东西觉得无从下手了

    90c9291f4d63aa6eb3c9a830c3b8bc5f.png

    不管是小程序,还是公众号,等等其他类型的应用,文档统一入口如下,点击

    6495aeb1ba124da3a3a2cbb759c8357c.png

    扫一扫加我微信,注明:入群,加入微信群

    56d61d66eb180a8edabb4c04a77f3bc3.png

    扫一扫或长按关注开源优测公众号,原创文章首发平台

    14b3c8067ae69c64302d3d82419527c3.png

    在公众号里回复一下关键字获取对应的系列文章

    物联网appium大数据测试RobotFrameworkPython
    自动驾驶jmeterseleniumjenkins接口测试

    顺手点点点右下角的d3942bffbe491b11299797f6db42d477.png

    展开全文
  • 微信开发者工具开发微信小程序

    千次阅读 2018-11-08 15:23:58
    微信开发者工具开发微信小程序1、下载工具2、工具使用3、增删改查a:使用云开发数据库以查询为例b:调用本地springboot接口以查询为例 1、下载工具 进入微信公众平台:微信公众平台. 由于我已经注册过,所以提供文档...
  • 在微信公众平台|小程序中下载微信开发者工具申请微信公众号,进入微信公众平台|小程序 首页 点击 “文档”进入微信小程序介绍的界面在微信小程序界面的菜单中 选中“开发”,点击“小程序开发”弹出:选中 “工具”...
  • 微信开发者工具代码管理本来觉得没必要写版本管理的文章。奈何微信的官方文档真的是太不友好了!!!一顿操作猛如虎,十分不容易理解.(请原谅我知识轻薄)。本文只是我这几天操作过的,一些个人理解总结,如果,有...
  • 企业微信程序开发开发者工具添加企业微信小程序插件 开发者工具添加企业微信小程序插件 按照文档设置 工具–>构建npm,添加企业微信模式失败 给微信开放社区提问后得到答复解决 设置–>通用设置–>拓展–&...
  • 本小节我们将介绍微信开发者工具如何使用 同学们可以通过两种方式进入官网,一是直接浏览器输入如下网址;二是通过百度搜索“微信公众平台” 每个小程序都拥有一个身份证号,成为AppID,同学们可以首先...
  • 本文为大家介绍一下微信小程序开发者工具版本管理的一些使用方法,结合了笔者的一些使用体验和官方使用文档,致力于方便大家理解使用该项功能。本文编写时笔者使用的开发者工具版本为Stable v1.02.1910120.使用本...
  • 微信开发者工具是微信官方提供的针对微信小程序的开发工具,集中了开发,调试,预览,上传等功能。微信团队发布了微信小程序开发者工具,微信小程序开发文档和微信小程序设计指南,全新的开发者工具,集成了开发调试...
  • 微信小程序 开发文档 https://developers.weixin.qq.com/miniprogram/dev/framework/ 注册 登录 开发软件 注册流程: 注册介绍注意事项: 注册类型:个人(无法使用微信支付) ...l
  • 微信开发者工具调试大法

    万次阅读 2019-01-24 11:44:29
    于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样的调试器,于是摸索如下: 第一步:打断点,我们必须在我们想要它停下来的...
  • 微信小程序官方提供了比较完整的开发文档,也提供了官方的开发工具。但是本人还是习惯于用vscode,同时,可以安装vscode中的插件来辅助开发。 1. vsode插件 (1) Live Sass Compile——实时将sass打包为wxss wxss的...
  • 一、开通小程序红包权限在使用小程序红包之前,请前往开通小程序红包功能。操作路径:【登录微信支付商户平台——>产品中心——>小程序红包——>开通】。首次开通时需要选择一个具体的小程序进行权限申请,...
  • 相信很多朋友开始做微信自动化测试都是根据这个[官方文档](快速入门 | 微信开放文档)进行操作的。也相信很多朋友根据这个操作一步步操作下来,基本上都是失败的。在这里,不得不吐槽一下写这个文档的兄弟,一些注意...
  • 2.打开微信开发者工具,把vant-weapp/example目录添加进去, 3.把dist目录复制到example目录下,在开发者工具打开example目录就可以预览示例了。 附:Vant Weapp官方文档的地址:https://youzan.github.io/v...
  • 一、开通小程序红包权限在使用小程序红包之前,请前往开通小程序红包功能。操作路径:【登录微信支付商户平台——>产品中心——>小程序红包——>开通】。 首次开通时需要选择一个具体的小程序进行权限申请...
  • 主要实现了在微信小程序下使用地图的marker点击弹出画圆,并根据圆的大小实现地图缩放的问题。 注意!!!:代码目前半径不可超过60KM,过大会导致进入死循环卡死,如有需要请自行更改代码。 实现的效果如下: ...
  • 文档网址:https://developers.weixin.qq.com/miniprogram/dev/framework/ 一、下载安装微信开发者工具 ...打开微信开发者工具,在小程序选项中点击加号创建项目 AppID需要申请注册,点击注册进入注册页面
  • 微信开发者工具调试和变量查看

    千次阅读 2020-03-06 17:18:53
    于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样的调试器,于是摸索如下: 第一步:打断点,我们必须在我们想要它停下来的...
  • 最近看了一篇文章觉得前端目前各类小程序框架也好几个了,哪种性能更好请看这篇文章,推荐使用uniapp,去看了官方文档决定下一个项目开始使用,先搭建环境吧,下载Hbuilder添加了个测试项目,Ctrl+R运营到微信开发者...
  • 总金额,代金券或立减优惠金额,微信退款单号,商户退款单号,退款金额, 代金券或立减优惠退款金额,退款类型,退款状态,商品名称,商户数据包,手续费,费率 当日成功支付的订单 交易时间,公众账号ID,商户号,子商户号,...
  • pycharm在minum运行小程序用例的时候,会自动生成报告,看好了报告就在output里面 如果我们要看这个报告确实不太额方便, 我给大家解释一下为什么不方便,他生成的是一套文件,需要一个容器来装,就像之前我们...
  • 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。 重点内容 结合官方文档 按照 简易教程、框架、组件、API 常用到的说起 简易教程 微信小程序的相关...
  • wx-search-have-history一款拥有历史搜索记录的微信小程序搜索框wx-search-have-history使用前提:使用此组件需要依赖小程序基础库 2.2.1 或以上、及开发者工具 1.02.1808300 或以上,同时依赖开发者工具的 npm 构建...
  • 微信小程序开发者工具简介

    万次阅读 2018-05-14 10:07:29
    微信开发者工作是微信官方提供的针对微信小程序的开发工具,集中了开发,调试,预览,上传等功能。微信开发者工作是微信官方提供的针对微信小程序的开发工具,集中了开发,调试,预览,上传等功能。微信团队发布了...
  • 微信开发环境 点击下载_微信小程序开发工具_稳定版_提取码: 1gi3 微信开发文档 微信开发者社区 微信公众平台 微信小程序应用开发赛

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,517
精华内容 606
关键字:

微信开发者文档小程序