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.
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'
});
}
}
};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
});
}
});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
});
}
}
};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 });
}
}
};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();
}
}
}
};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
}
});
}
}
};// 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'];
}