微信小程序 - - - 开发，框架，语法

最新推荐文章于 2023-06-14 10:26:53 发布
最新推荐文章于 2023-06-14 10:26:53 发布
阅读量755 收藏 2
点赞数 1
文章标签： 微信小程序 小程序
原文链接：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/
版权

微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/

目录

wxml语法：

数据绑定

<!--wxml-->
<view>{{message}}</view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

列表渲染

<!--wxml-->
<view wx:for="{{array}}">{{item}}</view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

条件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}">WEBVIEW</view>
<view wx:elif="{{view == 'APP'}}">APP</view>
<view wx:else="{{view == 'MINA'}}">MINA</view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})

模板

<!--wxml-->
<template name="staffName">
    <view>
        FirstName: {{firstName}}，LsatName: {{LastName}}
    </view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

wxs语法：

.wxs文件

var foo = "'hello world' from comm.wxs";
var bar = function(d) {
    return d;
}
module.exports = {
    foo: foo,
    bar: bar
}

.wxs文件可以被其他的 .wxs 文件 或 WXML 中的 标签引用。

moudule对象：

每个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

require函数：

在.wxs模块中引用其他 wxs 文件模块，可以使用 require 函数。

示例代码：
// /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 当前 标签的模块名。必填字段。
src 引用 .wxs 文件的相对路径。

module示例代码：
<wxs module="foo">
var some_msg = "hello world";
module.exports = {
    msg : some_msg,
}
</wxs>
<view>{{foo.msg}}</view>
页面输出：
hello world
src示例代码：
page({
    data: {
        msg: "'hello world' 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 world' from js

变量

wxs中的变量均为值的引用。

var foo = 1;
var bar = "hello worl";
var i; // i === undefined

不能使用的变量名，保留字符：

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

注释

1.单行注释

2.多行注释

3.结尾注释

<!-- wxml -->
<wxs module="sample">
// 方法一：单行注释

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

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

var a = 1;
var b = 2;
var c = "fake";

</wxs>

运算符

基本运算符：

示例代码：
var 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 = '.w' , b = 'xs';

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

一元运算符：

特点：否运算，delete运算，void运算，typeof运算

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);

位运算符TODO：

示例代码：
var a = 10, b = 10;

// 左移运算
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, b = 20;

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

等值运算符：

示例代码：
var a = 10, b = 20;

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

赋值运算符TODO：

示例代码：
var a = 10, b = 20;

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(20 === (a && b));
// 逻辑或
conosle.log(10 == (a || b));

其他运算符：

示例代码
var a = 10, b = 20;

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

运算符优先级：

微信文档：运算符优先级

语句

if语句：

示例语法：
// if ...
if (表达式) 语句;

if (表达式)
    语句;

if (表达式) {
    代码块;
}

// if ... else

if (表达式) 语句;
else 语句;

if (表达式)
    语句;
else
    语句;

if (表达式) {
    代码块;
} else {
    代码块;
}

// if ... else if ... else ...

if (表达式) {
    代码块;
} else if (表达式) {
    代码块;
} else if (表达式) {
    代码块;
} else {
    代码块;
}

switch语句：

示例语法：
switch (表达式) {
    case 变量:
        语句;
    case 数字:
        语句;
        break;
    case 字符串:
        语句;
    default:
        语句;
}

default分支可以省略不写。case关键词后面只能使用：变量，数字，字符串。

示例代码：
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

for语句：

示例语法：
for (语句; 语句; 语句)
    语句;
    
for (语句; 语句; 语句) {
    代码块;
}

支持使用break，continue关键词。

示例代码：
for (var i = 0; i < 3; ++i) {
    console.log(i);
    if (i >= 1) break;
}
输出：
0
1

while语句：

示例语法：
while (表达式)
    语句;
    
while (表达式) {
    代码块;
}

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

当表达式为true时，循环执行语句或代码块。支持使用break，continue关键词。

数据类型

number：数值，string：字符串，boolean：布尔值，object：对象，function：函数，array：数组，date：日期，regexp：正则

number：

语法：

number包括两种数值：整数，小数。

var a = 10;
var PI = 3.141592653589793;
属性：

constructor：返回字符串"Number"。

方法：

toString，toLocaleString，valueOf，toFixed，toExponential，toPrecision

string：

语法：

string有两种写法：

'hello world';
"hello world";
属性：

constructor：返回字符串"String"。length

方法：

toString，valueOf，charAt，charCodeAt，concat，indexOf，lastIndexOf，localeCompare，match，replace， search，slice，split，substring，toLowerCase，toLocaleLowerCase，toUpperCase，toLocaleUpperCase，trim

boolean：

语法：

布尔值只有两个特定的值：true和false。

属性：

constructor：返回字符串"Boolean"。

方法：

toString，valueOf

object：

语法：

object是一种无序的键值对。

var o = {} // 生成一个新的空对象

// 生成一个新的非空对象
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;

// 对象属性的读操作
console.log(12 === o['string']);
console.log(13 === o.const_var);
属性

constructor：返回字符串"Object"。

console.log("Object" === {k:"1",v:"2"}.constructor)
方法

toString：返回字符串"[object Object]"。

function：

语法

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()));

