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

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Utility Functions

Name: tessl/npm-dcloudio--uni-mp-weixin
Author: tessl

Helper functions for unit conversion, service provider detection, and WeChat Mini Program specific operations. These utilities handle common tasks like responsive design calculations and platform capability detection.

Capabilities

Unit Conversion

Convert upx (uni-app pixel) units to actual pixels based on device screen width.

/**
 * Convert upx units to px based on device width
 * @param upx - Value in upx units (number or string)
 * @param newDeviceWidth - Custom device width for calculation (optional)
 * @returns Converted pixel value
 */
function upx2px(upx: number | string, newDeviceWidth?: number): number;

Usage Example:

import uni from "@dcloudio/uni-mp-weixin";

// Convert upx to px for responsive design
const width = uni.upx2px(750); // Convert 750upx to px
console.log('Width in px:', width); // Actual pixel width based on device

// Convert with custom device width
const customWidth = uni.upx2px(375, 828); // 375upx with 828px device width

// Use in dynamic styling
const elementStyle = {
  width: uni.upx2px(600) + 'px',
  height: uni.upx2px(400) + 'px',
  fontSize: uni.upx2px(32) + 'px'
};

// Common responsive calculations
const screenWidth = uni.upx2px(750); // Full screen width
const halfScreen = uni.upx2px(375);  // Half screen width
const margin = uni.upx2px(30);       // Standard margin

// Use in component methods
export default {
  methods: {
    calculateDimensions() {
      const containerWidth = uni.upx2px(700);
      const itemWidth = containerWidth / 3;
      
      this.setData({
        itemWidth: itemWidth + 'px'
      });
    }
  }
};

Service Provider Detection

Detect available service providers for different platform capabilities like OAuth, sharing, payments, and push notifications.

/**
 * Get available service providers for platform capabilities
 * @param options - Configuration with service type and callbacks
 */
function getProvider(options: ProviderOptions): void;

Usage Example:

import uni from "@dcloudio/uni-mp-weixin";

// Check available OAuth providers
uni.getProvider({
  service: 'oauth',
  success: (result) => {
    console.log('Available OAuth providers:', result.provider);
    // result.provider: ['weixin'] for WeChat Mini Program
    
    if (result.provider.includes('weixin')) {
      // WeChat login is available
      this.enableWeChatLogin();
    }
  },
  fail: (error) => {
    console.error('Failed to get OAuth providers:', error);
  }
});

// Check sharing capabilities
uni.getProvider({
  service: 'share',
  success: (result) => {
    console.log('Available share providers:', result.provider);
    // result.provider: ['weixin'] for WeChat sharing
    
    this.setData({
      canShare: result.provider.length > 0
    });
  }
});

// Check payment options
uni.getProvider({
  service: 'payment',
  success: (result) => {
    console.log('Available payment providers:', result.provider);
    // result.provider: ['wxpay'] for WeChat Pay
    
    if (result.provider.includes('wxpay')) {
      this.enableWeChatPay();
    }
  }
});

// Check push notification support
uni.getProvider({
  service: 'push',
  success: (result) => {
    console.log('Available push providers:', result.provider);
    // result.provider: ['weixin'] for WeChat push
    
    this.setData({
      pushSupported: result.provider.length > 0
    });
  }
});

Common Usage Patterns

Responsive Design with upx2px

Create responsive layouts that adapt to different screen sizes:

// Responsive grid layout
export default {
  data() {
    return {
      screenWidth: 0,
      columnWidth: 0,
      gutterWidth: 0
    };
  },
  
  onLoad() {
    this.calculateLayout();
  },
  
  methods: {
    calculateLayout() {
      // Get screen dimensions
      this.screenWidth = uni.upx2px(750);
      
      // Calculate grid dimensions
      const columns = 3;
      const gutter = uni.upx2px(20);
      const totalGutter = gutter * (columns + 1);
      const availableWidth = this.screenWidth - totalGutter;
      
      this.columnWidth = Math.floor(availableWidth / columns);
      this.gutterWidth = gutter;
      
      this.setData({
        screenWidth: this.screenWidth,
        columnWidth: this.columnWidth,
        gutterWidth: this.gutterWidth
      });
    }
  }
};

