微信开发者工具链接后台_微信开发者工具 请在微信客户端打开链接 - CSDN
  • 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`中相同的选择器。

    展开全文
  • 1.说明:前端使用微信开发者工具后台用ideal,后台框架为springboot+mybatisplus 本文主要内容是实现从数据库查询数据库显示在页面上的整个流程 后台不会搭建的可以点击下面的链接看下另一篇博客: 链接 2.数据库表...

    1.说明:前端使用微信开发者工具,后台用ideal,后台框架为springboot+mybatisplus 本文主要内容是实现从数据库查询数据并运用在页面上的整个流程

    后台不会搭建的可以点击下面的链接看下另一篇博客
    链接

    2.数据库表的数据以及显示效果

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

    3.后台关键代码

    (1)action层

      /**
         * 查找商品的类别 返回数组类型的数据
         * */
        @RequestMapping("/findclassify")
        public ArrayList findclassify(){
            ArrayList classify =  goodsService.findclassify();
            System.out.println(classify);
            return classify;
        }
    

    (2)service层

     public ArrayList findclassify() {
            return goodsDao.findclassify();
        }
    

    (3)dao层

    public ArrayList findclassify();
    

    (4)mapper映射文件

        <select id="findclassify" resultType="java.lang.String">
            select  classify_name from t_classify ;
        </select>
    

    4.前台关键代码

    (1)wxml代码
    key==index?‘is_checked’:‘classify_normal’–>根据点击与未点击的部分显示不同样式,具体查看下面的博客
    链接

      <!-- 左边分类栏 -->
      <view class="left">
       <!-- wx:for遍历js中的classify1数组并显示-->
        <view wx:for="{{classify1}}"  wx:key="key" data-url="{{item.classify_id}}"  >
          <view class="{{key==index?'is_checked':'classify_normal'}}" bindtap="Checked"  data-index='{{index}}'>{{item}} </view>
        </view>
      </view>
    

    (2)wxss代码

    /*左边分类模块*/
    .left{
      width: 160rpx;
      min-height: 1000rpx;
      background-color: white;
    }
    /*点击前的样式*/
    .classify_normal{
    width: 160rpx;
    height: 110rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #E4E4E4;
    border-top: solid 1rpx white;
    }
    /*被点击选中后的样式*/
    .is_checked{
    width: 158rpx;
    height: 110rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:white;
    border-bottom: solid 2rpx #E4E4E4;
    border-left: solid 4rpx red;
    }
    
    

    (3)js代码

     /**
       * 页面的初始数据
       */
      data: {
        classify1:[
        ],
        key:0
        }
         /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        var that = this;
        /**
         * 查询商品有哪些类型
         */
        // findclassify:是action层@RequestMapping内对应的值,
        wx.request({
          url: 'http://localhost:8080/findclassify',
          success:function(e){
          /*把查出来的数据赋值给classify1数组*/
            that.setData({
              classify1: e.data
            }) 
          }
        })
    

    该方法并没有向数据库传参数 ,只是一个简单的查询;
    如果是要传参数到后台,那么在wx.request里加上一个data:{}就可以了;代码如下
    findgoods:是action层@RequestMapping内对应的值,

       wx.request({
          url: 'http://localhost:8080/findgoods',
          data:{
    			classify:classify的值
    		}
        })
    

    后台数据接收如下:
    在这里插入图片描述

    展开全文
  • 今天在调试一个微信公众号的项目,用微信开发者工具做调试。有一个页面我一点击刷新,后台就会断点两次。有什么重定向的地方我不知道么?于是去掉微信浏览器的限制,直接将地址拷贝到chrome里面,不会重复请求。然后...

    今天在调试一个微信公众号的项目,用微信开发者工具做调试。有一个页面我一点击刷新,后台就会断点两次。有什么重定向的地方我不知道么?于是去掉微信浏览器的限制,直接将地址拷贝到chrome里面,不会重复请求。然后又改用菜单里面的刷新,也没有重复请求。

    看来是微信开发者工具的bug,用菜单里面的刷新吧。

    展开全文
  • 微信开发者工具很好的集成了java的开发环境,是java初学者很好的练手软件。准备条件:注册微信小程序开发者账号,需要用到微信账号。 网址:https:...

    微信开发者工具很好的集成了java的开发环境,是java初学者很好的练手软件。

    准备条件:

    注册微信小程序开发者账号,需要用到微信账号。
    网址:https://mp.weixin.qq.com/wxopen/waregister?action=step1
    下载开发者工具。
    网址:https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
    安装完成。
    

    登录过程:

    首先在注册好的小程序后台找到AppID,如图所示。(图片来自微信文档)

    之后打开开发者工具,需要使用扫码登录账号,登录后的界面如图所示。

    给自己开发的项目命名,并且填写AppID。同时明确开发模式,对于微信提供的后端服务,可以选择使用,也可以选择不使用。

    开发界面:

    登录完成并正确填写AppID后进入开发环境,如图所示:

    可以在编辑器进行代码输入,完成代码后,点击编译或者按键盘“ctrl+s”可以进行编译;调试器会出现编译的结果(正确,警告或错误,警告可以运行,但可能会出现崩溃);模拟器会出现可视化的结果。

    除此以外可以使用开发者工具中的“云开发”(模拟器上方)进行2G的数据云存储,这样的云存储方便调用数据。云存储界面如下图所示。

    完成后的小程序:

    视频解释:

    B站视频链接:https://www.bilibili.com/video/BV1X7411D78C/


    参考文献:

    1. 微信小程序文档 链接:https://developers.weixin.qq.com/miniprogram/dev/framework/

    2. qq_40196661 《微信小程序---简易计算器》 来源:CSDN

    3. anaerobic_me 《小程序的button跳转》 来源:CSDN

    展开全文
  • 微信小程序中,如果前后端分离开发的话,是需要通过接口来进行交互的, 因此在联系不到后台的情况下,写前端的我们应当如何测试自己的页面呢?方法如下: 微信小程序前端与后台交互的时候使用的是request请求,...
  • 前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web开发者工具调试微信页面,这两天弄着玩了一下,很强大。...放入官方的微信web开发者工具下载链接以及文档说明ht
  • 微信开发者工具的用途  开发微信小程序和公众号网页开发   小程序  添加小程序项目  在小程序的管理页面可以增删项目    添加小程序可以使用小程序公众号的appid,也可以不使用(一些功能不能使用) ...
  • 微信web开发者工具 为帮助开发者更方便、更安全地开发和调试基于微信的网页,我们推出了 web 开发者工具。它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发...
  • 未绑定企业号开发者

    2020-04-20 19:57:55
    一直以来都是通过微信开发者工具调试企业微信页面的,最近因为某些原因也捣鼓起来了企业微信的页面,当时却发现直接在微信开发者工具打开企业页面的时候是无法打开的,提示“未绑定企业号开发者”。 下面是我解决...
  • web开发者工具,就是为帮助开发者更方便、更安全地开发和调试基于微信的网页,我们推出了 web 开发者工具。它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行...
  • 微信web开发者工具

    2017-04-07 10:38:57
    为帮助开发者更方便、更安全地开发和调试基于微信的网页,我们推出了 web 开发者工具。它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作。立即...
  • 为帮助开发者更方便、更安全地开发和调试基于微信的网页,微信推出了 web 开发者工具。它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作。你可以...
  • 前面已经说了调试服务器上的微信页面,放链接:http://www.cnblogs.com/Gabriel-Wei/p/5977850.html还有fiddler...今天说一下使用eclipse+fiddler+微信web开发者工具调试我们本地的微信页面。 1.我的是微信页面和后...
  • (1)下载链接微信开发者工具 (2)公众号后台下载: ( a )登录 微信公众平台(前提是得有公众号); ( b ) 登录进公众号后台后,点击 “ 首页 > 开发 > 开发者工具 > 开发者...
  • web开发者工具。 有任何疑问或建议请私信我,或者在评论区大家一起探讨。 概述 为帮助开发者更方便、更安全地开发和调试基于微信的网页,我们推出了 web 开发者工具。它是一个桌面应用,通过模拟微信客户端...
  • 第八节 在微信开发者工具和手机上测试 虽然游戏能在Cocos Creator引擎的模拟器上...首先我们访问该官方链接下载对应自己系统的微信开发者工具: 下载安装完毕后,我们打开Cocos Creator的偏好设置: 点击原...
  • 最近在做微信小程序的时候用到了小程序的tgit,在网上找了一圈也没有一个完整的教程,所以在这写个完整的教程。 1、开通tgit(设置-开发者工具-tgit) 2、设置成员账号 3、开发者工具-版本管理 4、设置连接...
  • 最近在搞微信开发者模式,对于第一次接触这东西的人来说还真是没有头绪,因为需要跟微信进行交互,难免会碰到一些问题,不像我们在本机开发那样,很快就能把逻辑代码写完。今天主要是让测试耽误了时间,由于微信...
1 2 3 4 5 ... 20
收藏数 7,808
精华内容 3,123
关键字:

微信开发者工具链接后台