通过wxs文件，动态改变前端特定字体颜色以及对wxs的详解和wxs中的几种数据类型(重要)

最新推荐文章于 2024-05-04 23:20:21 发布

weixin_40333655

最新推荐文章于 2024-05-04 23:20:21 发布

阅读量1k

点赞数

分类专栏：微信小程序收集

本文链接：https://blog.csdn.net/weixin_40333655/article/details/90765644

版权

微信小程序同时被 2 个专栏收录

36 篇文章 4 订阅

订阅专栏

收集

13 篇文章 0 订阅

订阅专栏

在这里插入图片描述
效果如图所示，点位状态根据是否故障改变颜色
wxs文件 - utils-color.wxs 代码如下

function fontColor(str){
  var color = "";
  if(str.indexOf("故障") >= 0)
    color = "red";
  else
    color =  "#999";
  return color;
}

//导出wxs内部私有变量和函数 ，只能通过module.exports
module.exports = {
  fontColor: fontColor
}

前端wxml文件
首先引入wxs文件
然后使用

<view style='width: 50%'>点位状态:         
          <text style='color:{{colors.fontColor(item.Status)}}'>{{item.Status}}</text>
 </view>

参考 https://blog.csdn.net/weixin_39872588/article/details/79608221

小程序脚本语言WXS详解
WXS脚本语言是 Weixin Script脚本的简称，是JS、JSON、WXML、WXSS之后又一大小程序内部文件类型。截至到目前小程序已经提供了5种文件类型。

解构小程序的几种方式，其中一种方式就是通过文件类型：JS、JSON、WXML、WXSS、WXS。前面四种之前已经介绍过，今天主要是介绍WXS这种文件类型。如果你是PHP、JAVA、C#程序员的话写过服务端代码的话，就很好理解WXS这种脚本语言了。能够更加方便的动态实现页面上的一些基本逻辑判断，而不用全部的依赖后台实现，再通过接口返回。
在这里插入图片描述

不能调用小程序的api和调用其他js文件定义的程序

在这里插入图片描述

一、WXS创建方式
WXS的使用，有两种方式。一种是直接在WXML中编写
在这里插入图片描述
另一种是写在单独的wxs文件上，就例如文章一开始使用的方式。

然后再wxml引用

二、WXS文件的构成
1、数据类型类似小程序大厦的砖头、保暖砖、预制件之类的内容，这些都是通用的内容，这些是编程语言的基本构成项，数据类型可以是简单的类型，也可以是复杂的类型。从普通的数字再到复杂的对象。

WXS 语言目前共有8种数据类型：
number ：数值 string ：字符串 boolean：布尔值 object：对象 function：函数 array : 数组 date：日期 regexp：正则
WXS中使用var或let来定义变量，从定义中很难看出变量的类型，判定一个变量是什么类型。可以使用变量的属性constructor。还可以使用 typeof这种方式来判定变量的类型
例如：

var number = 10;
 
console.log( "Number" === number.constructor );
 
console.log( 'number' === typeof number );

2、变量变量就是构建小程序这座大厦的基本件，虽然是很小，但是有自己的规范，主要有如下几个方面：命名规范，首字符必须是：字母（a-zA-Z），下划线（），剩余字符可以是：字母（a-zA-Z），下划线（），数字（0-9）。大小写不同则是不同的变量
保留字符

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

3、操作运算符根据操作对象的个数，可以分为一元、二元、多元运算符。我们常用的加减乘除这些都需要两个操作对象才能完成，那这些就是二元运算符。自增或自减这些只需要一个运算符就可以完成。这些就是一元运算符。需要二个以上的运算对象的那就是多元运算符了。
4、选择结构选择结构，又称为判断结构，如果C条件满足了则执行一种情况，条件不满足则执行另外一种情况。另外一种是多条件的，如果C1条件满足了，则执行A部分，如果C2条件满足了则执行B部分，如果C3条件满足则执C部分，以此类推，所有条件都不满足是则执行Z部分。

// if ... else 
 
if (表达式) 语句;
 
else 语句;
 
if (表达式) 
 
语句;
 
else 
 
语句;
 
if (表达式) { 
 
代码块; 
 
} else { 
 
代码块; 
 
}
 
// if ... else if ... else ...
 
if (表达式) {
 
 代码块; 
 
} else if (表达式) { 
 
代码块; 
 
} else if (表达式) { 
 
代码块; 
 
} else { 
 
代码块; }
 
switch (表达式) { 
 
 case 变量: 
 
 语句; 
 
 case 数字: 
 
 语句; 
 
 break; 
 
 case 字符串: 
 
 语句; 
 
 default: 
 
 语句; 
 
}

