小程序前端画代码动作手册


前端画代码本质是可以替代我们自己手动写代码封装成一个函数,只需要根据需求点击想要的方法和设置好所需参数从而得到想要的返回值或者执行某个动作后(如视频的开始播放)之后在继续执行某个逻辑.

画代码中提供的动作分为组件类,上下文变量,工具类以及辅助动作类。下面会着重介绍组件类里关于业务数据(restData)的各种动作的作用.


业务数据:

Data组件是前端model上的数据核心,Data组件上的数据是二维表结构,即行列结构使用前请先理解列,行以及游标的概念.

  1. Data组件的列定义:
    1. 说明:列定义包括:name、type、label,
      1. name:列的唯一标识.
      2. type:列的数据类型,取自范围:String、Integer、Long、Float、Double、Decimal、Boolean、Date、Time、DateTime
      3. label:列显示名称,当没有定义时,label为name
      4. idColumn:用来指定Data数据中行ID的表示列,可以理解为关系型数据库中表上定义的key关系.
  2. Data组件的行定义:
    1. 首先Data组件的数据存放在Data.datas上,Data.datas是可观察的数组(这里我们就把他理解成简单的数组),数组上的每一个项就是行。通过行上扩展parent和children,很轻松就扩展出了Tree型数据结构.
  3. Data组件的游标定义:
    1. Data组件的游标指的就是Data组件的当前行,即:Data.currentRow,所有API和组件数据引用在没有显示指定行参数时使用的都是当前游标行.

  1. 保存全部数据:
    1. 说明:当前目标数据执行一次保存逻辑,向后端提交修改的所有修改新增数据.
    2. 设置相关:无.
    3. 相关API: data. saveAllData() .
  2. 设置指定名称的过滤表达式:

    1. 说明:通过表达式的定义去过滤数据的某一列,然后返回该列中符合的数据.

    2. 设置相关:

      1. 过滤名称:自定义过滤的名称

      2. 过滤表达式:可以设定选择某一列,然后在这列中例如设定大于某一个值,然后返回这列中符合条件的数据.

    3. 实例:

      1. 根据当前商品ID去过滤数据表中当前商品的相关评论,之后返回过滤后的数据表信息

        1. 第一个动作声明一个变量,变量初始值设置成当前商品的ID.

        2. 第二个动作设置指定名称的过滤表达式,过滤名称自定义设置注意是字符串类型时添加双引号,过滤表达式中选择商品ID列 等于 第一步声明的当前商品ID.

        3. 第三个动作调用数据刷新操作,数据刷新后会引起前端页面的数据重新渲染以达到只加载当前商品ID相关的所有操作.

    4. 相关API:

      1. data.setFilter('filter1',"ID='值'");
  3. 数据查找:

    1. 说明:通过列以及值来查找数据集里所有行中的目标列中符合条件的值,之后返回一个集合。

    2. 设置相关:

      1. 列:数据中的列.

      2. 值:自定义一个值或者变量.

      3. 返回第一条:布尔值,是否只是返回第一条,即查找到第一条符合条件的数据就返回,默认值:false.

      4. 忽略大小写:布尔值,匹配时忽略大小写,默认值:false.

      5. 模糊查询:布尔值,即数据中包含需要匹配字符就算匹配成功,默认值:false.

    3. 场景实例:

      1. 通过数据查找方法在所有商品的所有评论中得到当前商品的相关所有评论的个数.

        1. 第一个动作进行变量声明,变量初始值设置成当前商品ID.

        2. 第二个动作进行数据查找,列列表设置评论数据中的商品ID列,值设置成第一步声明的变量,然后设置一个返回值(此时这个返回值是个数组)。

        3. 第三个动作在声明一个变量等于第二步中得到的返回值,因为这个返回值是个数组,我们直接等于该返回值.length,此时就可以拿到当前商品的相关评论个数.

      2. 通过数据查找方法在所有商品的所有评论中得到当前商品的相关所有评论中好评的个数

        1. 第一个动作进行变量声明,变量初始值设置成当前商品ID.

        2. 第二个动作进行变量声明,变量初始值设置成“好评”.

        3. 第三个动作进行数据查找,列列表设置评论数据中的商品ID列和评价等级列,值ID列设置成第一步声明的变量,评价等级列设置成第二步声明的变量,然后设置一个返回值(此时这个返回值是个数组).

        4. 第四个动作在声明一个变量等于第二步中得到的返回值,因为这个返回值是个数组,我们直接等于该返回值.length,此时就可以拿到当前商品的相关评论中好评的个数

    4. 相关API:data.find(['fName','fWeight'],['苹果',100]);

  4. 获取data的记录数:

    1. 说明:例如在分页的情况下,可以获取当前页加载了几条数据.

    2. 设置相关:

      1. 目标对象:选择获取哪个数据集的记录数.
    3. 相关API:

      1. data.getCount();
      2. data.count() ;
  5. 获取data的全部记录数:

    1. 说明: 返回data的全部记录数,包括分页没有加载的记录数

    2. 设置相关:

      1. 目标对象:选择获取哪个数据集的记录数.
    3. 相关API:

      1. data.getTotal();
  6. 根据行ID获取Row:

    1. 说明:根据传入的行的ID值,去数据里查找后返回这行ID所在的当前行,这样我们拿到了当前行就可以拿到这行数据里面包含的所有信息。

    2. 设置相关:

      1. 行:绑定数据中想要返回当前行的行ID.
    3. 相关API:

      1. data.getRowByID(当前行)
  7. 通过列名和行ID获取列的值:

    1. 说明:根据传入的列名和行的ID值,去数据里查找后返回这行ID值所在的当前行,然后我们通过列名可以拿到所在当前行的列的值.

    2. 设置相关:

      1. 行:传入想要返回当前行的行的ID。

      2. 列名:传入想要返回当前行的列名称.

    3. 实例:

      1. 例如数据在一个列表中进行循环渲染,我们想点击某一行然后获取这一行某个字段的当前值.

        1. 第一个动作获取data当前的行ID,使用返回值,新建变量名称例如currentRowID.

        2. 第二个动作通过列名和行ID获取列的值,列名设置你想获取当前行哪一列的数据,行设置成currentRowID(在上下文变量中),然后选择使用返回值,新建一个变量并进行命名.

    4. 相关API:

      1. data.getValueByID(行,列名)
  8. 获取data当前的行/行ID:

    1. 说明:获取到当前数据里的当前行/行ID,Data组件的游标指的就是Data组件的当前行,即:Data.currentRow,例如在循环中就有不同的当前行,调用此方法可以获取到游标所在的当前行数据.

    2. 设置相关:无.

    3. 相关API:

      1. data.getCurrentRow();

      2. data.getCurrentRowID() ;

  9. 当前是否是第一行/最后一行:

    1. 说明:此动作用来判断游标所在当前行是否是第一行/最后一行,返回值是布尔值。

    2. 设置相关:无.

    3. 相关API:

      1. data.bof()-----------------当前是否是第一行

      2. data.eof()----------------- 当前是否是最后一行

  10. 获取data的第一行/最后一行:

    1. 说明:执行动作后返回当前目标数据的第一行/最后一行数据。

    2. 设置相关:无.

    3. 相关API:

      1. data.getFirstRow()----------------- 获取data第一行

      2. data.getLastRow()----------------- 获取data最后一行

  11. 移动第一条/最后一条/下一条/上一条/指定条:

    1. 说明:游标滚动方式,这种方式由于刺激了当前行的变化,所有绑定当前行的数据感知组件都会进行变化渲染,例如现在加载一行数据,在满足一定逻辑条件后,想加载下一条数据或者某一条数据,这样就可以使用此类方法完成数据的重新加载.

    2. 设置相关:无.

    3. 实例:

      1. 答题的场景

        1. 答题数据在LIST里做渲染时只渲染了当前行数据(列表内做数据绑定的显示元素的动态隐藏中设置当前列数据不等于当前行数据),也就是游标所在行.

        2. 当用户选择完答案后,进入下一题目. 直接调用动作移动到下一条。

    4. 相关API:

      1. data.first();-----------------游标到首行

      2. data.last();------------------游标到末尾行

      3. data.next();------------------游标到下一行

      4. data.pre();-------------------游标到前一行

      5. data.to(row);-----------------滚动游标到指定行

  12. 获取列值:

    1. 说明:通过传入的列的名称和哪一行来查找那一行数据中该列的值.

    2. 设置相关:

      1. 列名称:数据中的列名称。

      2. 行:可以传入当前行或者是某一行.

    3. 实例:

      1. 例如数据在一个列表中进行循环渲染,我们想点击某一行然后获取这一行某个字段的当前值.

        1. 第一个动作获取data当前的行,使用返回值,新建变量名称例如currentRow.

        2. 第二个动作获取列值,列名称设置成想要获得的当前行中某一列的值,行设置成currentRow(在上下文变量中),然后使用返回值,新建一个变量并命名.

    4. 相关API:

      1. data.getValue(列,行);
  13. 设置列值:

    1. 说明: 通过传入列的名称和哪一行查找到的哪一行数据中该列的值,然后把该值替换成传入设置的值.

    2. 设置相关:

      1. 列名称:数据中的列名称。

      2. 值:要替换设置的值.

      3. 行:可以传入当前行或者是某一行.

    3. 实例:

      1. 例如数据在一个列表中进行循环渲染,我们想点击某一行后改变这一行里某个字段的当前值.

        1. 第一个动作获取data当前的行,使用返回值,新建变量名称例如currentRow.

        2. 第二个动作设置列值,列名称设置成想要设置值的那一列,值设置成想要替换的值,行设置成currentRow(上下文变量中)就可以了.

    4. 相关API:

      1. data.setValue(列,值,行).
  14. 数据刷新:

    1. 说明:业务数据刷新,会刺激从data级联刷新,当limit!=-1时取第一页数据,当limit=-1时取全部数据.

    2. 相关API:

      1. data.refreshData();
  15. 加载数据:

    1. 说明:把一组JSON数据加载到一个数据集中.

    2. 相关API:

      1. data.loadData()
  16. 新增数据:

    1. 说明:在目标数据集中新增一条数据。插入位置设置为0,表示在最前面插入新数据.

    2. 相关API:

      1. data .newData() ;
  17. 保存数据:

    1. 说明:业务数据保存方法,向后端提交修改的数据,包括从Data数据,例如在用户使用的时候输入改变了一些值,触发此操作会把值存入到数据库中。

    2. 相关API:

      1. data. saveData() ;
  18. 删除数据:

    1. 说明:调用操作后根据传入的当前行,删除该行的数据.

    2. 相关API:

      1. deleteData(rows) // rows 删除的行或者行数组 缺省为当前行
  19. 数据序列化:

    1. 说明:把当前数据集进行JSON序列化,返回一个JSON数组.

    2. 相关API:

      1. data.toJson() ;

