Implement a multi-platform social app

Core Requirements Analysis for Multi-Platform Social Apps

The core functionalities of social apps typically include user systems, instant messaging, content publishing, and social interactions. The user system requires registration, login, and personal information management; instant messaging needs to support one-on-one and group chats; content publishing involves posting text, images, and videos as updates; and social interactions include likes, comments, and friend relationships. Multi-platform adaptation means the same codebase must run on different platforms like iOS, Android, and the web.

Advantages of the uni-app Framework

uni-app is based on Vue.js syntax and supports compilation to multiple platforms. Compared to native development, it can save over 70% of the code. Its cross-platform capability is achieved through conditional compilation. For example, WeChat Mini Programs and H5 can share most of the business logic. The built-in uni-ui component library provides a cross-platform UI solution. Here’s a simple example of a page structure:

<template>
  <view class="container">
    <uni-nav-bar title="Social Home" />
    <scroll-view scroll-y class="content">
      <post-item v-for="item in postList" :key="item.id" :data="item" />
    </scroll-view>
    <tab-bar :current="0" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      postList: []
    }
  },
  onLoad() {
    this.loadPosts()
  },
  methods: {
    async loadPosts() {
      const res = await uni.request({
        url: 'https://api.example.com/posts'
      })
      this.postList = res.data
    }
  }
}
</script>

User System Design and Implementation

The user module needs to handle authentication and profile management. It is recommended to use JWT for identity verification, with tokens stored locally via uni.setStorageSync. The user profile page must adapt to different platform representations. Here’s an example of user login:

// Login method
async function login() {
  try {
    const [err, res] = await uni.login({
      provider: 'weixin'
    })
    const { code } = res
    const authRes = await uni.request({
      url: '/api/auth',
      method: 'POST',
      data: { code }
    })
    uni.setStorageSync('token', authRes.data.token)
    uni.reLaunch({ url: '/pages/home' })
  } catch (error) {
    uni.showToast({ title: 'Login failed', icon: 'none' })
  }
}

The user profile editing page requires attention to cross-platform compatibility for image uploads:

<template>
  <uni-file-picker 
    v-model="avatar" 
    fileMediatype="image" 
    limit="1"
    @success="uploadSuccess"
  />
</template>

<script>
export default {
  methods: {
    uploadSuccess(e) {
      this.formData.avatar = e.tempFilePaths[0]
      // Example of Qiniu Cloud upload
      uni.uploadFile({
        url: 'https://upload.qiniup.com',
        filePath: e.tempFilePaths[0],
        name: 'file',
        success: (res) => {
          this.saveUserInfo(JSON.parse(res.data).key)
        }
      })
    }
  }
}
</script>

Instant Messaging Module Development

For real-time communication, it is recommended to use WebSocket or third-party SDKs (e.g., RongCloud, Easemob). In uni-app, platform-specific implementations are required:

// Create WebSocket connection
function initSocket() {
  const socket = uni.connectSocket({
    url: 'wss://im.example.com',
    success: () => {
      socket.onMessage((res) => {
        this.handleMessage(JSON.parse(res.data))
      })
    }
  })
}

// Send message
function sendTextMessage(content) {
  const message = {
    type: 'text',
    content,
    timestamp: Date.now(),
    sender: this.userInfo.id
  }
  uni.sendSocketMessage({
    data: JSON.stringify(message)
  })
}

For message lists, scroll performance needs optimization:

<template>
  <scroll-view 
    scroll-y 
    :scroll-top="scrollTop"
    @scrolltolower="loadMore"
    class="message-container"
  >
    <message-bubble 
      v-for="msg in visibleMessages"
      :key="msg.id"
      :message="msg"
      :is-self="msg.sender === userInfo.id"
    />
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      allMessages: [],
      visibleMessages: [],
      scrollTop: 0
    }
  },
  methods: {
    loadMore() {
      // Virtual list optimization
      const start = Math.max(0, this.allMessages.length - 50)
      this.visibleMessages = this.allMessages.slice(start)
      this.$nextTick(() => {
        this.scrollTop = 99999
      })
    }
  }
}
</script>

Content Publishing Functionality Implementation

Dynamic publishing requires handling multimedia content. Use uni.chooseMedia for unified media selection across platforms:

async function selectMedia() {
  const [err, res] = await uni.chooseMedia({
    count: 9,
    mediaType: ['image', 'video'],
    sourceType: ['album', 'camera']
  })
  this.mediaList = res.tempFiles.map(file => ({
    url: file.tempFilePath,
    type: file.fileType
  }))
}

The publishing editor needs to support rich text:

