Mini Program Academy

English

中文

English

中文

Theme

QQ Mini-Program Platform ​

QQ Mini-Program is a lightweight application platform developed by Tencent, allowing users to access applications directly within the QQ ecosystem without downloading separate apps. It leverages QQ's social features and massive user base to provide engaging user experiences.

Platform Overview ​

What is QQ Mini-Program? ​

QQ Mini-Program is a sub-application that runs within the QQ mobile app. It focuses on social interactions, gaming, and entertainment, taking advantage of QQ's strong social network and young user demographic.

Key Features ​

  • Social Integration: Deep integration with QQ's social features
  • Gaming Focus: Optimized for social gaming and entertainment
  • Youth-Oriented: Designed for QQ's younger user demographic
  • Rich APIs: Comprehensive APIs for social and gaming features
  • Cross-Platform: Runs on iOS and Android devices
  • Group Features: Enhanced group interaction capabilities
  • Real-time Communication: Built-in chat and communication features

Development Environment ​

Developer Tools ​

QQ Mini-Program Studio is the official IDE:

  • Code Editor: Advanced code editing with syntax highlighting
  • Real-time Preview: Instant preview and debugging
  • Simulator: Multi-device simulation environment
  • Social Testing: Test social features and interactions
  • Performance Monitor: Performance analysis and optimization

System Requirements ​

  • Operating System: Windows 7+, macOS 10.10+
  • QQ Version: Latest QQ mobile app version
  • Developer Account: QQ Mini-Program developer account required

Getting Started ​

Registration Process ​

  1. Create Developer Account

  2. Create Mini-Program

    • Login to developer console
    • Create new mini-program project
    • Configure application information
    • Get AppID for development

Development Setup ​

bash
# Download QQ Mini-Program Studio
# Visit: https://q.qq.com/wiki/develop/miniprogram/frame/

# Create new project in IDE
# Enter AppID and project information
# Choose template or start from scratch

Project Structure ​

qq-miniprogram/
├── pages/              # Page files
│   ├── index/
│   │   ├── index.js    # Page logic
│   │   ├── index.json  # Page configuration
│   │   ├── index.qml   # Page structure
│   │   └── index.qss   # Page styles
├── components/         # Custom components
├── utils/              # Utility functions
├── app.js             # App logic
├── app.json           # App configuration
├── app.qss            # Global styles
└── project.config.json # Project configuration

Core Technologies ​

QML (QQ Markup Language) ​

QML is QQ's markup language for building user interfaces:

html
<!-- Basic structure -->
<view class="container">
  <text class="title">{{title}}</text>
  <button bindtap="handleClick">Click Me</button>
</view>

<!-- Conditional rendering -->
<view qq:if="{{condition}}">
  <text>Condition is true</text>
</view>
<view qq:else>
  <text>Condition is false</text>
</view>

<!-- List rendering -->
<view qq:for="{{items}}" qq:key="{{item.id}}">
  <text>{{item.name}}</text>
</view>

<!-- Template usage -->
<template name="user-card">
  <view class="user-card">
    <image src="{{avatar}}" class="avatar"/>
    <text class="nickname">{{nickname}}</text>
  </view>
</template>

<template is="user-card" data="{{avatar: '/images/avatar.jpg', nickname: 'User123'}}"/>

QSS (QQ Style Sheets) ​

QSS is QQ's styling language with additional features:

css
/* Global styles */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Responsive units */
.title {
  font-size: 32rpx;  /* rpx: responsive pixel */
  color: #fff;
  margin-bottom: 20rpx;
  font-weight: bold;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.3);
}

/* Import styles */
@import "common.qss";

/* Animation */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.pulse {
  animation: pulse 2s infinite;
}

JavaScript Logic ​

