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

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

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


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

      

      格式化的效果下:

      

       看到上图的变化很大吧

     

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

       

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

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

        如下图所示:


          

       最终效果如下:

       

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

    展开全文
  • 微信小程序实现文本两端对齐

    万次阅读 2018-09-14 17:38:24
    1.使用下面这样,经过测试在开发工具中有效,但是在手机端测试无效,兼容性不好。 .text{ text-align: justify; text-align-last:justify; } 2.使用下面这种,兼容性比较好,手机端还有开发工具中都可以实现。 ...

    在小程序开发中经常会用到文本的两端,比如登录的用户名、密码、验证码等需要让这些文字左右对齐,下面介绍常用的对齐方式:

    1.使用下面这样,经过测试在开发工具中有效,但是在手机端测试无效,兼容性不好。

    .text{
      text-align: justify;
      text-align-last:justify;
    }

    2.使用下面这种,兼容性比较好,手机端还有开发工具中都可以实现。

    .text{
      text-align: justify;
    }
    .text::after{
      width: 100%;
      display: inline-block;
      content: '';  //这三个都不可以少
    }

    记录此贴,以备遗忘。

    展开全文
  • 微信开发者 工具快捷键大全

    千次阅读 2017-07-20 13:40:31
    常用快捷键 格式调整 Ctrl+S:保存文件Ctrl+[, Ctrl+]:代码行缩进Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块Ctrl+C Ctrl+V:复制粘贴,如果没有选中任何文字则复制粘贴一行Shift+Alt+F:代码格式化Alt+Up,...

    常用快捷键

    格式调整

    • 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:光标回退


    作者:JWang_小猴土豆
    链接:http://www.jianshu.com/p/8e07b403958e

    展开全文
  • 并从微信公众平台上下载微信开发工具并在其运行。 实现的页面和开发工具主要源码:assets文件有一个icons的文件夹,里面存放着图标;pages文件分为分类的页面classify文件夹,首页页面index文件夹,购物车页面...

    一、小程序基本环境搭建
    自己在微信公众平台注册了一个发布小程序的邮箱。并从微信公众平台上下载微信开发工具并在其运行。
    实现的页面和开发工具主要源码:assets文件有一个icons的文件夹,里面存放着图标;pages文件分为分类的页面classify文件夹,首页页面index文件夹,购物车页面shopcat文件夹,我的页面mine文件夹,每个文件夹都有一个js,json,wxml,wxss文件。最后是整个页面布局的文件app。

      
    小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。其中文件结构:


    下面是结合老师上课和百度对小程序代码的认识。
    小程序中主要页面代码:
    1.小程序公共设置app.json

    {

    "pages": [   //页面路径列表

    "pages/index/index",

    "pages/classify/classiry",

    "pages/shopcart/shopcart",

    "pages/mine/mine"

    ],

    "window": {   //全局的默认窗口表现,用于设置小程序的状态栏、导航条、标题、窗口背景色。

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

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

    "navigationBarTitleText": "个人空间",  //导航栏标题文字内容

    "navigationBarTextStyle": "black",   //下拉导航栏标题颜色,仅支持 black / white

    "enablePullDownRefresh": true, //开启全局的下拉刷新。

    "backgroundColor": "#000000"//窗口的背景色

    },

    "tabBar": {    //底部 tab 栏的表现

    "color": "#666",

    "selectedColor": "#5fdec9",  //文字选中时的颜色

    "list": [   //tab 的列表,包含四项,即底下四个页面标志,每个项都有四个属性

    {

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

    "text": "首页", //tab 上按钮文字

    "iconPath": "assets/icons/home.png",   //未选中的图片路径,当 position 为 top 时,不显示 icon。

    "selectedIconPath": "assets/icons/achome.png" //选中时的图片路径

    },

    {

    "pagePath": "pages/classify/classiry",

    "text": "分类",

    "iconPath": "assets/icons/classify.png",

    "selectedIconPath": "assets/icons/acclassify.png"

    },

    {

    "pagePath": "pages/shopcart/shopcart",

    "text": "购物车",

    "iconPath": "assets/icons/shopcart.png",

    "selectedIconPath": "assets/icons/acshopcart.png"

    },

    {

    "pagePath": "pages/mine/mine",

    "text": "我的",

    "iconPath": "assets/icons/mine.png",

    "selectedIconPath": "assets/icons/acmine.png"

    }

    ]

    },

    "sitemapLocation": "sitemap.json"

    }
    二、骰子布局
    采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。有六个属性:
    ①flex-direction:属性决定主轴的方向(即项目的排列方向)。
     row(默认值):主轴为水平方向,起点在左端。
     row-reverse:主轴为水平方向,起点在右端。
     column:主轴为垂直方向,起点在上沿。
     column-reverse:主轴为垂直方向,起点在下沿。

    .box {
      flex-direction: row | row-reverse | column | column-reverse;
    }

    flex-wrap属性:默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
    nowrap(默认):不换行。
    wrap:换行,第一行在上方。
    wrap-reverse:换行,第一行在下方。

    .box{
      flex-wrap: nowrap | wrap | wrap-reverse;
    }

    flex-flow属性:flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

    .box {
      flex-flow: <flex-direction> || <flex-wrap>;
    }

    justify-content属性定义了项目在主轴上的对齐方式。
    flex-start(默认值):左对齐
    flex-end:右对齐
    center: 居中
    space-between:两端对齐,项目之间的间隔都相等。
    space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

    .box {
      justify-content: flex-start | flex-end | center | space-between | space-around;
    }

    align-items属性定义项目在交叉轴上如何对齐。
    flex-start:交叉轴的起点对齐。
    flex-end:交叉轴的终点对齐。
    center:交叉轴的中点对齐。
    baseline: 项目的第一行文字的基线对齐。
    stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

    .box {
      align-items: flex-start | flex-end | center | baseline | stretch;
    }


    align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
    flex-start:与交叉轴的起点对齐。
    flex-end:与交叉轴的终点对齐。
    center:与交叉轴的中点对齐。
    space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
    space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
    stretch(默认值):轴线占满整个交叉轴。

    .box {
      align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    }

    骰子布局笔记整理来源:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html  和
    http://www.ruanyifeng.com/blog/2015/07/flex-examples.html?bsh_bid=683103006

     

     

    展开全文
  • 由于之前的文章中已经教会了大家如何注册自己的一个微信小程序,并且利用微信开发工具进行小程序的开发,所以这里不再介绍如何下载工具和...第一步 打开我们的微信开发工具(之前的教程有,这里就不再重新交) 第...
  • 由于项目需要,最近开始了微信小程序开发的学习,从官方的开发工具开始。微信小程序无论是从开发难度还是从便捷性上来讲都是不错的选择,而且对于学生来说也不必考虑太多的东西。这个系列就是就是打算写一下学习...
  • 微信开发之小程序的页面布局

    千次阅读 2018-05-29 15:18:39
    flex布局用途:快速实现你所需要的布局(水平居中、垂直居中、左右对齐等) 1、对布局容器设置display:flex; 2、利用属性(justify-content(水平方向)和align-items(垂直方向))进行设置。例如垂直居中:/* ...
  • 我们先把原始代码贴上 index.wxml <!--pages/index.wxml--> <view> <text>AI花草识别</text> <...下面代码可以让文字居中,但是会有一个问题出现,文字没有上下居中。...&...
  • 微信小程序开发学习笔记一 布局

    千次阅读 2018-05-27 21:17:11
    Practice.wxml代码如下:&lt;text&gt;123&lt;/text&gt;&lt;view style="flex-direction:row"&gt; &lt;viewclass="flex-itembc_green"&...2&
  • 1.当我们的布局为默认,也就是flex-direction: row;的时候, justify-content: center;是左右居中,align-items: center;是上下居中。 而当我们的布局是flex-direction:column;的时候,上面刚好完全反过来。...
  • 有关微信开发的总结 一.首先大致分享一下官方开发文档:   公众平台-小程序开发文档: https://developers.weixin.qq.com/miniprogram/dev/devtools/ext.html   公众平台技术开发文档: ...
  • 微信开发API文档是必看的 在api文档里面我们可以看到很多内容,然后需要我们去理解点击进微信硬件平台api[http://iot.weixin.qq.com/wiki/new/index.html?page=4-7. 例如 解绑设备 需...
  • 使用cocos creator开发微信小游戏(二)

    千次阅读 2018-11-09 15:18:44
    我的开发环境: 使用cocos creator开发中涉及的主要内容: 使用cocos creator开发中碰到的问题及解决方案: 1:场景工程中没有被依赖关联的图片声音或者其它资源,导出到微信后找不到 2:cocos creator微信排行...
  • Flex布局又称弹性布局,在小程序开发中比较适用。网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便,比如,...
  • 微信小程序-文本与图片无法对齐

    万次阅读 2018-07-13 20:55:18
    最近项目开发小程序,于是打算重新做一遍七月老师的小程序入门项目,熟悉一下,但是做到阅读页面时却突然遇到了一个问题:文本与图片怎么都无法对齐,真的是对着代码研究了一个多小时才突然想到了原因,想想也许有人...
  • 想要开发微信,我们最先要准备的开发工具莫过于一个服务器;有了服务器,我们才能随意的为公众号;添加功能; 下面;我们在服务器上开发一下微信公众号的样式库; ①;在服务器上安装weui;   WeUI 是一套同微信...
  • 微信小程序开发详解(九)---微信小程序布局基础

    万次阅读 多人点赞 2017-01-12 14:40:46
    1:Flex布局 Flex布局如图1所示 图1 1.1 Flex容器属性 1.2 Flex容器内元素属性
  • project.config.json保存微信开发者工具的配置信息,对个性化设置比如界面颜色进行保存,当我们重新安装工具,只需要将代码导入进去,微信开发工具就会自动生成个性化设置。 app.js帮我们的微信小程序注册一个微信...
1 2 3 4 5 ... 20
收藏数 4,362
精华内容 1,744
关键字:

微信开发工具对齐