Dynamic Font Scaling

Scale fonts based on device size:

export default {
  methods: {
    getFontSize(baseSize) {
      // Base size in upx, returns actual px
      return uni.upx2px(baseSize);
    },
    
    getResponsiveFontSize(baseSize) {
      const screenWidth = uni.upx2px(750);
      const scaleFactor = screenWidth / 375; // Based on iPhone 6/7/8
      return Math.max(12, Math.floor(baseSize * scaleFactor));
    },
    
    applyTypography() {
      const styles = {
        title: this.getFontSize(48) + 'px',
        subtitle: this.getFontSize(36) + 'px',
        body: this.getFontSize(28) + 'px',
        caption: this.getFontSize(24) + 'px'
      };
      
      this.setData({ textStyles: styles });
    }
  }
};

Platform Capability Detection

Build adaptive features based on available services:

export default {
  data() {
    return {
      capabilities: {
        login: false,
        share: false,
        payment: false,
        push: false
      }
    };
  },
  
  onLoad() {
    this.detectCapabilities();
  },
  
  methods: {
    async detectCapabilities() {
      const services = ['oauth', 'share', 'payment', 'push'];
      const capabilities = {};
      
      for (const service of services) {
        capabilities[service] = await this.checkService(service);
      }
      
      this.setData({ capabilities });
      this.configureUI();
    },
    
    checkService(service) {
      return new Promise((resolve) => {
        uni.getProvider({
          service,
          success: (result) => {
            resolve(result.provider.length > 0);
          },
          fail: () => {
            resolve(false);
          }
        });
      });
    },
    
    configureUI() {
      // Show/hide features based on capabilities
      if (this.capabilities.login) {
        this.enableLoginButton();
      }
      
      if (this.capabilities.share) {
        this.enableShareButton();
      }
      
      if (this.capabilities.payment) {
        this.enablePaymentOptions();
      }
    }
  }
};

Cross-Device Layout Calculations

Handle different device sizes and orientations:

export default {
  data() {
    return {
      layout: {
        isTablet: false,
        orientation: 'portrait',
        safeArea: {},
        dimensions: {}
      }
    };
  },
  
  onLoad() {
    this.calculateLayout();
  },
  
  onResize() {
    this.calculateLayout();
  },
  
  methods: {
    calculateLayout() {
      // Get system info for precise calculations
      const systemInfo = uni.getSystemInfoSync();
      
      // Calculate using upx2px for consistency
      const screenWidth = uni.upx2px(750);
      const actualWidth = systemInfo.windowWidth;
      const actualHeight = systemInfo.windowHeight;
      
      // Determine device type
      const isTablet = actualWidth >= 768;
      const orientation = actualWidth > actualHeight ? 'landscape' : 'portrait';
      
      // Calculate responsive dimensions
      const containerPadding = uni.upx2px(isTablet ? 60 : 30);
      const maxContentWidth = isTablet ? uni.upx2px(1200) : screenWidth;
      
      this.setData({
        layout: {
          isTablet,
          orientation,
          containerPadding,
          maxContentWidth,
          screenWidth: actualWidth,
          screenHeight: actualHeight
        }
      });
    }
  }
};

Types

// Provider service options
interface ProviderOptions {
  /** Service type to check */
  service: 'oauth' | 'share' | 'payment' | 'push';
  /** Success callback with provider information */
  success?: (result: ProviderResult) => void;
  /** Failure callback */
  fail?: (error: any) => void;
  /** Completion callback (success or fail) */
  complete?: (result: any) => void;
}

// Provider service result
interface ProviderResult {
  /** Success message */
  errMsg: string;
  /** Service type that was queried */
  service: string;
  /** Array of available providers for the service */
  provider: string[];
}

// Available providers by service type
interface ServiceProviders {
  oauth: ['weixin'];
  share: ['weixin'];
  payment: ['wxpay'];
  push: ['weixin'];
}

Install with Tessl CLI

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

docs

api-interceptors.md

config-compilation.md

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