javascript
// app.js - Application logic
App({
  onLaunch(options) {
    console.log('App launched', options)
    this.initializeApp()
  },
  
  onShow(options) {
    console.log('App shown', options)
    // Handle different entry scenarios
    this.handleEntryScenario(options.scene)
  },
  
  onHide() {
    console.log('App hidden')
  },
  
  initializeApp() {
    // Initialize QQ-specific features
    qq.getSystemInfo({
      success: (res) => {
        console.log('System info:', res)
        this.globalData.systemInfo = res
      }
    })
    
    // Get user info
    this.getUserInfo()
  },
  
  getUserInfo() {
    qq.getUserInfo({
      success: (res) => {
        this.globalData.userInfo = res.userInfo
        console.log('User info loaded:', res.userInfo)
      }
    })
  },
  
  handleEntryScenario(scene) {
    // Handle different entry points (group, friend share, etc.)
    switch(scene) {
      case 1044: // Group share
        console.log('Entered from group share')
        break
      case 1008: // Friend share
        console.log('Entered from friend share')
        break
      default:
        console.log('Normal entry')
    }
  },
  
  globalData: {
    userInfo: null,
    systemInfo: null
  }
})

// page.js - Page logic
Page({
  data: {
    title: 'Hello QQ Mini-Program',
    friends: [],
    groups: [],
    loading: false
  },
  
  onLoad(options) {
    console.log('Page loaded with options:', options)
    this.loadSocialData()
  },
  
  onShow() {
    console.log('Page shown')
  },
  
  onShareAppMessage() {
    return {
      title: 'Join me in this awesome mini-program!',
      path: '/pages/index/index',
      imageUrl: '/images/share.jpg'
    }
  },
  
  onShareTimeline() {
    return {
      title: 'Check out this QQ Mini-Program',
      query: 'source=timeline'
    }
  },
  
  loadSocialData() {
    this.setData({ loading: true })
    
    // Load friends data
    qq.request({
      url: 'https://api.example.com/friends',
      success: (res) => {
        this.setData({
          friends: res.data,
          loading: false
        })
      }
    })
  },
  
  handleClick(e) {
    console.log('Button clicked', e)
    qq.showToast({
      title: 'Success!',
      icon: 'success',
      duration: 2000
    })
  }
})

API Categories ​

Basic APIs ​

Interface APIs ​

javascript
// Show toast
qq.showToast({
  title: 'Operation successful',
  icon: 'success',
  duration: 3000
})

// Show modal
qq.showModal({
  title: 'Confirm',
  content: 'Are you sure to proceed?',
  success: (res) => {
    if (res.confirm) {
      console.log('User confirmed')
    }
  }
})

// Show loading
qq.showLoading({
  title: 'Loading...'
})

qq.hideLoading()

// Show action sheet
qq.showActionSheet({
  itemList: ['Option 1', 'Option 2', 'Option 3'],
  success: (res) => {
    console.log('Selected index:', res.tapIndex)
  }
})
javascript
// Navigate to page
qq.navigateTo({
  url: '/pages/detail/detail?id=123'
})

// Redirect to page
qq.redirectTo({
  url: '/pages/login/login'
})

// Switch tab
qq.switchTab({
  url: '/pages/home/home'
})

// Go back
qq.navigateBack({
  delta: 1
})

// Relaunch app
qq.reLaunch({
  url: '/pages/index/index'
})

Social APIs ​

User Information ​

javascript
// Get user info
qq.getUserInfo({
  success: (res) => {
    console.log('User info:', res.userInfo)
    console.log('Nickname:', res.userInfo.nickName)
    console.log('Avatar:', res.userInfo.avatarUrl)
  }
})

// Get user profile
qq.getUserProfile({
  desc: 'Get user profile for personalization',
  success: (res) => {
    console.log('User profile:', res.userInfo)
  }
})

Friend Interactions ​

javascript
// Get friend list (requires permission)
qq.getFriendCloudStorage({
  keyList: ['score', 'level'],
  success: (res) => {
    console.log('Friend data:', res.data)
  }
})

// Set user cloud storage
qq.setUserCloudStorage({
  KVDataList: [
    {
      key: 'score',
      value: '1000'
    },
    {
      key: 'level',
      value: '10'
    }
  ],
  success: () => {
    console.log('Cloud storage updated')
  }
})

Group Features ​