关于上下文对象:

即执行函数会创建一个称为执行上下文的内部对象,用于存储执行上下文中的变量 、函数声明 、函数参数,这解释了js如何找到我们定义的函数和变量,一个执行上下文定义了一个函数执行时的环境。每个执行上下文都有自己的作用域链.

在我们前端画代码中,涉及的上下文的变量基本分为俩类:

  1. 数据Data只读上下文包括:
    1. $model : 前端model对象.
    2. $data : data组件对象
  2. 表达式上下文包括:
    1. $model : 前端model对象
    2. $data : data组件对象
    3. $row : 计算的行对象
    4. $rowID : 计算的行ID
    5. $col : 列名

关于辅助动作:

  1. 声明变量:
    1. 说明:变量是存储信息的容器,是命名的内存空间,可以使用变量名称找到该内存空间.用var 来声明了一个变量,若没有初始化,不报错,会输出undefined。其值之后可以修改,变量定义完成后,可以存储任意类型的数据。
    2. 设置相关:
      1. 变量初始值:给当前变量的初始赋值.
      2. 变量名称:定义变量时要使用 var 操作符(var 是关键,表示的变量),后面跟一个变量名(变量名是标识符)。
    3. 注意事项:
      1. 变量命名必须以字母或是下标符号”_”或者”$”为开头.
      2. 变量名长度不能超过255个字符。
      3. 变量名中不允许使用空格,首个字不能为数字。
      4. 不用使用脚本语言中保留的关键字及保留符号作为变量名。
      5. 变量名区分大小写。(javascript是区分大小写的语言).
  2. 修改变量:
    1. 说明:给目标变量重新赋值。
    2. 设置相关:
      1. 变量值:给目标变量要赋的值.
      2. 变量名称:可以选择给当前环境声明的哪个变量进行重新赋值.
  3. 退出循环:
    1. 说明:在一个循环的动作中,调用此动作会终止当前循环,类JS循环中的break用法.
  4. 调用原生函数:
    1. 说明:当您想使用自定义封装的函数方法时,可以通过此动作选取您自定义封装的方法来达到需求的结果.
    2. 设置相关:
      1. 模块路径 您在IDE里自定义新建的包含自定义封装方法的JS文件路径 例 $UI/main/example .
      2. 方法名: 引入模块路径地址的JS文件内所包含的某个自定义函数方法的名称.
      3. 参数一: 调用函数方法时传入的参数,没有可不填入.
      4. 参数二:调用函数方法时传入的参数,没有可不填入.
      5. 参数三: ........................................
      6. 参数四:.........................................
    3. 使用实例说明:
      1. 步骤一:关于模块路径的获取和自定义文件方法的操作
      2. 步骤二:在画代码中的操作设置:
      3. 步骤三:调用函数方法后拿到需求结果:

操作扩展:

  1. 打开子页面:
    1. 说明:用于打开当前环境下的某个页面。
    2. 设置相关:
      1. 页面源:可以选择打开哪个页面。
      2. 共享数据集:打开的页面和当前页面共享的数据。
      3. 参数:当前页面携带的参数,在打开的页面可以拿到该参数.
  2. 关闭当前页面:
    1. 说明:关闭当前所在页面。
    2. 设置相关:无.

微信相关API:

  1. 显示提示框:
    1. 说明:小程序的的显示消息提示框API.
    2. 相关API:wx.showToast(OBJECT).
    3. 相关设置:
      1. 标题:提示的内容.
      2. 图标:有效值 "success", "loading", "none".
      3. 等待时间:提示的延迟时间,单位毫秒,默认:1500.
      4. 透明蒙层:是否显示透明蒙层,防止触摸穿透,默认:false.
    4. 注意:当icon显示成功或者加载图标时,此时 title 文本最多显示 7 个汉字长度。默认值,当为"none"不显示图标的时候title文本最多可显示为2行.
  2. 拨打电话:
    1. 说明:小程序的拨打电话.
    2. 相关API:wx.makePhoneCall(OBJECT).
    3. 设置相关:
      1. 电话号码:需要拨打的电话号码.
  3. 隐藏提示框:
    1. 说明:小程序的隐藏消息提示框.
    2. 相关API:wx.hideToast().
    3. 设置相关:无.
  4. 设置页面标题:
    1. 说明:小程序的动态设置当前页面的标题.
    2. 相关API:wx.setNavigationBarTitle(OBJECT) .
    3. 设置相关:
      1. 标题:页面标题.
  5. 显示导航条加载动画:
    1. 说明:小程序的在当前页面显示导航条加载动画.
    2. 相关API:wx.showNavigationBarLoading().
    3. 设置相关:无.
  6. 隐藏导航条加载动画:
    1. 说明:小程序的在当前页面隐藏导航条加载动画.
    2. 相关API:wx.hideNavigationBarLoading().
    3. 设置相关:无.
  7. 保留当前页跳转:
    1. 说明:保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面.
    2. 相关API:wx.navigateTo(OBJECT).
    3. 设置相关:
      1. url: 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔.
    4. url参数设置实例:
      1. 'path?key=value&key2=value2'.
      2. 'https//www.baidu.com?name=lucy & age =18 '.
  8. 关闭当前页跳转:
    1. 说明:关闭当前页面,跳转到应用内的某个页面。
    2. 相关API:wx.redirectTo(OBJECT).
    3. 设置相关:
      1. url:需要跳转的应用内非 tabBar 的页面的路径,路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔.
    4. url参数设置实例:
      1. 'path?key=value&key2=value2'.
      2. 'https//www.baidu.com?name=lucy & age =18 '.
  9. 跳转到 tabBar 页面:
    1. 说明:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面.
    2. 相关API:wx.switchTab(OBJECT).
    3. 设置相关:
      1. 路径:需要跳转的 tabBar 页面的路径(需在 app.json 的 tabBar 字段定义的页面),路径后不能带参数.
  10. 关闭当前返回:
    1. 说明:小程序的关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。
    2. 设置相关:
      1. 返回的页面数:Number类型,如果 数字 大于现有页面数,则返回到首页。