arguments

function里面可以使用arguments关键词。该关键词目前只支持以下的属性：
length：传递给函数的参数个数。[index]：通过index下标可以遍历传递给函数的每个参数。

示例代码：
var a = function() {
    console.log(2 === arguments.length);
    console.log(100 === arguments[0]);
    console.log(200 === arguments[1]);
    console.log(300 === arguments[2]);
};
a(100, 200, 300);
属性

constructor：返回字符串"Function"。length：返回函数的形参个数。

方法

toString：返回字符串"[function Function]"

示例代码
var func = function (a, b, c) {
    console.log("Function" === func.constructor);
    console.log(3 === func.length);
    console.log("[function Function]" === func.toString());
}

array：

语法

array支持以下的定义方式：

var a = []; // 生成一个新的空数组
a = [1, "2", {}, function(){}]; // 生成一个新的非空数组，数组元素可以是任何类型
属性

constructor：返回字符串"Array"。length

方法

toString，concat，join，pop，push，reverse，shift，slice，sort，splice，unshift，indexOf，lastIndexOf，every，some，forEach，map，filter，reduce，reduceRight

date：

语法

生成date对象需要使用getDate函数，返回一个当前时间的对象。

getDate()
getDate(milliseconds)
getDate(datestring)
getDate(year, month[, date[, hours[, minutes[, seconds[, milliseconds]]]]])
参数

milliseconds：从1970年1月1日00:00:00 UTC开始计算的毫秒数。datestring：日期字符串，其格式为：“month day, year hours:minutes:seconds”。

示例代码
var date = getDate(); // 返回当前时间对象

date = getDate(1500000000000); // 1,500,000,000,000
// Fri Jul 14 2017 10:40:00 GMT+0800 (中国标准时间)
date = getDate('2017-7-14');
// Fri Jul 14 2017 00:00:00 GMT+0800 (中国标准时间)
date = getDate(2017, 6, 14, 10, 40, 0, 0);
// Fri Jul 14 2017 10:40:00 GMT+0800 (中国标准时间)
属性

constructor：返回字符串"Date"。

方法

toString，toDateString，toTimeString，toLocaleString，toLocaleDateString，toLocaleTimeString，valueOf，getTime，getFullYear，getUTCFullYear，getMonth，getUTCMonth，getDate，getUTCDate，getDay，getUTCDay，getHours，getUTCHours，getMinutes，getUTCminutes，getSeconds，getUTCSeconds，getMilliseconds，getUTCMilliseconds，getTimezoneOffset，setTime，setMilliseconds，setUTCMilliseconds，setSeconds，setUTCSeconds，setMinutes，setUTCMinutes，setHours，setUTCHours，setDate，setUTCDate，setMonth，setUTCMonth，setFullYear，setUTCFullYear，toUTCString，toISOString，toJSON

regexp：

语法

生成regexp对象需要使用getRegExp函数。

getRegExp(pattern[, flags])
参数

pattern：正则表达式的内容。flags：修饰符。该字段只能包含以下字符：g：global，i：ignoreCase，m：multiline。

示例代码
var a = getRegExp("x", "img");
console.log("x" === a.source);
console.log(true === a.global);
console.log(true === a.ignoreCase);
console.log(true === a.multiline);
属性