javascript
// Get group info
qq.getGroupInfo({
  success: (res) => {
    console.log('Group info:', res)
    console.log('Group ID:', res.groupId)
    console.log('Group name:', res.groupName)
  }
})

// Share to group
qq.shareAppMessage({
  title: 'Join our group activity!',
  path: '/pages/group/group?id=123',
  imageUrl: '/images/group-share.jpg'
})

Gaming APIs ​

Game Data ​

javascript
// Submit score
qq.setUserCloudStorage({
  KVDataList: [
    {
      key: 'bestScore',
      value: JSON.stringify({
        score: 9999,
        timestamp: Date.now()
      })
    }
  ],
  success: () => {
    console.log('Score submitted')
  }
})

// Get leaderboard
qq.getFriendCloudStorage({
  keyList: ['bestScore'],
  success: (res) => {
    const leaderboard = res.data.map(item => ({
      openid: item.openid,
      nickname: item.nickname,
      avatarUrl: item.avatarUrl,
      score: JSON.parse(item.KVDataList[0].value).score
    })).sort((a, b) => b.score - a.score)
    
    console.log('Leaderboard:', leaderboard)
  }
})

Game Center Integration ​

javascript
// Show game center
qq.showGameCenter({
  success: () => {
    console.log('Game center shown')
  }
})

// Report game data
qq.reportGameData({
  action: 'game_start',
  data: {
    level: 1,
    mode: 'normal'
  }
})

Network APIs ​

javascript
// HTTP request
qq.request({
  url: 'https://api.example.com/users',
  method: 'POST',
  data: {
    name: 'John',
    email: 'john@example.com'
  },
  header: {
    'Content-Type': 'application/json'
  },
  success: (res) => {
    console.log('Request success:', res.data)
  },
  fail: (err) => {
    console.error('Request failed:', err)
  }
})

// Upload file
qq.uploadFile({
  url: 'https://api.example.com/upload',
  filePath: tempFilePath,
  name: 'file',
  formData: {
    user: 'test'
  },
  success: (res) => {
    console.log('Upload success:', res)
  }
})

Storage APIs ​

javascript
// Local storage
qq.setStorageSync('gameSettings', {
  sound: true,
  music: true,
  difficulty: 'normal'
})

const settings = qq.getStorageSync('gameSettings')
console.log('Game settings:', settings)

// Cloud storage for cross-device sync
qq.setUserCloudStorage({
  KVDataList: [
    {
      key: 'gameProgress',
      value: JSON.stringify({
        level: 5,
        experience: 1250,
        achievements: ['first_win', 'level_5']
      })
    }
  ]
})

Component Development ​

Custom Components ​

javascript
// components/friend-list/friend-list.js
Component({
  properties: {
    friends: {
      type: Array,
      value: []
    },
    showOnline: {
      type: Boolean,
      value: true
    }
  },
  
  data: {
    selectedFriend: null
  },
  
  methods: {
    selectFriend(e) {
      const friendId = e.currentTarget.dataset.id
      const friend = this.data.friends.find(f => f.id === friendId)
      
      this.setData({
        selectedFriend: friend
      })
      
      this.triggerEvent('friendSelected', {
        friend: friend
      })
    },
    
    inviteFriend(e) {
      const friendId = e.currentTarget.dataset.id
      
      qq.shareAppMessage({
        title: 'Join me in this game!',
        path: `/pages/game/game?inviter=${this.data.userInfo.openId}`,
        imageUrl: '/images/game-invite.jpg'
      })
      
      this.triggerEvent('friendInvited', {
        friendId: friendId
      })
    }
  },
  
  lifetimes: {
    attached() {
      console.log('Friend list component attached')
    }
  }
})
html
<!-- components/friend-list/friend-list.qml -->
<view class="friend-list">
  <view class="friend-item" 
        qq:for="{{friends}}" 
        qq:key="{{item.id}}"
        bindtap="selectFriend"
        data-id="{{item.id}}">
    <image src="{{item.avatarUrl}}" class="avatar"/>
    <view class="friend-info">
      <text class="nickname">{{item.nickname}}</text>
      <text class="status" qq:if="{{showOnline}}">
        {{item.online ? 'Online' : 'Offline'}}
      </text>
    </view>
    <button class="invite-btn" 
            bindtap="inviteFriend" 
            data-id="{{item.id}}"
            size="mini">
      Invite
    </button>
  </view>
