小程序之脚本语言

WXS(WeiXin Script)
与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。
运行环境和其他 javascript 代码是隔离的,wxs中不能调用其他 javascript 文件中定义的函数,也不能调用小程序提供的API。
wxs 函数不能作为组件的事件回调
页面渲染
<!--wxml--> <wxs module="m1"> var msg = "hello world"; module.exports.message = msg; </wxs> <view> {{m1.message}} </view>
页面输出:
hello world
数据处理
// page.js Page({ data: { array: [1, 2, 3, 4, 5, 1, 2, 3, 4] } })
<!--wxml--> <!-- 下面的 getMax 函数,接受一个数组,且返回数组中最大的元素的值 --> <wxs module="m1"> var getMax = function(array) { var max = undefined; for (var i = 0; i < array.length; ++i) { max = max === undefined ? array[i] : (max >= array[i] ? max : array[i]); } return max; } module.exports.getMax = getMax; </wxs> <!-- 调用 wxs 里面的 getMax 函数,参数为 page.js 里面的 array --> <view> {{m1.getMax(array)}} </view>
页面输出:
5
WXS 模块
可以编写在 wxml 文件中的 <wxs> 标签内,或以 .wxs 为后缀名的文件内。
每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。
在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。
一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现。
// /pages/comm.wxs var foo = "'hello world' from comm.wxs"; var bar = function(d) { return d; } module.exports = { foo: foo, bar: bar };
每个 wxs 模块均有一个内置的 module 对象。
可以通过其exports属性,对外共享本模块的私有变量与函数。
// /pages/tools.wxs var foo = "'hello world' from tools.wxs"; var bar = function (d) { return d; } module.exports = { FOO: foo, bar: bar, }; module.exports.msg = "some msg";
<!-- page/index/index.wxml --> <wxs src="./../tools.wxs" module="tools" /> <view> {{tools.msg}} </view> <view> {{tools.bar(tools.FOO)}} </view>
页面输出:
some msg 'hello world' from tools.wxs
.wxs 文件可以被其他的 .wxs 文件 或 WXML 中的 <wxs> 标签引用。
wxs模块中引用其他 wxs 文件模块,可以使用 require 函数。
引用的时候,要注意如下几点:
  • 只能引用 .wxs 文件模块,且必须使用相对路径
  • wxs 模块均为单例,wxs 模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个 wxs 模块对象。
// /pages/tools.wxs var foo = "'hello world' from tools.wxs"; var bar = function (d) { return d; } module.exports = { FOO: foo, bar: bar, }; module.exports.msg = "some msg";
// /pages/logic.wxs var tools = require("./tools.wxs"); console.log(tools.FOO); console.log(tools.bar("logic.wxs")); console.log(tools.msg);
<!-- /page/index/index.wxml --> <wxs src="./../logic.wxs" module="logic" />
控制台输出:
'hello world' from tools.wxs logic.wxs some msg
<wxs> 标签
属性名说明
module当前 <wxs> 标签的模块名。必填字段。
src引用 .wxs 文件的相对路径。
仅当本标签为单闭合标签或标签的内容为空时有效。
其中:
module 属性是当前 <wxs> 标签的模块名。在单个 wxml 文件内,建议其值唯一。有重复模块名则按照先后顺序覆盖(后者覆盖前者)。不同文件之间的 wxs 模块名不会相互覆盖。
<!--wxml--> <wxs module="foo"> var some_msg = "hello world"; module.exports = { msg : some_msg, } </wxs> <view> {{foo.msg}} </view>
页面输出:
hello world
上面例子声明了一个名字为 foo 的模块,将 some_msg 变量暴露出来,供当前页面使用。
src 属性可以用来引用其他的 wxs 文件模块。
引用的时候,要注意如下几点:
  • 只能引用 .wxs 文件模块,且必须使用相对路径。
  • wxs 模块均为单例,wxs 模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个 wxs 模块对象。
