小程序开发完全指南：从零到上线的高级技巧

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

// 微信小程序原生开发
// app.js
App({
  onLaunch() {
    // 获取用户信息
    wx.getSetting({
      success: (res) => {
        if (res.authSetting['scope.userInfo']) {
          wx.getUserInfo({
            success: (res) => {
              this.globalData.userInfo = res.userInfo
            }
          })
        }
      }
    })
  },

  globalData: {
    userInfo: null
  }
})

// 页面文件
// pages/index/index.js
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false
  },

  onLoad() {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse) {
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },

  getUserInfo(e) {
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

// Taro跨端框架开发
// app.config.js
export default {
  pages: [
    'pages/index/index',
    'pages/profile/index'
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'black'
  }
}

// 页面组件
// pages/index/index.jsx
import { Component } from '@tarojs/taro'
import { View, Text, Button } from '@tarojs/components'
import './index.scss'

export default class Index extends Component {
  state = {
    motto: 'Hello World',
    userInfo: {}
  }

  componentWillMount() { }

  componentDidMount() { }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  render() {
    return (
      <View className='index'>
        <View className='userinfo'>
          <Button>获取头像昵称</Button>
          <Text className='user-nickname'>{this.state.userInfo.nickName}</Text>
        </View>
        <View className='usermotto'>
          <Text className='user-motto'>{this.state.motto}</Text>
        </View>
      </View>
    )
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

// behaviors/store.js
const storeBehavior = Behavior({
  data: {
    $state: {}
  },

  methods: {
    $setState(newState) {
      this.setData({
        $state: {
          ...this.data.$state,
          ...newState
        }
      })

      // 通知其他页面
      const pages = getCurrentPages()
      const currentPage = pages[pages.length - 1]
      const eventChannel = currentPage.getOpenerEventChannel()

      if (eventChannel) {
        eventChannel.emit('stateChange', {
          ...this.data.$state,
          ...newState
        })
      }
    },

    $getState(key) {
      return key ? this.data.$state[key] : this.data.$state
    }
  }
})

// 页面中使用
// pages/profile/profile.js
const storeBehavior = require('../../behaviors/store')

Page({
  behaviors: [storeBehavior],

  onLoad() {
    // 监听状态变化
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.on('stateChange', (newState) => {
      this.setData({
        $state: newState
      })
    })
  },

  updateProfile() {
    this.$setState({
      userName: '新用户名',
      avatar: '新头像URL'
    })
  }
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

// components/card/card.js
Component({
  options: {
    styleIsolation: 'apply-shared'
  },

  properties: {
    title: {
      type: String,
      value: ''
    },
    content: {
      type: String,
      value: ''
    },
    showFooter: {
      type: Boolean,
      value: true
    },
    footerBtnText: {
      type: String,
      value: '确定'
    }
  },

  data: {
    isExpanded: false
  },

  methods: {
    toggleContent() {
      this.setData({
        isExpanded: !this.data.isExpanded
      })
    },

    onFooterBtnTap() {
      this.triggerEvent('footerclick', {
        expanded: this.data.isExpanded
      })
    },

    onCardTap() {
      this.triggerEvent('cardtap')
    }
  }
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// app.json
{
  "pages": [
    "pages/index/index",
    "pages/profile/profile"
  ],
  "subPackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/a/index",
        "pages/b/index"
      ]
    },
    {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/c/index"
      ],
      "independent": true
    }
  ],
  "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["packageA"]
    }
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

// utils/image.js
const imageUtils = {
  // 图片懒加载
  lazyLoad() {
    const images = wx.createIntersectionObserver()
    images.relativeToViewport().observe('.lazy-image', (res) => {
      if (res.intersectionRatio > 0) {
        const img = res.target
        const src = img.dataset.src
        if (src) {
          img.src = src
          img.removeAttribute('data-src')
        }
      }
    })
  },

  // 图片压缩
  compressImage(src, quality = 0.8) {
    return new Promise((resolve) => {
      wx.compressImage({
        src,
        quality,
        success: (res) => resolve(res.tempFilePath),
        fail: () => resolve(src)
      })
    })
  },

  // WebP格式检测
  supportWebP() {
    return new Promise((resolve) => {
      wx.getImageInfo({
        src: 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=',
        success: () => resolve(true),
        fail: () => resolve(false)
      })
    })
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

// components/virtual-list/virtual-list.js
Component({
  properties: {
    data: {
      type: Array,
      value: []
    },
    itemHeight: {
      type: Number,
      value: 50
    },
    visibleCount: {
      type: Number,
      value: 10
    }
  },

  data: {
    startIndex: 0,
    visibleData: [],
    totalHeight: 0
  },

  observers: {
    'data, itemHeight': function(data, itemHeight) {
      const totalHeight = data.length * itemHeight
      this.setData({
        totalHeight,
        visibleData: data.slice(0, this.properties.visibleCount)
      })
    }
  },

  methods: {
    onScroll(e) {
      const scrollTop = e.detail.scrollTop
      const { itemHeight, visibleCount } = this.properties

      const startIndex = Math.floor(scrollTop / itemHeight)
      const endIndex = Math.min(
        startIndex + visibleCount + 5, // 预留5项
        this.properties.data.length
      )

      const visibleData = this.properties.data.slice(startIndex, endIndex)

      this.setData({
        startIndex,
        visibleData,
        offsetY: startIndex * itemHeight
      })
    },

    getItemStyle(index) {
      const { startIndex, itemHeight } = this.data
      const actualIndex = startIndex + index
      return `height: ${itemHeight}px; transform: translateY(${actualIndex * itemHeight}px)`
    }
  }
})

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101

// utils/request.js
class Request {
  constructor() {
    this.baseUrl = 'https://api.example.com'
    this.timeout = 10000
    this.interceptors = {
      request: [],
      response: []
    }
  }

  addRequestInterceptor(interceptor) {
    this.interceptors.request.push(interceptor)
  }

  addResponseInterceptor(interceptor) {
    this.interceptors.response.push(interceptor)
  }

  request(options) {
    // 执行请求拦截器
    let config = { ...options }
    this.interceptors.request.forEach(interceptor => {
      config = interceptor(config) || config
    })

    return new Promise((resolve, reject) => {
      wx.request({
        url: this.baseUrl + config.url,
        method: config.method || 'GET',
        data: config.data,
        header: {
          'content-type': 'application/json',
          ...config.header
        },
        timeout: this.timeout,
        success: (res) => {
          // 执行响应拦截器
          let response = res
          this.interceptors.response.forEach(interceptor => {
            response = interceptor(response) || response
          })

          if (response.statusCode === 200) {
            resolve(response.data)
          } else {
            reject(response)
          }
        },
        fail: reject
      })
    })
  }

  // 缓存请求
  cacheRequest(key, requestFn, expireTime = 5 * 60 * 1000) {
    const cacheKey = `cache_${key}`
    const cachedData = wx.getStorageSync(cacheKey)

    if (cachedData && Date.now() - cachedData.timestamp < expireTime) {
      return Promise.resolve(cachedData.data)
    }

    return requestFn().then(data => {
      wx.setStorageSync(cacheKey, {
        data,
        timestamp: Date.now()
      })
      return data
    })
  }
}

// 创建实例
const request = new Request()

// 添加拦截器
request.addRequestInterceptor((config) => {
  // 添加token
  const token = wx.getStorageSync('token')
  if (token) {
    config.header = {
      ...config.header,
      'Authorization': `Bearer ${token}`
    }
  }
  return config
})

request.addResponseInterceptor((response) => {
  // 统一错误处理
  if (response.statusCode === 401) {
    wx.removeStorageSync('token')
    wx.navigateTo({
      url: '/pages/login/login'
    })
  }
  return response
})

module.exports = request

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

// components/swipe-action/swipe-action.js
Component({
  properties: {
    disabled: {
      type: Boolean,
      value: false
    },
    autoClose: {
      type: Boolean,
      value: true
    }
  },

  data: {
    x: 0,
    startX: 0,
    moveX: 0,
    buttons: []
  },

  methods: {
    onTouchStart(e) {
      if (this.properties.disabled) return

      const touch = e.touches[0]
      this.setData({
        startX: touch.clientX,
        moveX: this.data.x
      })
    },

    onTouchMove(e) {
      if (this.properties.disabled) return

      const touch = e.touches[0]
      const diffX = touch.clientX - this.data.startX
      let x = this.data.moveX + diffX

      // 限制滑动范围
      const maxMove = this.data.buttons.reduce((sum, btn) => {
        return sum + (btn.width || 80)
      }, 0)

      x = Math.max(-maxMove, Math.min(0, x))

      this.setData({ x })
    },

    onTouchEnd() {
      if (this.properties.disabled) return

      const { x, moveX } = this.data
      const diff = Math.abs(x - moveX)

      // 判断是否触发按钮
      if (diff > 30) {
        this.triggerAction(x < moveX ? 'left' : 'right')
      } else {
        // 回弹
        this.setData({ x: moveX })
      }
    },

    triggerAction(direction) {
      if (direction === 'left') {
        // 执行左滑操作
        this.triggerEvent('leftaction')
      }
    }
  }
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

// utils/animation.js
class AnimationUtils {
  // 创建动画实例
  static createAnimation(duration = 300, timingFunction = 'ease') {
    return wx.createAnimation({
      duration,
      timingFunction
    })
  }

  // 淡入淡出
  static fadeIn(page, selector = '.fade-element') {
    const animation = this.createAnimation()
    animation.opacity(1).step()
    page.setData({
      [`${selector}Animation`]: animation.export()
    })
  }

  static fadeOut(page, selector = '.fade-element') {
    const animation = this.createAnimation()
    animation.opacity(0).step()
    page.setData({
      [`${selector}Animation`]: animation.export()
    })
  }

  // 滑入效果
  static slideIn(page, selector = '.slide-element', direction = 'bottom') {
    const animation = this.createAnimation()

    switch (direction) {
      case 'top':
        animation.translateY(0).step()
        break
      case 'bottom':
        animation.translateY(0).step()
        break
      case 'left':
        animation.translateX(0).step()
        break
      case 'right':
        animation.translateX(0).step()
        break
    }

    page.setData({
      [`${selector}Animation`]: animation.export()
    })
  }

  // 弹性动画
  static bounce(page, selector = '.bounce-element') {
    const animation = this.createAnimation(600, 'ease-out')
    animation
      .scale(1.1)
      .step({ duration: 200 })
      .scale(1)
      .step({ duration: 400 })

    page.setData({
      [`${selector}Animation`]: animation.export()
    })
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// app.js
App({
  onError(err) {
    console.error('全局错误:', err)

    // 上报错误日志
    this.reportError(err)

    // 显示友好提示
    wx.showToast({
      title: '系统繁忙，请稍后重试',
      icon: 'none'
    })
  },

  onUnhandledRejection(res) {
    console.error('Promise错误:', res)
    this.reportError(res)
  },

  reportError(error) {
    // 错误上报
    wx.request({
      url: 'https://api.example.com/error/report',
      method: 'POST',
      data: {
        error: error.stack || error.message,
        page: this.getCurrentPages().pop()?.route,
        userAgent: wx.getSystemInfoSync()
      }
    })
  }
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

// utils/network-handler.js
const networkHandler = {
  // 检查网络状态
  checkNetworkStatus() {
    return new Promise((resolve) => {
      wx.getNetworkType({
        success: (res) => {
          resolve(res.networkType !== 'none')
        },
        fail: () => resolve(false)
      })
    })
  },

  // 网络状态监听
  startNetworkMonitoring() {
    wx.onNetworkStatusChange((res) => {
      if (!res.isConnected) {
        wx.showModal({
          title: '网络异常',
          content: '请检查网络连接',
          showCancel: false
        })
      }
    })
  },

  // 重试机制
  async retryRequest(requestFn, maxRetries = 3, delay = 1000) {
    let lastError

    for (let i = 0; i < maxRetries; i++) {
      try {
        const result = await requestFn()
        return result
      } catch (error) {
        lastError = error

        if (i < maxRetries - 1) {
          await new Promise(resolve => setTimeout(resolve, delay * Math.pow(2, i)))
        }
      }
    }

    throw lastError
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

// utils/payment.js
const payment = {
  // 微信支付
  async wechatPay(orderInfo) {
    try {
      // 统一下单
      const paymentParams = await wx.requestPayment({
        timeStamp: orderInfo.timeStamp,
        nonceStr: orderInfo.nonceStr,
        package: orderInfo.package,
        signType: orderInfo.signType,
        paySign: orderInfo.paySign
      })

      return paymentParams
    } catch (error) {
      if (error.errMsg.includes('requestPayment:fail cancel')) {
        throw new Error('用户取消支付')
      } else {
        throw new Error('支付失败')
      }
    }
  },

  // 支付宝支付
  async alipayPay(orderInfo) {
    return new Promise((resolve, reject) => {
      my.tradePay({
        tradeNO: orderInfo.tradeNO,
        success: resolve,
        fail: reject
      })
    })
  },

  // 查询支付状态
  async queryPaymentStatus(orderId) {
    const response = await wx.request({
      url: '/api/payment/status',
      method: 'GET',
      data: { orderId }
    })

    return response.data
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

// services/member.js
const memberService = {
  // 检查会员状态
  async checkMemberStatus() {
    const userId = wx.getStorageSync('userId')

    try {
      const response = await wx.request({
        url: '/api/member/status',
        method: 'GET',
        data: { userId }
      })

      return response.data
    } catch (error) {
      return {
        isMember: false,
        expireTime: null
      }
    }
  },

  // 升级会员
  async upgradeMember(planId) {
    const userId = wx.getStorageSync('userId')

    try {
      const response = await wx.request({
        url: '/api/member/upgrade',
        method: 'POST',
        data: {
          userId,
          planId
        }
      })

      return response.data
    } catch (error) {
      throw new Error('会员升级失败')
    }
  },

  // 获取会员权益
  async getMemberBenefits() {
    try {
      const response = await wx.request({
        url: '/api/member/benefits',
        method: 'GET'
      })

      return response.data
    } catch (error) {
      return []
    }
  }
}

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109

// utils/analytics.js
const analytics = {
  // 页面访问统计
  trackPageView(pageName, properties = {}) {
    const data = {
      event: 'page_view',
      page: pageName,
      timestamp: Date.now(),
      properties: {
        ...properties,
        userId: wx.getStorageSync('userId'),
        sessionId: this.getSessionId()
      }
    }

    this.report(data)
  },

  // 自定义事件追踪
  trackEvent(eventName, properties = {}) {
    const data = {
      event: eventName,
      timestamp: Date.now(),
      properties: {
        ...properties,
        userId: wx.getStorageSync('userId'),
        sessionId: this.getSessionId()
      }
    }

    this.report(data)
  },

  // 获取会话ID
  getSessionId() {
    let sessionId = wx.getStorageSync('sessionId')

    if (!sessionId) {
      sessionId = Date.now().toString(36) + Math.random().toString(36).substr(2)
      wx.setStorageSync('sessionId', sessionId)
    }

    return sessionId
  },

  // 数据上报
  report(data) {
    // 批量上报
    const events = wx.getStorageSync('pendingEvents') || []
    events.push(data)

    // 限制缓存大小
    if (events.length > 50) {
      events.shift()
    }

    wx.setStorageSync('pendingEvents', events)

    // 立即上报或延迟上报
    if (data.event === 'page_view') {
      this.flushEvents()
    } else {
      this.scheduleFlush()
    }
  },

  // 立即上报
  async flushEvents() {
    const events = wx.getStorageSync('pendingEvents') || []
    if (events.length === 0) return

    try {
      await wx.request({
        url: '/api/analytics/events',
        method: 'POST',
        data: { events }
      })

      wx.removeStorageSync('pendingEvents')
    } catch (error) {
      console.error('数据上报失败:', error)
    }
  },

  // 定时上报
  scheduleFlush() {
    if (this.flushTimer) return

    this.flushTimer = setTimeout(() => {
      this.flushEvents()
      this.flushTimer = null
    }, 5000)
  }
}

// 页面中使用
// pages/index/index.js
Page({
  onLoad() {
    analytics.trackPageView('index')
  },

  onButtonClick() {
    analytics.trackEvent('button_click', {
      buttonId: 'main_button',
      location: 'homepage'
    })
  }
})