vue3开发h5端投票系统的全程

文章目录

• • 概要
  • 整体架构流程
  • 技术名词解释
  • 技术细节
  • 小结

概要

投票系统的整体开发h5端，技术是基于vue3+ts+vant

整体架构流程

流程就是能投票 一次最多四票，包括详情以及生成海报，搜索以及滑动产生的粘性布局的  还有分享的卡片形式

技术细节

界面搭建忽略主要介绍整体架构流程

1.起项目基本东西配置（忽略）包括引入之类的

2.路由拦截，这里需要进行微信的用户信息的授权，也就是获取用户信息

export const getUrlParam = (name) => {
  // 封装方法
  let geturl = window.location.href
  let getqyinfo = geturl.split('?')[1]
  let getqys = new URLSearchParams('?' + getqyinfo)
  return getqys.get(name) // 获取参数
}

router.beforeEach((to, from, next) => {
  const appId = process.env.NODE_ENV === 'development' ? 'wxa2c4ac7135a371b5' : 'wx23d3fe4bb5e08e50'//微信平台自行设置

  const ua = navigator.userAgent.toLowerCase()
  let code = getUrlParam('code')

  if (!code && !useStorage('token', '').value) {
    // 判断是否是微信浏览器
    let local = window.location.href
    window.location.href =
      `https://open.weixin.qq.com/connect/oauth2/authorize?appid=` +
      appId +
      `&redirect_uri=${encodeURIComponent(
        local
      )}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`
  } else {
    next()
  }
})

可以拦截浏览器打开的情况，调用授权获取信息，这个时候需要通过code获取对应的身份标识，首页获取对应的标识进行存储，这边我们是把对应路径参数进行了删除(可有可无)这里对应

function removeQueryParameters(url) {
  var parser = document.createElement('a')
  parser.href = url

  // 清空查询参数
  parser.search = ''

  // 重新构建 URL
  return parser.href
}
const onSubmit = async () => {
  if (!getUrlParam('code')) return
  const token = useStorage('token', '')
  const result = await getAccessToken({ code: getUrlParam('code') })

  token.value = result.data.openid

  window.location.href = removeQueryParameters(window.location.href)
  // router.replace('/')
}

对于授权会存在用户打开链接没有授权就进去的情况，但是没搞懂为啥会这样可能是用户存在已经授权过二次进去就是不会再次授权

3.第三个重点就是生成海报，这边本开始计划是前端用插件htmlcanvas但是节约时间和后端同志沟通他绘制生成图片来展示的

4.微信分享的卡片

 中途还是出了很多问题：

1.分享链接分享出去得还是链接，后来才知道是i微信问题反正就是摸棱两可得告诉你就是不行这样分享关于《微信外部链接内容管理规范》的更新说明

2.解决方案三种 ：
1. 如果通过链接点击进入页面，分享到好友，朋友圈的就是链接。可以点击收藏进行收藏链接后转发
2. 如果通过二维码（使用链接生成二维码），扫码进入页面，分享到好友，朋友圈的就带有标题、简介、缩略图的卡片。
3. 如果通过公众号菜单（绑定页面链接的菜单），点击进入页面，分享到好友，朋友圈的就带有标题、简介、缩略图的卡片。（不建议会存在转发带有公众号得名称）

原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口，即将废弃。

请尽快迁移使用客户端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updateAppMessageShareData、wx.updateTimelineShareData接口。

代码整体：

1.hooks下建文件  useWxSdk

import wx from 'weixin-js-sdk-ts'
import { WechatShareResponse } from '@/api/types/home'
import { now } from '@vueuse/core'

export interface WxConfig {
  appId: string // 必填，公众号的唯一标识
  timestamp: number // 必填，生成签名的时间戳
  nonceStr: string // 必填，生成签名的随机串
  signature: string // 必填，签名，见附录1
  jsApiList: wx.jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
  openTagList?: wx.openTagList
}

export function useWxSDK() {
  function initConfig(configInfo: WxConfig) {
    return new Promise((resolve) => {
      wx.config({
        debug: false,
        appId: configInfo.appId,
        timestamp: configInfo.timestamp,
        nonceStr: configInfo.nonceStr,
        signature: configInfo.signature,
        jsApiList: configInfo.jsApiList ?? [
          'updateTimelineShareData',
          'updateAppMessageShareData',
          'hideMenuItems'
        ],
        openTagList: []
      })

      wx.error(function (res) {
        // config信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的debug模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名。
        console.log(res)
      })

      wx.ready(() => {
        resolve(true)
      })
    })
  }

  // 微信分享
  function setShareInfo(
    shareInfo: WechatShareResponse,
    onSuccess?: () => void,
    onCancel?: () => void
  ) {
    wx.ready(function () {
      wx.updateAppMessageShareData({
        title: shareInfo.shareTitle,
        desc: shareInfo.shareDesc,
        link: shareInfo.shareUrl + `&t=${now()}`,
        imgUrl: shareInfo.shareImg,
        success() {
          onSuccess?.()
        },
        cancel() {
          onCancel?.()
        }
      })

      wx.updateTimelineShareData({
        title: shareInfo.shareTitle,
        link: shareInfo.shareUrl,
        imgUrl: shareInfo.shareImg,
        success() {
          onSuccess?.()
        },
        cancel() {
          onCancel?.()
        }
      })
    })
  }

  function setHideCopy() {
    wx.hideMenuItems({
      menuList: [
        'menuItem:copyUrl' // 复制链接
      ],
      fail: function (res) {
        console.log(JSON.stringify(res))
      }
    })
  }

  /** 是否是ios微信 */
  function isiOSWechat() {
    return (window as any).__wxjs_is_wkwebview
  }

  return {
    initConfig,
    setShareInfo,
    setHideCopy,
    isiOSWechat
  }
}

2.hooks下得第二哥文件useWxShare.ts   正常得分享内容是可以从接口获取，但是目前我们是写死的

import { getWechatShareInfo, getWechatSign } from '@/api'
import { useStorage } from '@vueuse/core'
import { useWxSDK } from '@/hooks/useWxSDK'

export function useWxShare() {
  const { initConfig, setShareInfo, setHideCopy } = useWxSDK()
  const shareUrl = window.location.href.split('#')[0]

  // 获取信息
  getWechatSign({ urls: shareUrl }).then((config) => {
    initConfig(config.data).then(async () => {
      // const shareConfig = await getWechatShareInfo()
      const shareConfig = {
        shareTitle: 'XX投票',
        shareDesc: '',
        shareUrl: shareUrl,
        shareImg: ''
      }
      setShareInfo({ ...shareConfig }, function () {
        console.log('转发数量')
      })
      setHideCopy()
    })
  })
}

export {}

4.最后将打包得链接先点击收藏  ，再分享出去就没事了，如果还是没有显示配置得，，再转发一次，开始我这就是一直不显示烦死个人，再转发一次就有了以后转发都用这个就行

5.黏性布局偷了个懒，当然你可以加属性position：stickty或者和我一样直接vant得黏性布局进好了还挺好用