5、循环结构简单的事情，不想重复的写代码，那就可以把公共执行的部分剥离出来

for (语句; 语句; 语句) 
 
语句;
 
for (语句; 语句; 语句) {
 
 代码块; 
 
}
 
while (表达式) 
 
语句;
 
while (表达式){ 
 
代码块; 
 
}
 
do { 
 
代码块; 
 
} while (表达式)

支持使用 break，continue 关键词。 break是结束整个循环 continue是中断当前本次循环
到这里的时候就先停一下通过1和2这两个部分完成的组件，再通过3、4、5这三大部分的“粘合剂” 就可以完成后面6和7慢慢的你会发现写小程序就是盖房子一样的，把原材料准备好，使用粘合剂给连接起来就可以了。
6、模块（自定义的函数）在WXS中编写业务逻辑与内容，使用 moudle.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";
 
在使用的地方地方，需要引入对就的模块才能使用
 
<wxs src="./../tools.wxs" module="tools" />
 
 {{tools.msg}} view>
 
 {{tools.bar(tools.FOO)}} view>

注意:tool.FOO FOO是大写，因为上面部分是使用FOO做为对外公开的变量名。
7、可使用的函数库（已经定义好的函数）

console      //控制台打印函数
 
console.log()       console.info()           console.warn()          console.error() 
 
这是引用的chrome的经典内容。
 
Math    // Math 是一个内置对象, 它具有数学常数和函数的属性和方法
Math.PI      // Math.PI 表示一个圆的周长与直径的比例，即为π = 3.14159....
Math.ceil()  //Math.ceil()是常见编程语言中的常用代码，用于向上取整数计算，返回的是大于或等于给定数字的整数值
Math.floor() //Math.floor() 返回小于或等于一个给定数字的最大整数
 
带有()是对应的方法，没有带括号的是属性，
Number
 MAX_VALUE    //Number.MAX_VALUE 表示wxs 中可表示的最大的数
MIN_VALUE      //Number.MAX_VALUE 表示wxs 中可表示的最小的数，接近0但不是负数？
 NEGATIVE_INFINITY //NEGATIVE_INFINITY 属性表示小于 Number.MIN_VALUE 的值。 该值代表负无穷大。
 POSITIVE_INFINITY //正无穷



JSON
stringify(object): //JSON.stringify(obj)   将 object 对象转换为 JSON 字符串，并返回该字符串。
parse(string):     //JSON.parse() 将 JSON 字符串转化成对象，并返回该对象。
 
Global   //全局对象
属性 
NaN  //全局属性NaN表示未定义或不可表示的值，不是一个数字。常在浮点数运算中使用
Infinity//是全局对象(global object)的一个属性,即它是一个全局变量。 Infinity 的初始值是 Number.POSITIVE_INFINITY

undefined //是全局对象的一个属性。也就是说,它是全局作用域的一个变量。undefined的最初值就是原始数据类型undefined。  --- 首先它是个变量。其他未赋值变量的值就是undefined

方法
parseInt //parseInt() 函数可解析一个字符串，并返回一个整数。
parseFloat//可解析一个字符串，并返回一个浮点数。
isNaN // 用于检查参数是否是一个非数字值
isFinite //用于检查传入的参数是否是个有限数值
decodeURI //可对 encodeURI() 函数编码过的 URI 进行解码
decodeURIComponent //encodeURIComponent() 函数编码的 URI 进行解码
encodeURI //函数可把字符串作为 URI 进行编码
encodeURIComponent //函数把字符串作为 URI 组件 进行编码

以上内容的更多用法可以参考ES语法 http://es6.ruanyifeng.com/
三、注释
单独的把这一块拿出来，一方面是说明其重要性，另一方面是学习一门语言与他人沟通中很重要的一部分。WXS 主要有 3 种注释的方法。

module=“sample”>

// 方法一：单行注释

/* 方法二：多行注释 */

/* 方法三：结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释

var a = 1;

var b = 2;

var c = “fake”;

在编程实践中，只要能把思路理清就能把代码实现出来，在大师兄的公司基本上推荐的是先写注释内容，然后再把注释内容转换为代码。

参考https://blog.csdn.net/rolan1993/article/details/77989609

weixin_40333655

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
通过wxs文件，动态改变前端特定字体颜色以及对wxs的详解和wxs中的几种数据类型(重要)

效果如图所示，点位状态根据是否故障改变颜色wxs文件 - utils-color.wxs 代码如下function fontColor(str){ var color = ""; if(str.indexOf("故障") >= 0) color = "red"; else color = "#999"; return color;}//导出wx...
复制链接

扫一扫