微信小程序常见功能实现

一、页面展示与交互功能

1. 页面导航与切换

通过 <navigator> 组件或编程式导航 API 实现页面间跳转：

<!-- 在WXML中使用navigator组件实现跳转 -->
<navigator url="/pages/detail/detail" open-type="navigateTo">跳转到详情页</navigator>

// 在.js文件中使用编程式导航
Page({
  goToDetail() {
    wx.navigateTo({
      url: "/pages/detail/detail"
    });
  }
})

2. 下拉刷新与上拉加载更多

配置并实现下拉刷新和上拉加载更多功能：

{
  "enablePullDownRefresh": true
}

Page({
  data: {
    list: [],
    page: 1,
    size: 10
  },
  onLoad() {
    this.loadData();
  },
  onPullDownRefresh() {
    this.setData({
      page: 1,
      list: []
    });
    this.loadData(() => {
      wx.stopPullDownRefresh();
    });
  },
  onReachBottom() {
    this.setData({
      page: this.data.page + 1
    });
    this.loadData();
  },
  loadData(callback) {
    wx.request({
      url: `https://api.example.com/list?page=${this.data.page}&size=${this.data.size}`,
      success: (res) => {
        const newList = this.data.page === 1 ? res.data.list : [...this.data.list, ...res.data.list];
        this.setData({
          list: newList
        });
        if (callback) callback();
      }
    });
  }
})

3. 表单提交与验证

实现带验证的表单提交功能：

<form bindsubmit="submitForm">
  <input name="username" placeholder="请输入用户名" />
  <input name="password" placeholder="请输入密码" type="password" />
  <button form-type="submit">提交</button>
</form>

Page({
  submitForm(e) {
    const formData = e.detail.value;
    if (!formData.username) {
      wx.showToast({
        title: '用户名不能为空',
        icon: 'none'
      });
      return;
    }
    if (!formData.password) {
      wx.showToast({
        title: '密码不能为空',
        icon: 'none'
      });
      return;
    }
    // 提交表单数据到服务器
    wx.request({
      url: 'https://api.example.com/login',
      method: 'POST',
      data: formData,
      success: (res) => {
        if (res.data.success) {
          wx.showToast({ title: '登录成功' });
        } else {
          wx.showToast({
            title: '登录失败',
            icon: 'none'
          });
        }
      }
    });
  }
})

二、数据获取与展示功能

1. 接口调用获取数据

通过 wx.request 从服务器获取数据并展示：

Page({
  data: {
    productList: []
  },
  onLoad() {
    wx.request({
      url: 'https://api.example.com/products',
      method: 'GET',
      header: {
        'Content-Type': 'application/json'
      },
      success: (res) => {
        this.setData({
          productList: res.data
        });
      },
      fail: (err) => {
        console.error('请求失败', err);
      }
    });
  }
})

2. 数据缓存与本地存储

使用本地存储 API 实现数据缓存：

// 存储数据
wx.setStorageSync('userSettings', {
  theme: 'dark',
  fontSize: 16
});

// 获取数据
const userSettings = wx.getStorageSync('userSettings');
if (userSettings) {
  console.log('用户设置：', userSettings);
}

三、多媒体功能

1. 图片展示与操作

实现图片展示、选择、上传和预览功能：

<image src="{{imageUrl}}" mode="aspectFit" />

Page({
  data: {
    imageUrl: 'https://example.com/image.jpg'
  },
  chooseImage() {
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        this.setData({
          imageUrl: res.tempFilePaths[0]
        });
      }
    });
  },
  uploadImage() {
    const filePath = this.data.imageUrl;
    wx.uploadFile({
      url: 'https://api.example.com/upload',
      filePath: filePath,
      name: 'file',
      success: (res) => {
        console.log('图片上传成功', res);
      }
    });
  },
  previewImage() {
    wx.previewImage({
      current: this.data.imageUrl,
      urls: [this.data.imageUrl]
    });
  }
})

2. 音频与视频播放

实现音频和视频播放功能：

// 音频播放
Page({
  onLoad() {
    this.audioContext = wx.createInnerAudioContext();
    this.audioContext.src = 'https://example.com/audio.mp3';
  },
  playAudio() {
    this.audioContext.play();
  },
  pauseAudio() {
    this.audioContext.pause();
  }
})

<video src="https://example.com/video.mp4" controls></video>

四、用户相关功能

1. 用户登录与授权

实现微信登录和用户信息获取：

Page({
  login() {
    wx.login({
      success: (res) => {
        if (res.code) {
          wx.request({
            url: 'https://api.example.com/login',
            data: { code: res.code },
            success: (loginRes) => {
              console.log('登录成功', loginRes.data);
            }
          });
        }
      }
    });
  },
  getUserInfo() {
    wx.getUserProfile({
      desc: '用于完善用户资料',
      success: (res) => {
        console.log('用户信息：', res.userInfo);
      }
    });
  }
})

2. 用户信息展示与修改

展示并更新用户信息：

Page({
  data: {
    userInfo: {}
  },
  onLoad() {
    wx.request({
      url: 'https://api.example.com/user/info',
      success: (res) => {
        this.setData({ userInfo: res.data });
      }
    });
  },
  updateUserInfo(e) {
    const updatedInfo = e.detail.value;
    wx.request({
      url: 'https://api.example.com/user/update',
      method: 'POST',
      data: updatedInfo,
      success: (res) => {
        if (res.data.success) {
          wx.showToast({ title: '信息更新成功' });
          this.onLoad();
        }
      }
    });
  }
})

五、支付功能

1. 微信支付集成

实现小程序内微信支付功能：

Page({
  pay() {
    wx.request({
      url: 'https://api.example.com/pay/order',
      success: (res) => {
        const paymentData = res.data;
        wx.requestPayment({
          timeStamp: paymentData.timeStamp,
          nonceStr: paymentData.nonceStr,
          package: paymentData.package,
          signType: paymentData.signType,
          paySign: paymentData.paySign,
          success: (payRes) => {
            console.log('支付成功', payRes);
          },
          fail: (payErr) => {
            console.log('支付失败', payErr);
          }
        });
      }
    });
  }
})

六、地图与位置功能

1. 获取用户位置与地图展示

获取并展示用户地理位置：

Page({
  data: {
    latitude: 0,
    longitude: 0
  },
  getLocation() {
    wx.getLocation({
      type: 'gcj02',
      success: (res) => {
        this.setData({
          latitude: res.latitude,
          longitude: res.longitude
        });
      }
    });
  }
})

<map latitude="{{latitude}}" longitude="{{longitude}}" scale="16" style="width: 100%; height: 300px;"></map>

2. 查找附近地点

根据用户位置搜索周边地点：

Page({
  data: {
    nearbyPlaces: []
  },
  getNearbyPlaces() {
    const { latitude, longitude } = this.data;
    wx.request({
      url: 'https://api.example.com/nearby',
      data: {
        latitude: latitude,
        longitude: longitude,
        radius: 1000
      },
      success: (res) => {
        this.setData({
          nearbyPlaces: res.data
        });
      }
    });
  }
})

七、分享功能

实现页面分享功能：

Page({
  onShareAppMessage() {
    return {
      title: '精彩内容分享',
      path: '/pages/index/index',
      imageUrl: 'https://example.com/share.jpg'
    };
  },
  onShareTimeline() {
    return {
      title: '分享到朋友圈啦',
      query: '',
      imageUrl: 'https://example.com/share.jpg'
    };
  }
})