• 微信开发者工具 项目目录结构 目录结构 |---主目录(项目描述文件) | |---app.js 主逻辑文件 | |---app.json 主配置文件 | |---app.wxss 主样式表 |---子目录(页面描述文件) | |---index.js 分支页面逻辑文件 | |...

    微信开发者工具 项目目录结构

    目录结构

    |---主目录(项目描述文件)
    |       |---app.js      主逻辑文件
    |       |---app.json    主配置文件
    |       |---app.wxss    主样式表
    |---子目录(页面描述文件)
    |       |---index.js    分支页面逻辑文件
    |       |---index.json  分支页面配置文件
    |       |---index.wxss  分支页面样式表
    |       |---index.wxml  分支页面结构文件
    |---子目录(资源文件)
    
    展开全文
  • 打开微信开发者工具 创建第一个小程序 步骤: 打开微信开发者工具 使用微信扫码登录 点击小程序-创建小程序 项目名 项目路径 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.下载并安装以后打开,微信号扫码登录登录开发者工具。 如果还没有注册,可以填写无AppID,它会显示部分功能受限,...

    微信开发者工作是微信官方提供的针对微信小程序的开发工具,集中了开发,调试,预览,上传等功能。下面来介绍下自己的针对小程序和微信开发者工具的使用心得。

    下载地址:开发者工具下载地址

    1.下载并安装以后打开,需使用微信号扫码登录开发者工具

    登陆新建一个quick start项目


    如果还没有注册,可以填写无AppID,它会显示部分功能受限,实际上并没有太大影响。

    2.添加一个quick start项目


    3.目录结构

    从上图的右侧可以很清晰地看出来一个微信小程序的结构,一个微信小程序的页面包括四个文件:

    a.“.js”后缀的是脚本文件,主要是写一些业务逻辑的代码,基本和JavaScript一样。(在开发过程中发现一些函数JS有而微信没有,毕竟这是微信自己的一套东西)。

    b.“.json”后缀的是配置文件,例如tab的各种属性,实际中每个小页面的使用的并不多,涉及全局配置的app.json使用比较多,app.json中包括定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

    c.“.wxml”后缀的是前端显示页面文件,你也可以把它理解为html页面,规则也和html5很类似,还是那句话,并不是完全一样,有些H5实现的东西wxml并不能实现。

    d.“wxss”后缀的是样式表文件,类似于css。

    以上是每个微信小程序页面的四种基本构成,微信开发者工具会根据这些,编译生成相应的小程序实例。


    展开全文
  • 于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟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)

    展开全文
  • 开发者工具之小程序目录认识 小程序没有DOM对象,一切基于组件化 小程序的四个重要的文件 a. *.js b. *.wxml —> view结构 ----> html c. *.wxss —> view样式 -----> css d. *. json ----> view ...

    开发者工具之小程序目录认识

    xiao

    1. 小程序没有DOM对象,一切基于组件化
    2. 小程序的四个重要的文件
      a. *.js
      b. *.wxml —> view结构 ----> html
      c. *.wxss —> view样式 -----> css
      d. *. json ----> view 数据 -----> json文件
    3. app.*文件里的内容是全局配置

    小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

    展开全文
  • 上一篇文章中https://blog.csdn.net/u014650759/article/details/90701866,我们已经安装好了微信开发者工具,并导入了一个Demo项目,这篇文章,将就开发者工具进行简单的介绍,方便你开发实用编译器,更好的开发小...
  • 微信开发者工具的快捷键
  • 微信开发者工具(一) 一、微信开发者工具基本信息 1.1 微信开发者工具的下载 ​ 直接打开下面网址进行下载: ​ https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 1.2 下载以后登录 1.3 ...
  • 1.微信开发者工具自行到网上下载即可 2.打开微信开发者工具,如图所示: 点击创建后,如下图所示:
  • 微信开发者工具-调试器 调试器常用的 6 大功能模块有:Console、Sources、Network、Appdata、Storage、Wxml Console Console有两大功能: 1)开发者可以在此输入和调试代码  2)小程序的错误输出,会显示...
  • 微信团队发布了微信小程序开发者工具微信小程序开发文档和微信小程序设计指南,全新的开发者工具,集成了开发调试、代码编辑及程序发布等功能,帮助开发者简单和高效地开发微信小程序。启动工具时,开发者需要使用...
  • 简单的功能做的差不多了,然后打包到微信开发者工具和真机进行调试时发现了一些匪夷所思的问题(也许只是对我来说是这样)。记录一下,以避免以后踩同样的坑。 一、self in not defined 在本地和开发者工具中调试都...
  • 微信开发者工具代码编辑区消失,写的代码显示不了时: 在编辑器控制台输入:openVendor 回车  会打开一个文件夹:C:\Users\Administrator\AppData\Local\微信web开发者工具\User Data\WeappVendor 清除里面的...
  • 相关文章微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(三)入门之创建打卡活动前言一直不温不火的微信小程序2018年迎来了第二春,在我的记忆中随着跳一跳小游戏的出现,一时间数千万的微信小程序...
  • [解决方案]微信开发者工具中的代码模块不显示 1.在控制台输入openVendor 2.在弹出的文件夹里,清除wcsc wcsc.exe 3.重启开发者工具 4.如果失效,重启电脑,再重复上述操作 ...
  • 文章目录微信开发者工具下载 微信开发者工具下载 在如下的链接中, 可进行开发者工具的下载,如下图所示 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html ...
  • 微信开发者工具的用途  开发微信小程序和公众号网页开发   小程序  添加小程序项目  在小程序的管理页面可以增删项目    添加小程序可以使用小程序公众号的appid,也可以不使用(一些功能不能使用) ...
  • 由于项目出了点问题报错了,开发者工具里的代码模块不显示了 解决办法: 在控制台输入openVendor() 在弹出的文件夹里,清除里面的wcsc wcsc.exe 然后重启开发者工具 ——完美解决...
  • 微信开发者工具的主页面主要是由菜单栏、工具栏、模拟器、编辑器以及调试其组成的。 菜单栏 项目:新建或打开一个项目 文件:新建、打开或者关闭文件 编辑:编辑或格式化代码 工具:包含一些辅助工具 ...
  • 微信开发者工具中 实现微信小程序之相机拍照功能的开发 包括相机拍照文件相册的打开 镜头的反转等
1 2 3 4 5 ... 20
收藏数 22,031
精华内容 8,812