// /pages/index/index.js Page({ data: { msg: "'hello wrold' from js", } })
<!-- /pages/index/index.wxml --> <wxs src="./../comm.wxs" module="some_comms"></wxs> <!-- 也可以直接使用单标签闭合的写法 <wxs src="./../comm.wxs" module="some_comms" /> --> <!-- 调用 some_comms 模块里面的 bar 函数,且参数为 some_comms 模块里面的 foo --> <view> {{some_comms.bar(some_comms.foo)}} </view> <!-- 调用 some_comms 模块里面的 bar 函数,且参数为 page/index/index.js 里面的 msg --> <view> {{some_comms.bar(msg)}} </view>
页面输出:
'hello world' from comm.wxs 'hello wrold' from js
注意
  • <wxs> 模块只能在定义模块的 WXML 文件中被访问到。使用 <include> 或 <import> 时,<wxs> 模块不会被引入到对应的 WXML 文件中。
  • <template> 标签中,只能使用定义该 <template> 的 WXML 文件中定义的 <wxs> 模块。

变量
变量均为值的引用。
没有声明的变量直接赋值使用,会被定义为全局变量。
如果只声明变量而不赋值,则默认值为 undefined
var foo = 1; var bar = "hello world"; var i; // i === undefined
wxs注释
// 方法一:单行注释 /* 方法二:多行注释 */

var a = 10, b = 20;
// typeof 运算 console.log("number" === typeof a);
// 等号 ==
// 全等号 console.log(false === (a === b)); // 非全等号 console.log(true === (a !== b));
//逗号运算符 console.log(20 === (a, b));

if (表达式) { 代码块; } else if (表达式) { 代码块; } else if (表达式) { 代码块; } else { 代码块; }
switch (表达式) { case 变量: 语句; case 数字: 语句; break; case 字符串: 语句; default: 语句; }
var exp = 10; switch ( exp ) { case "10": console.log("string 10"); break; case 10: console.log("number 10"); break; case exp: console.log("var exp"); break; default: console.log("default"); }
输出:
number 10

数据类型
  • number : 数值
  • string :字符串
  • boolean:布尔值
  • object:对象
  • function:函数
  • array : 数组
  • date:日期
  • regexp:正则
object 是一种无序的键值对
//生成一个新的非空对象 o = { 'string' : 1, //object 的 key 可以是字符串 const_var : 2, //object 的 key 也可以是符合变量定义规则的标识符 func : {}, //object 的 value 可以是任何类型 }; //对象属性的读操作 console.log(1 === o['string']); console.log(2 === o.const_var); //对象属性的写操作 o['string']++; o['string'] += 10; o.const_var++; o.const_var += 10;
function 支持以下的定义方式:
//方法 1 function a (x) { return x; } //方法 2 var b = function (x) { return x; }
function 同时也支持以下的语法(匿名函数,闭包等):
var a = function (x) { return function () { return x;} } var b = a(100); console.log( 100 === b() );
生成 date 对象需要使用 getDate函数, 返回一个当前时间的对象。
生成 regexp 对象需要使用 getRegExp函数。
数据类型的判断可以使用 constructor 属性。
var number = 10; console.log( "Number" === number.constructor ); var string = "str"; console.log( "String" === string.constructor );
var boolean = true; console.log( "Boolean" === boolean.constructor ); var object = {}; console.log( "Object" === object.constructor ); var func = function(){}; console.log( "Function" === func.constructor ); var array = []; console.log( "Array" === array.constructor ); var date = getDate(); console.log( "Date" === date.constructor ); var regexp = getRegExp(); console.log( "RegExp" === regexp.constructor );
使用 typeof 也可以区分部分数据类型。
JSON库
  • stringify(object): 将 object 对象转换为 JSON 字符串,并返回该字符串。
  • parse(string): 将 JSON 字符串转化成对象,并返回该对象。
console.log("111"===JSON.stringify(111));
与 CSS 相比,WXSS 扩展的特性有:
  • 尺寸单位
  • 样式导入
尺寸单位
  • rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)
iPhone51rpx = 0.42px1px = 2.34rpx
iPhone61rpx = 0.5px1px = 2rpx
iPhone6 Plus1rpx = 0.552px1px = 1.81rpx
建议: 可以用 iPhone6 作为视觉稿的标准。
样式导入
使用@import语句可以导入外联样式表@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。
示例代码:
/** common.wxss **/ .small-p { padding:5px; }
/** app.wxss **/ @import "common.wxss"; .middle-p { padding:15px; }
内联样式
框架组件上支持使用 style、class 属性来控制组件的样式。
  • style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。
