# xinjiangkf-miniapp

**Repository Path**: anrandu/xinjiangkf-miniapp

## Basic Information

- **Project Name**: xinjiangkf-miniapp
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-07
- **Last Updated**: 2026-05-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 中国电信新疆客服小程序

基于 Vue3 + Uniapp + Vant Weapp + Pinia 开发的小程序项目

## 技术栈

- Vue 3
- Uniapp
- Vant Weapp
- Pinia

## 开发

```bash
# 安装依赖
npm install

# 微信小程序开发
npm run dev:mp-weixin
```

## 构建

```bash
# 微信小程序构建
npm run build:mp-weixin
```

## 项目结构

```
├── src/                # 源代码目录
│   ├── pages/          # 页面目录
│   ├── components/     # 组件目录
│   ├── store/         # Pinia状态管理
│   ├── utils/         # 工具函数
│   ├── static/        # 静态资源
│   ├── App.vue        # 应用入口
│   └── main.js        # 主入口文件
├── pages.json         # 页面配置
├── manifest.json      # 应用配置
└── package.json       # 项目依赖
```

## H5（公众号内）使用 JS-SDK + 开放标签（wx-open-launch-weapp）

本项目除了微信小程序端（`mp-weixin`）外，还支持 **H5**（`npm run dev:h5`/`build:h5`）。
当 H5 在 **微信内置浏览器** 打开时，可以使用微信 JS-SDK 的 **开放标签** `wx-open-launch-weapp` 来“一键打开小程序”。

### 你需要准备什么（重要）

- **公众号后台配置**：必须设置“JS 接口安全域名”（HTTPS）。
- **后端签名接口**：前端调用后端生成签名（`appId/timestamp/nonceStr/signature`）。
  - 项目已封装接口：`api.getSignature`（见 `src/utils/api.js`）
  - 请求参数：`url = window.location.href.split('#')[0]`（带 query、不带 hash）
- **目标小程序原始ID（username）**：形如 `gh_xxxxx`（不是 appId）。
- **目标小程序路径（path）**：如 `activity/recharge/index/index?scene=kfgzh`

更详细的后端签名说明见：`WECHAT_JS_SDK.md`

### 项目里已经做了哪些集成

- **已安装依赖**：`weixin-js-sdk`
- **入口配置（仅 H5）**：`src/main.js`
  - 让 Vue3 把 `wx-open-launch-weapp` 当作自定义标签，不再报“未知元素”
  - 全局挂载：`app.config.globalProperties.$wx = jweixin`，并注入 `window.jweixin`
- **页面示例（首页充值入口）**：`src/pages/index/index.vue`
  - 使用 `v-html` 动态渲染 `wx-open-launch-weapp`（更稳，避免模板编译冲突）
  - 在 `jweixin.ready()` 后生成按钮 HTML

### 你需要改的两个地方（否则按钮无法打开小程序）

1. **替换目标小程序原始ID**：在 `src/pages/index/index.vue` 中把 `TARGET_WEAPP_USERNAME = 'gh_xxxxx'` 改成真实值
2. **确认后端签名接口可用**：确保 `api.getSignature` 返回 `code=200` 且包含 `appId/timestamp/nonceStr/signature`