微信小程序学习

微信开放平台调试工具

1. 应用id

	描述	获取	其他备注
UnionID	同一个微信开放平台下(包含小程序，公众号...)对应用户的唯一标识id	wx.login + code2Session 获取到用户 UnionID，无须用户授权	小程序想要拿到UnionID，必须绑定开放平台
AppID	每个应用都有对应的appId，如：小程序，公众号h5...	进入小程序或公众平台后台查看	点击微信中小程序的更多也可以查看
OpenID	每个应用对应用户的唯一标识id	wx.login + code2Session 获取到用户 OpenID，无须用户授权
原始ID	与微信服务交互，用户找回，注销应用使用	进入小程序或公众平台后台查看	原生app跳转到小程序，分享到小程序貌似是需要原始ID

2. code & scope

2-1. 登录授权code（静默授权，无须用户授权）

wx.login({
  success(res) {
    // res.code
  }
})

2-2. 换取用户手机号code

注意：getPhoneNumber回调执行成功后微信执行收费，每次组件调用成功，收费0.03元，需要处理欠费余额不足场景

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

Page({
  getPhoneNumber (e) {
    console.log(e.detail.code)  // 动态令牌
    console.log(e.detail.errMsg) // 回调信息（成功失败都会返回）
    console.log(e.detail.errno)  // 错误码（失败时返回）

    // 余额不足
    if (e.detail.errno === 1400001) {
      // TODO
    }
  }
})

2-3. scope 授权

• 获取用户授权设置wx.getSetting
• 发起授权请求wx.authorize
• 执行操作

// 1. 获取 添加到相册 授权设置
const { authSetting } = await uniApiPromisify('getSetting');
const writePhotosAlbumAuth: undefined | boolean =
  authSetting['scope.writePhotosAlbum'];

// 2. 未授权，发起授权
if (writePhotosAlbumAuth === false) {
  await uniApiPromisify('authorize', {
    scope: 'scope.writePhotosAlbum',
  })
    .catch(() => {
      uniApiPromisify('showModal', {
        title: '申请授权',
        content: '保存图片到你的相册',
        cancelText: '取消',
        confirmText: '去授权',
        success(res: any) {
          if (res.confirm) {
            uniApiPromisify('openSetting');
          }
        },
      });
      return Promise.reject();
    });
}

// 3. 保持图片到相册中
await uniApiPromisify('saveImageToPhotosAlbum', {
  filePath: data.tempFilePath,
})

uni.showToast({ title: '保存成功' });

3. 用户头像昵称获取规则调整

<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
</button>

<view class="nickname-wrapper">
  <text class="nickname-label">昵称{{inputValue}}</text>
  <input value="{{inputValue}}" type="nickname" class="nickname-input" placeholder="请输入昵称" bind:change="onInputChange" />
</view>

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Component({
  data: {
    inputValue: '',
    userInfo: {
      avatarUrl: defaultAvatarUrl,
      nickName: '',
    },
  },
  methods: {
    onChooseAvatar(e) {
      this.setData({
        "userInfo.avatarUrl": e.detail.avatarUrl, // 临时地址
      })
      // 如果需要上传的服务端，通过wx.uploadFile接口
      wx.uploadFile({
        url: '服务端api地址',
        filePath: e.detail.avatarUrl,
        // 文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
        name: 'file',
      })
    },
    onInputChange(e) {
      this.setData({
        "userInfo.nickName": e.detail.value,
      })
    },
  },
})

4. 集成小程序插件

以集成网易易盾验证码为例

• 4.1、添加插件：进入小程序后台 -> 设置 -> 第三方设置 -> 插件管理

• 4.2、app.json配置

// 加载插件
{
  plugins: {
    captcha: {
      version: "1.3.0",
      provider: "wxb7c8f9ea9ceb4663",
    },
  },
}

• 4.3、page.json配置

// 使用插件提供的组件
{
  navigationBarTitleText: "页面标题",
  usingComponents: {
    "ne-captcha": "plugin://captcha/ne-captcha",
  },
}