Enhanced WeChat JSSDK

A Promise-based WeChat JSSDK wrapper with TypeScript support and framework integrations.

Features

• 🚀 Promise-based API
• 📦 TypeScript support
• ⏱️ Timeout control
• 🔌 Framework integrations (Vue 2/3)
• 🌐 Works in both module and non-module environments

Installation

NPM (For Vue/JavaScript projects)

npm install @fgz/enhanced-wx-js-sdk

CDN (For pure HTML/JavaScript)

<script src="path/to/wx-js-sdk-plugin.min.js"></script>

Usage

JavaScript Environment

<script src="path/to/wx-js-sdk-plugin.min.js"></script>
<script>
  // WxJsSDK is globally available
  WxJsSDK.config({
    debug: false,
    appId: 'your-app-id',
    timestamp: 'your-timestamp',
    nonceStr: 'your-nonce-str',
    signature: 'your-signature',
  }).then(() => {
    // Ready to use WeChat JSSDK
    return WxJsSDK.getLocation();
  }).then(location => {
    console.log('Current location:', location);
  }).catch(err => {
    console.error('Error:', err);
  });
</script>

Vue Environment

Register the Plugin (Optional)

Vue 3.x

import { createApp } from 'vue'
import WxJsSdkPlugin from '@vue/wx-js-sdk-plugin'

const app = createApp(App)
app.use(WxJsSdkPlugin)
app.mount('#app')

Vue 2.x

import Vue from 'vue'
import WxJsSdkPlugin from '@vue/wx-js-sdk-plugin'

Vue.use(WxJsSdkPlugin)

new Vue({
  // ... your Vue options
})

Using in Components

import { defineComponent } from 'vue'
import { WxJsSDK } from '@fgz/enhanced-wx-js-sdk'

export default defineComponent({
  async mounted() {
    // Using via global properties
    await this.$wxJsSdk.config({
      debug: false,
      appId: 'your-app-id',
      timestamp: 'your-timestamp',
      nonceStr: 'your-nonce-str',
      signature: 'your-signature',
    })

    // Or using via inject
    const wxJsSdk = inject('wxJsSdk')
    await wxJsSdk.config({
      // ... configuration options
    })
  }
})

API

Available Methods

All methods return a Promise and support timeout configuration:

// Configuration
await WxJsSDK.config(params: ConfigOptions, timeout?: number)

// Image APIs
await WxJsSDK.chooseImage(params: ChooseImageOptions, timeout?: number)
await WxJsSDK.previewImage(params: PreviewImageOptions, timeout?: number)

// Location APIs
await WxJsSDK.getLocation(params?: GetLocationOptions, timeout?: number)
await WxJsSDK.openLocation(params: OpenLocationOptions, timeout?: number)

// Payment
await WxJsSDK.chooseWXPay(params: ChooseWXPayOptions, timeout?: number)

// And more...

Type Definitions

interface ConfigOptions {
  debug?: boolean
  appId: string
  timestamp: string
  nonceStr: string
  signature: string
  jsApiList?: string[]
}

interface ChooseImageOptions {
  count?: number
  sizeType?: Array<'original' | 'compressed'>
  sourceType?: Array<'album' | 'camera'>
}

interface GetLocationOptions {
  type?: 'wgs84' | 'gcj02'
  // ...
}

Building

# Install dependencies
npm install

# Build the plugin
npm run build

Version Numbering

The plugin follows WeChat JSSDK versioning scheme:

• Major and minor versions follow the official WeChat JSSDK
• Patch version is a 5-digit number:
  • First 3 digits: WeChat JSSDK patch version
  • Last 2 digits: Plugin patch version

Example:

• 1.6.10000 = WeChat JSSDK 1.6.1 + Plugin patch 00
• 1.6.10001 = WeChat JSSDK 1.6.1 + Plugin patch 01

License

MIT