Functions for converting Vue.js applications and components into Baidu Mini Program format. These functions handle the complete transformation from Vue's component model to Baidu Mini Program's page and component structure, including lifecycle mapping, data binding, and event handling.
Creates a Baidu Mini Program app instance from a Vue.js app configuration.
/**
* Create a Baidu Mini Program app from Vue app instance
* @param instance - Vue app instance with lifecycle hooks and global data
* @returns Baidu Mini Program app configuration
*/
function createApp(instance: VueAppInstance): BaiduMiniProgramApp;
interface VueAppInstance {
/** App launch lifecycle hook */
onLaunch?(options?: LaunchOptions): void;
/** App show lifecycle hook */
onShow?(options?: ShowOptions): void;
/** App hide lifecycle hook */
onHide?(): void;
/** App error handler */
onError?(error: string): void;
/** Page not found handler */
onPageNotFound?(options: PageNotFoundOptions): void;
/** Unhandled promise rejection handler */
onUnhandledRejection?(options: UnhandledRejectionOptions): void;
/** Theme change handler */
onThemeChange?(options: ThemeChangeOptions): void;
/** Global shared data */
globalData?: any;
/** Custom properties and methods */
[key: string]: any;
}
interface LaunchOptions {
/** Launch path */
path: string;
/** Launch query parameters */
query: Record<string, string>;
/** Scene value */
scene: number;
/** Share ticket */
shareTicket?: string;
/** Referrer info */
referrerInfo?: ReferrerInfo;
}
interface ShowOptions extends LaunchOptions {}
interface PageNotFoundOptions {
/** Invalid page path */
path: string;
/** Query parameters */
query: Record<string, string>;
/** Is entry page */
isEntryPage: boolean;
}Usage Example:
import { createApp } from "@dcloudio/uni-mp-baidu";
const app = createApp({
globalData: {
userInfo: null,
token: null
},
onLaunch(options) {
console.log('App launched with path:', options.path);
// Initialize app
this.checkLogin();
},
onShow(options) {
console.log('App shown');
// Update app state
},
onHide() {
console.log('App hidden');
// Save app state
},
onError(error) {
console.error('App error:', error);
// Report error
},
checkLogin() {
// Custom method
const token = uni.getStorageSync('token');
this.globalData.token = token;
}
});
// App is now ready for Baidu Mini Program
App(app);Creates a Baidu Mini Program page from Vue.js page component options.
/**
* Create a Baidu Mini Program page from Vue page options
* @param vuePageOptions - Vue page component configuration
* @returns Baidu Mini Program page configuration
*/
function createPage(vuePageOptions: VuePageOptions): BaiduMiniProgramPage;
interface VuePageOptions {
/** Component data function */
data?(): any;
/** Page lifecycle hooks */
onLoad?(options: any): void;
onShow?(): void;
onReady?(): void;
onHide?(): void;
onUnload?(): void;
/** Page interaction hooks */
onPullDownRefresh?(): void;
onReachBottom?(): void;
onShareAppMessage?(options: ShareOptions): ShareResult | void;
onPageScroll?(options: PageScrollOptions): void;
onResize?(options: ResizeOptions): void;
onTabItemTap?(options: TabItemTapOptions): void;
/** Vue.js component options */
computed?: Record<string, any>;
methods?: Record<string, Function>;
watch?: Record<string, any>;
/** Vue.js lifecycle hooks */
created?(): void;
mounted?(): void;
updated?(): void;
destroyed?(): void;
/** Custom properties and methods */
[key: string]: any;
}
interface ShareOptions {
/** Share trigger source */
from: 'button' | 'menu';
/** Share target */
target?: any;
/** Web page URL */
webViewUrl?: string;
}
interface ShareResult {
/** Share title */
title?: string;
/** Share path */
path?: string;
/** Share image URL */
imageUrl?: string;
}
interface PageScrollOptions {
/** Scroll top distance */
scrollTop: number;
}
interface ResizeOptions {
/** Window size */
size: {
windowWidth: number;
windowHeight: number;
};
}Usage Example:
import { createPage } from "@dcloudio/uni-mp-baidu";
const page = createPage({
data() {
return {
title: 'Hello Baidu',
userList: [],
loading: false
};
},
computed: {
displayTitle() {
return this.title + ' - ' + this.userList.length;
}
},
methods: {
async loadUsers() {
this.loading = true;
try {
const users = await api.getUsers();
this.userList = users;
} catch (error) {
uni.showToast({ title: 'Failed to load users' });
} finally {
this.loading = false;
}
},
onUserTap(user) {
uni.navigateTo({
url: `/pages/user/user?id=${user.id}`
});
}
},
// Baidu Mini Program lifecycle hooks
onLoad(options) {
console.log('Page loaded with options:', options);
this.loadUsers();
},
onShow() {
console.log('Page shown');
},
onPullDownRefresh() {
this.loadUsers().then(() => {
uni.stopPullDownRefresh();
});
},
onReachBottom() {
console.log('Reached bottom, load more data');
},
onShareAppMessage() {
return {
title: 'Check out this awesome app',
path: '/pages/index/index'
};
},
// Vue.js lifecycle hooks
created() {
console.log('Vue component created');
},
mounted() {
console.log('Vue component mounted');
}
});
// Page is now ready for Baidu Mini Program
Page(page);Creates a Baidu Mini Program component from Vue.js component options.
/**
* Create a Baidu Mini Program component from Vue component options
* @param vueOptions - Vue component configuration
* @returns Baidu Mini Program component configuration
*/
function createComponent(vueOptions: VueComponentOptions): BaiduMiniProgramComponent;
interface VueComponentOptions {
/** Component properties */
props?: PropOptions | string[];
/** Component data function */
data?(): any;
/** Computed properties */
computed?: Record<string, any>;
/** Component methods */
methods?: Record<string, Function>;
/** Watchers */
watch?: Record<string, any>;
/** Vue.js lifecycle hooks */
created?(): void;
mounted?(): void;
updated?(): void;
destroyed?(): void;
/** Baidu Mini Program component lifecycle hooks */
attached?(): void;
ready?(): void;
moved?(): void;
detached?(): void;
/** Component relations */
relations?: Record<string, RelationOptions>;
/** Custom properties and methods */
[key: string]: any;
}
interface PropOptions {
[key: string]: {
type?: any;
default?: any;
required?: boolean;
validator?(value: any): boolean;
};
}
interface RelationOptions {
/** Relation type */
type: 'parent' | 'child' | 'ancestor' | 'descendant';
/** Target component path */
target?: string;
/** Relation ready callback */
linked?(target: any): void;
/** Relation broken callback */
linkChanged?(target: any): void;
/** Relation destroyed callback */
unlinked?(target: any): void;
}Usage Example:
import { createComponent } from "@dcloudio/uni-mp-baidu";
const component = createComponent({
props: {
title: {
type: String,
default: 'Default Title'
},
items: {
type: Array,
required: true
},
maxCount: {
type: Number,
default: 10,
validator(value) {
return value > 0;
}
}
},
data() {
return {
currentIndex: 0,
expanded: false
};
},
computed: {
displayItems() {
return this.expanded
? this.items
: this.items.slice(0, this.maxCount);
},
hasMore() {
return this.items.length > this.maxCount;
}
},
methods: {
toggle() {
this.expanded = !this.expanded;
this.$emit('toggle', { expanded: this.expanded });
},
selectItem(index) {
this.currentIndex = index;
this.$emit('select', {
index,
item: this.items[index]
});
}
},
watch: {
items: {
handler(newItems) {
if (this.currentIndex >= newItems.length) {
this.currentIndex = 0;
}
},
immediate: true
}
},
// Vue.js lifecycle
created() {
console.log('Component created');
},
mounted() {
console.log('Component mounted');
},
// Baidu Mini Program component lifecycle
attached() {
console.log('Component attached to page');
},
ready() {
console.log('Component ready');
},
detached() {
console.log('Component detached');
}
});
// Component is now ready for Baidu Mini Program
Component(component);Creates a subpackage app instance for code splitting and lazy loading.
/**
* Create a subpackage app instance for code splitting
* @param instance - Vue app instance for subpackage
* @returns Baidu Mini Program subpackage app configuration
*/
function createSubpackageApp(instance: VueAppInstance): BaiduMiniProgramSubpackageApp;Usage Example:
import { createSubpackageApp } from "@dcloudio/uni-mp-baidu";
// Create subpackage for user module
const userSubpackage = createSubpackageApp({
onLaunch() {
console.log('User subpackage launched');
// Initialize user-specific features
},
globalData: {
userModule: true
}
});Creates a plugin instance for extending mini program capabilities.
/**
* Create a plugin instance for extending capabilities
* @param instance - Vue app instance for plugin
* @returns Baidu Mini Program plugin configuration
*/
function createPlugin(instance: VueAppInstance): BaiduMiniProgramPlugin;Usage Example:
import { createPlugin } from "@dcloudio/uni-mp-baidu";
// Create analytics plugin
const analyticsPlugin = createPlugin({
onLaunch() {
console.log('Analytics plugin launched');
// Initialize analytics
},
methods: {
track(event, data) {
// Track analytics event
console.log('Track:', event, data);
}
}
});The creation functions automatically map Vue.js lifecycle hooks to corresponding Baidu Mini Program lifecycle hooks:
created → Baidu attachedmounted → Baidu readydestroyed → Baidu detachedupdated → Baidu observer triggersAutomatic data binding setup ensures Vue.js reactive data works seamlessly with Baidu Mini Program's data system:
data propertyVue.js event system is fully integrated with Baidu Mini Program events:
$emit becomes Baidu triggerEvent