开发者社区> 扬朋> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

支付宝小程序自定义脚本的使用

简介: 前言在开发支付小程序中,会有很多页面需要对数据进行二次处理再进行展示,而且大部分的处理方法是共用的,而在page对象里处理显然不是很方便,这种场景使用自定义脚本就会方便多了.概述SJS(safe/subset javascript)是小程序的一套自定义脚本语言,可以在AXML中使用其构建页面的结构.
+关注继续查看

前言

在开发支付宝小程序中,会有很多页面需要对数据进行二次处理再进行展示,而且大部分的处理方法是共用的,而在page对象里处理显然不是很方便,这种场景使用自定义脚本就会方便多了.

概述

SJS(safe/subset javascript)是zhif小程序的一套自定义脚本语言,可以在AXML中使用其构建页面的结构.

特性

  1. 只能定义在.sjs文件中.然后在.axml中使用import-sjs引入.
  2. 可以调用其他sjs文件中定义的函数.
  3. 不等同于javascript,是其子集.
  4. 运行环境和javascript代码是隔离的,在sjs中不能调用其他js文件中定义的函数,也不能调用小程序提供的API.
  5. sjs函数不能作为组件的事件回调.
  6. 不依赖运行的基础库版本,可以在所有版本的小程序中运行

使用示例

在.sjs文件中定义sjs

// /pages/index/index.js
Page({
  data: {
    msg: 'hello taobao',
  },
});

// /pages/hello.sjs
const foo = "'hello alipay' from hello.sjs";
const bar = function(d) {
  return d;
}
export default {
  foo: foo,
  bar: bar
};

// /pages/message.sjs

import hello from './hello.sjs';
const message = 'hello alipay';
const getMsg = x => x;
const test = () => {
   return hello.foo + ' message';
}

export default {
  message,
  getMsg,
  test,
};

在.axml中引用

// /pages/index/index.axml

{{m1.message}}{{m1.getMsg(msg)}}{{m1.test()}}

 

输出:

hello alipay
hello taobao
hello alipay from hello.sjs message

注意:

  1. 每一个.sjs文件都是一个独立的模块.
  2. 每个模块都有自己独立的作用域,一个模块里面定义的变量与函数,默认为私有的,其它模块不可见.
  3. 模块要想对外暴露内部的私有变量与函数,可通过export default或者export{}实现.
  4. 模块想要引用另外一个模块里面暴露的函数,可以通过import x  from './x.sjs'实现

属性 类型 说明
name String 当前标签的模块名。必填字段。
from String 引用.sjs文件的相对路径。必填字段。

引用的时候需要注意以下几点:

  1. 只能引用.sjs文件模块,引用时必须加.sjs文件后缀。
  2. 如果一个.sjs模块在定义之后,一直没有被引用,则该模块不会被解析与运行。

.sjs语法

变量

示例代码:

var num = 1;
var str = "hello alipay";
var undef; // undef === undefined
const n = 2;
let s = 'string';

规则

变量命名与javascript规则一致。

注意:以下标识符不能作为变量名

delete 
void 
typeof

null 
undefined 
NaN 
Infinity 
var

if 
else 

true 
false

require

this 
function 
arguments
return

for
while
do
break
continue
switch
case
default

数据类型

sjs目前支持如下数据类型:

  • string: 字符串
  • boolean: 布尔值
  • number: 数值
  • object: 对象
  • function: 函数
  • array: 数组
  • date: 日期
  • regexp: 正则表达式

判断数据类型

sjs提供了两种判断数据类型的方式:constructor与typeof

constructor示例:

const number = 10;
console.log(number.constructor ); // "Number"

const string = "str";
console.log(string.constructor ); // "String"

const boolean = true;
console.log(boolean.constructor ); // "Boolean"

const object = {};
console.log(object.constructor ); // "Object"

const func = function(){};
console.log(func.constructor ); // "Function"

const array = [];
console.log(array.constructor ); // "Array"

const date = getDate();
console.log(date.constructor ); // "Date"

const regexp = getRegExp();
console.log(regexp.constructor ); // "RegExp"

typeof示例:

const num = 100;
const bool = false;
const obj = {};
const func = function(){};
const array = [];
const date = getDate();
const regexp = getRegExp();

console.log(typeof num ); // 'number'
console.log(typeof bool ); // 'boolean'
console.log(typeof obj ); // 'object'
console.log(typeof func ); // 'function'
console.log(typeof array ); // 'object'
console.log(typeof date ); // 'object'
console.log(typeof regexp ); // 'object'

console.log(typeof undefined ); // 'undefined'
console.log(typeof null ); // 'object'

注释

注释和 javascript 一致,可以使用如下方法对SJS的代码注释。

// /pages/comment.sjs

// 方法一:这是一个单行注释

/*
方法二:这是一个多行注释
中间的内容都会被注释
*/
let h = 'hello';
const w = ' alipay';

运算符

算数运算符

const a = 10, b = 20;

console.log(30 === a + b); // 加
console.log(-10 === a - b); //减
console.log(200 === a * b); // 乘
console.log(0.5 === a / b); // 除
console.log(10 === a % b); // 取余

字符串拼接运算符

加法(+)运算符也可以用作字符串拼接,如下:

var a = 'hello' , b = ' alipay';

// 字符串拼接
console.log('hello alipay' === a + b);

比较运算符

var a = 10, b = 20;

console.log(true === (a < b)); // 小于
console.log(false === (a > b)); // 大于
console.log(true === (a <= b)); // 小于等于
console.log(false === (a >= b)); // 大于等于

console.log(false === (a == b)); // 等号
console.log(true === (a != b)); // 非等号
console.log(false === (a === b)); // 全等号
console.log(true === (a !== b)); // 非全等号

