小程序开发日记⑨：微信开放接口与原生组件调用

1
utils/wx
2
 ├─ login.js          微信登录与会话检查
3
 ├─ phone.js          手机号授权事件解析
4
 ├─ privacy.js        隐私授权
5
 ├─ subscribeMsg.js   订阅消息
6
 ├─ media.js          图片选择与上传
7
 ├─ map.js            定位与地图上下文
8
 ├─ share.js          分享菜单
9
 ├─ clipboard.js      剪贴板
10
 └─ authImage.js      鉴权图片下载和本地缓存

1
export function login() {
2
  return new Promise((resolve, reject) => {
3
    wx.login({
4
      success: result => result.code
5
        ? resolve(result.code)
6
        : reject(new Error('微信登录未获取到 code')),
7
      fail: error => reject(new Error(error?.errMsg || '微信登录失败'))
8
    })
9
  })
10
}

1
if (existingToken && await checkSession()) {
2
  const response = await UserApi.getProfile()
3
  return { token: existingToken, userInfo: response.data }
4
}
5

6
const code = await wxLogin()
7
const response = await UserApi.login({ code })

1
let loginFlowPromise = null
2

3
export async function wxLoginFlow(options = {}) {
4
  if (loginFlowPromise) return loginFlowPromise
5
  loginFlowPromise = runLoginFlow(options)
6
  try {
7
    return await loginFlowPromise
8
  } finally {
9
    loginFlowPromise = null
10
  }
11
}

1
<button
2
  open-type="getPhoneNumber"
3
  @click="preparePrivacy"
4
  @getphonenumber="onGetPhoneNumber"
5
>
6
  允许并登录
7
</button>

1
export function getPhoneCodeFromEvent(event) {
2
  if (event?.detail?.code) return event.detail.code
3
  const message = String(event?.detail?.errMsg || '')
4
  if (message.includes('deny') || message.includes('cancel')) {
5
    throw new Error('您已拒绝手机号授权')
6
  }
7
  throw new Error('未获取到手机号授权凭证')
8
}

1
const preparePrivacy = () => {
2
  privacyPromise = ensurePrivacyAuthorized()
3
}
4

5
const onGetPhoneNumber = async event => {
6
  const phoneCode = getPhoneCodeFromEvent(event)
7
  await (privacyPromise || ensurePrivacyAuthorized())
8
  await auth.phoneLogin({ phoneCode })
9
}

1
const subscribeRequest = requestSubscribeMessage([
2
  ORDER_STATUS_TEMPLATE_ID
3
])
4

5
await OrderApi.payOrder(orderId)
6
await requestOrderCompletionSubscribe(subscribeRequest)

1
const accepted = result?.[ORDER_STATUS_TEMPLATE_ID] === 'accept'

1
<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
2
  <image :src="auth.avatarDisplayUrl" />
3
</button>

1
<input type="nickname" name="nickname" maxlength="30" />

1
wx.chooseMedia({
2
  count,
3
  mediaType: ['image'],
4
  sourceType: ['album', 'camera'],
5
  sizeType: ['compressed'],
6
  camera: 'back'
7
})

1
uni.uploadFile({
2
  url: apiUrl,
3
  filePath,
4
  name: 'file',
5
  formData,
6
  header: { Authorization: `Bearer ${token}` }
7
})

1
fileSystem.writeFile({
2
  filePath: `${wx.env.USER_DATA_PATH}/auth-image-${key}.jpg`,
3
  data: response.data,
4
  success: () => resolve(filePath)
5
})

1
<map
2
  id="tracking-map"
3
  :latitude="latitude"
4
  :longitude="longitude"
5
  :markers="markers"
6
  :polyline="polylines"
7
  :scale="mapScale"
8
  show-location
9
/>

1
const mapContext = wx.createMapContext('tracking-map')
2
mapContext.includePoints({ points, padding: [72, 48, 180, 48] })

1
<button open-type="contact">在线客服</button>

1
onShareAppMessage(() => ({
2
  title: `订单 ${detail.value.orderNo}`,
3
  path: `/pages/order/detail?orderId=${orderId.value}`
4
}))

1
const value = await readText()
2
order.courierNo = String(value).trim()
3

4
await copyText(detail.value.orderNo)