Uniapp 实现全民分销功能原理解析

interface User {
  _id: string
  // 名称
  name: string
  // 头像
  avatar: string
  // weixin  唯一ID
  openid: string
  // 创建时间
  createTime: number
  // 积分
  integral: number
}

interface Record {
  _id: string
  // 获得积分描述
  name: string
  // 发放模式 1 已发放 0 未发放
  mode: number
  // 关联用户表
  userId: string
  // 创建时间
  createTime: number
  // 获得积分
  integral: number
}

const copy = (text) => navigator.clipboard.writeText('Hello world!')

const text = navigator.clipboard.readText()

onShareAppMessage() {
  // 转发
  return {
    title: this.detail.title + ' | 前端面试题库',
    path: '/pages/index/detail?id=' + this.detail._id + '&userId=' + this.Vuex_user ? this.vuex_user._id : '',
  }
},
onShareTimeline() {
  // 分享到朋友圈
  return {
    title: this.detail.title + ' | 前端面试题库',
    path: '/pages/index/detail?id=' + this.detail._id + '&userId=' + this.vuex_user ? this.vuex_user._id : '',
  }
}

//封装获取 access_token 的方法， 1分钟1w次
async function getAccessToken(appId, appSecret) {
  const res = await uniCloud.Httpclient.request(
    `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${appSecret}`,
    {
      dataType: 'JSON',
    }
  )
  return res.data.access_token
}

async function getMpCode(scene, page, access_token) {
  const res = await uniCloud.httpclient.request(
    `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${access_token}`,
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      data: {
        scene,
        page,
      },
    }
  )
  return res.data
}

exports.main = async (event, context) => {
  const appId = '你的 appId'
  const appSecret = '你的 appSecrets'
  const { page, scene } = event
  const access_token = await getAccessToken(appId, appSecret)
  const res = await getMpCode(scene, page, access_token)
  return res
}

uniCloud.callFunction({
  name: 'getmpcode',
  data: {
    scene,
  },
  success: (res) => {
    const imagepath = `${wx.env.USER_DATA_PATH}/mpcode.png`
    const fs = uni.getFileSystemManager()
    fs.writeFileSync(
      imagepath,
      uni.arrayBufferToBase64(res.result.data),
      'base64'
    )
    canvasdrawImage(imagepath)
  },
})

<template>
  <view>
    <canvas canvas-id="myCanvas" style="width:100vw;height:100vw;"></canvas>
  </view>
</template>

function canvasDrawImage(imagepath){
  const context = uni.createCanvasContext('myCanvas');
  context.drawImage(imagepath,470,530,100,100);
  context.draw();
}

var img = new Image();
img.onload = function() {
  context.drawImage(img, 0, 0);
};
img.src = 'https://example.com/files/backdround.png';

methods: {
  saveImage() {
    uni.showLoading({
      title: '加载中...',
      mask: true,
    })
    uni.canvasToTempFilePath({
      //将canvas保存到一个临时文件
      canvasId: 'myCanvas', //画布id
      success: (res) => {
        const fs = uni.getFileSystemManager()

        fs.saveFile({
          tempFilePath: res.tempFilePath, // 传入一个本地临时文件路径
          success: (res) => {
            this.posterImage = res.savedFilePath
            this.saveImageToPhotosAlbum()
          },
          fail: (err) => {
            console.log(err)
          },
        })
        uni.hideLoading()
      },
    })
  },
  saveImageToPhotosAlbum() {
    uni.saveImageToPhotosAlbum({
      filePath: this.posterImage,
      success: () => {
        this.$emit('close-overlay')
        uni.showToast({
          title: '保存图片成功',
          duration: 2000,
        })
      },
      fail(err) {
        const { errMsg } = err
        if (errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
          uni.showModal({
            title: '保存失败',
            content: '请授权保存图片到“相册”的权限',
            success: (result) => {
              const { confirm } = result
              if (confirm) {
                uni.openSetting({})
              }
            },
          })
        }
      },
    })
  },
}