常见业务场景

获取头像昵称

微信

<!-- 头像昵称 -->
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{{avatarUrl}}" />
</button>

<!-- 昵称 -->
<input class="weui-input" type="nickname" placeholder="请输入昵称" />

小程序登录

微信登录

登录常用 uni api

• uni.login：登录。
• uni.getUserInfo：获取用户信息。
• uni.getUserProfile：获取用户信息。每次请求都会弹出授权窗口，用户同意后返回 userInfo。

1. 调用 uni.getUserInfo 获取用户信息。
2. 调用 uni.login 获取 code。
3. 调用后端提供的 “微信登录” 接口，将 code 等用户信息传递给后端。
   • 如果没有注册，提示注册/调用注册接口自动注册。
4. 判断是否绑定过手机号
   • 如果没有绑定过，提示绑定手机号。
5. 执行登录成功逻辑，例如：返回首页/我的。

// 微信登录
async function wxLogin() {
  const wxUserInfo = await uni.getUserInfo()
  const { code } = await uni.login({ provider: 'weixin' })
  const res = await request('/api/wechat/login', { code })

  let token = ''
  let userInfo = null

  // 假如 50001 表示未注册
  if (!res.code === 50001) {
    // 自动注册
    const registerRes = await request('/api/wechat/register', { code, userInfo: wxUserInfo })
    token = registerRes.token
    userInfo = registerRes.userInfo
  }
  token = res.token
  userInfo = res.userInfo
  // 保存
  uni.setStorageSync('token', token)
  uni.setStorageSync('userInfo', userInfo)

  if (!res.phone) {
    uni.navigateTo({ url: '/pages/bind-phone/bind-phone' }) // 没有绑定手机号，跳转到绑定手机号页面
  } else {
    uni.navigateTo({ url: '/pages/profile/profile' }) // 登录成功，跳转到个人中心
  }
}

小程序支付

1. 用户点击“立即下单”，调用后端接口接口，传递一系列需要的参数，然后返回 小程序支付参数。
2. 调用 uni.requestPayment，传入小程序支付参数，调起微信支付。

小程序分享

在小程序中，“分享”属于生命周期

export default {
  // 用户点击右上角分享
  onShareAppMessage() {
    return {
      title: '分享标题',
      imageUrl: '/static/share-image.png',
      path: '/pages/index/index?id=123',
    }
  },
  // 用户点击右上角分享到朋友圈
  onShareTimeline() {
    return {
      title: '分享标题',
      imageUrl: '/static/share-image.png',
      query: 'id=123',
    }
  },
}

如果想通过自定义按钮进行分享，需要给按钮添加 open-type="share" 属性：

<button open-type="share">分享</button>