Skip to content
Mr.HopeMr.Hope
主页
  • 小程序
    • 小程序教程

      • 小程序指南
        • 代码构成
          • 宿主环境
            • 配置

              • 配置
                • 全局配置文档
                  • 页面配置
                    • 小程序内索引
                    • 框架

                      • 框架
                        • 场景值
                          • 小程序的运行环境
                            • 小程序运行机制
                              • 小程序更新机制
                              • 逻辑层

                                • 逻辑层
                                  • 生命周期 <Badge text="不需要立即掌握" />
                                    • 页面路由
                                      • 注册
                                        • App
                                          • Page
                                            • 小程序运行机制
                                              • 模块化
                                                • API

                                                  • API <Badge text="重要" type="error" />
                                                    • 路由 API
                                                      • 数据缓存 API
                                                        • 页面交互 API
                                                          • 网络 API
                                                            • 系统相关 API
                                                          • 视图层

                                                            • 视图层 View
                                                              • WXSS
                                                                • 事件
                                                                  • 基础组件
                                                                    • 动画
                                                                      • WXS
                                                                        • 页面渲染
                                                                          • 数据处理
                                                                          • WXS 事件
                                                                            • 简易双向绑定
                                                                              • 获取界面上的节点信息
                                                                                • 初始渲染缓存
                                                                                • 能力

                                                                                  • 小程序能力
                                                                                    • 网络
                                                                                      • 存储
                                                                                        • 文件系统
                                                                                          • 调试
                                                                                        • 开发者工具

                                                                                          • 工具使用
                                                                                            • 界面
                                                                                              • 调试
                                                                                                • npm 支持
                                                                                                  • 体验评分
                                                                                                  • 小程序框架

                                                                                                    • 小程序框架说明
                                                                                                      • 小程序简易开发指南
                                                                                                        • 小程序页面参数表
                                                                                                          • Page 插件
                                                                                                            • YAML 文件案例
                                                                                                            • 小程序分享

                                                                                                              WXS

                                                                                                              Mr.Hope2020年11月8日
                                                                                                              • 小程序
                                                                                                              大约 1 分钟

                                                                                                              此页内容
                                                                                                              • 页面渲染
                                                                                                              • 数据处理

                                                                                                              提示

                                                                                                              此部分在初步学习小程序的时候直接略过即可。

                                                                                                              WXS (WeiXin Script) 是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。

                                                                                                              1. WXS 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。
                                                                                                              2. WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。
                                                                                                              3. WXS 的运行环境和其他 JavaScript 代码是隔离的,WXS 中不能调用其他 JavaScript 文件中定义的函数,也不能调用小程序提供的 API。
                                                                                                              4. WXS 函数不能作为组件的事件回调。
                                                                                                              5. 由于运行环境的差异,在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 Android 设备上二者运行效率无差异。

                                                                                                              以下是一些使用 WXS 的简单示例,要完整了解 WXS 语法,请参考 WXS 语法参考。

                                                                                                              # 页面渲染

                                                                                                              <!--wxml-->
                                                                                                              <wxs module="m1">
                                                                                                              const 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">
                                                                                                              const getMax = array => {
                                                                                                                let max = undefined;
                                                                                                                for (let 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
                                                                                                              
                                                                                                              编辑此页open in new window
                                                                                                              上次编辑于: 2021/1/19 13:09:25
                                                                                                              贡献者: Mr.Hope
                                                                                                              上一页
                                                                                                              动画
                                                                                                              下一页
                                                                                                              WXS 事件

                                                                                                              预览:

                                                                                                              0  字
                                                                                                              评论
                                                                                                              Powered by Waline v2.5.1
                                                                                                              Copyright © 2019-present Mr.Hope