<view style="color:{{color}};" />
  • class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上. 样式类名之间用空格分隔。
<view class="normal_view" />
选择器
目前支持的选择器有:
选择器样例样例描述
.class.intro选择所有拥有 class="intro" 的组件
#id#firstname选择拥有 id="firstname" 的组件
elementview选择所有 view 组件
element, elementview, checkbox选择所有文档的 view 组件和所有的 checkbox 组件
::afterview::after在 view 组件后边插入内容
::beforeview::before在 view 组件前边插入内容
全局样式与局部样式
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

转载于:https://www.cnblogs.com/elesos/p/8206172.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/487031.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI解梦成为现实 未来还有无限可能

文章来源&#xff1a;学术头条编译&#xff1a;阳光排版&#xff1a;赵辰霞编审&#xff1a;王新凯古代巴比伦人认为梦境包含了预言&#xff0c;而古埃及人则将梦境视为神灵给予的信息来崇拜。在 19 世纪 90 年代&#xff0c;西格蒙德弗洛伊德&#xff08;Sigmund Freud&#x…

单内存16g和双8g差别大吗_电脑内存8g和16g差别大吗

展开全部日常使用电脑内存8g和16g差别并不大&#xff0c;如62616964757a686964616fe78988e69d8331333433623230办公游戏之类&#xff1b;在专业领域则有较大差别&#xff0c;如视频、音频等。如果是一般家庭或者是办公使用&#xff0c;8GB的运行内存基本能够满足&#xff0c;因…

fiddler工具条、状态栏、请求信息栏各按钮的作用

1.fiddler工具条 2.fiddler状态栏 3.请求信息栏 转载于:https://www.cnblogs.com/kakaln/p/8198299.html

matlab出图底色透明

matlab出图底色透明 使用图片导出功能&#xff0c;保存为png格式&#xff0c;底色即为透明

超9成SCI论文发在国外!中文期刊到底差在哪?

来源 | 科学网撰文 | 卜叶编辑 | 宗华学术界不投中文期刊的原因是什么&#xff1f;这一老生常谈的问题&#xff0c;最近再次出现在某知识问答平台热榜。短短两周&#xff0c;便吸引了180个回答&#xff0c;浏览量超过34万。中文期刊到底差在哪&#xff1f;面对逐渐边缘化的态势…

LwIP Application Developers Manual9---LwIP and multithreading

1.前言 lwIP的内核并不是线程安全的。如果我们必须在多线程环境里使用lwIP&#xff0c;那么我们必须使用“upper”API层的函数&#xff08;netconn或sockets&#xff09;。当使用raw API时&#xff0c;你需要自己保护你的内核。 2.并发处理 &#xff08;1&#xff09;Sockets通…

pyqt5 点击开始执行_《快速掌握PyQt5》第一章 PyQt5的起点

1.1 开始安装PyQt5就跟安装其他库的方法一样&#xff0c;非常简单&#xff1a;Windows上安装&#xff1a;pip install pyqt5Linux上安装&#xff1a;sudo apt-get install pyqt5-dev-toolsMacOS上安装&#xff1a;pip3 install pyqt5验证是否安装成功&#xff0c;只需要导入下该…

不用math type解决word公式上浮问题

今天来解决一下文档整理时候令人头痛的公式上浮问题。 问题 就是这种&#xff0c;以前碰见了简直就是无解&#xff0c;今天不管怎样&#xff0c;解决它&#xff01;&#xff01; 准备 开始前要检查一下公式是否是office math格式&#xff0c;如果不是&#xff0c;需要先转化成…

前沿研究丨基于驾驶脑的智能驾驶车辆硬件平台架构

本文选自中国工程院院刊《Engineering》2018年第4期作者&#xff1a;李德毅&#xff0c;高洪波来源&#xff1a;A Hardware Platform Framework for an Intelligent Vehicle Based on a Driving Brain[J].Engineering,2018,4(4):464-470.编者按智能驾驶车辆试验平台是人工智能科…

cogs2840. 二叉查找树

