精华内容
下载资源
问答
  • 小程序开发者工具console.log失效 使用console.log() 可以在调试器这里显示跑代码的结果 但是如果突然不显示了,可以采用如下方法: 找到三个小点点 选择设置选项 重启大法好!!!!! 选择最下面的 restore...

    小程序开发者工具console.log失效

    使用console.log()
    可以在调试器这里显示跑代码的结果
    但是如果突然不显示了,可以采用如下方法:

    找到三个小点点

    在这里插入图片描述

    选择设置选项

    在这里插入图片描述

    重启大法好!!!!!

    选择最下面的 restore选项
    在这里插入图片描述

    展开全文
  • 微信开发者工具介绍

    千次阅读 2020-09-22 11:53:06
    中国有句老话:“工欲善其事,必先利其器”,在实际介绍小程序开发之前,我们首先介绍一下微信开发者工具。可以毫不夸张地说,开发工具是否成熟很大程度上决定了一种技术能否迅速地被广大开发者所接受。 生成第一个...

    中国有句老话:“工欲善其事,必先利其器”,在实际介绍小程序开发之前,我们首先介绍一下微信开发者工具。可以毫不夸张地说,开发工具是否成熟很大程度上决定了一种技术能否迅速地被广大开发者所接受。

    生成第一个小程序

    在正式开始介绍开发工具之前,首先生成一个用于说明的小程序:

    7a17dc40-50dd-11ea-a847-a5aa0d0597f8

    启动开发者工具后用小程序管理者的微信扫描图中的二维码:

    819f0ba0-50dd-11ea-8dce-59d407eb83a8

    在为微信界面上按下“确认”按钮之后,进入小程序开发工具主界面:

    899d8de0-50dd-11ea-a2fb-85c45bbaa11c

    选择“小程序”分类之后,按下画面右侧“+”:

    93215090-50dd-11ea-8dce-59d407eb83a8

    选择项目目录,输入 AppID 和项目名称。AppID 可以从小程序公众平台的“设置”分类中的“开发设置”页面取得,也可以使用选择“使用测试号”或者测试用 AppID。最后按下“确定”按钮。

    展开全文
  • 微信开发者工具调试大法

    万次阅读 多人点赞 2019-01-24 11:44:29
    于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样的调试器,于是摸索如下: 第一步:打断点,我们必须在我们想要它停下来的...

    由于小程序的火爆,于是去开源中国接了个私活,开发一个小程序。于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样的调试器,于是摸索如下:

    第一步:打断点,我们必须在我们想要它停下来的地方打上调试断点,点击微信开发者工具的左侧的“调试”tab,然后选择中间窗口中的”Sources”Tab,在Sources页中点开”Top”根节点,层层打开,找到自己想要调试的js文件,一般是打那种.js后面带[sm],如index.js[sm],非index.js,当然这里之后想修改内容不能在”调试”模式下修改,而要转到”编辑”模式,之前我老容易犯这个错误,打开index.js[sm]文件后,点击左边的行上的数字,就会由灰色背景变成蓝色背景,这样断点就打好了,(如果不想要了,也可以点击就会取消)如下图所示:

     

    第二步:运行,首先点击编译上面的那个运行小图标(或者快捷键ctrl+b),然后操作到你想要的那个界面或者触发某个动作,程序自动会跑到断点处代码,如下图所示:

     

    第三步:单步调试,按调试器窗口(debugger)的向下箭头(step into nextfunction call),一步步的可以往下调试,如果想跳到下一个断点,就按调试器窗口的类似于播放的小按钮,英文叫resume script execution,快捷键为F8或者Ctrl+\,如下图所示

     

    如果想看调试中变量的运行值怎么办?有许多办法,这里以查看上个界面传来的options变量值为例

    办法1:让鼠标指针放在变量上,他会有提示框,框内就是变量值,如下图所示

     

    办法2:使用console.log(options);打印出来,在console窗口可以查看,如下图所示

     

    方法3:在调试器窗口,点开Scope标签,然后再点开相应变量,如下图所示

     

    如果我们的断点过多或者不想它们调试了,怎么让它们失效呢?

    办法就是点击调试器窗口中的图标,英文叫deactive breakpoints(或者快捷键:Ctrl+F8)

    展开全文
  • 1.微信开发者工具自行到网上下载即可 2.打开微信开发者工具,如图所示: 点击创建后,如下图所示:

    个人资源与分享网站:http://xiaocaoshare.com/

    1.微信开发者工具自行到网上下载即可

    2.打开微信开发者工具,如图所示:

    点击创建后,如下图所示:

    #### 项目结构

    ```
    └─ empty-folder/ ·································· 项目所在目录
       ├─ pages/ ······································ 页面目录
       │  ├─ index/ ··································· index页面
       │  │  ├─ index.js ······························ index页面逻辑
       │  │  ├─ index.wxml ···························· index页面结构
       │  │  └─ index.wxss ···························· index页面样式
       │  └─ logs/ ···································· logs页面
       │     ├─ logs.js ······························· logs页面逻辑
       │     ├─ logs.wxml ····························· logs页面结构
       │     └─ logs.wxss ····························· logs页面样式
       ├─ utils/ ······································ 公共脚本目录
       │  └─ util.js ·································· 工具脚本
       ├─ app.js ······································ 应用程序逻辑
       ├─ app.json ···································· 应用程序配置
       └─ app.wxss ···································· 应用程序公共样式
    ```

    #### 页面结构

    每个页面组件也分为四个文件组成:

    ##### [page-name].js

    页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理

    ##### [page-name].json

    设置当前页面工作时的window的配置,此处会覆盖app.json中的window设置,也就是说只可以设置window中设置的属性

    ##### [page-name].wxml

    > wxml指的是Wei Xin Markup Language

    用于定义页面中元素结构的,语法遵循XML语法,注意是XML语法,不是HTML语法,不是HTML语法,不是HTML语法

    ##### [page-name].wxss

    > wxml指的是Wei Xin Style Sheet

    用于定义页面样式的,语法遵循CSS语法,扩展了CSS基本用法和长度单位(主要就是rpx响应式像素)

    ### 项目配置

    > 相关链接:
    > - [官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html)
    > - [生成配置文件](https://weapptool.com/start.html)

    小程序中的配置文件分为两种:

    - 全局配置文件,根目录下的app.json
    - 页面配置文件,每个页面目录下的[page-name].json

    ##### app.json

    项目配置声明文件(指定项目的一些信息,比如导航栏样式颜色等等)

    ```javascript
    {
      // 当前程序是由哪些页面组成的(第一项默认为初始页面)
      // 所有使用到的组件或页面都必须在此体现
      // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages
      "pages": [ ... ],
      // 应用程序窗口设置
      // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window
      "window": { ... },
      // 应用导航栏设置
      // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
      "tabBar": { ... },
      // 网络超时设置
      // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout
      "networkTimeout": {},
      // 是否在控制台输出调试信息
      // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug
      "debug": true
    }
    ```

    ##### [page-name].json

    用于指定特定页面工作时,window的设置:

    ```javascript
    {
      // 导航条背景色
      "navigationBarBackgroundColor": "#35495e",
      // 导航条前景色(只能是white/black)
      "navigationBarTextStyle": "white",
      // 导航条文本
      "navigationBarTitleText": "电影 « 豆瓣",
      // 窗口背景颜色
      "backgroundColor": "#fff",
      // 窗口前景色
      "backgroundTextStyle": "dark",
      // 是否开启下拉刷新
      "enablePullDownRefresh": true
    }
    ```

    ### 逻辑层分析

    #### 应用程序逻辑`app.js`

    `app.js`作为项目主入口文件,用于创建应用程序对象

    ```javascript
    // App函数是一个全局函数,用于创建应用程序对象
    App({
      // ========== 全局数据对象(可以整个应用程序共享) ==========
      globalData: { ... },

      // ========== 应用程序全局方法 ==========
      method1 (p1, p2) { ... },
      method2 (p1, p2) { ... },

      // ========== 生命周期方法 ==========
      // 应用程序启动时触发一次
      onLaunch () { ... },

      // 当应用程序进入前台显示状态时触发
      onShow () { ... },

      // 当应用程序进入后台状态时触发
      onHide () { ... }
    })
    ```

    也就是说,当应用程序启动时会自动执行项目目录下的`app.js`文件。

    在`app.js`中通过调用全局`App([option])`方法创建一个应用程序实例。

    其中通过参数指定的一些特定的方法,会在特定的执行时机去执行,也就是说通常所说的生命周期事件方法。

    属性 | 类型 | 描述 | 触发时机
    -----|------|------|---------
    onLaunch | Function | 生命周期函数--监听小程序初始化 | 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
    onShow | Function | 生命周期函数--监听小程序显示 | 当小程序启动,或从后台进入前台显示,会触发 onShow
    onHide | Function | 生命周期函数--监听小程序隐藏 | 当小程序从前台进入后台,会触发 onHide

    也可以定义任意其他的对象成员(例如:方法和属性),这些成员可以在内部直接使用,或者外部通过获取`app`对象调用:

    属性 | 类型 | 描述
    -----|------|------
    其他 | Any | 开发者可以添加任意的函数或数据到 Object 参数中,用 this 可以访问,一般用于存放业务逻辑配置,比如:API地址

    app.js

    ```javascript
    App({
      data1: '123',
      data2: { message: 'hello world' },
      api: {
        list: 'https://github.com/zce/',
        detail: 'https://github.com/zce/',
      },
      foo () {
        return 'bar'
      }
    })
    ```

    other.js

    ```javascript
    // getApp 也是全局函数,可以在任意地方调用,用于获取全局应用程序实例对象
    var app = getApp()
    console.log(app.data1)
    console.log(app.data2)
    console.log(app.foo())
    ```


    #### 页面逻辑`[page-name].js`

    `[page-name].js`是一个页面的重要组成部分,用于创建页面对象

    ```javascript
    // 获取全局应用程序对象
    const app = getApp()

    // Page也是一个全局函数,用来创建页面对象
    Page({
      // ========== 页面数据对象(可以暴露到视图中,完成数据绑定) ==========
      data: { ... },

      // ========== 页面方法(可以用于抽象一些公共的行为,例如加载数据,也可以用于定义事件处理函数) ==========
      method1 (p1, p2) { ... },
      method2 (p1, p2) { ... },

      // ========== 生命周期方法 ==========
      // 页面加载触发
      onLoad () { ... }

      ...
    })
    ```

    在应用程序执行到当前页面时,会执行当前页面下对应的`[page-name].js`文件。
    在`[page-name].js`中通过调用全局`Page([option])`方法创建一个页面实例。

    ##### `Page([option])`方法`[option]`参数说明

    属性 | 类型 | 描述
    ---- | ---- | ----
    data | Object | 页面的初始数据
    onLoad | Function | 生命周期函数--监听页面加载
    onReady | Function | 生命周期函数--监听页面初次渲染完成
    onShow | Function | 生命周期函数--监听页面显示
    onHide | Function | 生命周期函数--监听页面隐藏
    onUnload | Function | 生命周期函数--监听页面卸载
    onPullDownRefreash | Function | 页面相关事件处理函数--监听用户下拉动作
    其他 | Any | 开发者可以添加任意的函数或数据到 object 参数中,用 this 可以访问


    ### 视图层分析

    #### `[page-name].wxml`页面结构

    `WXML(WeiXin Markup Language)`是`MINA框架`设计的一套标签语言,基于`XML`。

    结合一些基础组件、事件系统、模板数据绑定,可以构建出页面的结构。

    简单来说:wxml ≈ xml + 事件系统 + 模板引擎

    例如:

    ```javascript
    // js
    Page({
      data: {
        todos: [
          { text: 'JavaScript', completed: false },
          { text: 'JavaScript+', completed: false },
          { text: 'JavaScript++', completed: false }
        ]
      },
      completed (e) { ... }
    })
    ```

    ```xml
    <!-- wxml -->
    <view>
      <view wx:for="{{ todos }}">
        <block wx:if="{{ !item.completed }}">
          <text>{{ item.text }}</text>
          <button bindtap="completed" data-item-index="{{ index }}"> √ </button>
        </block>
      </view>
    </view>
    ```


    #### `[page-name].wxss`页面样式

    `WXSS(WeiXin Style Sheets)`是`MINA框架`设计的一套标签语言,基于`XML`。

    `WXSS`用来决定了在`WXML`中定义的组件应该怎么显示。

    为了适应广大的前端开发者,我们的`WXSS`具有`CSS`大部分特性。 同时为了更适合开发微信小程序,我们对`CSS`进行了扩充以及修改。

    与`CSS`相比我们扩展的特性有:

    - 尺寸单位
    - 样式导入(CSS也有)

    ##### 尺寸单位

    rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

    rem(root em): 规定屏幕宽度为20rem;1rem = (750/20)rpx 。

    设备 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) | rem换算rpx (750/20)
    ---- | ------------------------ | ------------------------ | ------------------------
    iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx | 1rem = 37.5rpx
    iPhone6 | 1rpx = 0.5px | 1px = 2rpx | 1rem = 37.5rpx
    iPhone6s | 1rpx = 0.552px | 1px = 1.81rpx | 1rem = 37.5rpx

    > - **建议:** 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
    > - **注意:** 在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况。

    ##### 样式导入

    使用`@import`语句可以导入外联样式表,`@import`后跟需要导入的外联样式表的相对路径,用`;`表示语句结束。

    ```css
    @import "common.wxss";
    text {
      background-color: #ff0;
    }
    ```

    ##### 选择器

    目前只支持如下选择器

    选择器 | 样例 | 样例描述
    ------ | ---- | --------
    .class | .intro | 选择所有拥有 class="intro" 的组件
    #id | #firstname | 选择拥有 id="firstname" 的组件
    element | view | 选择所有 view 组件
    element, element | view | checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
    ::after | view::after | 在 view 组件后边插入内容
    ::before | view::before | 在 view 组件前边插入内容

    ##### 全局样式与局部样式

    定义在`app.wxss`中的样式为全局样式,作用于每一个页面。在`[page-name].wxss`文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖`app.wxss`中相同的选择器。

    展开全文
  • 微信开发者工具的使用(一)

    千次阅读 2019-08-31 21:07:11
    微信开发者工具(一) 一、微信开发者工具基本信息 1.1 微信开发者工具的下载 ​ 直接打开下面网址进行下载: ​ https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 1.2 下载以后登录 1.3 ...
  • 微信开发者工具-调试器

    千次阅读 2019-07-23 19:56:48
    微信开发者工具-调试器 调试器常用的 6 大功能模块有:Console、Sources、Network、Appdata、Storage、Wxml Console Console有两大功能: 1)开发者可以在此输入和调试代码  2)小程序的错误输出,会显示...
  • 微信开发者工具如何打开云开发控制台 本文主要面向非开发人员,讲述微信开发者工具如何打开云开发控制台 本文前提 已注册小程序,已知AppID,关于appid不清楚的请联系我寻求协助 本文背景 小程序云开发推出以来...
  • 微信小程序开发:使用微信开发者工具与Web Service之间通信(已登录为例子)准备创建微信小程序项目微信开发者程序部分创建Web Services服务微信小程序访问Web Service测试 准备 首先下载好微信开发者工具以及VS2017...
  • 微信开发者工具调试和变量查看

    千次阅读 2020-03-06 17:18:53
    于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样的调试器,于是摸索如下: 第一步:打断点,我们必须在我们想要它停下来的...
  • 微信小程序跳转微信小程序,使用微信开发者工具的测试记录A小程序 跳转 B小程序编写A小程序代码参数解释编写B小程序接收参数代码微信开发者工具测试 A小程序 跳转 B小程序 编写A小程序代码 在A小程序中加入一下代码 ...
  • 微信开发者工具的用途  开发微信小程序和公众号网页开发   小程序  添加小程序项目  在小程序的管理页面可以增删项目    添加小程序可以使用小程序公众号的appid,也可以不使用(一些功能不能使用) ...
  • 在开始前,你需要准备:注册微信小程序一个简单的springBoot 项目微信开发者工具 正式 微信小程序发送消息主要通过WxMaTemplateMessage 类来推送public class WxMaTemplateMessage implements Serializable { ...
  • 直接上图 , 心累…
  • 微信开发者工具区域构成 调试器区域各个面板的功能 Wxml面板:用于帮助开发者开发 Wxml 转化后的界面。在这里可以看到真实的页面结构以及结构对应的 wxss 属性,还可以查看数据是否渲染到页面的代码上。同时可以...
  • 微信开发者工具中 实现微信小程序之相机拍照功能的开发 包括相机拍照文件相册的打开 镜头的反转等
  • 上一篇文章已经运行起了一个uni-app项目的小demo,但是运行在Chrome浏览器的H5页面,那在微信开发者工具中如何实时模拟查看该项目呢? 1.在微信开发者工具中运行 配置小程序IDE相关路径 说明:只有配置了才能在...
  • 一,微信开发者工具简介 微信开发者工具是微信官方提供的针对微信小程序的开发工具,集中了开发,调试,预览,上传等功能。微信团队发布了微信小程序开发者工具,微信小程序开发文档和微信小程序设计指南,全新的...
  • 小程序miniprogram自动化上传,不需要依赖微信开发者工具 1.创建目录结构 chatTest => 你的小程序文件 uploadfq => 文件目录,随便起名 node_modules => 来源于uploadfq 的package.json,npm i下载生成的...
  • 微信开发者工具里面怎么配置自己的自定义代码模板,方便开发,下面开始: 文件->首选项->用户代码片段-> 找到列表中javascript或者输入javascript,点击进去,如果之前有过查找该文件,那么这个选项就...
  • ctrl+p 快速打开文件 ctrl+e 快速打开最近打开文件 ctrl+b 编译 ctrl+r 刷新 Shift+Alt+F 快速格式化代码 设置 外观设置 可以设置皮肤 第三方推荐使用vscode 安装minapp插件
  • 在上一篇Ionic开发框架的安装及Ionic项目的创建中,...巧了微信开发者工具刚好就满足这一要求???? 1.下载 进入微信公众平台官网,找到最下面的“服务号”–>“开发文档”–>“微信网页开发”–>“web开发...
  • 摘要:本文通过获取微信开发者工具安装路径、调用shelljs执行vue-cli编译命令、fs和path组合来读取编译后的目录、动态修改AppId和title这四个方面入手,一步步带领看官制作一个自动打开微信开发者工具的小插件,完美...
  • 最初的console 界面可能以下这样的, 当ctrl + s 保存并跑了一段代码,但是不显示结果. 解决办法就是把旁边的设置按钮 (蓝色的小齿轮) 点击一下就可以切换界面并看到跑代码的结果了 点击一下设置按钮,显示界面改变...
  • 有时我们会在 app.js 中定义全局变量,这样其他页面可以共享信息。那在调试的时候,如何在微信开发者工具中查看这些信息?答案是在 console 面板中使用 getApp(): ...
  • 微信开发者工具+ Visual Studio 2017开发微信小程序Demo

    万次阅读 多人点赞 2018-06-19 17:35:49
    目录 Demo最终效果 开发工具: 开发步骤: 第一步:准备工作,用visual studio写后台...刚自己做了一个开发微信小程序的Demo,怕忘了,记录下来。希望以后会跳过那些大坑~~ Demo最终效果 开发工具: ...
  • 前言:在做微信公众号的项目,由于需要微信环境,只能在微信中打开,但是手机端不能看到调试页面的内容 1 安装vsoncole npm install vconsole 2 引入(index.js或者main.js) import vConsole from 'vconsole' Vue....
  • IDE界面最上面一行是工具栏,在此项目中主要用到的工具有模拟器、编辑器、调试器、云开发、编译预览。单击后即可显示/隐藏对应的模块,现在依次介绍各部分功能。 模拟器介绍 模拟器可以显示当前代码对应的预览界面...
  • Ctrl + Shift + EEvaluate selection in console Ctrl + Shift + AAdd selection to watch Ctrl + BToggle breakpoint Ctrl + F8Toggle all breakpoints Console Ctrl + LClear console Tab→Accept ...
  • 开发者工具配置:在开发者工具右侧的详情中的项目设置,将不校验合法域名打上勾index.js:Page({ //对应的index.wxml页面绑定的数据 data: { json : '' }, //index.wxml页面加载时调用的函数 onLoad: function...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,564
精华内容 5,825
关键字:

微信开发者工具console