zoukankan      html  css  js  c++  java
  • 微信小程序 wxs脚本

    wxs概述:

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

    wxs的注意点:

    1. 没有兼容性,wxs不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。

    2. 与JavaScript 不同, wxs与JavaScript是不同的语言,有自己的语法,并不和javasc一致。

    3. 隔离性,wxs的运行环境和其他JavaScript代码时隔离的,wxs中不能调用JavaScript文件中定义的函数,也不能调用小程序提供的API。

    4. 不能作为事件回调,wxs函数不能作为组件的事件回调。

    5. wxs 在 IOS设备比JavaScript运行快: 由于运行环境的差异,在IOS设备上小程序内的wxs会比JavaScript代码快 2~20倍。在android设备上运行效率无差异。

    wxs遵循CommonJS 模块化规范:

    CommonJS是JavaScript的模块规范之一,小程序的脚本语言wxs遵循了CommonJS规范,因此,使用wxs的体验和使用node.js 的体验比较相似。

    在wxs中,可以使用CommonJS中规定的如下成员:

    module对象: 每个wxs都是独立的模块,每个模块有一个内置的module对象,每个模块都有自己独立的作用域。

    module.exports: 由于wxs拥有独立作用域,所以在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见,通过module.exports 属性,可以对外共享本模块的私有变量与函数。

    require函数: 在wxs 模块中引用wxs文件模块,可以使用require函数。

    wxs基础语法:

    1.使用module.exports 向外共享成员。

    2.使用require 引入其他wxs模块。

    3. 使用require 的注意点: 

    只能应用.wxs 文件模块,且必须使用相对路径。

    wxs模块均为单例,wxs模块在第一次被引用时,会自动出事话单例对象,多个页面,多个地方,多次引用,使用的都是同一个wxs模块对象。

    如果wxs模块在定义之后,一直没有被引用,则该模块不会被解析与运行。

    4.支持的数据类型:

    wxs语言目前有以下8种数据类型:

    number 数值类型, string 字符串类型, boolean 布尔类型, object 对象类型,function 函数类型, array 数组类型, data 日期类型, regexp 正则


    内嵌wxs脚本:

    wxs代码剋编写在wxml文件中,<wxs></wxs>标签内,就像JavaScript代码可以编写在html文件中的<script></script>标签内一样。

    wxml文件中的每个<wxs></wxs>标签,必须提供一个module属性,用来指定当前<wxs></wxs>标签的模块名。在单个wxml文件内,建议其值唯一。

    <!-- wxml -->
    
    <wxs module="foo">
    var msg = "hello word"
    module.exports = {
        msg
    }
    </wxs>
    
    <view>{{foo.msg}}</view>
    

    外联wxs脚本:

    wxs代码可以编写在以.wxs为后缀的问价内,就像js一样可以编写在.js文件中一样。

    //  pages/home/tools.wxs
    
    var foo = "hello word"
    var bar = function () {
        console.log(foo)
    }
    
    module.exports = {
        foo:foo,
        bar: bar  
    }
    
    module.exports.msg = "abc123"
    

    在wxml中引入外联的wxs脚本:

    在wxml中引入外联wxs脚本,必须要为<wxs></wxs> 标签添加 module 和src属性。,s r c必须是相对路径

    // pages/index/index.wxml
    
    <wxs src="../tools.wxs" module = "tools" />
    
  • 相关阅读:
    mssql锁
    gridview 分页兼容BOOTSTRAP
    BOOTSTRAP前端模板
    bootstrap 简单模板
    ajax 跨域访问的解决方案
    webapi之权限验证
    webapi权限常见错误
    ajax跨域解决方案
    iis 部署webapi常见错误及解决方案
    OOM AutoMapper的简单实用
  • 原文地址:https://www.cnblogs.com/liea/p/11802190.html
Copyright © 2011-2022 走看看