微信开发者工具 语言_微信开发者工具是用什么语言开发的 - CSDN
  • 一、微信小程序web开发工具下载地址   1.1 在微信公众平台-小程序里边去下载开发工具下载地址。 1.2 下载后安装一下就可以使用了: 二、创建项目   2.1 微信小程序web开发工具需要扫码登陆,所以必须...

    一、微信小程序web开发工具下载地址

     

    1.1 在微信公众平台-小程序里边去下载开发工具下载地址

    1.2 下载后安装一下就可以使用了:

    二、创建项目

     

    2.1 微信小程序web开发工具需要扫码登陆,所以必须先绑定开发者才可以:

     

    2.2 已经绑定的开发者可以创建项目,需要填写AppID、项目名称、本地开发目录。

     

     

    AppID需要去设置里边获取,如果不填的话官方给的提示是部分功能受限:

     

     

     

    三、开发工具界面介绍:

     

     

     

    1. 编辑:开发的时候,需要到编辑区去写代码 

    2. 调试:开发完需要调试程序的时候需要切换到这个区域,调试区有很多工具可供使用。

    3. 项目:在这里可以上传或者预览项目

    4. 编译:就相当于运行项目的意思

    5. 关闭:关闭当前工程

    6. 微信小程序web开发工具提供实时预览的功能,界面的效果会在这个区域显示

    7. 这个区域可以看到整个项目的文档目录结构

    8. 这个区域是编码区

    9. 这里是选择屏幕尺寸的地方

    10. 模拟网络环境:2G/3G/4G/WiFi

     

     

     

    四、调试区六大工具介绍:

     

    在调试区开发工具提供了6种调试模式:

     

    4.1 Console

    Console的意思是控制台,做过开发的都知道几乎每个IDE都会有控制台,可以显示错误信息和打印变量的信息等。

     

    4.2 Sources

    Sources显示了当前项目的所有脚本文件,微信小程序框架会对这些脚本文件进行编译。

    Source下边还有一个区域,做过软件开发的都知道,一般下边是控制台会显示一些log信息、断电调试等等。

     

    4.3 Network

    Network顾名思义:这个区域显示的是与网络相关的信息,我这里暂时没有进行网络请求。

     

    4.4 Storage

    官方的解释是显示当前项目的使用wx.setStorage或者wx.setStorageSync后的数据存储情况。这个后续用到再慢慢研究

     

    4.5 AppData

    AppData是显示当前项目显示的具体数据,可以在这里编译,并且会在页面实时显示。

     

    4.6 Wxml

     

    Wxml调试区:把他的名字换一下的话大家就好理解了,其实他的实质就是HTML+CSS,微信只是把HTML改成了Wxml而已。学过HTML的人一看就明白,左侧的区域是HTML语言+CSS的一些标签属性。右侧可以便捷的设置CSS的属性。

     

     

    转自:http://lib.csdn.NET/article/5/52864?knId=1796#focustext

    展开全文
  • 在使用 微信开发者工具 时,我经常会碰到忘记标签名称,这时候我都会用 代码提示 的快捷键,问题来了,微信开发者工具 的 代码提示 快捷键是 Ctrl+空格,即使按下 Ctrl+空格也没有提示,反而输入法切换了 中/英文。...

    在使用 微信开发者工具 时,我经常会碰到忘记标签名称,这时候我都会用 代码提示 的快捷键,问题来了,微信开发者工具 的 代码提示 快捷键是 Ctrl+空格,即使按下 Ctrl+空格也没有提示,反而输入法切换了 中/英文。微信开发者工具 又不能更改 代码提示 的快捷键,在这里,我提供一种可以使用 Ctrl+空格 触发代码提示(不触发切换中英文)的方法。

    1. 设置-时间和语言-添加首选的语言在这里插入图片描述

    2. 搜索“美国”-选择“英语/美国”-下一步

    在这里插入图片描述

    3. 默认即可,直接安装

    在这里插入图片描述

    4. 安装后可在 语言 区域看到新添加的语言

    在这里插入图片描述

    5. 回到 微信开发者工具 ,按下 win+空格 切换输入法到 英语(美国)

    在这里插入图片描述

    6. 按下 Ctrl+空格 触发代码提示!!

    在这里插入图片描述

    注意:切换输入法到 英语(美国) 的时候是不能输入中文,Ctrl+Shift 切换输入法也失效,需要通过 win+空格 切换输入法。

    注:微信开发者工具 1.03.2005140 版本可直接进行快捷键的更改(设置-快捷键设置)

    在这里插入图片描述

    展开全文
  • 打开微信开发者工具 创建第一个小程序 步骤: 打开微信开发者工具 使用微信扫码登录 点击小程序-创建小程序 项目名 项目路径 appid 不使用云服务器 语言: javascript...

     打开微信开发者工具 创建第一个小程序

    • 步骤:

      • 打开微信开发者工具

      • 使用微信扫码登录

      • 点击小程序-创建小程序

        • 项目名

        • 项目路径

        • appid

        • 不使用云服务器

        • 语言: javascript

     截图如下:

     

    微信开发者开发工具的组成

    • 菜单栏

    • 工具栏

      • 预览

        • 描述二维码

        • 自动预览

      • 切后台

    • 模拟器

    • 编译器

    • 调试器

     目录结构:

        

     

    1.项目结构

    • 对比:

      • web页面:

        • 技术栈:

          • html

            • 从语义化的角度来描述页面结构

          • css

            • 从审美的角度来美化页面

          • js

            • 从交互的角度来提升用户体验

      • 小程序页面

        • 技术栈:

          • wxml

            • 描述微信页面的结构

          • wxss

            • 描述微信页面的样式

          • js

            • 书写微信的逻辑代码

          • json

            • 配置页面的相关信息

    • 组成

      • pages:管理当前小程序中所有的页面

        • index

          • index.wml

          • index.js

            • 注意点:

              • 所有的代码都是写在

                Page({
                 
                })
          • index.wxss

          • index.json

            • 注意点:

              • 如果没有内容,必须添加一个空对象

      • app.json:注册小程序中的页面

    • 小技巧
      • 快速创建一个页面

        • 在 app.json 中的 pages 下添加一个路径,直接保存,可以自动生成对应的页面

      • 设置项目的默认首页

        • 在 app.json 中的 pages 将路径移到第一个元素中










    转载于:https://www.cnblogs.com/KoBe-bk/p/11423765.html

    展开全文
  • 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`中相同的选择器。

    展开全文
  • 打开微信开发者工具,用手机上的微信扫描对应二维码,进 入开发工具界面。 选择“小程序项目”中的“小程序”,再点击右侧“+”号, 出现新建项目页面。 开发者工具界面 界面大致分为7个区域: 菜单栏区域 模拟器...
  • 简单的功能做的差不多了,然后打包到微信开发者工具和真机进行调试时发现了一些匪夷所思的问题(也许只是对我来说是这样)。记录一下,以避免以后踩同样的坑。 一、self in not defined 在本地和开发者工具中调试都...
  • 微信开发者工具1.02.1905151 配置 File—settings或者快捷键Ctrl+Alt+S,点击出来如下页面: 1.FileType下Cascading Style Sheet 添加*.wxss 2.FileType下HTML 添加*.wxml 3.将其中的wecharCode.jar下载...
  • 微信开发者工具很好的集成了java的开发环境,是java初学者很好的练手软件。准备条件:注册微信小程序开发者账号,需要用到微信账号。 网址:https:...
  • 在我们下载微信开发者工具后,打开工具,第一次需要扫码登录,登录后,如下图,选择新建一个小程序 我的这个是新建了一个的了,点击加号新建,然后填入信息,项目名称,项目存储的地址,以及注册小程序时的APPID,...
  • https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html 下面的菜单自己点点就知道是干啥的了 点击“详情”可以修改APPID以及项目名称 ...调试基础库为chromium版本号 ......
  • 微信小程序前端开发者工具-小程序切片-小程序定制开发神器 你是否还在辛辛苦苦地码代码,特别是前端页面的编写,很多都是非常简单的,但界面多了还是要花费大量的时间,缩短了 你陪男/女朋友的时间,家人的时间,...
  • 一、开始 开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序。 跟随这个教程,开始你的小程序之旅吧! 二、申请帐号 ...在这个小程序管理平台,你可以管理你的小...
  • 微信web开发者工具

    2017-04-07 10:38:57
    为帮助开发者更方便、更安全地开发和调试基于微信的网页,我们推出了 web 开发者工具。它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作。立即...
  • 1.文件生成 pycharm在minum运行小程序用例的时候,会自动生成报告,看好了报告就在output里面 如果我们要看这个报告确实不太额方便, 我给大家解释一下为什么不方便,他生成的是一套文件,需要一个容器来装,就...
  • 一、微信小程序web开发工具下载地址   1.1 在微信公众平台-小程序里边去下载开发工具下载地址。 1.2 下载后安装一下就可以使用了: 二、创建项目   2.1 微信小程序web开发工具需要扫码登陆,...
  • 2 使用微信开发者工具在本地建立新的工程目录 3 打开新的工程目录,进入git bash页面,使用git init 初始化项目 4 接着git add . 5 git commit -m '初始化项目' 6 git remote add origin <码云仓库地址> ...
  • 微信小程序概述 小程序介绍 微信小程序是腾讯于2017年1月9日推出的一种不需要下载安装即可在微信平台上使用的应用。小程序和微信原生功能应用在本质上都是——Web App 小程序优势 微信有海量用户,依赖性很强,微信...
  • 摘要:本文介绍了微信小程序的开发者工具微信小程序使用的基本前后端框架1.简介为了鼓励广大程序员跳入微信小程序开发这个大坑,腾讯很贴心地提供了微信小程序开发框架以及灰常详细的开发文档(点这里),文档...
1 2 3 4 5 ... 20
收藏数 23,470
精华内容 9,388
关键字:

微信开发者工具 语言