Front listing

  • vue3.0
  • ts
  • vue-cli
  • weixin-js-sdk

Wechat platform configuration

1. Install the SDK

    npm install weixin-js-sdk --save
Copy the code

If weixin-js-SDK appears in package.json file, the installation is successful!

2. Encapsulation of wechat SDK

  • Create the WXSDK /index.ts file in the SRC folder
import wx from "weixin-js-sdk";
import type { App } from "vue";

const plugin = {
  install(Vue: App): void{ Vue.config.globalProperties.$wechat = wx; Vue.config.globalProperties.wechat = wx; }};export default plugin;
export const install = plugin.install;
Copy the code

This will cause an error:

Unable to find declaration file for module ‘weixin-js-sdk’. F:/web/vue-ts-eslint/node_modules/[email protected]@weixin-js-sdk/index.js implicitly has type “any”. Try using NPM I — save-dev@types /weixin-js-sdk (if present), or add a declare module ‘weixin-js-sdk’; New declaration (.d.ts) file

  • Error handling: Create the index.d.ts file in the SRC folder
    declare module "weixin-js-sdk";
Copy the code
  • Mian. Ts change
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import wxsdk from "./wxsdk";

createApp(App).use(store).use(router).use(wxsdk).mount("#app");
Copy the code

The Vue page uses wechat SDK

Property ‘wechat’ does not exist on type ‘CreateComponentPublicInstance<{ [x: string & `on{string}]: ((… args: any[]) => any) | undefined; } | { [x: string & on${string}`]: undefined; }, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, … 10 more … , {} > ‘.

  • Error handling: Create type.d.ts file in SRC folder
export {};
import wx from "weixin-js-sdk";

declare module "@vue/runtime-core" {
  interface ComponentCustomProperties {
    $wechat: wx; }}Copy the code

That’s it!