Taro初体验——多个wx小程序打包

年前有一个紧急的项目，主要是用于铺渠道拉新，需要快速上线一个IP微信小程序（小程序A），后续会拓展成多个功能类似的但是不同IP小程序（小程序B、小程序C、小程序D...）。

技术选型

Taro + Vue3 + webpack5+ ts

Taro多平台编译，防止后续产品需要需要发布到其他同类型小程序上（百度/支付宝/抖音等），且框架能力较为丰富，支持react和vue等。

Vue3小程序的主要是h5侧（vue）的阉割版本，快速平移封装的组件代码及功能逻辑代码较为方便。

项目基建

快速创建

用taro cli快速创建一个基础版本，后续根据项目需求进行调整

taro init ip_mini_app

cd ip_mini_app
# 使用 pnpm 安装依赖
pnpm install

文件夹设置

设计的文件夹层级结构如下所示

+-- src/ 静态资源文件夹(不经过webpack编译)
|   +-- apps/ 多个小程序文件夹，一个小程序一个文件夹
|       +-- projectA/ 小程序A
|           +-- pages/ 小程序A所有的页面文件夹
|           +-- utils/ 小程序A特有的方法
|           --- app.config.ts 小程序A的页面设置，包含pages和window信息设置
|           --- app.ts
|           --- index.html
|           --- project.config.json 小程序A的基础信息，包含名字、appid、描述等
|       +-- projectB/ 小程序B
|   +-- common/ 小程序公用部分
|       +-- components/ 小程序公用组件
|       +-- report/ 上报封装
|       +-- request/ 上报封装
|           --- cookie.js  cookie封装
|           --- http.js  接口请求封装
|       +-- utils/ 公用的常量或者方法

编译设置

调整tsconfig.json

在path模块添加一下common的路径

"paths": {
  "@/common/*": ["src/common/*"],
  "@/*": ["src/*"]
}

调整编译脚本

先执行node脚本，再进行编译 删除package.json脚本里的script内容，改成

"scripts": {
    "start": "node build/cli.js dev",
    "build": "node build/cli.js build"
},

根目录下，创建文件夹build，创建一个cli.js文件

# cli.js

const shell = require('shelljs')
const fs = require('fs')
const path = require('path')
const inquirer = require('inquirer')


const action = process.argv[2]
let app =  process.argv[3]
const runType = action == 'dev' ? '启动': '打包'

if(!app) {
    openInquirer()
    return
}

// 未输入项目名称则开启交互命令行
function openInquirer() {
  const projectList = fs.readdirSync(path.resolve(__dirname, '../src/apps'))
  // 过滤隐藏文件
  projectList.forEach((item, index) => {
    if(item.indexOf('.') == 0) {
      projectList.splice(index, 1)
    }
  })
  const promptList = [
    {
      type: 'list',
      message: `🚗请选择${runType}的小程序:`,
      name: 'pro',
      choices: [...projectList],
    },
  ]
  inquirer.prompt(promptList).then((answers) => {
    app = answers.pro
    start()
  })
}

function start() {
  // 处理配置文件
  process.env.APP = app
  console.log(`🚀🚀🚀🚀🚀🚀正在${runType}小程序：${app}`)
  let cmd = ''
  if(action == 'dev') {
    cmd = `taro build --type weapp --watch --app ${app}`
  } else {
    cmd = `taro build --type weapp --app ${app}`
  }

  const child = shell.exec(cmd, {async:true})
  child.stdout.on('data', function() {
    // console.log(data)
  })
}

start()

Taro编译配置调整

编译配置存放于项目根目录下的 config 目录中，其中：

• index.js 是通用配置
• dev.js 是项目预览时的配置
• prod.js 是项目打包时的配置

config/index.js文件调整sourceRoot、outputRoot，设置别名路径alias、添加一个全局变量TARO_APP_NAME。

import path from 'path'
const app = process.env.APP
const config = {
    ...
    // sourceRoot: 'src',
    // outputRoot: 'dist',
    sourceRoot: `src/apps/${app}`,
    outputRoot: `${app.toUpperCase()}APP`,
    alias: {
      '@': path.resolve(__dirname, '..', 'src'),
      '@/common': path.resolve(__dirname, '..', 'src/common'),
    },
    defineConstants: {
      TARO_APP_NAME: `'${app}'`,
    },
    ...
}

Taro的特殊之处

Taro支持的功能与文档和微信小程序文档类似，只是个别语法上略微有区别～

点击用@tap

1. 使用 @ 修饰符（或 v-on:，更多用法可以参考Vue 文档）替代小程序事件名中的 bind(替代支付宝小程序事件名中的 on)。
2. Vue 中点击事件使用 @tap。
3. 事件名称一般遵循组件属性规范（全部小写）。

<template>
    <button @tap="onClickFun">点击打印</button>
</template>

<script setup lang="ts">
const onClickFun = () => {
  console.log('click')
}
</script>

note: 更多查看下方相关链接2

其他功能

监听页面显示

实现类似visibleChange能力，从页面A进入页面B后再返回页面A，此时执行监听请求。

import { eventCenter } from '@tarojs/taro'
const instance = Taro.getCurrentInstance()

onMounted(() => {
  // 页面onShow
  eventCenter.on(instance.router?.onShow, () => {
      console.log('页面显示时，执行的方法')
  })
})

分享

分享一般包含分享好友、分享到朋友圈、生成分享链接、生成分享二维码、发送到电脑等。

Taro的分享页支持不同类型的分享（不同渠道可能支持程度不同，需要看官方文档）。此次小程序仅需要分享好友（自定义卡片内容），类似于下方的展示效果。

import { useShareAppMessage } from '@tarojs/taro'
useShareAppMessage(() => {
  return {
    title: '分享后的标题文案',
    imageUrl: `${imgUrl}`, // 图片宽高比5:4
    path: `/pages/index` // path可以携带参数
  };
});

note: 更多其他类型分享参见下方相关链接3

不支持的能力

• 不支持Vap动画，可以转换成mp4等。

相关链接

1. Taro 安装及使用
2. Taro 规范
3. (Taro、原生)微信小程序分享页