基于vue2.x实现的即时通讯程序仿微信聊天10微信jssdk的

2022-11-26  本文已影响0人  风中凌乱的男子 
cnpm install weixin-js-sdk --save

const api = {
  GetConfigData:"/api/getConfigData",//获取微信配置
}

// 获取微信配置项 
export function getConfigData(data) {
  return request({
    url: api.GetConfigData,
    method: 'post',
    data,
  })
}

import wx from 'weixin-js-sdk'
import { getConfigData } from "@/api/user";
const wxApi = {
    /**
     * [wxRegister 微信Api初始化]
     * @param  {Function} callback [ready回调函数]
     */
    wxRegister(callback) {
        // 这边的接口请换成你们自己的
        getConfigData({ href: location.href.split('#')[0] }).then(res => {
            wx.config({
                debug: false, // 开启调试模式
                appId: res.data.appId, // 必填，公众号的唯一标识
                timestamp: res.data.timestamp, // 必填，生成签名的时间戳
                nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
                signature: res.data.signature, // 必填，签名，见附录1
                jsApiList: [
                    'updateTimelineShareData',
                    'updateAppMessageShareData',
                    'startRecord',
                    'stopRecord',
                    'onVoiceRecordEnd',
                    'playVoice',
                    'pauseVoice',
                    'stopVoice',
                    'onVoicePlayEnd',
                    'uploadVoice',
                    'downloadVoice'
                ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            })
        }).catch((error) => {
            console.log(error)
        })
        wx.ready((res) => {
            // 如果需要定制ready回调方法
            if (callback) {
                callback()
            }
        })
        
    },
    /**
     * [ShareTimeline 微信分享到朋友圈]
     * @param {[type]} option [分享信息]
     * @param {[type]} success [成功回调]
     * @param {[type]} error   [失败回调]
     */
    ShareTimeline(option) {
        wx.updateTimelineShareData({
            title: option.title, // 分享标题
            link: option.link, // 分享链接
            imgUrl: option.imgUrl, // 分享图标
            success() {
                // 用户成功分享后执行的回调函数
                option.success()
            },
            cancel() {
                // 用户取消分享后执行的回调函数
                option.error()
            }
        })
    },
    /**
     * [ShareAppMessage 微信分享给朋友]
     * @param {[type]} option [分享信息]
     * @param {[type]} success [成功回调]
     * @param {[type]} error   [失败回调]
     */
    ShareAppMessage(option) {
        wx.updateAppMessageShareData({
            title: option.title, // 分享标题
            desc: option.desc, // 分享描述
            link: option.link, // 分享链接
            imgUrl: option.imgUrl, // 分享图标
            success() {
                // 用户成功分享后执行的回调函数
                option.success()
            },
            cancel() {
                // 用户取消分享后执行的回调函数
                option.error()
            }
        })
    }
}
export default wxApi;

import wxapi from '@/utils/wxapi'

wxRegCallback() {
    //在这里写一些逻辑   
}

wxapi.wxRegister(this.wxRegCallback);
image.png
image.png
image.png
image.png
cnpm install nodemon --save
cnpm install nodemon
image.png
image.png
image.png
image.png
import wx from 'weixin-js-sdk'

<template>
  <div>
    <van-button type="primary" block @click="startRecord">开始录音</van-button>
    <br />
    <van-button type="primary" block @click="stopRecord">停止录音</van-button>
    <br />
    <van-button type="primary" block @click="playRecord">播放录音</van-button>
  </div>
</template>


<script>
import wx from 'weixin-js-sdk'
export default {
  data() {
    return {
      localId: ''
    }
  },
  methods: {
    /** 开始录音 */
    startRecord() {
      wx.startRecord()
    },
    /** 停止录音 */
    stopRecord() {
      wx.stopRecord({
        success: res => {
          this.localId = res.localId
        }
      })
    },
    /** 播放录音 */
    playRecord() {
      wx.playVoice({
        localId: this.localId // 需要播放的音频的本地ID，由 stopRecord 接口获得
      })
    }
  },
  mounted() {}
}
</script>


 <van-button type="primary" block @click="translateVoice">识别录音</van-button>

 /** 识别语音 */
    translateVoice() {
      wx.translateVoice({
        localId: this.localId, // 需要识别的音频的本地Id，由录音相关接口获得
        isShowProgressTips: 1, // 默认为1，显示进度提示
        success: function (res) {
          alert(res.translateResult) // 语音识别的结果
        }
      })
    }
image.png
image.png
 <van-button type="primary" block @click="getLocation">获取当前位置</van-button>
 <div v-if="latitude" style="text-align: center;">
   <p>经纬度：{{latitude}}、{{longitude}}</p>
 </div>

/** 获取当前位置 */
    getLocation() {
      wx.getLocation({
        type: 'gcj02', // 默认为wgs84的 gps 坐标，如果要返回直接给 openLocation 用的火星坐标，可传入'gcj02'
        success:  (res)=> {
          this.latitude = res.latitude // 纬度，浮点数，范围为90 ~ -90
          this.longitude = res.longitude // 经度，浮点数，范围为180 ~ -180。
        }
      })
    },
image.png
<van-button type="primary" block @click="openLocation">打开地图</van-button>

/** 打开地图 */
    openLocation() {
      wx.openLocation({
        latitude: this.latitude, // 纬度，浮点数，范围为90 ~ -90
        longitude: this.longitude, // 经度，浮点数，范围为180 ~ -180。
        name: '泸州职业技术学院', // 位置名
        address: '四川省泸州市龙马潭区长桥路2号', // 地址详情说明
        scale: 15, // 地图缩放级别,整型值,范围从1~28。默认为最大
        infoUrl: 'https://baidu.com' // 在查看位置界面底部显示的超链接,可点击跳转
      })
    }
image.png
 <van-button type="primary" block @click="scanQRCode">打开扫一扫</van-button>
    <div v-if="result" style="text-align: center">
      <p>扫码结果</p>
      <p>{{result}}</p>
    </div>

/** 打开扫一扫 */
    scanQRCode() {
      wx.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
        success:  (res)=> {
          this.result = res.resultStr // 当needResult 为 1 时，扫码返回的结果
        }
      })
    }