逻辑运算符

var a = 10, b = 20;

console.log(20 === (a && b)); // 逻辑与
console.log(10 === (a || b)); // 逻辑或
console.log(false === !a); // 逻辑否,取反运算

位运算符

var a = 10, b = 20;

console.log(80 === (a << 3)); // 左移
console.log(2 === (a >> 2)); // 无符号右移运算
console.log(2 === (a >>> 2)); // 带符号右移运算
console.log(2 === (a & 3)); // 与运算
console.log(9 === (a ^ 3)); // 异或运算
console.log(11 === (a | 3)); // 或运算

赋值运算符

var a = 10;

a = 10; a *= 10;
console.log(100 === a);
a = 10; a /= 5;
console.log(2 === a);
a = 10; a %= 7;
console.log(3 === a);
a = 10; a += 5;
console.log(15 === a);
a = 10; a -= 11;
console.log(-1 === a);
a = 10; a <<= 10;
console.log(10240 === a);
a = 10; a >>= 2;
console.log(2 === a);
a = 10; a >>>= 2;
console.log(2 === a);
a = 10; a &= 3;
console.log(2 === a);
a = 10; a ^= 3;
console.log(9 === a);
a = 10; a |= 3;
console.log(11 === a);

一元运算符

var a = 10, b = 20;

// 自增运算
console.log(10 === a++);
console.log(12 === ++a);
// 自减运算
console.log(12 === a--);
console.log(10 === --a);
// 正值运算
console.log(10 === +a);
// 负值运算
console.log(0-10 === -a);
// 否运算
console.log(-11 === ~a);
// 取反运算
console.log(false === !a);
// delete 运算
console.log(true === delete a.fake);
// void 运算
console.log(undefined === void a);
// typeof 运算
console.log("number" === typeof a);

其它

三元运算符

var a = 10, b = 20;

//条件运算符
console.log(20 === (a >= 10 ? a + 10 : b + 10));

逗号运算符

var a = 10, b = 20;

//逗号运算符
console.log(20 === (a, b));

运算符优先级

SJS 运算符的优先级与 javascript 一致

语句

分支结构

//if
if (a > 1) b = 3;
if (a > 1)
  b = 3;
if (a > 1) b = 3;
else b = 4;

if (a > 1)
  b = 3;
else
  b = 4;
if (a > 1) {
  b = 3;
}
if (a > 1) {
  b = 3;
} else {
  b = 4;
}
if (a > 1) {
  b = 3;
} else if (a > 2) {
  b = 4;
} else {
  b = 6;
}


//switch

var xx = 10;

switch ( xx ) {
case "10":
  console.log("string 10");
  break;
case 10:
  console.log("number 10");
  break;
case xx:
  console.log("var exp");
  break;
default:
  console.log("default");
}

循环结构

//for

for (var i = 0; i < 9; ++i) {
  console.log(i);
  if( i >= 2) break;
}


//while

var i = 0;
while (i < = 1) {
  console.log(i);
  i++
}

var j = 0;
do {
  console.log(j);
  j++
} while (j <= 1)

基础类库

Global、Number、JSON、Math、esnext、let & const 、箭头函数、更简洁的对象字面量、模版字符串、结构赋值

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
(成功最详细版本,自定义传参失败,跳转出现空白页面,校验文件失败)微信小程序扫码跳转小程序指定页面保姆级教程
文档里面虽然说了,但是还是有几个坑的地方,坑等文章最后面再写扫普通链接二维码打开小程序 | 微信开放文档
0 0
小程序中实现文章的关注功能
小程序中实现文章的关注功能
0 0
微信小程序如何修改小程序名称
微信小程序如何修改小程序名称
0 0
支付宝小程序快速示例
本节介绍了几组支付宝小程序快速示例。
0 0
【小程序 Demo】带你玩转支付宝小程序之小程序支付示例
小程序支付和 APP 支付的支付流程与体验基本一致,也支持核销口碑券和口碑商户优惠功能。已签约小程序支付或在口碑开店的商户建议接入小程序支付。小程序支付在小程序内不能通过扫码、条码、声波付等方式支付,只能唤起收银台进行支付。
2293 0
【小程序 Demo】带你玩转支付宝小程序之小程序刷脸认证示例
刷脸认证是一种目前越来越普及的身份验证方式,通过采集用户的面部特征,并与权威数据源比对,判断当前登录用户是否为账号的本人和真人。
2515 0
【小程序 Demo】带你玩转支付宝小程序之模板消息
接入模板消息的小程序可通过模板消息高效触达用户,通知用户当前行为的结果及状态等,例如交易状态、物流进度等。
2174 0
微信小程序中获知用户运行小程序的场景
最近,微信小程序团队像打了鸡血似的,不断推出一系列新的小程序功能,以及拓展了不少小程序的入口,使得小程序的运行场景变得越来越丰富。因此,不同的进入场景,必然会带来不同的用户需求,如何能根据这些不同的用户场景,来优化和提升我们的小程序的体验呢? 从小程序的基础库API v1.1.0的开始,场景值这一功能被正式的引入。
830 0
微信“小程序" 未完, 数据的"小程序" 又来了
微信小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载,非常方便。   在DT时代,数据人的小程序在哪里,今天我们介绍阿里云数加的数
4586 0
+关注
扬朋
支付宝小程序开发者运营专家
文章
问答
来源圈子
更多
文章排行榜
最热
最新
相关电子书
更多
支付宝小程序教程
立即下载
十分钟上线-使用函数计算构建支付宝小程序服务
立即下载
小程序 大世界
立即下载