小程序使用之WXS

简介: 文章链接:https://mp.weixin.qq.com/s/F1zzS7mvMpFaplq4KINzQg 之前做过一段时间的小程序开发,自己也写过两个自己的小程序,了解些前端的知识,相对而言还是比较容易上手的,小程序的视图采用wxml 与 wxss 编写,对比前端就是html 与 css。

之前做过一段时间的小程序开发,自己也写过两个自己的小程序,了解些前端的知识,相对而言还是比较容易上手的,小程序的视图采用wxmlwxss 编写,对比前端就是htmlcsswxmlhtml 类似是描绘页面结构的,小程序有一套自己的标签,而大部分前端的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 文件内同样需要使用 标签,并且定义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 可以简化代码,更加具有通用性。

目录
相关文章
|
5月前
|
小程序 前端开发 网络协议
微信小程序开发之后台数据交互及wxs应用
微信小程序开发之后台数据交互及wxs应用
69 0
|
6月前
|
小程序 JavaScript 前端开发
微信小程序前后端交互与WXS的应用
微信小程序前后端交互与WXS的应用
74 0
|
6月前
|
存储 小程序 JavaScript
无纸化办公小程序数据交互、wxs的使用
无纸化办公小程序数据交互、wxs的使用
44 0
|
6月前
|
小程序 前端开发 网络协议
微信小程序开发之后台数据交互及wxs应用
微信小程序开发之后台数据交互及wxs应用
89 0
微信小程序开发之后台数据交互及wxs应用
|
6月前
|
小程序 JavaScript
微信小程序-WXS模块
微信小程序-WXS模块
60 0
|
6月前
|
小程序 前端开发 JavaScript
微信小程序连接数据库与WXS的使用
微信小程序连接数据库与WXS的使用
47 0
|
5月前
|
存储 小程序 前端开发
微信小程序数据交互------WXS的使用
微信小程序数据交互------WXS的使用
69 0
|
1月前
|
JavaScript 小程序 前端开发
【微信小程序】-- WXS 脚本(二十九)
【微信小程序】-- WXS 脚本(二十九)
|
8月前
|
小程序 JavaScript
微信小程序-WXS支持的语法
一句话带过,大胆的写你的JS代码,如果发现报错了不行了,在查看官方文档的语法参考文档:https://developers.weixin.qq.com/miniprogram/dev/reference/wxs/
42 0
|
8月前
|
存储 小程序
微信小程序-WXS独立文件
在上一章当中,我们将 WXS 的内容与 WXML 混合在一起了,这样就导致了我们后期的不利于维护,这里一期当中我来介绍一下,如何将 WXS 内容编写到一个单独的 WXS 文件进行存储,然后与 WXML 进行分离。
77 0

热门文章

最新文章