小程序使用之WXS

AprilJ 发布于2019-08-02 12:05 / 683人阅读

摘要：跟类似是描绘页面结构的，小程序有一套自己的标签，而大部分前端的样式都可以用在里面。关于数据绑定部分，小程序使用语法双大括号进行绑定。这里要讲的是，小程序自己的一套脚本语言，可以用于渲染页面。

文章链接：https://mp.weixin.qq.com/s/F1zzS7mvMpFaplq4KINzQg

之前做过一段时间的小程序开发，自己也写过两个自己的小程序，了解些前端的知识，相对而言还是比较容易上手的，小程序的视图采用wxml 与 wxss 编写，对比前端就是html 与 css。wxml 跟html 类似是描绘页面结构的，小程序有一套自己的标签，而大部分前端的css样式都可以用在 wxss里面。关于数据绑定部分，小程序使用 Mustache 语法（双大括号）进行绑定。这里要讲的是wxs ，小程序自己的一套脚本语言，可以用于渲染页面。

一个简单的例子，新建一个a.wxml 文件，代码如下：


  var str = "qwerty"
  module.exports.txt = str



  {{a.txt}}

这里wxs 代码直接编写在wxml文件内，定义wxs 的module名为a，这个参数是必须的；通过 exports暴露对外的属性，外部使用的话，直接通过module名调用属性值。
当然，wxs代码也可以写在以.wxs 为后缀名的文件内a.wxs ，里面直接编写代码：

var str = "qwerty"
module.exports.txt = str

使用的话，在a.wxml 文件内同样需要使用标签，并且定义module 名，注意src 使用相对路径引入wxs文件：



  {{a.txt}}

这里推荐使用以 .wxs 为后缀名来封装代码，这样便于其他文件通用。

同时，在.wxs模块中可以引用其他 wxs 文件模块，注意这里只能以文件的形式引用，通过require 引用文件相对路径。

//编写 b.wxs文件
var str = "123456"
module.exports.txt = str 

//wxs 代码直接编写在 wxml文件内

  //通过require 引用 b.wxs文件
  var b = require("./b.wxs")
  var str = "qwerty"
  module.exports.txt = b.txt



  {{a.txt}}


------------------------------------------

//在 a.wxs 里引用 b.wxs
var b = require("./b.wxs")
var str = "qwerty"
module.exports.txt = b.txt 

//a.wxml 里引入 a.wxs


  {{a.txt}}

同样wxs 还可以对外暴露方法，


  var add = function(i, j) {
    return i + j
  }
  module.exports.add = add



  {{a.add(1,2)}}

这样我们可以通过编写wxs，对data 数据进行处理，渲染到view层。

实际项目中，通过wxs 可以简化代码，更加具有通用性。

欢迎关注我的个人博客：https://www.manjiexiang.cn/

更多精彩欢迎关注微信号：春风十里不如认识你
一起学习，一起进步，欢迎上车，有问题随时联系，一起解决！！！

云服务器专线服务小程序个人使用怎么使用小程序怎样使用小程序小程序如何使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53325.html

小程序中的wxs语法

摘要：官方解释与是不同的语言，有自己的语法，并不和一致。的运行环境和其他代码是隔离的，中不能调用其他文件中定义的函数，也不能调用小程序提供的。由于运行环境的差异，在设备上小程序内的会比代码快倍。因为，是的数据类型语法是没有的。 wxs 官方解释 WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。 WXS 的运行环境和其他 JavaScrip...

tanglijun 2019-08-26 10:16 评论0 收藏0
微信小程序 WXS 不了解一下？骚骚的实现各大前端框架中的 filter

摘要：前言最近有在做小程序开发，在开发的过程中碰到一点小问题，描述一下先。介绍是小程序出的一套脚本语言，用于模板文件中，在模板文件中可以完成页面的结构。不依赖于运行时的基础库脚本，可以在所有版本的小程序中运行。前言最近有在做小程序开发，在开发的过程中碰到一点小问题，描述一下先。本人在职的公司对于后台获取的 json 数据需要做过滤转义的很多，不同的状态码会对应不同的文字，但是在微信小程...

琛ｈ。 2019-08-22 17:36 评论0 收藏0
小程序使用之自定义组件

摘要：今天要介绍的是小程序的自定义组件，类似的在做开发的过程中会用到自定义，封装成通用的组件可以在不同页面里重复使用可以将复杂的页面拆分成多个低耦合的模块，便于代码的维护。文章链接：https://mp.weixin.qq.com/s/3xPnDwLsg7pHc_xAmS1DUQ 在前一篇文章小程序使用之WXS中，介绍了关于 wxs 的使用，通过wxs处理数据再渲染到view层，可以简...

Ververica 2019-08-02 12:09 评论0 收藏0
小程序使用之自定义组件

摘要：今天要介绍的是小程序的自定义组件，类似的在做开发的过程中会用到自定义，封装成通用的组件可以在不同页面里重复使用可以将复杂的页面拆分成多个低耦合的模块，便于代码的维护。文章链接：https://mp.weixin.qq.com/s/3xPnDwLsg7pHc_xAmS1DUQ 在前一篇文章小程序使用之WXS中，介绍了关于 wxs 的使用，通过wxs处理数据再渲染到view层，可以简...

ztyzz 2019-08-29 17:28 评论0 收藏0
微信小程序初体验，入门练手项目--通讯录，后台是阿里云服务器

摘要：最近微信小程序异常火爆，很多人在学习，下面带着大家搭建下微信小程序的调试环境，并调试入门练手项目通讯录和基础即可微信推荐使用的语言，去菜鸟教程简单学习下，，，即可，方便大家学习。一、前言（坑爹的玩意）项目源码：https://github.com/saucxs/wx_... 微信小程序自从2017年，被各种看好，不过一段时间过去了还是反响平平，下半年随着各项功能的开放，很多企业...

joyvw 2019-08-28 17:46 评论0 收藏0