mp-weixin-back 0.0.1

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "mp-weixin-back",
+  "version": "0.0.1",
+  "description": "监听微信小程序的手势返回和页面默认导航栏的返回",
+  "main": "./dist/index.ts",
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest"
+  },
+  "keywords": [
+    "微信小程序",
+    "手势返回",
+    "vite",
+    "uniapp"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      }
+    },
+    "./client": {
+      "types": "./client.d.ts"
+    }
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/generator": "^7.26.2",
+    "@babel/parser": "^7.26.2",
+    "@babel/traverse": "^7.25.9",
+    "@types/babel__generator": "^7.6.8",
+    "@types/node": "^22.9.3",
+    "@vitejs/plugin-vue": "^5.2.0",
+    "@vue/compiler-sfc": "^3.2.45",
+    "@vue/test-utils": "^2.4.6",
+    "ast-kit": "^1.3.1",
+    "happy-dom": "^15.11.6",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vite": "^5.4.11",
+    "vitest": "^2.1.5",
+    "vue": "^3.5.13"
+  },
+  "lint-staged": {
+    "*": "prettier --write"
+  }
+}

package/readme.md

@@ -0,0 +1,75 @@
+### 功能描述
+
+监听手势返回和页面默认导航栏的返回事件
+
+### 在项目中使用
+
+#### 下载
+
+```ts
+npm install mp-weixin-back
+```
+
+#### 使用
+
+`vite.config.ts` 中配置
+
+```ts
+import mpBackPlugin from 'mp-weixin-back'
+
+export default defineConfig({
+  plugins: [mpBackPlugin()],
+})
+```
+
+在 vue3 中使用
+
+```ts
+import onPageBack from 'mp-weixin-back-helper'
+
+onPageBack(() => {
+  console.log('触发了手势返回')
+})
+```
+
+onPageBack 的类型定义为：
+
+```ts
+type Config = {
+  /**
+   * 是否阻止默认的回退事件，默认为 false
+   */
+  preventDefault: boolean
+  /**
+   * 阻止次数，默认是 `1`
+   */
+  frequency: number
+}
+
+function onPageBack(callback: () => void, params: Partial<Config>)
+```
+
+#### 引入类型
+
+在项目目录中的`src/env.d.ts` 或`src/shime-uni.d.ts` 文件中引入
+
+```
+/// <reference types="mp-weixin-back/client" />
+```
+
+或在 `tsconfig.json` 的 `compilerOptions` 下配置
+
+```json
+{
+  "compilerOptions": {
+    "types": ["mp-weixin-back/client"]
+  }
+}
+```
+
+### todolist
+
+- [ ] 兼容 uniapp 的 Vue2 项目
+- [ ] debug 模式
+- [ ] 热更新 pages.json 文件
+- [ ] 单元测试

package/src/context.ts

@@ -0,0 +1,54 @@
+import path from 'path'
+import fs from 'fs'
+import { ContextConfig, PagesJson } from '../types'
+import { transformVueFile } from '../utils'
+
+export class pageContext {
+  config: ContextConfig
+  pages: string[] = []
+
+  constructor(config: ContextConfig) {
+    this.config = config
+  }
+  getPagesJsonPath() {
+    const pagesJsonPath = path.join(this.config.root, 'src/pages.json')
+    return pagesJsonPath
+  }
+  // 获取页面配置详情
+  async getPagesJsonInfo() {
+    const hasPagesJson = fs.existsSync(this.getPagesJsonPath())
+    if (!hasPagesJson) return
+    try {
+      const content = await fs.promises.readFile(this.getPagesJsonPath(), 'utf-8')
+      const pagesContent = JSON.parse(content) as PagesJson
+      const { pages, subpackages } = pagesContent
+      if (pages) {
+        const mainPages = pages.reduce((acc: string[], current) => {
+          acc.push(current.path)
+          return acc
+        }, [])
+        this.pages.push(...mainPages)
+      }
+      if (subpackages) {
+        const root = subpackages.root
+        const subPages = subpackages.pages.reduce((acc: string[], current) => {
+          acc.push(`${root}/${current.path}`.replace('//', '/'))
+          return acc
+        }, [])
+        this.pages.push(...subPages)
+      }
+    } catch (error) {
+      throw new Error('请正确配置项目的pages.json文件')
+    }
+  }
+  // 获取指定id的page
+  getPageById(id: string) {
+    const path = (id.split('src/')[1] || '').replace('.vue', '')
+    // 页面级别
+    return this.pages.find((i) => i === path) || null
+  }
+  async transform(code: string, id: string) {
+    const result = await transformVueFile.call(this, code, id)
+    return result
+  }
+}

package/src/index.ts

