tinajs/mina-webpack

无法引用 wxs 的问题

ambar opened this issue · 3 comments

ambar commented
  • 一种可能性是像 <image src /> 一样被微信官方支持：wxs 无法以绝对路径引用
  • 或者升级 wxml-loader，再配置 enforceRelativePath 和 root 参数的同时，设定 file-loader 的 useRelativePath 和 context 参数 —— 四个参数设置有点麻烦
  • 或者 fork file-loader，像这样改动： relative-file-loader/src/index.js#L47-L50 ，调整生成 public path 的方式，确保只生成相对路径
imyelo commented

wxs 目前主要的运用场景应该都是做计算属性，简化 wxml 模板。但因为 wxs 的 runtime 相对特殊，开发体验糟糕，所以我推荐使用 tina.js 中的 compute 方法 代替，并避免使用 wxs。

如果无法避免，比如在旧项目中已经使用了 wxs，或者希望借助 wxs 做性能优化，那么推荐通过以下两种方式使用：

  1. 在 <template> 中直接内联 <wxs> 的内容：
<!-- page.mina -->
<template>
  <view>
    <view>Roll: {{ random }}</view>
    <wxs module="random">
      var MAX = 100
      module.exports = Math.floor(Math.random() * MAX)
    </wxs>
  </view>
</template>

<script>
Page({})
</script>
  1. 与 @ambar 的思路一致，引入 relative-file-loader (示例)：
// webpack.config.js
// ...
      {
        test: /\.wxs$/,
        use: {
          loader: 'relative-file-loader',
          options: {
            name: 'wxs/[name].[hash:6].[ext]',
          },
        },
      },
// ...
<!-- page.mina -->
<template>
  <view>
    <view>Now: {{ now }}</view>
    <wxs src="../wxs/now.wxs" module="now" />
  </view>
</template>

<script>
Page({})
</script>

使用 relative-file-loader，是因为在目前微信小程序的 wxml 语法中，暂不支持使用绝对路径引用 wxs 文件。

仍需注意的是，由于 wxs runtime 特殊，所以还无法和普通的 javascript 文件一样直接使用其他 loader 做预编译（例如 babel-loader）。

ambar commented

@imyelo 如果是列表中的数组怎么处理呢？

imyelo commented

@ambar

如果用 tina 的 compute：

import { Page } from '@tinajs/tina'
import fecha from 'fecha'

Page.define({
  data: {
    messages: [{
      content: 'foobar',
      createdAt: Date.now(),
    }],
  },
  compute ({ messages }) {
    return {
      messages: messages.map((message) => {
        return {
          ...message,
          prettyCreatedAt: fecha.format(message.createdAt, 'YYYY-MM-DD HH:mm:ss'),
        }
      }),
    }
  },
})

不过像上面这种场景，确实更适合用 filter (wxs)。

  • 👍1