【微信小程序】阶段开发总结

【微信小程序】阶段开发总结

《工欲善其事，必先利其器》

一、页面代码量过多的解决方案

最近开发的小程序页面里面包含非常多的代码，而且一个页面里面分为了很多步骤，根据不同的进度去显示不同的填写内容，因此，首先我想到的解决方案就是分组件开发：

由于组件之间时不时需要数据的交互，并且表单里面包含了字段的校验，所以我们需要用组件这种具有更多丰富的API方式来解决这种代码量巨多的场景。

另外一种方式就是采取 import wxml ，但是这种方案的缺点也很明显，就是数据传递方式非常单一，要通过在 template 标签上用 data=" " 传入。而且，它的JavaScript只能写在主页面的JavaScript文件里面：

二、判断显示隐藏的解决方案

方案一：wx:if

这种方案基本上每个开发者都会不假思索的应用，但是，如果像表单这些数据，你填完数据之后需要条件切换显示隐藏的话，这时候隐藏，再显示，数据就没了。

这是因为 wx:if 是直接把DOM删除掉的，而不是 visibility: hidden 这种隐藏方式。

方案二：hidden

较第一种方式，这种方式原理是 visibility: hidden ，该CSS的表现是元素不可见，但仍占据文档流中的空间。所以，如果要将元素隐藏但保留其所占据的空间和数据，则是需要使用 hidden 的。

<view hidden="{{true}}"></view>

当判断条件为真时，元素不显示，数据保留。

三、组件之间交互的解决方案

方案一：properties，用于父组件向子组件传递数据；

方案二：triggerEvent，用于子组件向父组件反馈回调；

方案三：使用 getCurrentPages() 获取父组件的数据，再利用父组件注册一个方法，返回数据。

例如：

子组件：

const pages = getCurrentPages()
const prevUrl = pages[pages.length - 2]
prevUrl._countrySelect(e.currentTarget.dataset.address)

父组件：

// 监听子组件数据
_countrySelect(val) {
    console.log(val)
},

四、vantweapp表单校验的解决方案

vantweapp，error-message 垃圾。

WxValidate，垃圾。

如果你是有很多表单校验，里面有很多条件判断，但是又不得不使用这两个库时，建议你使用 WxValidate.prototype.checkMyRule 的方式自己去维护一套数据和校验的方法，否则你会很提痛苦。

五、关于wxs的应用

微信小程序支持的模板语言是 WXML，它只支持基本的逻辑和循环语句。为了满足开发者的一些高级需求，微信小程序引入了 wxs（小程序脚本），它类似于 JavaScript。

wxs 可以在 WXML 文件中被使用，并且具有以下功能：

1. 在 wxml 中，运算符 / 表达式仅支持部分 JavaScript 运算符，而 wxs 中可以使用完整的 JavaScript 运算符。
2. 由于 wxml 的限制，导致一些字符串截取、数组遍历等操作不太方便，而这些操作在 wxs 中更加方便。
3. 部分复杂的业务逻辑可以封装在 wxs 中，减轻 WXML 中的代码量。

使用 wxs 的步骤如下：

1. 在小程序项目中创建 .wxs 文件。
2. 在需要使用 wxs 的 .wxml 文件中使用 wxs 标签引入 .wxs 文件，并设置模块名。
3. 在 .wxs 文件中定义方法或变量，并使用 module.exports 导出。
4. 在 .wxml 中使用 {{}} 绑定数据时调用 wxs 文件中的方法或变量。

例如，以下是 wxs 文件中定义函数并导出的示例：

var a = 1;
var b = 2;
var c = 3;

function sum(x, y) {
  return x + y;
}

module.exports = {
  a: a,
  b: b,
  c: c,
  sum: sum
}

在 .wxml 文件中引入并使用定义的函数和变量：

<wxs module="test">
  var test = require('./test.wxs');
</wxs>

<view>{{ test.a }}</view>
<view>{{ test.sum(test.b, test.c) }}</view>

以上代码展示了如何在 .wxml 中引入 wxs 文件并使用其中定义的变量和方法。