@@ -0,0 +1,47 @@
+import { pageContext } from './context'
+import { virtualFileId } from '../utils/constant'
+import type { Plugin } from 'vite'
+import type { Config, UserOptions } from '../types'
+
+function MpBackPlugin(userOptions: UserOptions = {}): Plugin {
+  let context: pageContext
+
+  const defaultOptions: Config = {
+    preventDefault: false,
+    frequency: 1,
+  }
+  const options = { ...defaultOptions, ...userOptions }
+
+  return {
+    name: 'vite-plugin-mp-weixin-back',
+    enforce: 'pre',
+    configResolved(config) {
+      context = new pageContext({ ...options, mode: config.mode, root: config.root })
+    },
+    buildStart() {
+      context.getPagesJsonInfo()
+    },
+    resolveId(id) {
+      if (id === virtualFileId) {
+        return virtualFileId
+      }
+    },
+    load(id) {
+      if (id.includes('node_modules')) {
+        return
+      }
+      // 导出一个对象
+      if (id === virtualFileId) {
+        return `export default function onPageBack() {}`
+      }
+    },
+    async transform(code, id) {
+      if (id.includes('node_modules') || !id.includes('.vue')) {
+        return
+      }
+      return context.transform(code, id)
+    },
+  } as Plugin
+}
+
+export default MpBackPlugin

package/test/data/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>我是默认的界面</div>
+</template>
+
+<script setup>
+import onPageBack from 'mp-weixin-back-helper'
+
+onPageBack(() => {
+  console.log('触发了手势返回')
+})
+</script>
+
+<style></style>

package/test/generate.spec.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+// @ts-ignore
+import Index from './data/index.vue'
+
+describe('generate page-container components', () => {
+  it('page has template tag', async () => {
+    const wrapper = mount(Index)
+    await wrapper.vm.$nextTick()
+
+    const pageContainerRef = wrapper.find('page-container')
+    expect(pageContainerRef.exists()).toBe(true)
+  })
+})

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "lib": ["esnext"],
+    "types": ["node"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "esModuleInterop": true,
+    "skipDefaultLibCheck": true,
+    "skipLibCheck": true
+  }
+}

package/tsup.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['cjs', 'esm'],
+  sourcemap: false, // 生成 sourcemap
+  dts: {
+    resolve: true
+  },
+  clean: true, // 构建前清理 dist 目录
+  minify: false, // 是否压缩代码
+  target: 'es6',
+  external: ['vite'] // 标记 Vite 为外部依赖，避免打包到插件中
+})
+

package/types/index.ts

@@ -0,0 +1,35 @@
+export type UserOptions = Partial<Config>
+
+export type Config = {
+  /**
+   * 是否阻止默认的回退事件，默认为 false
+   */
+  preventDefault: boolean
+  /**
+   * 阻止次数，默认是 `1`
+   */
+  frequency: number
+  /**
+   * 页面回退时触发
+   */
+  onPageBack?: (params: BackParams) => void
+}
+
+export type BackParams = {
+  /**
+   * 当前页面路径
+   */
+  page: string
+}
+
+export type ContextConfig = Config & {
+  mode: string
+  root: string
+}
+
+type Pages = { path: string }[]
+
+export type PagesJson = {
+  pages: Pages
+  subpackages: { root: string; pages: Pages }
+}

package/utils/constant.ts

@@ -0,0 +1,2 @@
+export const virtualFileId = 'mp-weixin-back-helper'
+

package/utils/index.ts

