微信开发者快速排列代码_微信开发者平台微信登陆代码 - CSDN
  • 微信小程序已经跑起来了.快捷键设置找了好久没找到,完全凭感觉.图贴出来.大家看看. ...微信小程序代码编辑快捷键 常用快捷键 格式调整 Ctrl+S:保存文件Ctrl+[, Ctrl+]:代码行缩进Ctrl+Shift+

    微信小程序已经跑起来了.快捷键设置找了好久没找到,完全凭感觉.图贴出来.大家看看.

    我现在用的是0.10.101100的版本,后续版本更新快捷键也应该不会有什么变化.



    现在貌似不能修改.如果有同学找到修改的方法,麻烦告诉我.谢谢.

    微信小程序代码编辑快捷键

    常用快捷键

    格式调整

    • 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 + \:隐藏侧边栏


    展开全文
  • 微信开发者工作是微信官方提供的针对微信小程序的开发工具,集中了开发,调试,预览,上传等功能。下面来介绍下自己的针对小程序和微信开发者工具的使用心得。 下载地址:开发者工具下载地址 1.下载并安装以后打开,...

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

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

    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。

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


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

    千次阅读 2017-07-20 13:40:31
    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:光标回退


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

    展开全文
  • 前言 由于项目需要,最近开始了微信小程序开发的学习,从官方的开发工具开始。微信小程序无论是从开发难度还是从便捷性上来讲都是不错的选择,而且...开发者工具 系统:win7及以上版本 工具 安装和建立工程都很...

    前言


            由于项目需要,最近开始了微信小程序开发的学习,从官方的开发工具开始。微信小程序无论是从开发难度还是从便捷性上来讲都是不错的选择,而且对于学生来说也不必考虑太多的东西。这个系列就是就是打算写一下学习笔记,以后可以参考,也是一种回忆,如果能够给有缘阅读到的人一点点帮助,那真是荣幸之至。


    准备



    工具


            安装和建立工程都很简单,APPID暂时选测试号或者不填(如果需要上线才需要用真实的ID),语言选JavaScript。新建的工程里有默认的代码,刚开始学习看不懂那些代码,将其删除即可。一眼望去,我们可以看到开发者工具主要分为五个部分,仿真器(仿真移动设备),编辑器(写代码)、调试器、目录树和工具栏,前面四个都可以通过在工具栏中设置而隐去。

                        

     

    仿真器(Simulator)

            仿真器中有手机型号和状态栏的选择,最重要的是手机型号。一般选择iphon6为基准,因为我们开发的小程序是要应用到多种移动设备上去的,而设备的屏幕分辨率又各有不同,所以如果用px写死样式,那么换一个设备样式就会坏掉。微信小程序用rpx来解决这个问题的,也就是在一个宽度为375物理像素的屏幕下,1rpx = 375/375=1px。而对于iPhone6,屏幕宽度为750个物理像素,依旧是375px,所以得出1rpx = 375 / 750 px = 0.5px。

                              

    目录树(Drectory Tree)

            目录树与物理地址之间存在映射关系,而在小程序中访问只是采用相对地址。我们可以看到默认工程的目录树主要包含了三个部分,pages目录,utils目录和一些全局的文件。pages里存放的一般是每一个页面,默认工程里包含两个页面,首页index和一个日志页,每个页面由对应的布局样式文件组成。utils主要放一些工具型函数,比如网络请求,在util.js中实现,然后导出,最后再在需要的页面导入就可以使用其中的某些部件。我们以后可能还会用到组件(Component),我们就可以再建一个名为Component的目录用来存组件。

                                                                     

    编辑器(Editor)

            如果不喜欢背景的颜色,或者字体大小,可以在设置->外观设置中修改。

                                               


    结构


            代码由.js文件(小程序的主要开发语言是 JavaScript ,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求),.json文件( JavaScript Object Notation,是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色),.wxml文件(WeiXin Markup language,是小程序框架设计的一套标签语言,结合小程序的基础组件、事件系统,可以构建出页面的结构),.wxss文件(WeiXin Style Sheet,是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果。WXSS与Web开发中的CSS类似。为了更适合小程序开发,WXSS对CSS做了一些补充以及修改)组成。

        全局配置文件

    • Project.config.json:用于配置开发环境。
    {
    	"description": "Project configuration file",
    	"packOptions": {
    		"ignore": []
    	},
    	"setting": {
    		"urlCheck": true,
    		"es6": true,
    		"postcss": true,
    		"minified": true,
    		"newFeature": true,
    		"autoAudits": false
    	},
    	"compileType": "miniprogram",
    	"libVersion": "2.6.6",                             //库版本
    	"appid": "wx866f52f21b24eed3",                     //appID
    	"projectname": "miniprogram-test-2",
    	"debugOptions": {
    		"hidedInDevtools": []
    	},
    	"isGameTourist": false,
    	"condition": {
    		"search": {
    			"current": -1,
    			"list": []
    		},
    		"conversation": {
    			"current": -1,
    			"list": []
    		},
    		"game": {
    			"currentL": -1,
    			"list": []
    		},
    		"miniprogram": {
    			"current": -1,
    			"list": []
    		}
    	}
    }
    • app.wxss:整体样式文件,container类可以被项目的每一个页面使用(公共样式)。
    /**app.wxss**/
    .container {
      height: 100%;                                        //高度是整个容器高度
      display: flex;                                       //布局方式:flex
      flex-direction: column;                              //主轴纵向,方向从上指向下。项目沿主轴排列,从上到下排列。                                                  
      align-items: center;                                 //非主轴方向居中对齐
      justify-content: space-between;                      //项目间间距相等,第一个项目离主轴起点和最后一个项目离主轴终点距离为0
      padding: 200rpx 0;                                   //表示一个框内边距--这一层位于内容框的外边缘与边界的内边缘之间
      box-sizing: border-box;                              //用属性box-sizing来调整框模型
      background-color: red;                               //背景颜色
    } 
    • app.json:小程序根目录下的 app.json 文件用来对微信小程序进行全局配置(静态),文件内容为一个 JSON 对象,pages和window为其众多属性中的两个。前者用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息,后者用于用于设置小程序的状态栏、导航条、标题、窗口背景色。(注:实际书写代码不能放注释
    {
      "pages":[                                          //	页面路径列表
        "pages/index/index",                              
        "pages/logs/logs"
      ],
      "window":{                                         //全局的默认窗口表现
        "backgroundTextStyle":"light",                   //下拉loading的样式,仅支持 dark/light
        "navigationBarBackgroundColor": "#fff",          //导航栏背景颜色
        "navigationBarTitleText": "WeChat",              //导航栏标题文字内容
        "navigationBarTextStyle":"black"                 //导航栏标题颜色,仅支持 black / white
      }
    }
    • app.js:整个项目的逻辑处理。包括一些生命周期函数的使用,如onLoad、onshow和onReady等。

        页面配置文件

    • .json:每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。
    • .wxml:用于构建出对应页面结构
    <!--index.wxml-->                                                       <!--view:视图容器 类-->
    <view class="container">                                                <!--container:全局的一个容器,样式在app.wxss中-->               
      <view class="userinfo">                                               <!--userinfo:存放用户信息的容器,在index.wxss中设置样式-->
        <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>                    <!--button:表单组件:按钮-->
        <block wx:else>                                                     <!--  <block/> 标签可将多个组件包装起来-->
          <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>                                                   <!-- image 媒体组件:图片-->
          <text class="userinfo-nickname">{{userInfo.nickName}}</text>      <!-- image 文本组件;userinfo-nickname:昵称容器,在index.wxss中设置样式-->
        </block>
      </view>
      <view class="usermotto">                                              <!-- image 签名容器,在index.wxss中设置样式-->
        <text class="user-motto">{{motto}}</text>
      </view>
    </view>
    
    • .wxss:按照容器类,调整页面样式,提升视觉效果。
    /**index.wxss**/
    .userinfo {                                              
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .userinfo-avatar {
      width: 128rpx;
      height: 128rpx;
      margin: 20rpx;
      border-radius: 50%;                                   //圆形为50%,小于50%为圆角
    }
    
    .userinfo-nickname {
      color: #aaa;
    }
    
    .usermotto {
      margin-top: 200px;                                   //外边框顶部与其他容器外边框间隔200px
    }

     


    hello world!


               最简单的hello world只需要一行代码就可以实现,我们先将除Project.config.json外,其他文件中的内容删除,包括logs目录,然后依次在app.json、index.js、index.wxml中填入如下代码,就可以实现hello word。

    {"pages":[ "pages/index/index"]}
    
    Page({})
    <text>hello world!</text>

            我们来一点一点增加难度,完成一个进阶版的hello world。首先引入变量,在Page类的data属性中添加hello变量,并赋值。然后用{{}}去使用它。

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        hello:"hello world!"
      }
    }
    <view>{{hello}}</view>

            我们可以给hello word修改一下样式,比如修改背景颜色,修改字体打下颜色等,先给容器取个名字:hello,然后设置样式。

    <view class = "hello_group">
      <view class = "hello_text">{{hello}}</view>
    </view>
    .hello_group{
        background: #0c960c;                      //将鼠标放在#0c960c,会弹出色谱,可以根据这个选择自己喜欢的颜色
        width: 750rpx;
        height: 750rpx;
    }
    
    .hello_text
    {
         color: #fff;
         font-size: 100rpx;
    }

            微信小程序的view容器 支持两种布局方式:Block 和 Flex,这里我们引入Flex布局来折腾一下我们的hello world,这里设置文字为水平竖直方向居中,选择水平方向从左到右为主轴。

    .hello_group{
        background: #0c960c;
        width: 750rpx;
        height: 750rpx;
        display:flex; 
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    
    .hello_text
    {
         color: #fff;
         font-size: 100rpx;
    }

            我们把hello world放到两个分别叫hello和word的容器里,然后再用Flex布局。

    Page({
      data: {
        hello:"你好",
        world:"世界"
      }
    )
    <view class = "hello_group">
      <view class = "hello_text">{{hello}}</view>
      <view class = "world_text">{{world}}</view>
    </view>
    .hello_group{
        background: #0c960c;
        width: 750rpx;
        height: 750rpx;
        display:flex; 
        flex-direction: row;
        justify-content: center;
        align-items: center;
    
    }
    
    .hello_text
    {
         color: #fff;
         font-size: 100rpx;
    }
    
    .world_text{
        color: #fff;
        font-size: 30rpx;
        margin-top: 70rpx;
    
    }

              我们接着可以用image组件给小程序一个世界的图片,https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u= 1879049657,3980794066&fm=11&gp=0.jpg。然后发现布局乱了,我们来修改一下,虽然还是比较丑,但是比刚才似乎好了不少。

                    

    <view class = "hello_group">
      <view class = "hello_text">{{hello}}</view>
      <view class = "world_text">{{world}}</view>
      <image class = "world_image" src = "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1879049657,3980794066&fm=11&gp=0.jpg"></image>
    </view>
    .hello_group{
        background: #0c960c;
        width: 750rpx;
        height: 750rpx;
        display:flex; 
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;                                                       //换行
    
    }
    
    .hello_text
    {
         color: #fff;
         font-size: 100rpx;
    }
    
    .world_text{
        color: #fff;
        font-size: 30rpx;
        margin-top: 70rpx;
    
    }
    
    .world_image{
      width: 500rpx;
      height: 500rpx;
      border-radius: 50%                                                       //圆形
    }

            我们可以来继续搞事情,底下那么多的空白让强迫症患者肯定很不舒服,加点东西,然后加个滑动窗口。来加一点文字吧,比如就是我们地球的简介。先从百度百科上复制一点文字下来:“地球(Earth)是太阳系八大行星之一,按离太阳由近及远的次序排为第三颗,也是太阳系中直径、质量和密度最大的类地行星,距离太阳1.5亿公里。地球自西向东自转,同时围绕太阳公转。现有40~46亿岁, [1]  它有一个天然卫星——月球,二者组成一个天体系统——地月系统。46亿年以前起源于原始太阳星云。地球赤道半径6378.137千米,极半径6356.752千米,平均半径约6371千米,赤道周长大约为40076千米,呈两极稍扁赤道略鼓的不规则的椭圆球体。地球表面积5.1亿平方公里,其中71%为海洋,29%为陆地,在太空上看地球呈蓝色。地球内部有核、幔、壳结构,地球外部有水圈、大气圈以及磁场。地球是目前宇宙中已知存在生命的唯一的天体,是包括人类在内上百万种生物的家园。”然后加进去。再设置一下状态栏。

    .hello_group{
        background: #0c960c;
        width: 750rpx;
        height: 700rpx;
        display:flex; 
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    
    }
    .hello_text
    {
         color: #fff;
         font-size: 100rpx;
    }
    .world_text{
        color: #fff;
        font-size: 30rpx;
        margin-top: 70rpx;
    
    }
    .world_image{
      width: 500rpx;
      height: 500rpx;
      border-radius: 50%
    }
    .brif_group{
    
        margin-top: 20rpx;
        margin-bottom: 80rpx;
        margin-left: 20rpx;
        margin-right: 20rpx;
    }
    .brif_title{
        color: #13b3e4;
        margin-bottom: 20rpx;
        font-size: 50rpx;
    }
    
    .brif_content{
    font-size: 25rpx;
    
    }

     

    <view class = "hello_group">
      <view class = "hello_text">{{hello}}</view>
      <view class = "world_text">{{world}}</view>
      <image class = "world_image" src = "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1879049657,3980794066&fm=11&gp=0.jpg"></image>
    </view>
    <view class = "brif_group">
        <view class = "brif_title">地球(Earth)</view>
        <text class = "brif_content">太阳系八大行星之一,按离太阳由近及远的次序排为第三颗,也是太阳系中直径、质量和密度最大的类地行星,距离太阳1.5亿公里。地球自西向东自转,同时围绕太阳公转。现有40~46亿岁, [1]  它有一个天然卫星——月球,二者组成一个天体系统——地月系统。46亿年以前起源于原始太阳星云。地球赤道半径6378.137千米,极半径6356.752千米,平均半径约6371千米,赤道周长大约为40076千米,呈两极稍扁赤道略鼓的不规则的椭圆球体。地球表面积5.1亿平方公里,其中71%为海洋,29%为陆地,在太空上看地球呈蓝色。地球内部有核、幔、壳结构,地球外部有水圈、大气圈以及磁场。地球是目前宇宙中已知存在生命的唯一的天体,是包括人类在内上百万种生物的家园。
        </text>
    </view>

    app.json

    {
      "pages":[
        "pages/index/index"
      ],
    
      "window":{ 
        "backgroundTextStyle": "light", 
        "navigationBarBackgroundColor": "#fff", 
        "navigationBarTitleText": "Hello", 
        "navigationBarTextStyle": "black" 
      }
    }
    

                                             

            还有很多没有写,下一篇再继续,太多了看起来累,刚刚开始学习,感觉基本的操作就是先写很多个容器,然后往容器里填写东西,然后再设置一下样式。


    参考


    https://developers.weixin.qq.com/miniprogram/dev/reference/

    https://developers.weixin.qq.com/miniprogram/dev/component/

    展开全文
  • 微信公众号在编辑模式下,设置菜单很容易,开发者模式不同,需要用代码实现。 开发者模式下的菜单是通过请求微信指定的接口获取的,接口地址是:POST(请使用https协议)http请求方式:POST(请使用https协议) ...
  • 1.当我们的布局为默认,也就是flex-direction: row;的时候, justify-content: center;是左右居中,align-items: center;是上下居中。 而当我们的布局是flex-direction:column;的时候,上面刚好完全反过来。...
  • 1、如何插入能自动播放图片的幻灯片?...实例代码: index.wxml: <view class="selection" style="border:0;"> <swiper indicator-dots="true" autoplay="true" interval="3000" dura...
  • 开发者工具预览,顺序是对的 真机运行也是好的 直接手机预览、体验预览,不按套路出牌了 捉鸡捉鸡捉鸡捉鸡捉鸡捉鸡捉鸡 自己测试: 一、我以为 for 循环的 key 冲突了,全部检查一遍,确保 key 不冲突 二、将 ...
  • 某项目程序员A因为xxx原因,写了一行烂代码(如图1一行烂代码),项目千辛万苦熬到交接。B接手项目,增加功能,修改代码;然后C继续维护…… 直到某一天X接手这个项目,项目已经很难维护了,成本飙升,甚至有些新的...
  • 仿微信通讯录右侧快速定位字母表控件 先看效果图: 界面比较单调,凑合看,主要看功能。这种控件在很多应用的通讯录的界面,MIUI里面的通讯录都有这个功能,其实这是一个自定义View, 相对来说,这个并不是一个...
  • 微信小程序最基本代码入门

    万次阅读 多人点赞 2019-08-26 14:22:50
    微信小程序的简单实现 小程序是最近十分受欢迎的一项创新,因其简单方便,不需要大内存下载。随进随用。所以小程序和小游戏的用户日益剧增。小程序之所以如此受欢迎,是因为它符合现代人的生活,不用巨大的安装包...
  • 主要包括 Flex 容器属性和 Flex 项目属性Flex 容器属性 flex-direction:项目元素排列的方向 row:项目从左向右排列 row-reverse:项目从右向左排列 column:纵向对齐排列,从上到下 column-reverse:反转纵向...
  • #####下面我将手把手地教大家如何开发自己的第一个微信小程序实例–...注意:在代码块中的/xxx或//xxx代表着注释,不是代码的一部分!! 第一步 打开我们的微信开发工具(之前的教程有,这里就不再重新交) 第...
  • 微信公众平台消息接口 微信公众平台开发 微信公众平台开发模式 快递查询 作者:方倍工作室原文:http://www.cnblogs.com/txw1958/archive/2013/03/12/weixin-if7-express.html   一、请求数据 快递100提供快递...
  • 本篇博客将介绍使用微信小程序制作简历的实现过程。 一:配置开发环境 开发环境搭载: 1.在浏览器搜索 微信开发者工具,进入官网进行下载...4.登录微信开发者工具进行初次体验 二:小程序公共信息配置 1.删除inde
  • 微信小程序入门教程+案例demo

    千次阅读 2018-01-19 01:18:39
    微信小程序入门教程+案例demo 尊重原创,转载请注明出处:原文...认清微信小程序开发其实,我觉得小程序就是将微信官方提供20+个基础组件(目前有26个)进行排列组合,然后加上一些css样式,对用户的操作进行反馈(调
  • 我们做一个产品之前,我们要明晰产品的功能和定位,现在要做的产品是一个国家兽药限量数据查询,定位于快速开箱即用,所以我们要开发一个微信小程序来实现这个产品。 页面原型 以下是设计的产品页面原型,我们可以从...
  • 微信开发者工具 Navicat12 2.创建 user 表 首先创建用户表,这里以 Navicat 工具为例 2.1 新建数据库 如果是第一次使用 Navicat,需要新建连接 点击左上角的 连接 -> 选择 MySQL… 设置连接属性 这里需要...
  • 微信小程序,横向布局,纵向布局

    万次阅读 2018-01-15 22:06:16
    1、概述从Android开发过来的,所以...Android里是把方向orientation 分为 horizontal 和vertical 2、代码wcss部分/* pages/test/layout.wxss *//*横向布局 */ .layout_horizontal{ height: 100rpx; display: flex;
  • 小程序云开发解放了开发者搭建服务器和运维的困扰,同时使用云开发进行核心业务开发能实现快速上线和迭代(和开发者已经使用的服务器兼容),它提供了三大基础能力支持: 云函数: 可以在云端运行的代码开发者只...
1 2 3 4 5 ... 20
收藏数 3,016
精华内容 1,206
关键字:

微信开发者快速排列代码