小程序使用之WXS

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

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

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

<wxs module="a">
  var str = "qwerty"
  module.exports.txt = str
</wxs>

<view>
  {{a.txt}}
</view>

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

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

使用的话，在a.wxml 文件内一样须要使用<wxs/> 标签，而且定义module 名，注意src 使用相对路径引入wxs文件：

<wxs src="./index.wxs" module="a"/>
<view>
  {{a.txt}}
</view>

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

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

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

//wxs 代码直接编写在 wxml文件内
<wxs module="a">
  //经过require 引用 b.wxs文件
  var b = require("./b.wxs")
  var str = "qwerty"
  module.exports.txt = b.txt
</wxs>

<view>
  {{a.txt}}
</view>

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

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

//a.wxml 里引入 a.wxs
<wxs module="a" src="./index.wxs"/>
<view>
  {{a.txt}}
</view>

一样wxs 还能够对外暴露方法，

<wxs module="a">
  var add = function(i, j) {
    return i + j
  }
  module.exports.add = add
</wxs>

<view>
  {{a.add(1,2)}}
</view>

这样咱们能够经过编写wxs，对data 数据进行处理，渲染到view层。

实际项目中，经过wxs 能够简化代码，更加具备通用性。

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

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