<template>
  <view class="editor">
    <textarea 
      v-model="content" 
      placeholder="Share your thoughts..."
      :maxlength="500"
    />
    <media-preview :list="mediaList" />
    <location-picker v-if="showLocation" @select="selectLocation" />
  </view>
</template>

<script>
export default {
  methods: {
    async publish() {
      const uploaded = await Promise.all(
        this.mediaList.map(file => 
          this.uploadFile(file)
        )
      )
      await uni.request({
        url: '/api/posts',
        method: 'POST',
        data: {
          content: this.content,
          media: uploaded,
          location: this.location
        }
      })
      uni.showToast({ title: 'Published successfully' })
    }
  }
}
</script>

Social Interaction Function Development

Likes and comments require real-time UI updates. Optimistic updates are recommended:

// Like handling
async function likePost(postId) {
  // Update local UI first
  this.posts = this.posts.map(post => {
    if (post.id === postId) {
      return {
        ...post,
        isLiked: true,
        likeCount: post.likeCount + 1
      }
    }
    return post
  })
  
  try {
    await uni.request({
      url: `/api/posts/${postId}/like`,
      method: 'POST'
    })
  } catch (error) {
    // Rollback on failure
    this.posts = this.posts.map(post => {
      if (post.id === postId) {
        return {
          ...post,
          isLiked: false,
          likeCount: post.likeCount - 1
        }
      }
      return post
    })
  }
}

Comment lists need pagination loading:

async function loadComments(postId, page = 1) {
  const res = await uni.request({
    url: `/api/posts/${postId}/comments`,
    data: { page }
  })
  if (page === 1) {
    this.comments = res.data.list
  } else {
    this.comments = [...this.comments, ...res.data.list]
  }
  this.hasMore = res.data.hasMore
}

Performance Optimization Strategies

For large data volumes in list pages, virtual scrolling optimization is needed:

<template>
  <recycle-list 
    :list="posts"
    :item-size="100"
    @scroll="handleScroll"
  >
    <template v-slot="{ item }">
      <post-item :data="item" />
    </template>
  </recycle-list>
</template>

Use lazy loading and progressive loading for images:

<image 
  :src="thumbnail" 
  lazy-load
  :progressive="true"
  @load="handleImageLoad"
/>

Multi-Platform Adaptation Techniques

Handle platform differences through conditional compilation:

// #ifdef MP-WEIXIN
wx.login({
  success(res) {
    if (res.code) {
      // WeChat-specific logic
    }
  }
})
// #endif

// #ifdef H5
location.href = '/oauth/wechat?redirect=' + encodeURIComponent(location.href)
// #endif

Navigation bars need style adjustments for different platforms:

/* Mini Program navigation bar */
/* #ifdef MP */
.uni-nav-bar {
  padding-top: 44px;
}
/* #endif */

/* H5 navigation bar */
/* #ifdef H5 */
.uni-nav-bar {
  height: 56px;
}
/* #endif */

Data Synchronization and Offline Handling

Use local storage for offline caching:

// Fetch post list
async function fetchPosts() {
  try {
    const res = await uni.request({
      url: '/api/posts',
      method: 'GET'
    })
    uni.setStorage({
      key: 'cachedPosts',
      data: res.data,
      success: () => {
        this.posts = res.data
      }
    })
  } catch (error) {
    const { data } = uni.getStorageSync('cachedPosts')
    this.posts = data || []
  }
}

Incremental update strategy:

async function syncData() {
  const lastSync = uni.getStorageSync('lastSync') || 0
  const res = await uni.request({
    url: '/api/sync',
    data: { since: lastSync }
  })
  this.mergeData(res.data)
  uni.setStorageSync('lastSync', Date.now())
}

Testing and Debugging Methods

Multi-platform synchronous debugging techniques:

// Set global variables in App.vue
onLaunch() {
  // #ifdef DEBUG
  Vue.prototype.$debug = true
  // #endif
}

// Usage in components
if (this.$debug) {
  console.log('Debug info:', this.internalState)
}

Performance monitoring:

// Page load time statistics
onLoad() {
  this.startTime = Date.now()
},
onReady() {
  const loadTime = Date.now() - this.startTime
  uni.reportAnalytics('page_load', {
    time: loadTime,
    path: this.$mp.page.route
  })
}

Deployment and Release Process

Mini Program subpackage loading configuration:

{
  "subPackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/chat",
        "pages/group"
      ]
    }
  ],
  "preloadRule": {
    "pages/home": {
      "network": "all",
      "packages": ["packageA"]
    }
  }
}

H5 deployment requires attention to routing configuration:

// manifest.json
{
  "h5": {
    "router": {
      "mode": "history",
      "base": "/social/"
    }
  }
}