二叉查找树 时间限制&#xff1a;1 s 内存限制&#xff1a;512 MB 【题目描述】 二叉查找树是一种特殊的二叉树&#xff08;每个节点最多只有两个儿子的树&#xff09;。树的每个节点上存有一个唯一的值&#xff0c;并且满足&#xff1a;这个节点的左子树内所有点的值都比这个…

苹果挂端口方法_调音台变身直播声卡的方法

现在干直播的多了&#xff0c;搞音响的也可以利用自己手头的专业设备&#xff0c;把调音台变身为直播声卡&#xff0c;然后进行多通道的高品质混音直播。需要的条件&#xff1a;数字调音台或带有USB音频功能的模拟调音台苹果手机(本人没有安卓手机&#xff0c;就以苹果手机为例…

word删除所有的回车、空格

一、打开替换窗口 二、①删除回车 在查找内容中输入 ^p 在替换为中输入 ^s 或者空白 全部替换 ②删除空格 在查找内容中输入 ^w 在替换为中输入 空白 全部替换 三、总结 在Word中 ^p表示回车&#xff0c; ^s表示空白&#xff0c; ^w表示空格

xp的viostor驱动无法获取磁盘序列号的分析

深信服的viostor驱动在获取序列号的时候&#xff0c;多了一个IDE处理的代码&#xff0c;位置在1128处。它会在刚开机加载viostor.sys时机被调用&#xff0c;然后去读取注册表HKLM\\SYSTEM\CurrentControlSet\Services\viostor\Parameters的IDESNCompat&#xff0c;若为1则有此功…

十问亿级神经元类脑计算机:AI领域有望突破,哪些还需火候

来源&#xff1a;澎湃新闻近日&#xff0c;浙江大学联合之江实验室共同研制成功了中国首台基于自主知识产权类脑芯片的类脑计算机&#xff08;Darwin Mouse&#xff09;。研究团队在9月1日的成果发布会上指出&#xff0c;该类脑计算机在神经元规模上超越了德国海德堡大学的Brai…

网络加载空页面

空页面的显示很常用&#xff0c;所以自己做了一个通用的空页面显示&#xff0c;先看效果图 在有网络的时候正常加载显示&#xff0c;在没有网络的时候自动加载空页面&#xff0c;点击空页面重新加载网络请求的一个功能 1&#xff1a;定义一个xml页面&#xff0c;页面布局是一个…

excel有的单元文字可以超出单元格_excel单元格斜线

excel表格的强大功能&#xff0c;给办公带来了很多便捷&#xff0c;但是有很多强大的功能&#xff0c;其实我们都还不会用&#xff0c;如在做报表时&#xff0c;要用到给单元格加两条斜线&#xff0c;三条斜线时&#xff0c;有时就不知道怎么弄&#xff0c;两条或许会&#xff…

百度地图发布专网地图时空数据托管平台,构建智慧城市数字底盘

来源&#xff1a;百度地图“新基建”浪潮下&#xff0c;智慧城市的建设和发展进一步提速&#xff0c;作为智慧城市数字基础设施的地理信息系统&#xff0c;其数据体量也极大增长&#xff0c;对海量GIS数据集成、存储、管理、计算、表达、分析和应用等有关技术的创新发展提出了急…

word取消空格显示为点

其实就是编辑标记的隐藏与显示问题 看这里 这就是“显示/隐藏编辑标记”按钮&#xff0c;加深颜色时就会和我的文章一样有点点&#xff0c;再点击一下就好啦。

泛型中? super T和? extends T的区别

经常发现有List<? super T>、Set<? extends T>的声明&#xff0c;是什么意思呢&#xff1f;<? super T>表示包括T在内的任何T的父类&#xff0c;<? extends T>表示包括T在内的任何T的子类&#xff0c;下面我们详细分析一下两种通配符具体的区别。 …

cad细等线体不显示_CAD图纸乱码、钢筋符号不显示解决办法(内含万能字体)

好课推荐&#xff1a;零基础CAD&#xff1a;点我CAD室内&#xff1a;点我 周站长CAD&#xff1a;点我CAD机械&#xff1a;点我 Bim教程&#xff1a;点我CAD建筑&#xff1a;点我CAD三维&#xff1a;点我全屋定制&#xff1a;点我 ps教程&#xff1a;点我苹果版CAD:点我 3dmax教…