如何在微信小程序js文件注释快捷键

1、JS的注释一般是双斜杠 //  或者是 // 这样的块注释；而json 是配置文件，其内容必须符合JSON格式，所以文件内部不允许有注释。

2、appjson 是全局配置文件，微信小程序中的每一个页面的路径+页面名都需要写在 appjson 的 pages 中，且 pages 中的第一个页面是小程序的首页 。

注意事项：

1、wxss 文件是样式表文件，appwxss是全局的样式表文件。页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 appwxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 appwxss 中指定的样式规则。 json 文件具有相同的规则。 每一个页面的路径名和文件名必须相同。

2、tabBar（客户端窗口的底部用于切换页面的tab栏）在 appjson 文件中配置，只能配置最少2个、最多5个 tab，显示顺序同tabBar标签下的pei 。

3、 tabBar 的 iconPath 和 selectedIconPath 属性可以接受一个的路径，这个必须是本地不能是网络。

4、像素单位最好使用 rpx ，微信会根据手机屏幕大小自适应。 微信小程序存放资源文件，需要在根目录下创建文件夹，引用时以 /文件夹名/资源名 的形式引用。

5、一个应用同时只能打开5个页面。wxnavigateTo 打开页面不会销毁之前的页面，如果页面层数较多注意使用 wxredirectTo。

一、微信小程序的wxml

具有基本的编程经验的工程师，只有与wxml接触后，您才会发现该语言的编程概念类似于html网页的编程技术。经过一番研究和开发，您会知道微信小程序的要求技术含量不高，只是更换了一些标签，例如

已替换为等待状态。即使您不太擅长前端，转用微信小程序的发展也将是一个很好的方向。

二、微信小程序的wxss

wxss是微信的CSS。微信用自己的开发语言wxss代替了Web编程中使用的css；实际上，主要的实现思想与Web开发技术基本相同，并且它只是对某些标签的简单替换，其中大部分是原始的CSS，基本上是正确的。它们都是通过调用同一页面来实现的，但是可以说，微信小程序比Web开发更简单，更方便。例如，只要写入indexwxml和indexwxss，它就位于两个文件中。这两个文件同时位于同一目录中，就像直接在网页上写CSS一样，这既简单又快速。

三、微信小程序的js

如果要开发微信小程序，您必须精通微信小程序的js。只要您具有html+css+js的良好基础，就可以全力学习微信小程序js，然后在前端进行开发。上面没有问题，但是微信js需要努力学习。您可以购买参考书或了解微信小程序的API，它们可以快速帮助您参与开发队列。

四、微信小程序的json

掌握了以上几点之后，您需要掌握json。简而言之，json是微信小程序的主要和次要接口。工程师可以通过json控制上下菜单栏，主要和辅助页面的显示顺序。但是，使用频率不高。它仅适用于基本小程序的框架，但这也需要学习，因为除显示类型外，每个前端 *** 作都需要与后端匹配，因为如果要使其放大，则必须之所以简化，是因为修改代码后，在迷你程序中搜索到的版本就是启动后的版本，即我们提交微信评论后显示的版本。修改源代码后，需要将其提交给微信公众进行审核。平台小程序管理平台，用户只能在审核通过后才能看到您的修改，因此，为避免这种麻烦，您必须了解后端技术开发并与前端链接以与您进行交流。

实际上，小程序类似于H5表面，并提供了视图层描述语言。您需要掌握WXML和WXSS以及基于JavaScript的逻辑层框架。这里的wxml等同于html，而wxss等同于CSS。

新建一个微信小程序0607，完成后，大致架构如图：



2/10

在appjson中，调整一下test的位置，放在第一位；

便于运行后，直接显示testwxml文件，如图：



查看剩余1张图

3/10

在testwxml中输入以下代码，添加一个按钮，运行后如图所示：

功能：点击按钮后，跳转到日志界面。

<button type="primary">跳转到日志界面</button>



4/10

给上面的按钮添加点击事件，因为跳转到日志界面，在本程序中，日志界面属于tabBar页面（在appjson中注册过的tabBar页面），所以使用wxswitchTab 进行跳转；代码如下：



查看剩余1张图

5/10

在appjson中注册一个界面new，如图：



6/10

在testwxml中添加按钮，点击按钮后跳转到newwxml界面，如图：



查看剩余1张图

7/10

在testjs中添加跳转代码，如图：

点击按钮后，即可跳转到新页面newwxml



查看剩余1张图

8/10

在newwxml中添加按钮，功能：返回上一页

具体代码如图：



9/10

添加对应的j，跳转代码，如图:



10/10

运行后，点击即可在test界面和new界面之间相互跳转，

小程序的wxs功能可以让wsmxl可以调用和编写js,基本上wxs和JS无关系,只是语法形式很相似。

如下写了两个关于时间的函数，并将它们导出，

<wxs module="m1">

var getMax = function(flightDate) {

    var now = getDate()getDate();

    var flDate = getDate(flightDate)getDate();

    if( now < flDate ){

      return '+1';

    }else{

      return '';

    }

}

var formartTime = function(flightDate,format){

  if(flightDate){

    var realDate = getDate(flightDate);

    function timeFormat(num) {

      return num < 10 '0' + num : num;

    }

    var date = {

      "Y": timeFormat(realDategetFullYear()),

      "M": timeFormat(realDategetMonth() + 1),

      "d": timeFormat(realDategetDate()),

      "h": timeFormat(realDategetHours()),

      "m": timeFormat(realDategetMinutes()),

      "s": timeFormat(realDategetSeconds()),

      "q": Mathfloor((realDategetMonth() + 3) / 3),

      "S": realDategetMilliseconds(),

    };

    if (!format) {

      format = "yyyy-MM-dd hh:mm:ss";

    }

    if( format == 'hh:mm' ){

        return dateh+':'+datem;

    }else{

        return dateh+':'+datem;

    }

  }else{

    return false;

  }

}

moduleexportsgetMax = getMax;

moduleexportsformartTime = formartTime;

</wxs>

可在页面添加如下使用：

m1formartTime(）;  m1getMax(）;

建立两个canvas标签，先绘制底层的浅灰色圆圈背景，再绘制上层的红色进度条。

WXML代码

开始动态绘制

WXSS代码

特别注意：底层的canvas最好使用

z-index:-99；放置于底层

page { width: 100%; height: 100%; background-color: #fff;

}circle-box { text-align: center; margin-top: 10vw;

}circle { position: absolute; left: 0; right: 0; margin: auto;

}draw_btn { width: 35vw; position: absolute; top: 33vw; right: 0; left: 0; margin: auto; border: 1px #000 solid; border-radius: 5vw;

}

JS代码

//获取应用实例var app = getApp()var interval;var varName;var ctx = wxcreateCanvasContext('canvasArcCir');

Page({ data: {

}, drawCircle: function () {

clearInterval(varName); function drawArc(s, e) {

ctxsetFillStyle('white');

ctxclearRect(0, 0, 200, 200);

ctxdraw(); var x = 100, y = 100, radius = 96;

ctxsetLineWidth(5);

ctxsetStrokeStyle('#d81e06');

ctxsetLineCap('round');

ctxbeginPath();

ctxarc(x, y, radius, s, e, false);

ctxstroke()

ctxdraw()

} var step = 1, startAngle = 15 MathPI, endAngle = 0; var animation_interval = 1000, n = 60; var animation = function () { if (step

以上就是关于如何在微信小程序js文件注释快捷键全部的内容，包括:如何在微信小程序js文件注释快捷键、微信小程序是用什么技术实现的、微信小程序 js 如何点击进入新的界面等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！