constructor：返回字符串"RegExp"。source，global，ignoreCase，multiline，lastIndex。

方法

exec，test，toString

数据类型判断：

constructor属性

数据类型的判断可以使用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

使用typeof也可以区分部分数据类型。

示例代码
var number = 10;
var boolean = true;
var object = {};
var func = function(){};
var array = [];
var date = getDate();
var regexp = getRegExp();

console.log('number' === typeof number);
console.log('boolean' === typeof boolean);
console.log('object' === typeof object);
console.log('function' === typeof func);
console.log('object' === typeof array);
console.log('object' === typeof date);
console.log('object' === typeof regexp);

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

基础类库

console：

console.log方法用于在console窗口输出信息。它可以接受多个参数，将他们的结果连接起来输出。

Math

属性

E，LN10，LN2，LOG2E，LOG10E，PI，SQRT1_2，SQRT2

方法

abs，acos，asin，atan，atan2，ceil，cos，exp，floor，log，max，min，pow，random，round，sin，sqrt，tan

JSON

方法

stringify(object)：将object对象转换为JSON字符串，并返回该字符串。parse(string)：将JSON字符串转化成对象，并返回该对象。

示例代码
console.log(undefined === JSON.stringify());
console.log(undefined === JSON.stringify(undefined));
console.log("null" === JSON.stringify(null));

console.log("111" === JSON.stringify(111));
console.log('"111"' === JSON.stringify("111"));
console.log("true" === JOSN.stringify(true));
console.log(undefined === JSON.stringify(function(){}));

console.log(undefined === JSON.parse(JSON.stringify()));
console.log(undefined === JSON.parse(JSON.stringify(undefined)));
console.log(null === JSON.parse(JSON.stringify(null)));

console.log(undefined === JSON.parse(JSON.stringify(function(){})));

Number

属性

MAX_VALUE，MIN_VALUE，NEGATIVE_INFINITY，POSITIVE_INFINITY

Date

属性

parse，UTC，now

Global

属性

NaN，Infinity，undefined

方法

parseInt，parseFloat，isNaN，isFinite，decodeURI，decodeURIComponent，encodeURI，encodeURIComponent

