国产日韩性感在线,日本人妻在线观看不卡,亚洲情色国产久久精品

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

cnpm install weixin-js-sdk --save

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

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

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

// 獲取微信配置項 
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) {
        // 這邊的接口請換成你們自己的
        getConfigData({ href: location.href.split('#')[0] }).then(res => {
            wx.config({
                debug: false, // 開啟調(diào)試模式
                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回調(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, // 分享標題
            link: option.link, // 分享鏈接
            imgUrl: option.imgUrl, // 分享圖標
            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, // 分享標題
            desc: option.desc, // 分享描述
            link: option.link, // 分享鏈接
            imgUrl: option.imgUrl, // 分享圖標
            success() {
                // 用戶成功分享后執(zhí)行的回調(diào)函數(shù)
                option.success()
            },
            cancel() {
                // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
                option.error()
            }
        })
    }
}
export default wxApi;

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

import wxapi from '@/utils/wxapi'

寫一個methods方法供wxapi調(diào)用
methods

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

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

wxapi.wxRegister(this.wxRegCallback);

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

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

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

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

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

cnpm install nodemon --save
cnpm install nodemon

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

出現(xiàn)這個報錯，說明你沒有關注測試公眾號，掃碼關注下你的測試公眾號二維碼

關注后，在刷新開發(fā)者工具頁面

這樣就是和微信正常通信了
下面來新建個頁面來學習測試下，微信的jssdk功能
新建個test頁面
新建文件
配置路由
訪問test頁面
先把wxapi引入過來

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>

methods


<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>

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

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

methods

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

經(jīng)過測試會出現(xiàn)這種報錯，說明translateVoice這個api沒在jsApiList數(shù)組內(nèi)引入
打開wxapi.js下的jsApiList數(shù)組，引入下translateVoice就ok了

下面是識別后的截圖

下面學習下如果獲取當前位置，利用wxjssdk的getLocation,openLocation
先打開wxapi.js下的jsApiList數(shù)組，引入下getLocation和openLocation
先寫一個按鈕，獲取當前位置的經(jīng)緯度

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

methods

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

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

<van-button type="primary" block @click="openLocation">打開地圖</van-button>

methods

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

打開后，就是你的當前位置了

下面在學習一個微信掃一掃的功能
先打開wxapi.js下的jsApiList數(shù)組，引入下scanQRCode
寫一個按鈕，來調(diào)用scanQRCode

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

methods

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

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

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

methods

/** 分享給好友 */
    //需在用戶可能點擊分享按鈕前就先調(diào)用 wx.ready
    updateAppMessageShareData() {
      wx.ready(function () {
        //需在用戶可能點擊分享按鈕前就先調(diào)用
        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 () {
            // 設置成功
          }
        })
      })
    }

分享出去的是一條鏈接，這是因為微信的坑，之前發(fā)過通告，怪自己沒看到
這是一個巨坑啊。
說人話：如果出現(xiàn)這個問題，先把鏈接收藏了，然后從收藏中打開鏈接再分享，這樣就成功了。
或者：從公眾號中打開這個鏈接，也是正常的。微信在惡心人呢

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

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

methods

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

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

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

一個是分享到朋友圈的方法

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

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

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

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

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

wxShareTimeline({commit},data){
    // 微信自定義分享給朋友
    let option = {
      title: data.title, // 分享標題, 請自行替換
      link: data.link, // 分享鏈接，根據(jù)自身項目決定是否需要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, // 分享鏈接，根據(jù)自身項目決定是否需要split
      imgUrl: data.imgUrl, // 分享圖標, 請自行替換，需要絕對路徑
      success: () => {
        //alert('分享成功')
      },
      error: () => {
        // alert('已取消分享')
      }
    }
    // 將配置注入通用方法
    wxapi.ShareAppMessage(option)
  },

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

import wxapi from '@/utils/wxapi'

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

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'

第二要在methods新建一個方法

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

}

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

  wxapi.wxRegister(this.wxRegCallback)

最后，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'
      })
    }

end!!!

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

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

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

繼續(xù)

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

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

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

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

繼續(xù)

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

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

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