微信小程序-WXS独立文件

简介: 在上一章当中,我们将 WXS 的内容与 WXML 混合在一起了,这样就导致了我们后期的不利于维护,这里一期当中我来介绍一下,如何将 WXS 内容编写到一个单独的 WXS 文件进行存储,然后与 WXML 进行分离。

在上一章当中,我们将 WXS 的内容与 WXML 混合在一起了,这样就导致了我们后期的不利于维护,这里一期当中我来介绍一下,如何将 WXS 内容编写到一个单独的 WXS 文件进行存储,然后与 WXML 进行分离。


在页面文件夹当中新建 index.wxs 文件:

function formartData (count) {
  return count >= 1000 ? count / 1000 + 'k' : count;
}
module.exports.formartData = formartData;


将之前编写的 WXS 内容移动到该文件当中,然后更改 index.wxml 内容:

<wxs src='./index.wxs' module="tool"/>
<view>
  {{ tool.formartData(count) }}
</view>


通过 <wxs src='wxs文件地址' module="模块名称"/> 的方式进行导入使用。


目录
相关文章
|
6月前
|
小程序 前端开发 数据可视化
微信小程序云开发入门教程-全局文件介绍
微信小程序云开发入门教程-全局文件介绍
|
3月前
|
小程序 前端开发
|
4月前
|
移动开发 小程序 前端开发
uniap开发微信小程序如何在线预览pdf文件
这是一段关于在线预览和处理PDF的多方案说明,包括使用JavaScript库PDF.js(如`pdfh5.js`)实现H5页面预览,提供QQ群和技术博客链接以获取帮助和支持。还介绍了两个适用于Uni-app的插件,一个用于H5、小程序和App中的PDF预览和下载,另一个专门解决手机端PDF预览问题。此外,还详细描述了在Uni-app中使用微信小程序API`wx.openDocument`显示PDF的步骤,包括上传文件、配置权限和编写代码。
|
4月前
|
XML Java 数据格式
支付系统----微信支付20---创建案例项目--集成Mybatis-plus的补充,target下只有接口的编译文件,xml文件了,添加日志的写法
支付系统----微信支付20---创建案例项目--集成Mybatis-plus的补充,target下只有接口的编译文件,xml文件了,添加日志的写法
|
4月前
|
前端开发
支付系统--微信支付21--搭建前端环境,payment-demo-front这个项目文件夹是前端显示文件,payment-demo是后端项目,支付页面常见三个页面:购买课程,我的订单,下载账单
支付系统--微信支付21--搭建前端环境,payment-demo-front这个项目文件夹是前端显示文件,payment-demo是后端项目,支付页面常见三个页面:购买课程,我的订单,下载账单
|
6月前
|
小程序 开发工具 开发者
【微信小程序】微信开发者工具 引用 vant-weapp时“miniprogram/node_modules/@babel/runtime/index.js: 未找到npm包入口文件” 解决办法
【微信小程序】微信开发者工具 引用 vant-weapp时“miniprogram/node_modules/@babel/runtime/index.js: 未找到npm包入口文件” 解决办法
322 1
|
6月前
|
JavaScript 小程序 前端开发
【微信小程序】-- WXS 脚本(二十九)
【微信小程序】-- WXS 脚本(二十九)
|
14天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
208 7
|
14天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
275 1
|
28天前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
80 7

热门文章

最新文章