@@ -0,0 +1,159 @@
+import generate from '@babel/generator'
+import { parse } from '@vue/compiler-sfc'
+import { babelParse, walkAST } from 'ast-kit'
+import { pageContext } from '../src/context'
+import { virtualFileId } from './constant'
+import type { SFCDescriptor } from '@vue/compiler-sfc'
+import type { Node } from '@babel/types'
+
+function isArrowFunction(func: Function) {
+  if (typeof func !== 'function') return false
+  return !func.hasOwnProperty('prototype') && func.toString().includes('=>')
+}
+
+async function parseSFC(code: string): Promise<SFCDescriptor> {
+  try {
+    return parse(code).descriptor
+  } catch (error) {
+    throw new Error(`解析vue文件失败，请检查文件是否正确`)
+  }
+}
+
+export async function transformVueFile(this: pageContext, code: string, id: string) {
+  // 检查代码中是否已经包含page-container组件
+  if (code.includes('<page-container')) {
+    return code
+  }
+
+  // 检查是否包含template标签
+  if (!code.includes('<template')) {
+    return code
+  }
+
+  const componentStr =
+    '<page-container :show="__MP_BACK_SHOW_PAGE_CONTAINER__" :overlay="false" @beforeleave="onBeforeLeave" :z-index="1" :duration="false"></page-container>'
+
+  const sfc = await parseSFC(code)
+  const setupCode = sfc.scriptSetup?.loc.source
+  const setupAst = babelParse(setupCode || '', sfc.scriptSetup?.lang)
+  let pageBackConfig = this.config
+  let hasPageBack = false,
+    hasImportRef = false,
+    pageBackFnName = 'onPageBack',
+    callbackCode = ``
+
+  if (setupAst) {
+    walkAST<Node>(setupAst, {
+      enter(node) {
+        if (node.type == 'ImportDeclaration' && node.source.value.includes(virtualFileId)) {
+          const importSpecifier = node.specifiers[0]
+          hasPageBack = true
+          pageBackFnName = importSpecifier.local.name
+        }
+
+        if (node.type == 'ImportDeclaration' && node.source.value === 'vue') {
+          const importSpecifiers = node.specifiers
+          for (let i = 0; i < importSpecifiers.length; i++) {
+            const element = importSpecifiers[i]
+            if (element.local.name == 'ref') {
+              hasImportRef = true
+              break
+            }
+          }
+        }
+
+        if (
+          node.type == 'ExpressionStatement' &&
+          node.expression.type == 'CallExpression' &&
+          node.expression.callee.loc?.identifierName == pageBackFnName
+        ) {
+          const callback = node.expression.arguments[0] // 获取第一个参数
+          const backArguments = node.expression.arguments[1]
+          // 第二个参数为object才有效，覆盖插件传入的配置
+          if (backArguments && backArguments.type == 'ObjectExpression') {
+            const config = new Function(`return (${generate(backArguments).code});`)()
+            pageBackConfig = { ...pageBackConfig, ...config }
+          }
+
+          if (
+            callback &&
+            (callback.type === 'ArrowFunctionExpression' || callback.type === 'FunctionExpression')
+          ) {
+            const body = callback.body
+            if (body.type === 'BlockStatement') {
+              // 遍历 BlockStatement 的内容
+              body.body.forEach((statement) => {
+                callbackCode += generate(statement).code // 将 AST 节点生成代码
+              })
+            }
+          }
+        }
+      },
+    })
+  }
+
+  if (!hasPageBack) return
+
+  // 不阻止默认行为就返回到上一层
+  if (!pageBackConfig.preventDefault) {
+    callbackCode += `uni.navigateBack({ delta: 1 });`
+  }
+
+  // 处理统一的返回方法
+  const configBack = (() => {
+    if (!pageBackConfig.onPageBack) return ''
+    if (typeof pageBackConfig.onPageBack !== 'function') {
+      throw new Error('`onPageBack` must be a function')
+    }
+
+    const params = JSON.stringify({
+      page: this.getPageById(id),
+    })
+
+    const hasFunction = pageBackConfig.onPageBack.toString().includes('function')
+
+    if (isArrowFunction(pageBackConfig.onPageBack) || hasFunction) {
+      return `(${pageBackConfig.onPageBack})(${params});`
+    }
+
+    return `(function ${pageBackConfig.onPageBack})()`
+  })()
+
+  const beforeLeaveStr = `
+    ${!hasImportRef ? "import { ref } from 'vue'" : ''}
+    let __MP_BACK_FREQUENCY__ = 1
+    const __MP_BACK_SHOW_PAGE_CONTAINER__ = ref(true);
+    const onBeforeLeave = () => {
+      console.log("__MP_BACK_FREQUENCY__", __MP_BACK_FREQUENCY__, ${pageBackConfig.frequency})
+      if (__MP_BACK_FREQUENCY__ < ${pageBackConfig.frequency}) {
+        __MP_BACK_SHOW_PAGE_CONTAINER__.value = false
+        setTimeout(() => {
+          __MP_BACK_SHOW_PAGE_CONTAINER__.value = true
+        }, 0);
+        __MP_BACK_FREQUENCY__++
+      }
+      // 运行配置的匿名函数
+      ${configBack}
+      ${callbackCode}
+    };
+  `
+
+  // 在template标签后插入page-container组件和script setup声明
+  const result = code.replace(
+    /(<template.*?>)([\s\S]*?)(<\/template>)([\s\S]*?)(<script\s+(?:lang="ts"\s+)?setup.*?>|$)/,
+    (match, templateStart, templateContent, templateEnd, middleContent, scriptSetup) => {
+      // 处理script setup标签
+      const hasScriptSetup = Boolean(scriptSetup)
+      const scriptStartTag = hasScriptSetup ? scriptSetup : '<script setup>'
+      const scriptEndTag = hasScriptSetup ? '' : '</script>'
+
+      // 构建注入的内容
+      const injectedTemplate = `${templateStart}${templateContent}\n ${componentStr}\n${templateEnd}`
+      const injectedScript = `\n${middleContent}${scriptStartTag}\n${beforeLeaveStr}\n${scriptEndTag}`
+
+      return injectedTemplate + injectedScript
+    }
+  )
+
+  return result
+}

package/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import mpBack from './dist/index.mjs'
+
+export default defineConfig({
+  plugins: [mpBack(), vue()],
+  test: {
+    environment: 'happy-dom',
+  },
+})