傻瓜式建站软件下载,餐饮网站设计,网上商店系统,3一6年级科技小制作手工WXS#xff08;WeiXin Script#xff09;与 javascript 是不同的语言#xff0c;有自己的语法#xff0c;并不和 javascript 一致。运行环境和其他 javascript 代码是隔离的,wxs中不能调用其他 javascript 文件中定义的函数#xff0c;也不能调用小程序提供的API。wxs 函数…WXSWeiXin Script与 javascript 是不同的语言有自己的语法并不和 javascript 一致。运行环境和其他 javascript 代码是隔离的,wxs中不能调用其他 javascript 文件中定义的函数也不能调用小程序提供的API。wxs 函数不能作为组件的事件回调页面渲染!--wxml-- wxs modulem1 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 modulem1 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 页面输出5WXS 模块可以编写在 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 moduletools / 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 modulelogic / 控制台输出hello world from tools.wxs logic.wxs some msgwxs 标签属性名说明module当前 wxs 标签的模块名。必填字段。src引用 .wxs 文件的相对路径。仅当本标签为单闭合标签或标签的内容为空时有效。其中module 属性是当前 wxs 标签的模块名。在单个 wxml 文件内建议其值唯一。有重复模块名则按照先后顺序覆盖后者覆盖前者。不同文件之间的 wxs 模块名不会相互覆盖。!--wxml-- wxs modulefoo 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 modulesome_comms/wxs !-- 也可以直接使用单标签闭合的写法 wxs src./../comm.wxs modulesome_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 undefinedwxs注释// 方法一单行注释 /* 方法二多行注释 */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(111JSON.stringify(111));与 CSS 相比WXSS 扩展的特性有尺寸单位样式导入尺寸单位rpxresponsive pixel: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上屏幕宽度为375px共有750个物理像素则750rpx 375px 750物理像素1rpx 0.5px 1物理像素。设备rpx换算px (屏幕宽度/750)px换算rpx (750/屏幕宽度)iPhone51rpx 0.42px1px 2.34rpxiPhone61rpx 0.5px1px 2rpxiPhone6 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 stylecolor:{{color}}; / class用于指定样式规则其属性值是样式规则中类选择器名(样式类名)的集合样式类名不需要带上. 样式类名之间用空格分隔。view classnormal_view / 选择器目前支持的选择器有选择器样例样例描述.class.intro选择所有拥有 classintro 的组件#id#firstname选择拥有 idfirstname 的组件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