</view>

Using Custom Components ​

json
{
  "usingComponents": {
    "friend-list": "/components/friend-list/friend-list"
  }
}
html
<friend-list 
  friends="{{friendList}}"
  showOnline="{{true}}"
  bind:friendSelected="handleFriendSelected"
  bind:friendInvited="handleFriendInvited">
</friend-list>

Advanced Features ​

Real-time Communication ​

javascript
// WebSocket connection for real-time features
const socketTask = qq.connectSocket({
  url: 'wss://api.example.com/websocket',
  success: () => {
    console.log('WebSocket connected')
  }
})

socketTask.onOpen(() => {
  console.log('WebSocket connection opened')
  
  // Send authentication
  socketTask.send({
    data: JSON.stringify({
      type: 'auth',
      token: 'user_token'
    })
  })
})

socketTask.onMessage((res) => {
  const message = JSON.parse(res.data)
  console.log('Received message:', message)
  
  switch(message.type) {
    case 'friend_online':
      this.handleFriendOnline(message.data)
      break
    case 'game_invite':
      this.handleGameInvite(message.data)
      break
  }
})

Group Activities ​

javascript
// Create group activity
function createGroupActivity() {
  qq.request({
    url: 'https://api.example.com/group/activity',
    method: 'POST',
    data: {
      groupId: 'group123',
      activityType: 'quiz',
      title: 'Daily Quiz Challenge',
      description: 'Test your knowledge with friends!'
    },
    success: (res) => {
      console.log('Group activity created:', res.data)
      
      // Share to group
      qq.shareAppMessage({
        title: 'Join our Daily Quiz Challenge!',
        path: `/pages/activity/activity?id=${res.data.activityId}`,
        imageUrl: '/images/quiz-activity.jpg'
      })
    }
  })
}

Social Gaming Features ​

javascript
// Battle system
function initiateBattle(friendId) {
  qq.request({
    url: 'https://api.example.com/battle/create',
    method: 'POST',
    data: {
      challenger: qq.getStorageSync('userId'),
      opponent: friendId,
      gameMode: 'quick_match'
    },
    success: (res) => {
      console.log('Battle created:', res.data)
      
      // Send battle invitation
      qq.shareAppMessage({
        title: 'Battle Challenge!',
        path: `/pages/battle/battle?battleId=${res.data.battleId}`,
        imageUrl: '/images/battle-invite.jpg'
      })
    }
  })
}

// Achievement system
function unlockAchievement(achievementId) {
  qq.setUserCloudStorage({
    KVDataList: [
      {
        key: `achievement_${achievementId}`,
        value: JSON.stringify({
          unlocked: true,
          timestamp: Date.now()
        })
      }
    ],
    success: () => {
      qq.showToast({
        title: 'Achievement Unlocked!',
        icon: 'success'
      })
    }
  })
}

Performance Optimization ​

Best Practices ​

  1. Social Data Management
    • Cache friend lists locally
    • Implement efficient data synchronization
    • Use pagination for large friend lists
javascript
// Efficient friend data management
const FriendManager = {
  cache: new Map(),
  
  async getFriends(forceRefresh = false) {
    if (!forceRefresh && this.cache.has('friends')) {
      return this.cache.get('friends')
    }
    
    const friends = await this.fetchFriendsFromServer()
    this.cache.set('friends', friends)
    return friends
  },
  
  async fetchFriendsFromServer() {
    return new Promise((resolve, reject) => {
      qq.request({
        url: 'https://api.example.com/friends',
        success: (res) => resolve(res.data),
        fail: reject
      })
    })
  }
}

  1. Gaming Performance

    • Optimize game loop performance
    • Use efficient rendering techniques
    • Implement proper memory management

  2. Network Optimization

    • Implement request caching
    • Use WebSocket for real-time features
    • Handle network failures gracefully

