中文字幕亚洲区三,原创精品视频一区,超碰在97

這節(jié)課來(lái)學(xué)習(xí)wxjssdk，然后應(yīng)用到我們項(xiàng)目中來(lái)，開(kāi)發(fā)微信分享給好友，以及分享到朋友圈功能
微信jssdk屬于微信公眾號(hào)開(kāi)發(fā)的范疇，是微信官方提供的一套jsApi方法，通過(guò)調(diào)用微信提供的方法去實(shí)現(xiàn)基于微信環(huán)境的一些功能，比如微信分享，語(yǔ)音錄制以及發(fā)送，可點(diǎn)擊鏈接查看可實(shí)現(xiàn)的功能https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
vue進(jìn)行微信公眾號(hào)開(kāi)發(fā)需要用到這個(gè)插件weixin-js-sdk
先安裝它

cnpm install weixin-js-sdk --save

下面要封裝wxjssdk的初始化方法
先把獲取微信配置項(xiàng)的接口引入到項(xiàng)目中
打開(kāi)接口文檔https://www.showdoc.com.cn/2035654172307363/9606515368231674
復(fù)制接口路徑到api文件夾index.js內(nèi)

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

然后在api/user.js文件內(nèi)新建api方法

// 獲取微信配置項(xiàng) 
export function getConfigData(data) {
  return request({
    url: api.GetConfigData,
    method: 'post',
    data,
  })
}

然后在utils目錄下新建js文件wxapi.js
js文件內(nèi)容如下

import wx from 'weixin-js-sdk'
import { getConfigData } from "@/api/user";
const wxApi = {
    /**
     * [wxRegister 微信Api初始化]
     * @param  {Function} callback [ready回調(diào)函數(shù)]
     */
    wxRegister(callback) {
        // 這邊的接口請(qǐng)換成你們自己的
        getConfigData({ href: location.href.split('#')[0] }).then(res => {
            wx.config({
                debug: false, // 開(kāi)啟調(diào)試模式
                appId: res.data.appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)
                timestamp: res.data.timestamp, // 必填，生成簽名的時(shí)間戳
                nonceStr: res.data.nonceStr, // 必填，生成簽名的隨機(jī)串
                signature: res.data.signature, // 必填，簽名，見(jiàn)附錄1
                jsApiList: [
                    'updateTimelineShareData',
                    'updateAppMessageShareData',
                    'startRecord',
                    'stopRecord',
                    'onVoiceRecordEnd',
                    'playVoice',
                    'pauseVoice',
                    'stopVoice',
                    'onVoicePlayEnd',
                    'uploadVoice',
                    'downloadVoice'
                ] // 必填，需要使用的JS接口列表，所有JS接口列表見(jiàn)附錄2
            })
        }).catch((error) => {
            console.log(error)
        })
        wx.ready((res) => {
            // 如果需要定制ready回調(diào)方法
            if (callback) {
                callback()
            }
        })
        
    },
    /**
     * [ShareTimeline 微信分享到朋友圈]
     * @param {[type]} option [分享信息]
     * @param {[type]} success [成功回調(diào)]
     * @param {[type]} error   [失敗回調(diào)]
     */
    ShareTimeline(option) {
        wx.updateTimelineShareData({
            title: option.title, // 分享標(biāo)題
            link: option.link, // 分享鏈接
            imgUrl: option.imgUrl, // 分享圖標(biāo)
            success() {
                // 用戶成功分享后執(zhí)行的回調(diào)函數(shù)
                option.success()
            },
            cancel() {
                // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
                option.error()
            }
        })
    },
    /**
     * [ShareAppMessage 微信分享給朋友]
     * @param {[type]} option [分享信息]
     * @param {[type]} success [成功回調(diào)]
     * @param {[type]} error   [失敗回調(diào)]
     */
    ShareAppMessage(option) {
        wx.updateAppMessageShareData({
            title: option.title, // 分享標(biāo)題
            desc: option.desc, // 分享描述
            link: option.link, // 分享鏈接
            imgUrl: option.imgUrl, // 分享圖標(biāo)
            success() {
                // 用戶成功分享后執(zhí)行的回調(diào)函數(shù)
                option.success()
            },
            cancel() {
                // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
                option.error()
            }
        })
    }
}
export default wxApi;

wxapi文件創(chuàng)建完成后，我們簡(jiǎn)單先來(lái)測(cè)試下，是否可以請(qǐng)求通接口并且和微信官方取得一個(gè)正常的通信
在App.vue引入wxapi

