精华内容
下载资源
问答
  • 微信开发者工具搜索栏
    千次阅读
    2021-01-28 17:13:02

     

     

    一、微信开发者工具下载

    首先进入微信公众号平台网页:https://mp.weixin.qq.com/ ,

    然后申请一个微信小程序账号,

    其次下载微信开发者工具,

    最后新建一个小程序的项目。如图所示:

    二、微信开发者工具结构配置介绍

    2.1、文件结构

    一个小程序包含一个描述整体程序的app和多个描述各个页面的pages。
     一个小程序主体由三个文件组成,必须放在项目的根目录下:
     app.js:小程序逻辑文件

    app.json: 小程序公共设置(主体配置文件)

    app.wxss:小程序公共样式表(全局样式) (可以删除

    一个小小程序page页面由四个文件组成,分别是:

    js:页面逻辑

    wxml:页面结构

    wxss:页面样式(可以删除

    json:页面配置(可以删除

    utils:工具目录(可以删除),实现了模块化工具类,工具函数。

    sitemap.json:小程序搜索所用。

    project.config.json:编辑器配置。

    2.2、小程序配置app.json

    app.json  文件用来对小程序进行全局配置,决定小程序的页面数量、窗口表现、设置网络超时时间、设置底部或顶部菜单等。

    app.json 中不能添加任何注释,key 和 value 字符串必须用双引号引起来,数组或对象最后一位不能有逗号。 

    2.2.1、app.json 配置项列表

    2.2.2、pages

    "pages":[

        "pages/index/index",  // 数组第一项,小程序的初始页面。

        "pages/logs/logs"

      ],

    pages指定由哪些页面组成,每一项代表对应页面【路径+目录名+文件名】。

    pages数组的第一项代表小程序的初始页面(首页/展示页)。

    小程序中新增/减少页面,都需要对pages数组进行修改 。

    2.2.3、window

    用于设置小程序的状态栏、导航条、标题、窗口背景色。

    "window":{

    "enablePullDownRefresh": true,     //是否开启开启全局的下拉刷新 true开启,false关闭。

       "backgroundColor":" #ccc",  //窗口的背景色 

        "backgroundTextStyle":"light", //下拉loading 的样式,仅支持dark和light

        "navigationBarBackgroundColor": "#fff",  //导航栏背景色

        "navigationBarTitleText": "Weixin",  //导航栏标题文字内容

        "navigationBarTextStyle":"black"    //导航栏标题颜色,仅支持白色(white)和黑色(black)

      },

     

    2.2.4、tabBar

    设置小程序的底部或顶部菜单栏。

    注释:当设置position 为top 时,将不会显示icon图标。

    当tabBar 中的list是一个数组,只能配置最少2个、最多5个菜单

     "tabBar": {

        "color": "#999",   //tab上文字默认颜色,仅支持十六进制颜色

        "selectedColor": "",   //tab 上的文字选中时的颜色,仅支持十六进制颜色

        "backgroundColor": "",  //tab 的背景色,仅支持十六进制颜色

        "position":"bottom" , //tabBar 的位置,仅支持 bottom / top

        "borderStyle": "black", //tabbar 上边框的颜色, 仅支持 black / white

        "list": [

          {

          "pagePath": "pagePath",//页面路径

          "text": "text", //页面文字

          "iconPath": "iconPath",  //默认图标路径

          "selectedIconPath": "selectedIconPath" //选中图标路径

        },

       {

          "pagePath": "pagePath",//页面路径

          "text": "text", //页面文字

          "iconPath": "iconPath",  //默认图标路径

          "selectedIconPath": "selectedIconPath" //选中图标路径

        }

       ]

      },

     

    2.2.5、networkTimeout

    可以设置各种网络请求的超时时间,单位毫秒。

    "networkTimeout": {

        :"request": 10000 //发起HTTP请求的超时时间 10s   (一般设置5s:5000毫秒)

      },

     

     

      "debug": false, 一般设置为false 不开启   

    三、生命周期

    由框架自己触发的一系列事件函数,不需要人来参与。

    .onLoad(Object[json] query)

    页面加载时触发,一个页面只会调用一次,可以在onLoad的参数中获取打开当前页面路径中的参数。

    参数说明:

    query:object类型,打开当前页面路径中的参数 json对象

    .onShow()

    页面显示/切入前台时触发,一个页面可以触发很多次。

    .onReady()

    页面初次渲染完成时触发。一个页面只会调用一次

    .onHide()

    页面隐藏/切入后台时触发,一个页面可以触发多次。

    .onUnload()

    页面卸载时触发。

    四、视图结构wxml

    4.1、wxml的概述

    HTML是用来描述当前这个页面的结构,同样道理,在小程序中WXML就充当HTML的角色。

    小程序提倡把渲染和逻辑分离,简单来说就是不要再让JS直接操控DOM,JS中只负责数据的处理,然后在通过一种模板语法来警醒界面结构展示。

    在视图层中通过{{ }}语法把一个标量绑定到视图界面上,称为数据绑定

    <view>{{  变量 }} </view>

    当然仅仅通过数据绑定还是不够,还需要if/else 、 for 等控制能力,在小程序里边,这些控制能力都用 wx: 开头的属性来表达。

    例如:wx:if

               wx:for

    bind.wxml 中

    <!--view组件 相当于HTML中的div 容器 盒子-->

    <view>{{ name }}</view>

     

    bind.js 中

     data: {

        name:'张三'

      },

      /**

       * 生命周期函数--监听页面加载

       */

     

      onLoad: function (options) {

            //方法:逻辑层的数据刷新到视图层 this .setData({变量名:值})

             /**  var _this=this;

            setTimeout(function(){

              _this.setData({

                name:'李四'

              })

            },1500);*/

      setTimeout(() =>{

         this.setData({

          name:'李四'

        })

      },1500);

    },

    解决this指向问题:如果只有一个参数则小括号可以不写,

                                   如果只有一个返回则大括号可以不写。

    逻辑层刷新到视图层

    this.setData({ key:value })

    一定手动触发

    4.2、列表渲染 for

    语法:wx:for 循环

    wx:for-index 可以指定数组当前下标的变量名  默认名为index

    wx:for - item 可以指定数组当前元素的变量名  默认名为item

    wx:key  可以定义也可以不定义 唯一的标识符 提高性能。

    <!--<view wx:for="{{ users }}"> //item 默认值
    
       <view>ID:{{ item.id }}</view>
    
       <view>姓名:{{ item.name }}</view>
    
       <view>年龄:{{ item.age }}</view>
    
    </view>
    
    -->
    
    <!-- 指定循环元素的对象名称-->
    
    <view wx:for="{{ users }}" wx:for-item="val">
    
       <view>ID: {{ index }}--{{ val.id }}</view>
    
       <view>姓名:{{ val.name }}</view>
    
       <view>年龄:{{ val.age }}</view>
    
    </view>
    
    <!-- 指定循环元素的索引(key)名称-->
    
    <view wx:for="{{ users }}" wx:for-item="val" wx:for-index="key">
    
       <view>ID:{{ key }}--{{ val.id }}</view>
    
       <view>姓名:{{ val.name }}</view>
    
       <view>年龄:{{ val.age }}</view>
    
    </view>
    
    <!-- 指定循环key wx:key-->
    
    <view wx:for="{{ users }}" wx:for-item="val" wx:for-index="key" wx:key="users">
    
       <view>ID:{{ key }}--{{ val.id }}</view>
    
       <view>姓名:{{ val.name }}</view>
    
       <view>年龄:{{ val.age }}</view>
    
    </view>
    
    <!-- 书写属性但不解析组件 Vue中和它有相同功能的是template-->
    
    <block wx:for="{{ users }}" wx:for-item="val" wx:for-index="key" wx:key="users">
    
      <view>
    
       <view>ID:{{ key }}--{{ val.id }}</view>
    
       <view>姓名:{{ val.name }}</view>
    
       <view>年龄:{{ val.age }}</view>
    
      </view> 
    
    </block>

    4.3、条件渲染

    语法:wx:if 

    在框架中,使用wx:if="{{ condition }}" 来判断是否需要渲染该代码块,也可以用 wx:elif 和 wx:else 来添加一个else块。

    <!--if语法块中不能有其他的组件 -->
    <block wx:if="{{ age <= 10}}">
         <view>儿童</view>                                                                            
    </block>
    <block wx:elif="{{ age <= 20}}">
         <view>少年</view>                                                                            
    </block>
    <block wx:elif="{{ age <= 50}}">
         <view>青年</view>                                                                            
    </block>
    <block wx:else>
         <view>夕阳红</view>                                                                            
    </block>

    4.4、引用(包含)

    把模板定义到外部,然后多个页面间可以共同使用定义的模板WXML结构显示。

    WXML提供两种文件引用方式import 和 include。

    4.4.1、模板

    定义template

    <template name="名称">
      wxml语法b
    </template>

    调用

    <template is="模板定义时的name名称" [data="{{传给参数模板的数据参数}}"]/>

    在哪个页面定义就在哪个页面调用,不可以调用其他页面。

    在template.js中

    data: {
         item:{id:1, name:'李四', age:20}
      },

    在template.wxml中

    <!-- 定义静态模板-->
    <template name="user"> 
     <view>
       <view>ID: 1</view>
       <view>姓名:张晓明</view>
       <view>年龄:18</view>
      </view> 
    </template>
    <!-- 调用静态模板-->
    <!--<template is="user" />
    <template is="user" />
    <template is="user" />
    -->
    <!-- 定义动态模板-->
    <template name="user"> 
     <view>
       <view>ID: {{item.id}}</view>
       <view>姓名: {{item.name}}</view>
       <view>年龄: {{item.age}}</view>
      </view> 
    </template>
    <!-- 调用动态模板-->
    <!--<template is='user' data="{{item}}" />-->
    
    <!-- es6中的参数展开-->
    <template name="user"> 
     <view>
       <view>ID: {{id}}</view>
       <view>姓名: {{name}}</view>
       <view>年龄: {{age}}</view>
      </view> 
    </template>
    <!-- 调用动态模板(利用参数展开)-->
    <template is='user' data="{{...item}}" />

    4.4.2、include和import引用

    include引用:

    在user.wxml 中和在tmpl2.wxml中

    <!-- include 引用,就是直接将代码块复制到需要的地方-->
    <view>
       <view>ID: {{item.id}}</view>
       <view>姓名: {{item.name}}</view>
       <view>年龄: {{item.age}}</view>
      </view> 
    <!-- 引用 include 动态文件资源(js,wxs)用相对地址  ,静态文件资源(wxml,wxss)用绝对地址-->
    <include src="/tmpl/user.wxml" />

    import引用:

    在user_import.wxml 中

    <template name="user">
       <!-- import就是真正引用,相当于在此处定义函数 -->
    <view>
       <view>ID1: {{item.id}}</view>
       <view>姓名: {{item.name}}</view>
       <view>年龄: {{item.age}}</view>
      </view> 
    </template>
    
    <template name="user2">
       <!-- import就是真正引用,相当于在此处定义函数 -->
    <view>
       <view>ID2: {{id}}</view>
       <view>姓名: {{name}}</view>
       <view>年龄: {{age}}</view>
      </view> 
    </template>

    在tmpl2.wxml中

    <!-- 引用import -->
    <import src="/tmpl/user_import.wxml"/>
    
    <!-- 调用 -->
    <template is="user" data="{{item}}"></template>
    <template is="user2" data="{{...item}}"></template>

    import和include的区别:

    • 定义方式不一样。
    • 引用方式不一样,include相当于复制代码过来,import相当于调用函数。
    • 数据的传递不一样,include直接获取js中的数据,import必须通过template date 属性获取。

    五、小程序的样式

    5.1、概述

    WXSS用来决定WXML的组件应该怎么显示。说白了就是样式。

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

    • 新增加了尺寸单位:WXSS在底部层支持新的尺寸单位rpx 响应式尺寸单位rem
    • 小程序中全屏尺寸数值是:750rpx
    • 提供了全局的样式和局部的样式:app.wxss作为全局样式。局部页面样式page.wxss仅对当前页面生效,app.wxss < page.wxss < 行级。
    • 此外WXSS仅支持部分CSS选择器。

    5.2、选择器

    目前支持的选择器有:

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

    5.3、样式导入

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

    在样式表中引入@import路径。

    第一步 :定义外部样式

    @font-face {font-family: "iconfont";
      src: url('//at.alicdn.com/t/font_2354477_mqaigy1h4fa.eot?t=1611823437981'); /* IE9 */
      src: url('//at.alicdn.com/t/font_2354477_mqaigy1h4fa.eot?t=1611823437981#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMkAAsAAAAABvQAAALXAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBeIFtATYCJAMICwYABCAFhG0HNhsZBsiemjwhAgoiACAbM4PDTQTRfr/Z9+6rkVSjNs+i3awEQiNGUiF7JvO/Ou0XiFWi0FYCMMgOK09RSnRINN0GBFvHW5vMxIRPgPx/n+dyetdYQvMD5bbWprHoMMB4Wy/QvSwKOJACC0Abxi54gbcJVI3K4rBXWd8O7hJ7USCedTIH7oWYJLFiWSg27EyODpvBRTlb4/gEeI2+H7804Q4yhRzslYe3FSIUf8A/Ti/2F+gPCJAv5wHbR45lIBGnjb59TklumZOqnnM2CY5VGXywHzjEUf88UQS7vA6GoeyZ5J7iUcszkODoKXAx6XdJnQCFs7DuxpkDc/tPX1978+zB+UPnbnGl04bWndizO7h9/21P3w6/dTB3OsV37dn6NaGd7zo9157cu9dh/lyyV7c7JGKHe0aMydxhqtcGZe/+lfqLIi12T1RXzEOHoII9Pyu8wtS3+inmUUX00rtyTv3XD7MxkT59ruqM4MLLEcFXs44qlEuBd+EzDX6Nj6s8Q+4OyyHrX6YXh8UWdO7snXNIvB0KsAX89xmnxbz8Jz/m7+DRIb/8/+5ezgDvG3sbkHQY1xkCoHwrjvBLxyVneySutHNZAjpaAplTsy7MUFXFPxTq+jbVNLj/UigbvEWgZCRDrmyaTMxlFNSsoKhsE1VLqvbX9FBOInkAi1YAhLZLyDS9Idf2lEzMrygYsoiidjih6jyCTqyZDZ1nGcUcwyLix5FOIGbJdTLPuLIVyzYjR/PKiN+JqVWXRGqFqlyswmZMl1hjHZE1jElIosSEKsF92GgkyEKJHgtMoWXMkqtUSk0vUgjEBJ52URiHwUQIbxyiIyDMpKAz41n5fCtMZmPEoR2UumQnjLLSTY6oKagGkFU68yDKozxjNUKmwTASREIRJkgl8GBGJ0cgluZpepiAUdBOyFjkUqJ20lCdYnuD6e92QZVtzsLZ7AT1O2IbtQlabCBmGQAA') format('woff2'),
      url('//at.alicdn.com/t/font_2354477_mqaigy1h4fa.woff?t=1611823437981') format('woff'),
      url('//at.alicdn.com/t/font_2354477_mqaigy1h4fa.ttf?t=1611823437981') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
      url('//at.alicdn.com/t/font_2354477_mqaigy1h4fa.svg?t=1611823437981#iconfont') format('svg'); /* iOS 4.1- */
    }
    .iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .icon-gouwuchekong:before {
      content: "\e600";
    }
    .icon-gouwuchekong2:after {
      content: "\e600";
    }

    第二步:在需要引用样式的文件中引入 @import 绝对地址。

    @import '/style/font.wxss';
    /*页面全局样式*/
    page{
      background: #abcdef;
    }
    .font30{
        font-size: 30px;
    }
    <view class="iconfont font30 icon-gouwuchekong"></view>

     

     

     

     

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    更多相关内容
  • 微信开发者工具

    2020-12-18 21:51:00
    微信开发者工具官方版是一款为微信开发者打造的微信功能制作工具微信开发者工具电脑版是一款由微信公众号官方推出的专门给用户制作微信小程序和给公众号添加新的功能的软件,微信开发者工具官方版能让用户实现对...

          微信开发者工具官方版是一款为微信开发者打造的微信功能制作工具,微信开发者工具电脑版是一款由微信公众号官方推出的专门给用户制作微信小程序和给公众号添加新的功能的软件,微信开发者工具官方版能让用户实现对公众号的接口功能,软件还能制作游戏、小程序等。并且软件集成了公众号网页调试和小程序调试两种开发模式。

    软件介绍

    微信开发者工具官方版为了帮助开发者简单和高效地开发和调试微信小程序,我们在原有的公众号网页调试工具的基础上,推出了全新的

    微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。

    使用公众号网页调试,开发者可以调试微信网页授权和微信JS-SDK

    使用小程序调试,开发者可以完成小程序的 API 和页面的开发调试、代码查看和编辑、小程序预览和发布等功能。

    软件功能

    菜单栏

    微信web开发者工具

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

    关于:关于开发者工具

    检查更新:检查版本更新

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

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

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

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

    退出:退出开发者工具

    项目

    新建项目:快速新建项目

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

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

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

    文件

    新建文件

    保存

    保存所有

    关闭文件

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

    工具

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

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

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

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

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

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

    设置:

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

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

    代理设置:选择直连网络、系统代理和手动设置代理

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

    工具栏

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

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

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

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

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

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

    工具栏管理

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

    模拟器

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

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

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

    独立窗口

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

    使用方法

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

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

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

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

    更新日志

    2020.06.19 更新说明

    A 新增 终端面板

    A 新增 查看并管理开发者工具相关进程

    A 新增 云开发静态资源托管 详情

    A 新增 小程序设置页面中增加订阅消息开关

    A 新增 小程序强制更新调试支持 详情

    A 新增 小程序/小游戏 收藏事件调试 详情

    A 新增 通用设置-项目关闭时,控制项目关闭时是否直接打开项目列表窗口

    A 新增 通用设置-快速打开文件,控制模拟器区域底部状态栏点击页面路径时打开的文件类型

    A 新增 搜索回调调试插件

    A 新增 小游戏脚本录制插件

    A 新增 模拟器-模拟操作-事件模拟-内存警告

    A 新增 支持音视频合成调试 详情

    A 新增 代码上传后可以下载对应的 sourcemap 文件

    F 修复 编辑器 WXML 文件格式化快捷键失效的问题

    F 修复 调试器位置顺序无法拖动排序的问题

    F 修复 打开快捷键设置后,编辑器 ctrl/cmd + f 快捷键无法触发文件内搜索的问题 反馈详情

    F 修复 cli 命令行当项目路径有中文的情况下无法正常启动的问题

    F 修复 新建代码片段时生成多个 sitemap.json 的问题 反馈详情

    F 修复 mac 版无法读取系统设置的 PATH 环境变量的问题

    F 修复 云函数本地调试没有日志的问题 反馈详情

    F 修复 API 代码自动补全时按字母序排序不友好的问题 反馈详情

    F 修复 版本更新通知时,如未选择更新,后续手动检查更新时一直提示正在下载的问题

    F 修复 win 版通知中心顶部操作按钮被遮挡的问题 反馈详情

    F 修复 小游戏 video 缺少 onVideoProgress 事件回调的问题

    F 修复 1.03.2005140 终止模拟器导致工具奔溃的问题 反馈详情

    F 修复 1.03.2005140 多帐号调试窗口编译会导致主项目窗口模拟器崩溃的问题 反馈详情

    F 修复 1.03.2005140 激励视频广告自动显示并无法关闭的问题 反馈详情

    F 修复 独立分包代码被执行两遍的问题 反馈详情

    F 修复 菜单栏新建或导入项目可能没反应的问题

    F 修复 模拟器在 Tabbar 设置为 top 时样式错乱的问题 反馈详情

    F 修复 Mock 的规则无法删除的问题 反馈详情

    F 修复 自定义预览前预处理命令失败后,再次预览无响应的问题 反馈详情

    F 修复 新创建的小游戏项目第一次编译可能提示 __virtualDOM__ is not defined 的问题

    F 修复 project.config.json 内容不正确时,无法新建自定义编译条件的问题

    F 修复 project.config.json 中 watchOptions.ignore 删除部分配置后,重启工具无法生效的问题

    展开全文
  • 为了方便调试,微信网页开发最好使用微信开发者工具。因为我们使用普通浏览器是无法调用微信APP接口的,而开发者工具就可以,另外开发者工具还可以方便的查看调试、错误提示信息。 注意,强烈推荐大家使用开发者...

    点此查看 微信公众号/微信网页/微信支付/企业微信/小程序开发合集及源代码下载

    1. 背景

    为了方便调试,微信网页开发最好使用微信开发者工具。因为我们使用普通浏览器是无法调用微信APP接口的,而开发者工具就可以,另外开发者工具还可以方便的查看调试、错误提示信息。

    注意,强烈推荐大家使用开发者工具调试,使用一般的浏览器因为看不到微信返回的错误提示信息,会麻烦很多。

    2. 下载安装

    官方有下载地址:点此下载
    在这里插入图片描述
    下载后,一直点下一步安装即可。

    3. 绑定公众号

    可以将开发者的微信,绑定到一个公众号上,这样在使用开发者工具时,就能针对该公众号精准调试了。

    登录公众号,点击【设置与开发】-【Web开发者工具】-【绑定开发者微信号】,然后按照提示绑定开发者的微信账号即可。
    在这里插入图片描述
    注意邀请后,开发者需要登录自己的微信同意邀请。

    4. 登录开发者工具

    此时开发者使用微信,扫码登录开发者工具。
    在这里插入图片描述

    5. 调试网页

    登录后,选择【公众号网页项目】,来调试网页。
    在这里插入图片描述
    看下图的调试界面,我们在地址栏输入想要调试的网址,然后后侧有控制台可以看到调试信息。此处能发现微信开发者工具应该也是基于chrome浏览器开发的,右侧的工具栏跟chrome一模一样。当然该开发者工具还有一些针对微信接口的功能,这是我们使用的重点!

    在这里插入图片描述

    6. 小结

    有了微信开发者工具,我们就可以方便的开发调试微信网页了。

    展开全文
  • 目前微信开发者工具中仅集成了 Git 的版本控制工具。要想使用 SVN 的话,需要安装 SVN 插件,但是在微信开发者工具中的插件中心中搜索不到该插件。所以需要借助 VSCode 的插件市场安装。

    目前微信开发者工具中仅集成了 Git 的版本控制工具。

    要想使用 SVN 的话,需要安装 SVN 插件,但是在微信开发者工具中的插件中心中搜索不到该插件。
    所以需要借助 VSCode 的插件市场安装。步骤如下:

    Step1 在 VSCode 的扩展中搜索 “SVN” 并进行安装。

    在这里插入图片描述

    Step2 复制扩展ID,随便粘贴一个地方,并记住。

    如SVN的ID:johnstoncode.svn-scm

    在这里插入图片描述

    Step3 在微信开发者工具中找到扩展,点击更多找到“从已解包的扩展文件夹安装…”

    在这里插入图片描述

    Step4 选择名为 第一步中扩展ID johnstoncode.svn-scm 的文件夹。

    一般都 用户家目录.vscode > extensions 中。

    在这里插入图片描述

    Step5 选择完后回到 微信开发者工具 中,应该能看到多出来一个 SVN 的图标。

    且源代码管理中会加载出代码的变动信息。

    在这里插入图片描述

    导入扩展后,无效果的解决方法

    如果选择目录后没有显示的话。进入微信开发者工具的设置中。
    菜单栏 > 设置 > 通用设置 > 编辑设置 > 更多编辑器设置…

    在这里插入图片描述
    在这里插入图片描述

    搜索:svn enable 取消勾选再重新勾选即可。

    在这里插入图片描述

    展开全文
  • F 修复 删除用户数据目录后开发者工具启动不了的问题 F 修复 未使用体验评分时存在内存泄漏的情况 F 修复 切换页面偶现 WXML 面板内容丢失问题 反馈详情 F 修复 调试 WXML 面板 rpx 计算错误导致样式错乱的问题 ...
  • 微信小程序微信开发者工具常用快捷键(含MAC OS和Windows)以及各种设置 最常用的快捷键: 快捷键(含MAC OS和Windows) 设置页打开方式 通用设置 外观设置 快捷键设置 编辑设置 代理设置 安全设置 拓展设置 最常用...
  • 微信开发者工具 tabbar Tabbar Tabbar组件,也可以用来作为小程序的自定义Tabbar使用 代码引入 在 page.json 中引入组件 { "usingComponents": { "mp-tabbar": "weui-miniprogram/tabbar/tabbar" } } { ...
  • 常用工具:IDEA、vs code、Navicat、Postman、HBuilderX、微信开发者工具
  • 微信小程序:5 uniapp:5 数据可视化:4 答辩:1 2.项目展示 小u商城 数据可视化 3.阶段目标 1、培养学员能力独立完成小程序原生开发 2、培养学员能够独立完成使用uni-app多端框架进行宽平台开发,同时...
  • 本小节我们将介绍微信开发者工具如何使用 同学们可以通过两种方式进入官网,一是直接浏览器输入如下网址;二是通过百度搜索“微信公众平台” 每个小程序都拥有一个身份证号,成为AppID,同学们可以首先...
  • 微信开发者工具中使用less生成wxss

    千次阅读 2021-06-02 11:02:54
    微信开发者工具中使用less生成wxss 1.打开vscode安装插件Easy-less ...3.打开微信开发者工具,top ,设置>扩展设置>扩展>自定义扩展点击开启 4.配置settings.json "less.compile": { "outExt": ".wxss
  • 微信开发者平台学习笔记

    千次阅读 2020-09-16 22:42:21
    下载微信开发者工具之后,微信扫码登录,创建小程序,在AppID中选择测试号,这样对于开发者测试比较方便。 1.获取微信头像昵称 编译界面如图,(打码部分是微信昵称和头像) 1.1 创建页面 编译方法: (1)界面有...
  • 网上找了很多种方法,如:在目录下找“当前系统代理不是安全代理”,最新版(1.03.2010240),发现搜索不到,还有方法就是改...在进程搜:spoolsv.exe,结束他,启重微信开发者工具(不用重启电脑),马上就好了 ...
  • 一、概述 微信公众平台为了帮助开发者简单和高效地开发和调试微信小程序,在...小程序项目创建成功后,会自动进入开发调试环境,从图中可以看出,微信开发者工具的主界面主要由菜单工具栏、模拟器、编辑器和调试器
  • 微信开发者小程序

    千次阅读 2021-03-18 21:50:03
    微信开发者小程序 一.环境准备 1.注册账号 建议使用全新的邮箱,没有注册过其他小程序或者公众号的。因为每个邮箱只能申请一个小程序。 注册链接 2.获取APPID 这个APPID相当于开发者唯一的身份验证。 注册成功以后,...
  • 小程序项目创建成功后,会自动进入开发调试环境,从图中可以看出,微信开发者工具的主界面主要由菜单工具栏、模拟器、编辑器和调试器组成。接下来对这些功能分别进行讲解 三 菜单 通过菜单可以访问微信...
  • 为了让设计这件事变得更轻快而便捷,荔枝君之前已经为大家介绍过多款设计工具。有免费的字体、无版权图片、以及丰富的样机素材库、免费多种多样的设计工具……恍惚间以为自己是个设计博主。这回,荔枝君又发现了一款...
  • 微信小程序制作顶部导航

    千次阅读 2021-10-25 00:37:44
    1问题描述使用微信小程序开发者工具制作顶部导航。2算法描述首先就是对微信小程序开发者工具的配置,官网搜索后进入,选择稳定版,Windows64位下载。然后点开开发者工具,选择小程序,点击...
  • 微信小程序开发工具下载及AppID查找

    千次阅读 2022-03-17 08:18:35
    微信小程序开发工具下载,及创建项目所需的AppID
  • 如果你要开发自己的微信小程序或者小游戏,微信开发者工具是必不可少的,因为有些微信封装的方法只有微信开发者工具上才能使用,还有一个重要的原因就是,我们提交我们的代码审核必须通过该工具来提交,所有要做微信...
  • 微信小程序 小程序介绍 微信小程序是一种全新的连接用户端与服务端的方式。 小程序可以在微信内被便捷地获取和传播。 小程序具有出色的用户体验。 ###为什么要学习小程序 微信小程序开发成本低、使用方便、用户量...
  • 微信小程序开发,学习,
  • 目录结构 | 微信开放文档 进入小程序注册页:小程序根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。 在这个小程序管理平台,你可以管理你的小程序的权限,查看数据报表,发布小程序等操作。 ...
  • 在入门微信小程序的时候,在其他编译软件中有使用less插件的小伙伴都会发现,在微信小程序-开发者工具中是没有下载插件这个入口的,所以我们可以借助vscode来辅助微信小程序-开发者工具安装less插件。 一、首先我们...
  • Cocos Creator集成微信云开发和调用微信开放能力
  • 深度商店收录Kedis、微信开发者工具、UltraEdit、墨刀应用,如果使用Deepin或是统信UOS操作系统,可在深度商店程序上安装它们。1、KedisKedis是一个基于AngularJS、Electron和Node.JS搭建的Redis桌面管理工具。支持...
  • 微信开发者工具的主页面主要是由菜单工具栏、模拟器、编辑器以及调试其组成的。 菜单 项目:新建或打开一个项目 文件:新建、打开或者关闭文件 编辑:编辑或格式化代码 工具:包含一些辅助工具 ...
  • 随着微信用户数量超过 10 亿,作为 web 开发者微信很多时候已经成为了我们 web 页面的载体,我们制作的页面几乎都会在微信上面展示和传播。于是,在开发过程中,如何去兼容微信,就成为了一个 web 开发者必须面对...
  • 在开发中发现uni-app原生导航也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可。设置app-plus,配置编译到App平台的特定样式。dcloud平台对app-plus做了详细说明:app-plus配置,需注意 ...
  • 微信顶部栏有两个搜索栏

    千次阅读 2021-06-06 12:22:49
    电梯直达huafen243817467登堂入室发表于 2020-4-9 10:41:21来自:HUAWEI Mate 30 5G最新回复 2020-12-18 16:19:09微信顶部有两个搜索栏,你要点一下搜索栏再出来就没有了,退出应用再进去又有了产品型号TAS-AN00出现...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,519
精华内容 3,007
热门标签
关键字:

微信开发者工具搜索栏