Performance Monitoring ​

javascript
// Performance tracking for games
const PerformanceTracker = {
  startTime: 0,
  frameCount: 0,
  
  startTracking() {
    this.startTime = Date.now()
    this.frameCount = 0
    this.trackFrame()
  },
  
  trackFrame() {
    this.frameCount++
    const currentTime = Date.now()
    const elapsed = currentTime - this.startTime
    
    if (elapsed >= 1000) {
      const fps = this.frameCount / (elapsed / 1000)
      console.log('FPS:', fps)
      
      // Reset counters
      this.startTime = currentTime
      this.frameCount = 0
    }
    
    requestAnimationFrame(() => this.trackFrame())
  }
}

Testing and Debugging ​

Social Feature Testing ​

javascript
// Mock social data for testing
const mockSocialData = {
  friends: [
    {
      id: 'friend1',
      nickname: 'Alice',
      avatarUrl: '/images/avatar1.jpg',
      online: true,
      level: 15
    },
    {
      id: 'friend2',
      nickname: 'Bob',
      avatarUrl: '/images/avatar2.jpg',
      online: false,
      level: 12
    }
  ],
  groups: [
    {
      id: 'group1',
      name: 'Gaming Squad',
      memberCount: 25,
      active: true
    }
  ]
}

// Test social features
function testSocialFeatures() {
  console.log('Testing friend list rendering...')
  this.setData({
    friends: mockSocialData.friends
  })
  
  console.log('Testing group features...')
  this.setData({
    groups: mockSocialData.groups
  })
}

Game Testing ​

javascript
// Game state testing
function testGameStates() {
  const gameStates = ['menu', 'playing', 'paused', 'gameover']
  
  gameStates.forEach(state => {
    console.log(`Testing game state: ${state}`)
    this.setData({ gameState: state })
    
    // Verify UI updates correctly
    setTimeout(() => {
      console.log(`Game state ${state} test completed`)
    }, 1000)
  })
}

Deployment and Publishing ​

Preparation ​

  1. Social Features Testing

    • Test friend interactions
    • Verify group features
    • Check sharing functionality

  2. Gaming Features

    • Test multiplayer functionality
    • Verify leaderboards
    • Check achievement system

Publishing Process ​

  1. Upload and Submit

    • Upload code using QQ Mini-Program Studio
    • Configure social permissions
    • Submit for review

  2. Review Process

    • QQ team reviews social features
    • Gaming content review
    • Address any feedback

  3. Release Management

    • Monitor social engagement
    • Track gaming metrics
    • Plan feature updates

Platform Guidelines ​

Social Guidelines ​

  1. User Privacy

    • Respect user privacy settings
    • Handle friend data responsibly
    • Follow data protection regulations

  2. Social Interaction

    • Encourage positive interactions
    • Prevent spam and abuse
    • Implement proper moderation

Gaming Guidelines ​

  1. Fair Play

    • Implement anti-cheat measures
    • Ensure balanced gameplay
    • Provide equal opportunities

  2. Content Standards

    • Follow age-appropriate content guidelines
    • Avoid violent or inappropriate content
    • Respect cultural sensitivities

Resources and Support ​

Official Resources ​

Community Resources ​

Learning Materials ​

  • Official tutorials and guides
  • Gaming development courses
  • Social feature implementation guides
  • Community case studies and examples

Conclusion ​

QQ Mini-Program platform provides excellent opportunities for developers to create social and gaming applications that leverage QQ's massive user base and strong social features. With its focus on youth engagement, social interaction, and gaming, it offers unique advantages for developers targeting the Chinese social gaming market.

The platform's rich social APIs, gaming features, and real-time communication capabilities make it an ideal choice for developers looking to create engaging, social experiences. By leveraging QQ's social graph and gaming ecosystem, developers can build successful mini-programs that foster community engagement and viral growth.

Connecting Multiple Platforms, Empowering Innovation

Copyright © 2025 Mini Program Academy