import wxapi from '@/utils/wxapi'

寫(xiě)一個(gè)methods方法供wxapi調(diào)用
methods

wxRegCallback() {
    //在這里寫(xiě)一些邏輯   
}

在mounted生命周期內(nèi)調(diào)用wxapi

wxapi.wxRegister(this.wxRegCallback);

下面打開(kāi)微信開(kāi)發(fā)者工具，下載地址 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
打開(kāi)開(kāi)發(fā)者工具，點(diǎn)擊【公眾號(hào)網(wǎng)頁(yè)項(xiàng)目】，輸入我們本地的項(xiàng)目地址
可以看到獲取微信配置項(xiàng)的接口已經(jīng)成功觸發(fā)了，但是有個(gè)err報(bào)錯(cuò)
下面先來(lái)認(rèn)識(shí)下幾個(gè)報(bào)錯(cuò)信息

這個(gè)報(bào)錯(cuò)是jssdk接口域名要么出現(xiàn)了錯(cuò)誤，（微信公眾號(hào)需要配置正確域名），要么就是appid使用的不對(duì)（后端的錯(cuò)）

上面這種報(bào)錯(cuò)，一般是簽名失敗或失效
引入這種問(wèn)題的情況有很多，比如下面這篇文章
http://wjhsh.net/zmdComeOn-p-9668440.html
而如果萬(wàn)事俱備的情況下，微信正常的返回應(yīng)該是這樣的

由于是線上正式的微信公眾號(hào)，所以本地開(kāi)發(fā)無(wú)法進(jìn)行，下面就借助本地的測(cè)試appid，自己搭建后端接口代碼
打開(kāi)鏈接 https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
微信掃碼登錄，獲取本地測(cè)試appid和密鑰
修改js安全接口域名

打開(kāi)后端node項(xiàng)目，將utils/wx.js內(nèi)的appId和secret換成你本地的測(cè)試id和密鑰
然后cnpm install 安裝依賴啟動(dòng)項(xiàng)目，啟動(dòng)命令 nodemon
如果啟動(dòng)不了就安裝這兩個(gè)命令

cnpm install nodemon --save
cnpm install nodemon

這樣就是啟動(dòng)成功了
然后把前端的反向代理的地址改成http://localhost:6666，然后重啟前端項(xiàng)目才生效
打開(kāi)開(kāi)發(fā)者工具

出現(xiàn)這個(gè)報(bào)錯(cuò)，說(shuō)明你沒(méi)有關(guān)注測(cè)試公眾號(hào)，掃碼關(guān)注下你的測(cè)試公眾號(hào)二維碼

關(guān)注后，在刷新開(kāi)發(fā)者工具頁(yè)面

這樣就是和微信正常通信了
下面來(lái)新建個(gè)頁(yè)面來(lái)學(xué)習(xí)測(cè)試下，微信的jssdk功能
新建個(gè)test頁(yè)面
新建文件
配置路由
訪問(wèn)test頁(yè)面
先把wxapi引入過(guò)來(lái)

import wx from 'weixin-js-sdk'

給頁(yè)面寫(xiě)三個(gè)按鈕，分別是開(kāi)始錄音停止錄音播放錄音

<template>
  <div>
    <van-button type="primary" block @click="startRecord">開(kāi)始錄音</van-button>
    <br />
    <van-button type="primary" block @click="stopRecord">停止錄音</van-button>
    <br />
    <van-button type="primary" block @click="playRecord">播放錄音</van-button>
  </div>
</template>

methods


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

用開(kāi)發(fā)者工具不好測(cè)試播放錄音，下面請(qǐng)打出你的手機(jī) 在微信內(nèi)訪問(wèn) http://192.168.31.70:9020/#/test
發(fā)現(xiàn)不行，是因?yàn)槲覀兊腏S接口安全域名設(shè)置的不對(duì)，打開(kāi)地址https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index
修改js接口安全域名為你的項(xiàng)目ip前端項(xiàng)目地址 192.168.31.70:9020
開(kāi)發(fā)者工具訪問(wèn) http://192.168.31.70:9020/#/test 出現(xiàn)errMsg: "config:ok",就是可以測(cè)試了
刷新手機(jī)頁(yè)面，測(cè)試錄音、停止、播放，就ok了！
下面在測(cè)試下錄音識(shí)別功能
新建一個(gè)按鈕

 <van-button type="primary" block @click="translateVoice">識(shí)別錄音</van-button>