image.png
 <van-button type="primary" block @click="updateAppMessageShareData">分享给好友</van-button>

/** 分享给好友 */
    //需在用户可能点击分享按钮前就先调用 wx.ready
    updateAppMessageShareData() {
      wx.ready(function () {
        //需在用户可能点击分享按钮前就先调用
        wx.updateAppMessageShareData({
          title: 'hello,大家好，我是渣渣辉', // 分享标题
          desc: '渣渣辉天下无敌', // 分享描述
          link: 'https://baidu.com', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
          imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fent.nvwu.com%2FUploadFiles_5361%2F20140731%2F20140731182620723.jpg&refer=http%3A%2F%2Fent.nvwu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672149395&t=9b78c767268cc0179861cdf85c41caf4', // 分享图标
          success: function () {
            // 设置成功
          }
        })
      })
    }

 <van-button type="primary" block @click="updateTimelineShareData">分享到朋友圈</van-button>

 /** 分享到朋友圈 */
    updateTimelineShareData() {
      wx.ready(function () {
        //需在用户可能点击分享按钮前就先调用
        wx.updateTimelineShareData({
          title: '泸州职业学院天下闻名', // 分享标题
          link: 'http://192.168.31.70:9020/#/test', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
          imgUrl: 'http://www.lzy.edu.cn/images/lzy_logo.png', // 分享图标
          success: function () {
            // 设置成功
          }
        })
      })
    }

