or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

api-interceptors.mdconfig-compilation.mdevent-system.mdframework-runtime.mdindex.mdmp-runtime.mdutility-functions.mdwxs-utilities.md
tile.json

tessl/npm-dcloudio--uni-mp-weixin

WeChat Mini Program platform adapter for uni-app enabling cross-platform Vue.js development

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@dcloudio/uni-mp-weixin@2.0.x

To install, run

npx @tessl/cli install tessl/npm-dcloudio--uni-mp-weixin@2.0.0

index.mddocs/

@dcloudio/uni-mp-weixin

@dcloudio/uni-mp-weixin is the WeChat Mini Program platform adapter for uni-app, enabling developers to build cross-platform Vue.js applications that run seamlessly on WeChat's Mini Program platform. It provides runtime libraries, compiler configuration, API adapters, and development tooling specifically optimized for WeChat Mini Program deployment.

Package Information

  • Package Name: @dcloudio/uni-mp-weixin
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install @dcloudio/uni-mp-weixin

Core Imports

// Default export (uni runtime object) + named exports
import uni, { createApp, createPage, createComponent, createPlugin, createSubpackageApp } from "@dcloudio/uni-mp-weixin";

// Or import individual components
import { createApp } from "@dcloudio/uni-mp-weixin";
import { Page, Component, Behavior, nextTick } from "@dcloudio/uni-mp-weixin/dist/mp";

For CommonJS:

// Import default uni object and named exports
const uni = require("@dcloudio/uni-mp-weixin").default;
const { createApp, createPage, createComponent, createPlugin, createSubpackageApp } = require("@dcloudio/uni-mp-weixin");

// Import MP runtime components
const { Page, Component, Behavior, nextTick } = require("@dcloudio/uni-mp-weixin/dist/mp");

Basic Usage

import { createApp, createPage } from "@dcloudio/uni-mp-weixin";

// Create uni-app application for WeChat Mini Program
const app = createApp({
  onLaunch() {
    console.log('App launched');
  },
  globalData: {
    userInfo: null
  }
});

// Create a page component
const indexPage = createPage({
  data() {
    return {
      title: 'Hello World'
    };
  },
  onLoad() {
    console.log('Page loaded');
  },
  methods: {
    handleTap() {
      uni.showToast({
        title: 'Tapped!',
        icon: 'success'
      });
    }
  }
});

Architecture

@dcloudio/uni-mp-weixin is built around several key components:

  • Framework Runtime: Core application and component creation functions adapted for WeChat Mini Program lifecycle
  • Event System: Vue.js-compatible event handling ($on, $off, $once, $emit) integrated with WeChat Mini Program event model
  • API Proxy: Universal uni object that wraps WeChat Mini Program APIs with cross-platform compatibility
  • Interceptor System: Middleware pattern for API call interception and modification
  • Compilation Tools: Build-time configuration and template compilation for WeChat Mini Program format
  • Development Tooling: Integration with WeChat Developer Tools for debugging and automation

Capabilities

Framework Runtime

Core framework functions for creating WeChat Mini Program applications, pages, and components from Vue.js component options.

function createApp(options: AppOptions): VueInstance;
function createPage(options: PageOptions): WeXinPageComponent;
function createComponent(options: ComponentOptions): WeixinComponent;
function createSubpackageApp(vm: VueInstance): VueInstance;
function createPlugin(vm: VueInstance): VueInstance;

Framework Runtime

Event System

Vue.js-compatible event system that integrates with WeChat Mini Program's event handling model.

function $on(event: string, callback: Function): any;
function $off(event?: string, callback?: Function): any;
function $once(event: string, callback: Function): any;
function $emit(event: string, ...args: any[]): any;

Event System

API Interceptors

Middleware system for intercepting and modifying API calls, supporting both global and method-specific interceptors.

function addInterceptor(method: string | object, option?: object): void;
function removeInterceptor(method: string | object, option?: object): void;

interface InterceptorOption {
  invoke?: Function[];
  success?: Function[];
  fail?: Function[];
  complete?: Function[];
  returnValue?: Function[];
}

API Interceptors

Utility Functions

Helper functions for unit conversion and WeChat Mini Program specific operations.

function upx2px(upx: number | string, newDeviceWidth?: number): number;
function getProvider(options: ProviderOptions): void;

interface ProviderOptions {
  service: 'oauth' | 'share' | 'payment' | 'push';
  success?: (result: ProviderResult) => void;
  fail?: (error: any) => void;
  complete?: (result: any) => void;
}

Utility Functions

Configuration and Compilation

Build-time configuration and template compilation utilities for WeChat Mini Program development.

// Configuration options for WeChat Mini Program platform
interface WeXinConfig {
  options: {
    cssVars: Record<string, string>;
    extnames: {
      style: string;
      template: string; 
      filter: string;
    };
    filterTag: string;
    project: string;
    subPackages: boolean;
    darkmode: boolean;
  };
  copyWebpackOptions(platformOptions: any, vueOptions: any): any[];
}

Configuration and Compilation

MP Runtime Components

Low-level WeChat Mini Program runtime components for direct integration with Mini Program lifecycle and behaviors.

function Page(options: PageOptions): void;
function Component(options: ComponentOptions): void;
function Behavior(options: BehaviorOptions): BehaviorOptions;
const nextTick: typeof Vue.nextTick;

MP Runtime Components

WXS Utilities

WeChat Mini Program WXS (WeiXin Script) utility functions for use in WeChat Mini Program expressions and filters.

function getRegExp(...args: any[]): RegExp;
function getDate(...args: any[]): Date;

WXS Utilities

Types

// Core application options
interface AppOptions {
  onLaunch?: (options: any) => void;
  onShow?: (options: any) => void;
  onHide?: () => void;
  onError?: (error: string) => void;
  onPageNotFound?: (options: any) => void;
  onThemeChange?: (theme: any) => void;
  onUnhandledRejection?: (options: any) => void;
  globalData?: Record<string, any>;
  [key: string]: any;
}

// Page component options
interface PageOptions {
  data?: () => Record<string, any>;
  onLoad?: (query: Record<string, string>) => void;
  onShow?: () => void;
  onReady?: () => void;
  onHide?: () => void;
  onUnload?: () => void;
  onPullDownRefresh?: () => void;
  onReachBottom?: () => void;
  onShareAppMessage?: (options: any) => any;
  onPageScroll?: (options: any) => void;
  onResize?: (options: any) => void;
  onTabItemTap?: (item: any) => void;
  methods?: Record<string, Function>;
  [key: string]: any;
}

// Component options
interface ComponentOptions {
  data?: () => Record<string, any>;
  props?: Record<string, any>;
  methods?: Record<string, Function>;
  created?: () => void;
  attached?: () => void;
  ready?: () => void;
  moved?: () => void;
  detached?: () => void;
  [key: string]: any;
}

// Behavior configuration options for MP runtime
interface BehaviorOptions {
  properties?: Record<string, any>;
  data?: Record<string, any>;
  methods?: Record<string, Function>;
  lifetimes?: {
    created?: () => void;
    attached?: () => void;
    ready?: () => void;
    moved?: () => void;
    detached?: () => void;
  };
  definitionFilter?: (defFields: any) => void;
}

// Provider service result
interface ProviderResult {
  errMsg: string;
  service: string;
  provider: string[];
}