methods

 /** 識(shí)別語(yǔ)音 */
    translateVoice() {
      wx.translateVoice({
        localId: this.localId, // 需要識(shí)別的音頻的本地Id，由錄音相關(guān)接口獲得
        isShowProgressTips: 1, // 默認(rèn)為1，顯示進(jìn)度提示
        success: function (res) {
          alert(res.translateResult) // 語(yǔ)音識(shí)別的結(jié)果
        }
      })
    }

經(jīng)過(guò)測(cè)試會(huì)出現(xiàn)這種報(bào)錯(cuò)，說(shuō)明translateVoice這個(gè)api沒(méi)在jsApiList數(shù)組內(nèi)引入
打開(kāi)wxapi.js下的jsApiList數(shù)組，引入下translateVoice就ok了

下面是識(shí)別后的截圖

下面學(xué)習(xí)下如果獲取當(dāng)前位置，利用wxjssdk的getLocation,openLocation
先打開(kāi)wxapi.js下的jsApiList數(shù)組，引入下getLocation和openLocation
先寫(xiě)一個(gè)按鈕，獲取當(dāng)前位置的經(jīng)緯度

 <van-button type="primary" block @click="getLocation">獲取當(dāng)前位置</van-button>
 <div v-if="latitude" style="text-align: center;">
   <p>經(jīng)緯度：{{latitude}}、{{longitude}}</p>
 </div>

methods

/** 獲取當(dāng)前位置 */
    getLocation() {
      wx.getLocation({
        type: 'gcj02', // 默認(rèn)為wgs84的 gps 坐標(biāo)，如果要返回直接給 openLocation 用的火星坐標(biāo)，可傳入'gcj02'
        success:  (res)=> {
          this.latitude = res.latitude // 緯度，浮點(diǎn)數(shù)，范圍為90 ~ -90
          this.longitude = res.longitude // 經(jīng)度，浮點(diǎn)數(shù)，范圍為180 ~ -180。
        }
      })
    },

在寫(xiě)一個(gè)按鈕，打開(kāi)微信內(nèi)置地圖，展示我們的當(dāng)前位置

<van-button type="primary" block @click="openLocation">打開(kāi)地圖</van-button>

methods

/** 打開(kāi)地圖 */
    openLocation() {
      wx.openLocation({
        latitude: this.latitude, // 緯度，浮點(diǎn)數(shù)，范圍為90 ~ -90
        longitude: this.longitude, // 經(jīng)度，浮點(diǎn)數(shù)，范圍為180 ~ -180。
        name: '瀘州職業(yè)技術(shù)學(xué)院', // 位置名
        address: '四川省瀘州市龍馬潭區(qū)長(zhǎng)橋路2號(hào)', // 地址詳情說(shuō)明
        scale: 15, // 地圖縮放級(jí)別,整型值,范圍從1~28。默認(rèn)為最大
        infoUrl: 'https://baidu.com' // 在查看位置界面底部顯示的超鏈接,可點(diǎn)擊跳轉(zhuǎn)
      })
    }

打開(kāi)后，就是你的當(dāng)前位置了

下面在學(xué)習(xí)一個(gè) 微信掃一掃的功能
先打開(kāi)wxapi.js下的jsApiList數(shù)組，引入下scanQRCode
寫(xiě)一個(gè)按鈕，來(lái)調(diào)用scanQRCode

 <van-button type="primary" block @click="scanQRCode">打開(kāi)掃一掃</van-button>
    <div v-if="result" style="text-align: center">
      <p>掃碼結(jié)果</p>
      <p>{{result}}</p>
    </div>

methods

/** 打開(kāi)掃一掃 */
    scanQRCode() {
      wx.scanQRCode({
        needResult: 1, // 默認(rèn)為0，掃描結(jié)果由微信處理，1則直接返回掃描結(jié)果，
        scanType: ['qrCode', 'barCode'], // 可以指定掃二維碼還是一維碼，默認(rèn)二者都有
        success:  (res)=> {
          this.result = res.resultStr // 當(dāng)needResult 為 1 時(shí)，掃碼返回的結(jié)果
        }
      })
    }

下面來(lái)學(xué)習(xí)分享到好友的功能
先來(lái)看這個(gè)文章
https://developers.weixin.qq.com/community/minihome/doc/000ce8ba654df8488d2dfd9ad56c00?jumpto=comment&commentid=000602876580309c882d7aa54564
新建一個(gè)按鈕，分享一些信息給好友

 <van-button type="primary" block @click="updateAppMessageShareData">分享給好友</van-button>

