支付宝小程序4--->$spliceData、$batchedUpdates、getCurrentPage、SJS文件,路由

205 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第16天,点击查看活动详情

今天又继续学习了小程序,真的是发现微信的和支付宝的太多相似之处了,为什么这两个公司不出一套系统共用呢?头大

this.$spliceData()方法

  • 该方法也是用来更改页面中的data数据,只不过用法和setData用法不同。但是与es5中的splice方法是一样的。
  • page.prototype.spliceData({data数据:[]},callback)
  • 该方法第一个参数是一个对象,key为要修改的数据,value是个数组,value的第一个元素是要修改的元素起始位置(索引),第二个参数是截取几个元素,第三个参数以后都是要插进去的元素 事件 | 类型 | 描述 | | -------- | -------- | ------------------- | | data | Object | 待改变的数据。 | | callback | Function | 回调函数,在页面渲染更新完成之后执行。
//axml文件
<view class="spliceData">
  <view a:for="{{b}}" key="{{item}}" style="border:1px solid red">
    {{item}}
  </view>
</view>
<button size="default" type="primary" onTap="handleSplice">Button</button>
//js文件
 handleSplice(){
    this.$spliceData({ 'b': [1, 0, 5, 6] });
  },

this.$batchedUpdates(callback)方法

作用:批量更新数据

//axml文件代码

<view>{{counter}}</view>
<button onTap="plus">+2</button>

//js文件代码
Page({
  data: {
    counter: 0,
  },
  plus() {
    setTimeout(() => {
      this.$batchedUpdates(() => {
        this.setData({
          counter: this.data.counter + 1,
        });
        this.setData({
          counter: this.data.counter + 1,
        });
      });
    }, 200);
  },
});
  • 这里不写setTimoute也没有什么影响
  • setData 放在 this.$batchedUpdates 中,这样尽管有多次 setData,但是却只有一次数据的传输。

getCurrentPages 方法

  1. 这个方法和getApp()方法是一样的作用,这个方法获得的是页面的实例,而getApp()获得的是全局的唯一app实例。
  2. getCurrentPages() 获取当前页面栈的实例,将页面栈的数据以数组的形式返回。第一个元素为首页,最后一个元素为当前页面。
  3. 小程序以栈的形式维护当前的所有页面。路由切换与页面栈的关系如下:
路由方式页面栈表现
初始化新页面入栈。
打开新页面新页面入栈。
页面重定向当前页面出栈,新页面入栈。
页面返回当前页面出栈。
Tab 切换页面全部出栈,只留下新的 Tab 页面。

注意: 不要尝试修改页面栈,会导致路由以及页面状态错误。

在开发过程中,也会遇到一些常见的问题,如下:

  1. 问题一:getCurrentPages 方法怎么获取页面路径?
  • 解答:getCurrentPages()[N].route,可以获取到页面路径(N 为页面数组栈中页面对象所在序号,最大值为当前页)。
  1. 问题二:getCurrentPages 方法可以获取到参数吗?
  • 解答:不可以,只能获取页面栈,无法获取参数。

this.routerthis.pageRouter

这两个方法都可以获取页面的路由对象。然后调用路由对象的switchTabredirectToreLaunchnavigateTonavigateBack五个方法,对应的进行路由跳转。

1.png

2.png

sjs文件

  • SJS 是 JavaScript 语言的子集,并不等同于 JavaScript。

  • SJS文件和微信小程序中的WXS文件作用是一样的,都可以减少逻辑层与视图层的通信,因为SJS也是运行在渲染层的。 运行环境

  • SJS 运行在小程序渲染层,与小程序的 JavaScript 运行环境(逻辑层)隔离,因而不能调用 JS 文件中定义的函数,也不能调用小程序提供的 API。

  • SJS 中定义的函数可用于响应基础组件的事件以避免逻辑层和渲染层的频繁通信,但有一定的限制。

<!-- sjs文件 -->
var message = "sjs文件";
let arr= [666,777,888]
export default {message,arr}

<1-- axml文件引入sjs文件 -->
<import-sjs from="../index/index.sjs" name="sjs" />
<view>
  {{sjs.message}}
</view>

<!-- 在其他sjs文件中引入-->
import { arr } from './index/index.sjs'