使用组件时,在画代码中组件的动作:

  1. 音频:
    1. 设置音频
      1. 音频地址:要播放音频的资源地址.
      2. 相关API: setSrc()
    2. 跳转到指定位置
      1. 指定位置:跳转到指定位置,单位 s.
      2. 相关API:seek()
    3. 播放
      1. 相关API: play()
    4. 暂停
      1. 相关API: pause()
    5. 实例说明:
      1. this.audioCtx = wx.createAudioContext('myAudio') 创建一个实例 audio 对象
      2. this.audioCtx.setSrc ("https//www.音频的网络地址") 设置播放音频的路径.
      3. this.audioCtx.seek(14) 跳转到14秒
      4. this.audioCtx.play() 开始播放音频
      5. this.audioCtx.pause() 暂停播放音频.
  2. 地理位置:

    1. 使用微信内置地图查看位置:

      1. 相关API: wx.openLocation(OBJECT)

        1. 打开地图选择位置:

          1. 此动作返回选择位置成功的值,可以选择新建一个变量等于返回值。

          2. 返回值信息包含:

            1. name :位置名称。

            2. address: 位置的详细地址.

            3. latitude :纬度,浮点数,范围为-90~90,负数表示南纬。使用 gcj02 国测局坐标系.

            4. longitude:经度,浮点数,范围为-180~180,负数表示西经。使用 gcj02 国测局坐标系.

          3. 相关API:wx.chooseLocation(OBJECT).

      2. 获取当前地理位置:

        1. 说明:获取当前的地理位置、速度.

        2. 设置相关及返回值:

          1. 地理位置类型:默认为 wgs84 返回 GPS 坐标;gcj02 返回国测局坐标.

          2. 此动作返回获取当前位置成功的值,可以选择新建一个变量等于返回值.

          3. 返回值信息包含:

            1. latitude:纬度,浮点数,范围为-90~90,负数表示南纬.

            2. longitude:经度,浮点数,范围为-180~180,负数表示西经.

            3. speed:速度,浮点数,单位m/s.

            4. accuracy:位置的精确度.

            5. altitude:高度,单位 m .

            6. verticalAccuracy :垂直精度,单位 m(Android 无法获取,返回 0).

            7. horizontalAccuracy :水平精度,单位 m .

        3. 相关API:wx.getLocation(OBJECT).

  3. 导航栏:

    1. 根据序号跳转到指定的导航栏:

      1. 设置相关:

        1. 序号: Number 数字类型。
  4. 扫一扫:

    1. 说明:调起客户端扫码界面,扫码成功后返回对应的结果.

    2. 设置相关:

      1. 是否只能从相机扫码,不允许从相册选择图片:接受布尔值,true是只能从相机扫码,false时都可以.
    3. 返回值包含:

      1. result :所扫码的内容.

      2. scanType : 所扫码的类型.

      3. charSet:所扫码的字符集.

      4. path:当所扫的码为当前小程序的合法二维码时,会返回此字段,内容为二维码携带的 path.

      5. rawData:原始数据,base64编码.

    4. 相关API: wx.scanCode(OBJECT).

  5. 图片:

    1. 设置图片:

      1. 目标对象:提供下拉选择哪个图片.

      2. 图片地址:绑定数据字段或者通过逻辑获得的地址.

  6. 视频:

    1. 跳转到指定位置:

      1. 指定位置:跳转到指定位置,单位 s. 参数是Number 数字类型.

      2. 相关API: seek()

    2. 播放视频:

      1. 相关API: play().
    3. 暂停视频:

      1. 相关API: pause().
    4. 设置倍速:

      1. 倍速:设置倍速播放,支持的倍率有 0.5/0.8/1.0/1.25/1.5 .

      2. 相关API:playbackRate(0.5) .

    5. 进入全屏:

      1. 进入全屏,可传入{direction}参数.

        1. direction:设置全屏时视频的方向,不指定则根据宽高比自动判断。
          1. 有效值为 0(正常竖向).
          2. 90(屏幕逆时针90度).
          3. -90(屏幕顺时针90度).
      2. 相关API:requestFullScreen()

    6. 退出全屏:

      1. 相关API:exitFullScreen().
  7. 用户:

    1. 获取用户信息:

      1. 说明:调用此动作后会拿到当前登录用户的ID,名称等所有信息.

      2. API: this.comp(‘user’).getUser() .

    2. 修改用户信息:

      1. 说明:调用此动作后会对比当前修改后的用户信息与原来的用户信息,把差异更新上去.

      2. API: this.comp('user').updateCurUser( 参数).

        1. 参数是通过键值对设置后形成个JSON对象.
    3. 绑定手机号:

      1. 说明:调用此动作后会把当前输入的手机号和当前登录用户进行绑定,下次登录也可以使用这个手机号进行登录.

      2. 相关API: this.comp('user').execBindCurUserPhone().

    4. 显示登录页:

      1. 说明:调用此动作后会进入登录页面.

      2. 相关API: this.comp('user').login().

    5. 注销登录:

      1. 说明:调用此动作后会注销当前用户的登录状态.

      2. 相关API: this.comp('user').logout().

    6. 打开用户注册页:

      1. 说明:调用此动作后会进入用户注册页面.

      2. 相关API:this.comp('user').register().

    7. 打开用户信息页:

      1. 说明:调用此动作后会进入当前用户信息展示页面.

      2. 相关API: this.comp('user').showUser().

    8. 打开修改密码页面:

      1. 说明:调用此动作后会进入修改密码页面.

      2. 相关API: this.comp('user').changePassword().

    9. 注意关于用户在画代码中提供的动作API并非是小程序提供的,是平台内部封装的,如有需求也可以手写代码进行调用.

  8. 分享:

    1. 显示分享菜单:

      1. 显示当前页面的转发按钮.

      2. 相关API:wx.showShareMenu().

    2. 隐藏分享菜单:

      1. 隐藏当前页面转发按钮.

      2. 相关API: wx.hideShareMenu().

results matching ""

    No results matching ""

    results matching ""

      No results matching ""