methods

/** 分享給好友 */
    //需在用戶可能點(diǎn)擊分享按鈕前就先調(diào)用 wx.ready
    updateAppMessageShareData() {
      wx.ready(function () {
        //需在用戶可能點(diǎn)擊分享按鈕前就先調(diào)用
        wx.updateAppMessageShareData({
          title: 'hello,大家好，我是渣渣輝', // 分享標(biāo)題
          desc: '渣渣輝天下無(wú)敵', // 分享描述
          link: 'https://baidu.com', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào) 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', // 分享圖標(biāo)
          success: function () {
            // 設(shè)置成功
          }
        })
      })
    }

分享出去的是一條鏈接，這是因?yàn)槲⑿诺目樱鞍l(fā)過(guò)通告，怪自己沒(méi)看到
這是一個(gè)巨坑啊。
說(shuō)人話：如果出現(xiàn)這個(gè)問(wèn)題，先把鏈接收藏了，然后從收藏中打開(kāi)鏈接再分享，這樣就成功了。
或者：從公眾號(hào)中打開(kāi)這個(gè)鏈接，也是正常的。微信在惡心人呢

下面來(lái)開(kāi)發(fā) 分享到朋友圈的功能
新建一個(gè)按鈕，調(diào)用分享到朋友圈的jssdk

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

methods

 /** 分享到朋友圈 */
    updateTimelineShareData() {
      wx.ready(function () {
        //需在用戶可能點(diǎn)擊分享按鈕前就先調(diào)用
        wx.updateTimelineShareData({
          title: '瀘州職業(yè)學(xué)院天下聞名', // 分享標(biāo)題
          link: 'http://192.168.31.70:9020/#/test', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào) JS 安全域名一致
          imgUrl: 'http://www.lzy.edu.cn/images/lzy_logo.png', // 分享圖標(biāo)
          success: function () {
            // 設(shè)置成功
          }
        })
      })
    }

基礎(chǔ)董jssdk我們學(xué)了好幾個(gè)，我相信大家都會(huì)用了，感興趣的可以自己都試試，下面的鏈接是官方demo，可以微信打開(kāi)試試 http://api.weixin.jiaoyubao.cn/
真實(shí)項(xiàng)目開(kāi)發(fā)中，分享功能不會(huì)這么麻煩的，實(shí)際上我們一開(kāi)始寫(xiě)wxapi.js的時(shí)候就已經(jīng)封裝好了分享的功能，下面就開(kāi)始直接調(diào)用就行
繼續(xù)
將【分享好友和分享朋友圈功能】應(yīng)用到實(shí)際項(xiàng)目中
比如我們?cè)贏pp.vue頁(yè)面來(lái)設(shè)置一個(gè)公共分享模版
打開(kāi)App.vue
在methods里新建兩個(gè)方法
一個(gè)是分享給好友的方法

wxShareAppMessage() {
      // 微信自定義分享給朋友
      let option = {
        title: '我正在使用自己開(kāi)發(fā)的社交軟件，快來(lái)一起暢聊吧', // 分享標(biāo)題, 請(qǐng)自行替換
        desc: `即時(shí)聊天，記錄退出即焚，保護(hù)您的隱私！還等什么，點(diǎn)進(jìn)來(lái)吧～`, // 分享描述, 請(qǐng)自行替換
        link: 'https://jianshu.com', // 分享鏈接，根據(jù)自身項(xiàng)目決定是否需要split
        imgUrl: 'http://erkong.ybc365.com/8ba79202008101804251112.png', // 分享圖標(biāo), 請(qǐng)自行替換，需要絕對(duì)路徑
        success: () => {
          //alert('分享成功')
        },
        error: () => {
          // alert('已取消分享')
        }
      }
      // 將配置注入通用方法
      wxapi.ShareAppMessage(option)
    }

一個(gè)是分享到朋友圈的方法

wxShareTimeline() {
      // 微信自定義分享到朋友圈
      let option = {
        title: '我正在使用自己開(kāi)發(fā)的社交軟件，快來(lái)一起暢聊吧', // 分享標(biāo)題, 請(qǐng)自行替換
        link: 'https://jianshu.com', // 分享鏈接，根據(jù)自身項(xiàng)目決定是否需要split
        imgUrl: 'http://erkong.ybc365.com/8ba79202008101804251112.png', // 分享圖標(biāo), 請(qǐng)自行替換，需要絕對(duì)路徑
        success: () => {
          //alert('分享成功')
        },
        error: () => {
          // alert('已取消分享')
        }
      }
      // 將配置注入通用方法
      wxapi.ShareTimeline(option)
    },