zicl
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序开发——JS中字符和数组的操作
番薯大佬的专栏
06-19 3642
JS中字符串和数组的操作
微信小程序-cnode社区版.zip
04-13
1. 微信小程序框架： 微信小程序基于一套自有的开发框架WXML（WeiXin Markup Language）和WXSS（WeiXin Style Sheets），这两个语言分别负责结构层和样式层的定义。同时，小程序还提供了JavaScript API，用于处理...
微信小程序拼接字符串完成复制功能
m0_54585610的博客
11-20 1176
微信小程序拼接字符串完成复制功能
微信小程序Image字符串拼接多个变量
echo_Ae的博客
06-14 870
不要换行，不然会编译不过，血的教训。。。
JS对于字符串的切割截取
孤云博客
02-02 8378
随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)、博主微信（guyun297890152）、QQ技术交流群(183198395)。 from：https://www.cnblogs.com/qj0813/p/5110211.html 对于字符串的切割截取平时所用可能不是特别多，而且分的比较细，所以自备自查。有备无患。 由于之前所有均在一个d...
小程序字符串拼接_用这个小程序，一键就能拼接台词截图！
weixin_34239718的博客
01-15 2155
最近，备受瞩目却一延再延的《清平乐》终于上线，虽然剧中大段的文言词难以听懂，但还是有很多简单易懂的台词令人印象深刻，比如官方放出的这段曹皇后内心独白，不知道戳中多少暗恋者的心。相信大家经常能在各大社交平台上看到官博发的这样的影视台词长截图，发到朋友圈简直太有范儿了！那么它到底是怎么做出来的呢？今天小编就来给大家介绍一个实用的截图拼接微信小程序，以后发朋友圈，你也是经典台词截图的传播源！第一步打开微...
新浪读书-微信小程序-html
06-03
2. **微信小程序开发环境**：微信小程序是腾讯推出的一种轻量级的应用开发平台，它有自己的开发工具和框架。开发者需要使用微信开发者工具进行代码编写、调试和预览。微信小程序支持WXML（微信小程序的标记语言）和...
微信小程序-原生-使用微信开发者工具
09-05
总结来说，使用微信开发者工具进行微信小程序的原生开发，需要掌握JS、WXML和WXSS的语法，理解小程序的生命周期，利用组件化和API实现各种功能，同时在开发过程中充分利用调试工具，确保程序的稳定性和用户体验。
微信小程序-个人简历
01-27
微信小程序是一种轻量级的应用开发平台，主要针对移动端，尤其是智能手机用户。它允许开发者通过一套特定的开发工具和框架，创建出能在微信内运行的小型应用程序。在这个“微信小程序-个人简历”项目中，我们可以...
176-微信小程序-悦跑圈.zip
最新发布
06-11
1. **微信小程序框架**：微信小程序采用自有的WXML（WeiXin Markup Language）和WXSS（WeiXin Style Sheets）来构建UI，以及JavaScript进行业务逻辑处理。开发者需要理解这些语言的语法和特性。 2. **组件化开发**...
微信小程序对象与字符串互转
chunchun1230的博客
02-26 5855
对象转字符串 var str = JSON.stringify(weather); 字符串转对象 var weatherObj = JSON.parse(str);
快速掌握微信小程序在wxml页面字符串截取的技巧
Shids_的博客
04-18 1万+
快速掌握微信小程序在wxml页面字符串截取的技巧
字符串拼接用逗号隔开的四种方法
Mjxiaomihu的博客
08-06 5648
字符串拼接用逗号隔开的四种方法
小程序开发入门
09-21
2020年12月最新最全的零基础小程序实战入门，零基础入门微信小程序开发。10天带领大家上线一款属于自己的微信小程序。微信小程序开发入门视频教程，该课程从微信小程序注册到官方开发工具、官方Demo、再到开发个人专属小程序所有知识点，包括小程序获取用户信息等功能。
时间戳转换
qq_37683424的博客
06-26 318
function formatTime(number,format) {   var formateArr = ['Y','M','D','h','m','s'];   var returnArr = [];   var date = new Date(number * 1000);   returnArr.push(date.getFullYear());   returnArr.push(fo...
微信小程序 实现合并对象 concat
hexiaoniao的博客
03-21 1万+
var arr = []; varphotolistdata={} varresultdata={} arr = photolistdata.concat(resultdata);
（学习总结）微信小程序开发WXML
Leporc的博客
04-18 3415
因为对Vue比较熟悉，所以会结合vue对微信小程序的语法进行理解 微信小程序开发使用的是WXML(与html同作用)和WXS（与JS同作用） 微信官方文档入口 WXML语法参考 一、数据绑定 1、在页面上展示内容： <view>{{ message }}</view> Page({ data:{ message:'Hello' } }) 展示效果为： 2、通过变量控制组件属性（需要在双引号之内） <view id="{
微信小程序WXML页面上直接进行字符串截取实现方式
热门推荐
cangahi09025566的博客
09-10 2万+
微信小程序开发中,有时候一个字段的内容太多了,这时候就需要做截取让其以省略号的形式展现,网上大多数的方式是通过样式来控制，但是在我开发的过程中,发现这样做会影响之前做好的页面布局.由于后台返回的是个list数组,所以在js里面也不太方便去使用subString做字段截取,这时候就需要在WXML上直接做截取,但直接使用subString在WXML里面做截取是无效的,那怎么办呢,这时候就需要用到微信...
微信小程序 v-for
07-25
微信小程序中，v-for 是Vue.js框架中常用的一个指令，用于循环渲染元素列表。在微信小程序中，由于没有直接支持Vue.js的模板语法，所以v-for 指令无法直接使用。 不过，你可以使用wx:for="{{array}}"和wx:for-item="{{item}}"以及wx:for-index="{{index}}"来实现类似的功能。这些指令可以在wxml模板中使用，例如： ```html <view wx:for="{{array}}" wx:for-item="item" wx:for-index="index"> <text>{{index}}: {{item}}</text> </view> ``` 这段代码会根据数组 array 的长度，循环渲染多个 view 元素，并显示索引和对应的元素值。 需要注意的是，由于微信小程序的限制，v-for 指令在渲染大量元素时可能会影响性能，请确保列表不会过长。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值