精华内容
下载资源
问答
  • 微信自成一个生态,微信开发者工具让用户能够自行设计自己的小程序界面、添加各种需要的功能,软件相对比较容易上手,可以与公众号对接,提升流量。功能介绍菜单栏微信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略丑,请忽略我的审美…………

    展开全文
  • 微信开发者工具及其文档

    千次阅读 2018-10-29 14:43:53
    资源中心包 ...amp;t=resource/res_list&verify=1&id=open1419319164&token=&lang=zh_CN   微信开发者工具下载地址 https://developers.weixi...
    展开全文
  • 一、下载安装微信开发者工具 1、百度搜索 “微信小程序” 2、找到微信开放文档 3、开始下载 根据自己电脑的配置自行下载就可以,这里我们选择的是windows 64版本。 点击之后会在浏览器左下角自行下载。 4、安装...

    文档网址:https://developers.weixin.qq.com/miniprogram/dev/framework/

    一、下载安装微信开发者工具

    1、百度搜索 “微信小程序”

    2、找到微信开放文档

    在这里插入图片描述

    3、开始下载

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    根据自己电脑的配置自行下载就可以,这里我们选择的是windows 64版本。
    点击之后会在浏览器左下角自行下载。

    4、安装

    直接安装即可
    在这里插入图片描述
    在这里插入图片描述

    二、项目的创建

    1、申请APPID

    打开微信开发者工具,在小程序选项中点击加号创建项目
    在这里插入图片描述

    AppID需要申请注册,点击注册进入注册页面在这里插入图片描述
    根据注册引导完成注册即可
    这里注意,注册AppID使用的邮箱不能是已经注册过微信公众号的,不然会注册失败
    在这里插入图片描述
    搜索 “微信公众平台”
    在这里插入图片描述
    使用刚注册的账号登录,在首页点击开发设置
    在这里插入图片描述
    在这里插入图片描述
    将自己的AppID码复制在输入框即可
    在这里插入图片描述
    最后点击新建,项目创建完成
    在这里插入图片描述


    以上是本篇内容,希望可以帮到你 ~
    展开全文
  • 在微信公众平台|小程序中下载微信开发者工具申请微信公众号,进入微信公众平台|小程序 首页 点击 “文档”进入微信小程序介绍的界面在微信小程序界面的菜单中 选中“开发”,点击“小程序开发”弹出:选中 “工具”...
  • 微信开发者工具调试大法

    万次阅读 2019-01-24 11:44:29
    于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样的调试器,于是摸索如下: 第一步:打断点,我们必须在我们想要它停下来的...
  • 1.打开微信官方文档 https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html 2.工具 》 下载 》稳定版更新日志 》更新日志(找到想下载的版本) 3.找到下载地址即可下载 ...
  • 微信开发者工具开发微信小程序

    千次阅读 2018-11-08 15:23:58
    微信开发者工具开发微信小程序1、下载工具2、工具使用3、增删改查a:使用云开发数据库以查询为例b:调用本地springboot接口以查询为例 1、下载工具 进入微信公众平台:微信公众平台. 由于我已经注册过,所以提供文档...
  • 微信开发者工具调试和变量查看

    千次阅读 2020-03-06 17:18:53
    于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样的调试器,于是摸索如下: 第一步:打断点,我们必须在我们想要它停下来的...
  • 哪种性能更好请看这篇文章,推荐使用uniapp,去看了官方文档决定下一个项目开始使用,先搭建环境吧,下载Hbuilder添加了个测试项目,Ctrl+R运营到微信开发者工具第一次没成功,报错 报错内容是没有这样的文件或...
  • 微信开发者账号验证

    2016-12-07 17:23:43
    微信公众号平台开发者文档 https://mp.weixin.qq.com/wiki/home/index.html(在这里可以进行微信测试号的申请) 申请时需要有一个自己的域名,如果没有的话就可以用微信ngrok, 下载地址 http://ngrok.2bdata.com/...
  • 没有公众号的可以使用微信测试号进行开发 申请测试号地址:... 微信开发文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421135319 ngrok下载地址:https://ngrok.com/...
  • 微信开发者文档太坑(接口文档应该写清楚,不然浪费大家时间) 问题原因是微信开发者工具只是简单模拟,不提供真实的上传和下载功能,请以真机为准 ,什么意思呢? 意思是如果我们开发要调试这部分的功能,那必须...
  • 开发者工具下载地址https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html公众号支付文档地址(统计下单开始)...
  • 2.打开微信开发者工具,把vant-weapp/example目录添加进去, 3.把dist目录复制到example目录下,在开发者工具打开example目录就可以预览示例了。 附:Vant Weapp官方文档的地址:https://youzan.github.io/v...
  • 在上一篇Ionic开发框架的安装及Ionic项目的创建中,...巧了微信开发者工具刚好就满足这一要求???? 1.下载 进入微信公众平台官网,找到最下面的“服务号”–>“开发文档”–>“微信网页开发”–>“web开发...
  • **好了,多余的话不过多解释,下面咋们大家一起来看看微信的SDK接入文档 如果哥们急的话请调到:https://www.jianshu.com/p/1015841aae48(直接下载Demo填写正确信息直接调起支付) 更新第二版Demo:...
  • 本项目中使用的UI为iview-Weapp,可在百度自行进入官网并根据文档下载并引入至项目,此处就不多说了。 具体实现 主要实现了在微信小程序下使用地图的marker点击弹出画圆,并根据圆的大小实现地图缩放的问题。 ...
  • 使用微信web开发者工具调试微信企业号页面(前端页面,已发布在服务器上的)前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用...放入官方的微信web开发者工具下载链接以及文档说明https://mp.weixin....
  • 微信小程序开发者文档官网地址 https://mp.weixin.qq.com/debug/wxadoc/dev/index.html   微信小程序教程资料和开发工具大全,文档、代码、例子、工具   http://download.csdn.net/detail/wyx100/9640808 ...
  • 1 打开微信公众开发者文档 点这 2 微信网页开发-》微信web开发者工具 -》立即下载体验 3 安装软件,手机和电脑 都连接公司/家 的无线网(同一网断下) 4 手机代理到电脑 (iphone) 点击wifi 点击手动 ...
  • 微信开发环境 点击下载_微信小程序开发工具_稳定版_提取码: 1gi3 微信开发文档 微信开发者社区 微信公众平台 微信小程序应用开发赛
  • 前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web...放入官方的微信web开发者工具下载链接以及文档说明https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d730
  • 下载: Win: https://pan.baidu.com/s/1bHJGEa Mac: https://pan.baidu.com/s/1slhD9gh Demo: https://pan.baidu.com/s/1bJLAv8 Crack: https://pan.baidu.com/s/1kUMldBL 文档:...
  • 微信开发者工具提供接口,访问eclipse中的Java项目地址,在对应的Java项目中从磁盘读取指定word文档 Java后台用jacob读word,保证读出来的格式与原文件一致。 2、代码 前台 .wxml <view class="table"> <...
  • 下载完成后 用微信开发者工具打开dist目录根据你点击进入的页面 下面有页面路径 找到那个文件夹 复制你想要复制的代码就可以了。weui包说明:①weui标准版: weui-master.zip ②weui小程序版:weui-wxss-master.zip ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 652
精华内容 260
关键字:

微信开发者文档下载