然后這兩個(gè)方法要在wxRegCallback方法里調(diào)用一下

 wxRegCallback() {
      //在這里寫(xiě)一些邏輯
      this.wxShareTimeline()
      this.wxShareAppMessage()
    },

這樣就實(shí)現(xiàn)了，自動(dòng)調(diào)用wx.ready

其實(shí)這樣寫(xiě)，還是略麻煩一點(diǎn)，如果每個(gè)頁(yè)面都有分享需求，那么該如何優(yōu)化下呢？
試試呢？？
用到vuex
現(xiàn)在vuex中的actions里新建兩個(gè)公共方法

wxShareTimeline({commit},data){
    // 微信自定義分享給朋友
    let option = {
      title: data.title, // 分享標(biāo)題, 請(qǐng)自行替換
      link: data.link, // 分享鏈接，根據(jù)自身項(xiàng)目決定是否需要split
      imgUrl: data.imgUrl, // 分享圖標(biāo), 請(qǐng)自行替換，需要絕對(duì)路徑
      success: () => {
        //alert('分享成功')
      },
      error: () => {
        // alert('已取消分享')
      }
    }
    // 將配置注入通用方法
    wxapi.ShareTimeline(option)
  },
  wxShareAppMessage({commit},data) {
    // 微信自定義分享給朋友
    let option = {
      title: data.title, // 分享標(biāo)題, 請(qǐng)自行替換
      desc: data.desc, // 分享描述, 請(qǐng)自行替換
      link: data.link, // 分享鏈接，根據(jù)自身項(xiàng)目決定是否需要split
      imgUrl: data.imgUrl, // 分享圖標(biāo), 請(qǐng)自行替換，需要絕對(duì)路徑
      success: () => {
        //alert('分享成功')
      },
      error: () => {
        // alert('已取消分享')
      }
    }
    // 將配置注入通用方法
    wxapi.ShareAppMessage(option)
  },

記得在vuex文件頂部要先引入 wxapi

import wxapi from '@/utils/wxapi'

然后在你想要調(diào)用這倆方法的頁(yè)面直接調(diào)用

this.$store.dispatch('wxShareAppMessage', {
        title: `我正在和${this.$route.query.name}聊天，快來(lái)圍觀～`,
        desc: '測(cè)試描述',
        link: location.href,
        imgUrl: 'http://erkong.ybc365.com/8ba79202008101804251112.png'
      })
      this.$store.dispatch('wxShareTimeline', {
        title: `我正在和${this.$route.query.name}聊天，快來(lái)圍觀～`,
        link: location.href,
        imgUrl: 'http://erkong.ybc365.com/8ba79202008101804251112.png'
      })

但前提你要引入這幾個(gè)文件
第一個(gè)

import wxapi from '@/utils/wxapi'

第二要在methods新建一個(gè)方法

wxRegCallback(){
  // 在這里面調(diào)用vuex里的方法

}

第三步要調(diào)用wxapi里的wxRegister方法

  wxapi.wxRegister(this.wxRegCallback)

最后，wxRegCallback 方法里這樣寫(xiě)

wxRegCallback() {
      this.$store.dispatch('wxShareAppMessage', {
        title: `我正在和${this.$route.query.name}聊天，快來(lái)圍觀～`,
        desc: '測(cè)試描述',
        link: location.href,
        imgUrl: 'http://erkong.ybc365.com/8ba79202008101804251112.png'
      })
      this.$store.dispatch('wxShareTimeline', {
        title: `我正在和${this.$route.query.name}聊天，快來(lái)圍觀～`,
        link: location.href,
        imgUrl: 'http://erkong.ybc365.com/8ba79202008101804251112.png'
      })
    }

end!!!

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

基于vue2.x實(shí)現(xiàn)的即時(shí)通訊程序仿微信聊天10微信jssdk的調(diào)用以及微信分享開(kāi)發(fā)

基于vue2.x實(shí)現(xiàn)的即時(shí)通訊程序仿微信聊天10微信jssdk的調(diào)用以及微信分享開(kāi)發(fā)

繼續(xù)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

基于vue2.x實(shí)現(xiàn)的即時(shí)通訊程序仿微信聊天10微信jssdk的調(diào)用以及微信分享開(kāi)發(fā)

繼續(xù)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av