微信开发者工具格式化没换行 - CSDN
  • 微信开发者工具&WXML+WXSS学习笔记 by wyc 小程序下载以及使用 浏览器搜索微信小程序api即可找到官网 在设置/外观设置 中可以调整开发者工具的颜色以及主题,推荐深色,搭配浅色的语法高亮 文件介绍 pages、app...

    微信开发者工具&WXML+WXSS学习笔记

    by wyc

    小程序下载以及使用

    浏览器搜索微信小程序api即可找到官网

    在设置/外观设置 中可以调整开发者工具的颜色以及主题,推荐深色,搭配浅色的语法高亮

    文件介绍

    在这里插入图片描述

    pages、app.js都是必不可少的

    utils可以删掉,里面主要是放一些公用文件

    名称为app的文件是全局管用的,对于所有的页面都会有影响的,但是在具体的页面中的编写时可以将app中的条例覆盖掉的,也就是pages里面的文件代码的权限是最高的。

    //复习感想:wxml以及wxss是最主要的编辑页,js以及json是逻辑页。
    

    pages

    页面相关,其中index指的是首页

    index

    有js,json,wxml,wxss四个部分

    utils

    公用代码信息(略)修改字符串等的信息以及时间戳的修改

    app.js

    逻辑层,交互动效,就是说所有的页面的转化啊互动啊这些应该是放在js文件里面的。

    app.json

    配置项,e.g.标题名,页面颜色

    app.wxss

    样式层 类比CSS 样式文件,颜色 宽高

    project.config.json

    项目的配置文件,在小工具右上角直接可以进行可视化的操作,所以一般不手动改这个文件里面的代码

    sitemap.json

    地图(类似于网站里的地图)

    wxml

    页面结构的编辑。

    页面的操作

    view标签对标的是div标签

    预览页面的切换

    在app.json里面去编辑预览的页面的顺序,注意最后不要加文件类型后缀。

    {
      "pages": [
        "pages/index/index",
        "pages/logs/logs",
        "pages/news/news"
      ],
      "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
      },
      "style": "v2",
      "sitemapLocation": "sitemap.json"
    }
    

    注意pages里面逗号位置,中间有逗号,最后一定不要加逗号。

    页面的添加

    方法一:

    在资源管理器中右键pages点击新建文件夹并命名

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

    然后右键news点击新建page即可(新建的page的名字与文件夹的名字一致)
    在这里插入图片描述
    在这里插入图片描述

    一个文件夹必须有这四种文件才可以跑 起来。

    方法二

    直接在app.json中写代码创建news,其中第一个news指的是文件夹,第二个news指的是page文件(不要带后缀名字)
    在这里插入图片描述

    页面删除

    只能在资源管理器中右键完后删除

    WXML

    html

    语法规范

    标签

    标签简介

    是由<>包围的关键词

    标签类型

    一般都是双标签,叫做起始标签叫做结束标签

    标签关系
    包含关系
    <head>
        <title></title>
    </head>
    

    head父title子

    并列关系
    <head></head>
    <body></body>
    
    标签结构
    <html>
       <head>
          <title>页面顶部文字
          </title>
       </head>
       <body>正文部分
       </body>
    </html>
    

    常用标签

    <h1>一级标题标签headline1</h1>
    <h2>二级标题标签headline2</h2>
    <p>段落标签paragraph</p>
    <br />强制换行标签break单标签不需要结束标签
    文本格式化标签
      <strong>加粗(语气更加强烈)</strong>
      <b>加粗black</b>
      <em>倾斜</em>
      <i>倾斜</i>
      <del>删除线delete</del>
      <s>删除线</s>
      <ins>下划线</ins>
      <u>下划线</u>
    <div>
        分区division,一行只能放一个div标签,一个人占一行,俗称大盒子
    </div>在div后面写的内容直接下一行
    <span>
        跨度 跨距span,span一行可以有很多个span,俗称小盒子
    </span>
    <img src="图像URL" alt="替换文本" title="鼠标放到图像上的时候显示的文本" width="图像宽度数字" height="图像高度数字" border="图像边框(一般用css做,不用属性)"/>图像标签image,单标签
    <a href="http://www.qq.com" target="_blank(默认的值是_self)">链接标签</a>
    <a href="自己编写的网页文件名称.html">内部链接</a>
    <a href="#">空链接</a>
    <a href=>下载链接 里面是.zip 或者 exe文件</a>
    

    CSS 3

    基本结构

    <style>
     //选择器{属性1:;属性2:;}
     p {
        color :red;
        font-size :12px;
     }
    </style>
    

    代码风格

    不是强制规范,而是符合实际开发的书写方式

    样式格式

    采用展开格式,也即每个属性占一行。

    空格规范

    在属性的后面,冒号的前面保留一个空格。

    选择器与{}中间保留空格

    CSS选择器

    类选择器

    /*.类名 {
     属性1 :值;
     属性2 :值;
    }
    */
    <style>
        .red {
            color :red;
        }
    </style>
    
    <div class="one">
        test dic ision
    </div>
    

    组件

    文字 图片 视频 超链接

    view(块标签)

    //格式推荐如下(我指的是下面的

    <view class="box" 
    hover-class="boxHover" 
    hover-start-time="5" 
    hover-stay-time="100"
    >test</view>
    

    hover-stop-propagation

    阻止冒泡,在子级的框里面加即可。

    wxml

    <view class="box" 
    hover-class="boxHover" 
    hover-start-time="5" 
    hover-stay-time="100">
      <view class="item" 
      hover-class="itemHover" 
      hover-stop-propagation
      >test2</view>
    test</view>
    

    wxss

    .box{width: 100px;height: 100px;background-color: blueviolet;}
    .boxHover{background-color: red;}
    .item{background-color: hotpink;}
    .itemHover{background-color: greenyellow;}
    

    最终效果

    在这里插入图片描述

    //ps:写wxss的时候,hover项一定要在本体项以下写,要不然没有效果!!!
    

    text(行标签)

    xxx


    其他标签见https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

    JSON注意事项

    • json中的key必须包含在双引号之内,不标或者标错是常见错误

    • 数组在【】中,对象在{}中

      {
        "pages":[
          "pages/index/index",
          "pages/logs/logs"
        ],
        "window":{
          "backgroundTextStyle":"light",
          "navigationBarBackgroundColor": "#fff",
          "navigationBarTitleText": "WeChat",
          "navigationBarTextStyle":"black"
        }
      }
      
    • json中不允许添加注释

    展开全文
  • 格式调整   Ctrl+S:保存文件  Ctrl+[, Ctrl+]:代码行缩进  Ct...


                                                                                 格式调整                                                                            
      Ctrl+S:保存文件
      Ctrl+[, Ctrl+]:代码行缩进
      Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块
      Ctrl+C Ctrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一行
      Shift+Alt+F:代码格式化
      Alt+Up,Alt+Down:上下移动一行
      Shift+Alt+Up,Shift+Alt+Down:向上向下复制一行
      Ctrl+Shift+Enter:在当前行上方插入一行
                                                                                 光标操作                                                                            

         Ctrl+End:移动到文件结尾
      Ctrl+Home:移动到文件开头
      Ctrl+i:选中当前行
      Shift+End:选择从光标到行尾
      Shift+Home:选择从行首到光标处
      Ctrl+Shift+L:选中所有匹配
      Ctrl+D:选中匹配
      Ctrl+U:光标回退

                                                                                 界面操作                                                                             

           Ctrl + \:隐藏侧边栏 
           Ctrl + m: 打开或者隐藏模拟器

    展开全文
  • 微信web开发者工具的常用快捷键

    千次阅读 2018-05-15 17:26:16
    Ctrl+S:保存文件Ctrl+[, Ctrl+]:代码行缩进Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块Ctrl+C Ctrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一行Shift+Alt+F:代码格式化Alt+Up,Alt+Down:上下移动一行...
    Ctrl+S:保存文件
    Ctrl+[, Ctrl+]:代码行缩进
    Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块
    Ctrl+C Ctrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一行
    Shift+Alt+F:代码格式化
    Alt+Up,Alt+Down:上下移动一行
    Shift+Alt+Up,Shift+Alt+Down:向上向下复制一行

    Ctrl+Shift+Enter:在当前行上方插入一行

    Ctrl+End:移动到文件结尾
    Ctrl+Home:移动到文件开头
    Ctrl+i:选中当前行
    Shift+End:选择从光标到行尾
    Shift+Home:选择从行首到光标处
    Ctrl+Shift+L:选中所有匹配
    Ctrl+D:选中匹配

    Ctrl+U:光标回退


    我自己从别的博客复制过来的,还没有验证。请翻到这的宝宝,如果有错误的,欢迎提出来。

    展开全文
  • android studio和eclipse工具都有格式化工具,那么微信web开发者工具有此功能么,当然,下面就来试试吧!  先上一张处理前的代码图:  第一步:在右边的代码界面中右键单击(左边要在“编辑”tab),在出现的...

       在咱们开发微信小程序或者看别人的代码,有时感觉很凌乱,可能让自己多费时间和精力去弄懂,怎么办?android studio和eclipse工具都有格式化的工具,那么微信web开发者工具有此功能么,当然,下面就来试试吧!

       先上一张处理前的代码图:


       第一步:在右边的代码界面中右键单击(左边要在“编辑”tab),在出现的菜单中选择“格式化代码”,如下图所示:

      

      格式化的效果下:

      

       看到上图的变化很大吧

     

       第二步:还在最右边界面内单击右键,在弹出的菜单中选择“命令面板”(或者快捷键F2),如下图所示:

       

       第三步:选择命令面板的菜单“查看 切换自行换行”;

       第四步: 选择命令面板的菜单“裁剪尾随空格”;

        如下图所示:


          

       最终效果如下:

       

     格式化的代码查看起来整齐紧凑!!!

    展开全文
  • C/C++中左花括号位置的争论由来已久,本文分析了两种写法产生的历史缘由,并提出现在我们应该采用的写法和理由。 下面是引起争论的两种风格: K&R风格: if (a > 100) { ... //do somthing… ...
  • 发现问题:按照微信公众号的开发文档,在写完逻辑代码后,测试时发现:Content回复的消息内容,使用"\n",预期效果应该是文字内容有换行效果,微信的文档也说明了换行可以使用"\n"换行符,但是...
  • 格式化JavaScript代码

    2019-07-13 12:31:11
    javascript代码格式化工具 网上下载的js代码经常遇到代码已被压缩(注释、换行、缩进、空格、TAB等都被删除了),如果拿来学习、研究的话必定看到头晕。有些编辑器的“格 式化代码”功能可以解决这个问题,在网上...
  • 微信开发者工具 微信开发者工具 WebStorm VS Code 微信开发者工具快捷键 快捷键 功能 Shift+Alt+F 格式化代码 Ctrl+B 编译 Ctrl+D 选中匹配 Ctrl+P 跳转文件 微信小程序...
  • project.config.json保存微信开发者工具的配置信息,对个性设置比如界面颜色进行保存,当我们重新安装工具,只需要将代码导入进去,微信开发工具就会自动生成个性设置。 app.js帮我们的微信小程序注册一个微信...
  • 需要实现的功能 随机产生一张图片 拿到微信用户的头像和称呢(自己调后端的接口获取) 把用户头像和称呢和随机产生一张图片合成一张海报 可能上一页用户还有填入的心愿文本也要填入图片中 实现效果图 记录下在...
  • 微信小程序 开发填坑

    千次阅读 2019-08-28 18:34:17
    1,json文件里不能使用备注,否则编辑会报错 2.如果图片未指定高宽,小程序会有一个默认的值。image组件默认宽度300px、高度225px 3.只有使用text组件包裹的文字,才能在手机端长按选中 4.缓存数据大小不能超过10...
  • 新手入门宝典:从零开始做微信小程序开发

    万次阅读 多人点赞 2017-06-09 14:16:27
    开发前必读简要 基于大量无效开发,无法上线的案例,...微信开发者工具【项目】详解 为什么我的小程序通过审核,但是搜索不到呢?原因是必须在后台内点击发布,才会发布;| 链接 小程序开发上线(发布)步骤 这
  • 小程序踩坑日志(一)

    千次阅读 2018-01-22 16:01:01
    微信小程序踩坑日志 起步 申请账号 查看AppID—“设置”-开发设置 小程序的appid相当于小程序平台的一个身份验证 安装开发者工具https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201818...
  • 谷歌开发者工具是前端日常不可缺少的神奇,写布局,找 bug,优化加载速度统统靠他。但是你真的了解他么?这篇文章是专门介绍谷歌浏览器各种好用小技巧的。不是什么长篇大论,旨在提高你的开发效率,早日完工回家陪女...
  • Q:1.5版本基础库的小程序出现了image bindload事件响应两次的问题。A:你好,感谢反馈,我们会尽快进行修复,敬请关注。Q:地图里marker的callout在...Q:新版微信开发者工具,tabBar选中字体颜色不对。A:收到,我...
  • 微信开发者工具【项目】详解 为什么我的小程序通过审核,但是搜索不到呢?原因是必须在后台内点击发布,才会发布;| 链接 微信小程序开发上线(发布)步骤 这篇帖子将简单的介绍基本的步骤,以便新手们建立一个...
  • 2020-09-14

    2020-09-15 08:56:43
    3、安装 微信开发者工具,安装git 用命令行生成一个密钥对,git访问服务器用的 html负责编辑网页内容 css负责网页样式 Javascript是网页编程语言 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS ...
  • JS中会自动清除句子和句子之间的空格以及tab缩进, 这样就可以允许用户编写的代码更加随性和更加可读, 在该行代码解析的时候如果该行代码可以解析, 就会在该行代码最后自动填写分号,如果该行代码无法解析就会把...
  • display:table的用法 大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css为什么不用table系表格元素呢? 1、用DIV+CSS编写出来的文件k数比用table写出来的要小,不信你在页面中放1000个...
1 2 3 4 5 ... 20
收藏数 817
精华内容 326
热门标签
关键字:

微信开发者工具格式化没换行