wxShareAppMessage() {
      // 微信自定义分享给朋友
      let option = {
        title: '我正在使用自己开发的社交软件，快来一起畅聊吧', // 分享标题, 请自行替换
        desc: `即时聊天，记录退出即焚，保护您的隐私！还等什么，点进来吧～`, // 分享描述, 请自行替换
        link: 'https://jianshu.com', // 分享链接，根据自身项目决定是否需要split
        imgUrl: 'http://erkong.ybc365.com/8ba79202008101804251112.png', // 分享图标, 请自行替换，需要绝对路径
        success: () => {
          //alert('分享成功')
        },
        error: () => {
          // alert('已取消分享')
        }
      }
      // 将配置注入通用方法
      wxapi.ShareAppMessage(option)
    }

wxShareTimeline() {
      // 微信自定义分享到朋友圈
      let option = {
        title: '我正在使用自己开发的社交软件，快来一起畅聊吧', // 分享标题, 请自行替换
        link: 'https://jianshu.com', // 分享链接，根据自身项目决定是否需要split
        imgUrl: 'http://erkong.ybc365.com/8ba79202008101804251112.png', // 分享图标, 请自行替换，需要绝对路径
        success: () => {
          //alert('分享成功')
        },
        error: () => {
          // alert('已取消分享')
        }
      }
      // 将配置注入通用方法
      wxapi.ShareTimeline(option)
    },

 wxRegCallback() {
      //在这里写一些逻辑
      this.wxShareTimeline()
      this.wxShareAppMessage()
    },

这样就实现了，自动调用wx.ready

image.png
wxShareTimeline({commit},data){
    // 微信自定义分享给朋友
    let option = {
      title: data.title, // 分享标题, 请自行替换
      link: data.link, // 分享链接，根据自身项目决定是否需要split
      imgUrl: data.imgUrl, // 分享图标, 请自行替换，需要绝对路径
      success: () => {
        //alert('分享成功')
      },
      error: () => {
        // alert('已取消分享')
      }
    }
    // 将配置注入通用方法
    wxapi.ShareTimeline(option)
  },
  wxShareAppMessage({commit},data) {
    // 微信自定义分享给朋友
    let option = {
      title: data.title, // 分享标题, 请自行替换
      desc: data.desc, // 分享描述, 请自行替换
      link: data.link, // 分享链接，根据自身项目决定是否需要split
      imgUrl: data.imgUrl, // 分享图标, 请自行替换，需要绝对路径
      success: () => {
        //alert('分享成功')
      },
      error: () => {
        // alert('已取消分享')
      }
    }
    // 将配置注入通用方法
    wxapi.ShareAppMessage(option)
  },

import wxapi from '@/utils/wxapi'

this.$store.dispatch('wxShareAppMessage', {
        title: `我正在和${this.$route.query.name}聊天，快来围观～`,
        desc: '测试描述',
        link: location.href,
        imgUrl: 'http://erkong.ybc365.com/8ba79202008101804251112.png'
      })
      this.$store.dispatch('wxShareTimeline', {
        title: `我正在和${this.$route.query.name}聊天，快来围观～`,
        link: location.href,
        imgUrl: 'http://erkong.ybc365.com/8ba79202008101804251112.png'
      })

import wxapi from '@/utils/wxapi'

wxRegCallback(){
  // 在这里面调用vuex里的方法

}

  wxapi.wxRegister(this.wxRegCallback)

wxRegCallback() {
      this.$store.dispatch('wxShareAppMessage', {
        title: `我正在和${this.$route.query.name}聊天，快来围观～`,
        desc: '测试描述',
        link: location.href,
        imgUrl: 'http://erkong.ybc365.com/8ba79202008101804251112.png'
      })
      this.$store.dispatch('wxShareTimeline', {
        title: `我正在和${this.$route.query.name}聊天，快来围观～`,
        link: location.href,
        imgUrl: 'http://erkong.ybc365.com/8ba79202008101804251112.png'
      })
    }
上一篇 下一篇

猜你喜欢

热点阅读