;

小程序用户代码技术讲解

2022-08-25 阅读:373
;
您当前位置:首页 | 新闻列表 | 新闻详情

用户代码片段

场景:

此代码片段非彼代码片段。用户代码片段,这个功能是做什么用的呢?简单的说就是代码提示功能,用户通过自定义的方式,来将一些经常使用的代码封装成模板,从而的能够快速书写出来。不管你写什么代码,在编辑器肯定有提示功能,但是肯定会碰到一些代码是没有提示的,但是你又经常手敲或复制粘贴,就会降低了程序开发的效率,这时候用户代码片段就可以帮你解决这个问题。

打开微信小程序开发者工具,找到文件-首选项-用户代码片段,你可以选择现有代码片段进行编辑或者新建代码片段,新建则键入文件名,按下Enter完成创建

成功后是这样一个文件,已经给你举了个例子

参数说明:

{ //整个对象集合,你可以将你常用的模板全部放这一个对象里面,每个模板对象用逗号分隔 "Print to console": { //模板的名称,也是在你键入代码快捷键时右边的提示  "scope": "javascript,typescript", //片段用于的范围,在范围字段中添加代码段适用的语言的逗号分隔。如果范围为空或省略,则代码段将应用于所有语言。 "prefix": "log", //前缀,快捷键,触发的模板提示的关键词 "body": [ //正文,整个模板内容,后面细讲 "console.log('$1');", "$2" ], "description": "Log output to console" //说明,对代码片段的详细说明(可省略,如果description不写,默认会显示key键的内容) }
}

body内容说明:

1、$1,$2...表示制表位,$0表示最终光标位置,${1:label},${2:other}表示占位符,将连接具有相同ID的占位符,通过Tab键切换下一个光标位置。

2、\n 表示回车。

3、空格代表一个字符,tab为两个,主要用于代码缩进。

4、body 是一个数组,数组的每一项就是一行代码,所以如果你的代码是多行的话,就写成一个数组形式,如果项里还有双引号,需要在双引号前用进行转义。

5、变量提示,${变量,提示内容},如:${1,参数为String、Number}

6、枚举值提示,${变量|枚举值|},多个枚举值用英文逗号分隔,如:${1|barCode, qrCode|}

7、特殊变量, $变量名 如:$CURRENT_MONTH_NAME https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables

8、代码片段生成器:https://99cc.vip/public/tools/vscode_snippet/index.html 或 https://snippet-generator.app/

示例文件:

{
  "page快速模板":{
    "prefix":"pg",
    "body":[
    "Page({",
    "  /**",
    "  * 页面的初始数据",
    "  */",
    "  data: {\n    ${1:Name}:${2:value},",
    "  },",
    "  /**",
    "  * 用户点击右上角分享",
    "  */",
    "  onShareAppMessage(){",
    "",
    "  },$0",
    "})"     ],
  },
  "当前时间打印内容":{
    "prefix":"clg",
    "body":"console.log('$CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND:$1')"   },
    "v-for模板": {
    "prefix": ":vf",
    "body": ["wx:for='{{$1}}' wx:key='{{$2}}' bindtap='$3' data-$4='{{$5}}'"],
    "description": "v-for"   },
  "return false": { "prefix": "rf", "body": [ "return false;",
		], "description": "函数无返回值时使用" },
  "图片": {
    "prefix": "tp",
    "body": [
      "<image src=\"{{${1}}}\" mode=\"${2|scaleToFill,aspectFit,widthFix,heightFix|}\"></image>"     ],
    "description": "图片"   }
}
上一篇:你如何看待定制开发小程序呢? 下一篇:哪家微信小程序开发公司好?

推荐信息

更多+

    联系我们

  • 电话 :134-8274-2882
  • QQ:1059681242
  • 邮箱:haoljq@163.com
  • 地址:上海市松江区米易路166号交科医疗健康产业园(2楼)

友情链接:

小程序开发 小程序定制开发 小程序商店 微信小程序开发文档 分销商城小程序 电商小程序开发 百家号 商城小程序 微信小程序开发API 全平台开发 网站建设 外包开发 自主研发产品

热门地区:

松江开发公司 青浦开发公司 崇明开发公司 杨浦开发公司 宝山开发公司 奉贤开发公司 虹口开发公司 闵行开发公司 长宁开发公司 静安开发公司 黄浦开发公司 嘉定开发公司 徐汇开发公司 金山开发公司 上海开发公司 南昌开发公司 杭州开发公司 上饶开发公司

COPYRIGHT 2009-2016 www.guanzhiweb.com ALL RIGHTS RESERVED

版权所有 上海观智网络科技有限公司

在线
客服

在线客服服务时间:9:00-21:00

选择下列咨讯方式马上在线沟通:

客服
热线

134-8274-2882
小程序定制开发已服务600+

特价
商城

商城小程序助力每个商家获客盈收

来电咨讯获取商城方案,报价功能清单

小程
序码

扫码加微信咨询
顶部