[TOC] # 微信JSSDK集成 `v.js`已經集成微信的所有功能,所以不需要額外引入官方的庫`wexin.js` ## 注入權限驗證配置 所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用（同一個url僅需調用一次，對于變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題會在Android6.2中修復）。 注入配置和簡單,現在我們已經jsapi分為以下八個大的類型 1. 'share',所有的分享接口[分享到朋友圈,分享給朋友,分享到QQ,分享到騰訊微博,分享到QQ空間] 2. 'record', 音頻-錄音接口[開始錄音,停止錄音監聽錄音自動停止] 3. 'voice', 音頻-聲音處理接口[播放語音,暫停播放,停止播放,監聽語音播放完畢,上傳語音,下載語音,識別音頻并返回識別結果] 4. 'image', 圖像接口[ 拍照或從手機相冊中選圖,預覽圖片,上傳圖片,下載圖片] 5. 'location', 地理位置接口[使用微信內置地圖查看位置,獲取地理位置] 6. 'menu', 菜單操作接口[見官方api] 7. 'card', 卡卷接口[見官方api] 8. 'other' 其他類型的接口[獲取網絡類型,關閉窗口,掃碼,打開商品,微信支付] **屬性說明** * `name` 固定為`wx:config`,聲明配置 * `api` 可選,默認為`share` 要使用的接口類型,以逗號分隔,可以使用簡寫API(上面8個)或者官方合法的api * `wechat` 可選,默認為`duogu` 要使用的jssdk簽名賬號(一般在上傳圖片超限可能使用) * `debug` 可選,默認為`false` 開啟debug在移動端會彈出jssdk的配置信息 ### 通過Meta自動進行配置 ```html <!--簡單配置,如果只需要分享功能,這樣寫就可以了--> <meta name="wx:config"> <!--使用的其中幾類api--> <meta name="wx:config" api="image,share,closeWindow" wechat="duogu" debug="true"> <!--如果要使用所有功能,可以使用通配符*--> <meta name="wx:config" api="*"> ``` ### 通過js調用啟用 ```javascript // 配置jssdk,配置參見上面的屬性說明 v.config({name:'xxx',api:'share',wechat:'duogu',debug:false}) // 配置成功后的回調,可以多次調用 v.config.ready(function(){ alert('配置成功了') }) v.config.ready(function(){ alert('配置成功了2') }) // config 的屬性 v.config.api // 當前使用的api v.config.debug // 當前jssdk的debugMode v.config.wechat // 當前簽名賬號 ``` ## 分享功能 **分享功能有完整的繼承鏈,默認設置如下:** * title:分享標題,先讀取`keywords`,如果`keywords`為空則為頁面 * desc:分享描述,讀取`description`日生`description`為空則分享描述為空 * link:分享鏈接,默認為當前鏈接,如果當前頁面有錨點`#id`,則會以`anchor=id`傳遞錨點 * imgurl:分享圖片,默認為當前項目目錄的`share.jpg` * type: 分享類型,music、video或link，不填默認為link 系統會優先運用上面的配置設置分享 ### 通過Meta自動配置分享功能 ```html <!--這個會設置所有的分享平臺--> <meta name="wx:share" title="分享標題" desc="xxx" link="url"> <!--針對每個平臺單獨設置,共五中'app','timeline','qq', 'weibo','qzone'--> <meta name="wx:qq" title="分享到QQ的標題" desc="xxx" link="url"> <meta name="wx:timeline" title="分享到朋友圈標題" desc="xxx" link="url"> <meta name="wx:app" title="分享給好友的標題" desc="xxx" link="url"> <meta name="wx:weibo" title="分享到騰訊微博標題" desc="xxx" link="url"> <meta name="wx:qzone" title="分享到qq空間標題" desc="xxx" link="url"> ``` ### 通過js設置或者修改 #### 修改每個平臺的分享內容 ```javascript // 參數見上面,如 config = {title:'修改默認標題'} // 這個會設置所有的分享平臺 v.share(config) // 針對每個平臺單獨設置,共五中'app','timeline','qq', 'weibo','qzone' v.share.qq(config) v.share.qq('title','為qq單獨設置分享標題') v.share.timeline(config) v.share.app(config) v.share.weibo(config) v.share.qzone(config) ``` #### 分享的事件監聽 ```javascript // 分享成功的事件也可以分別監聽,cb = function(){} 回調函數 wechat.share.success(cb) wechat.share.fail(cb) wechat.share.complete(cb) wechat.share.cancel(cb) wechat.share.trigger(cb) // 每個平臺單獨監聽 wechat.share.qq.success(function(){alert('分享到qq成功')}) wechat.share.timeline.cancel(function(){alert('取消分享到朋友圈')}) ... ``` #### 分享內容獲取 ```javascript wechat.share.get('*') // 獲取全部分享 wechat.share.get('qq')// 獲取分享到qq wechat.share.qq.get() // 等同于上面獲取到qq的內容 ``` ## 圖片上傳處理 需要明確圖片上傳流程 1. 點擊按鈕觸發上傳事件 2. 進入圖庫選擇指定數量的圖片 3. 前端得到選擇的圖片展示縮略圖或進行二次處理local_id 4. 上傳圖片到微信服務器得到圖片的唯一標示media_id 5. 通過唯一標示通知服務器從微信服務器下載圖片永久存儲.并得到相對鏈接 6. 保存media_id列表到服務端 簡單的使用 ```javascript v.$('.upload').on('click',function(){ // 選擇5張圖片,返回local_ids v.image.choose(5).then(function(local_ids){ // 把預覽元素加上src,這里只展示第一張 v.$('.preview').attr('src',local_ids[0]) // 上傳這些圖片到微信服務器,得到media_ids v.image.upload(local_ids).then(function(media_ids){ // 保存media_ids到服務器 v.image.save(media_ids).then(function(resp){ //resp的結果是media_ids對應存儲路徑 resp = { 'media_ids1':'/xx/xx.jpg', 'media_ids2':'/xx/xy.jpg' } }) }) }) }) ``` ### API 1.`image.choose`,參數count = 1,compressed = true,sourceType = ['album', 'camera'] 2.`image.upload`,參數keys,showtips = true 3.`image.save`,參數keys,app=UPLOAD_APP 4.`image.download`,參數serverIds,showtips = true ## 音頻處理 ### 使用錄音接口 例: ```javascript // 開始 v.record.start() // 結束 v.record.stop() // 監聽錄音結束事件 v.record.success(function(local_id){ alert('你的聲音local_id='+local_id) }) v.record.error(function(res){ alert('錄音出現了問題'+res) }) ``` ### 使用音頻處理接口 ```javascript // 參數是需要操作的聲音local_id,可以有錄音接口獲得或者download var voice = v.voice('local_id') // 播放 voice.play() // 暫停播放 voice.pause() // 停止播放 voice.stop() // 播放完畢事件監聽 voice.end(function(){ alert('播放完了') }) // 上傳當前音頻到微信服務器換取media_id voice.upload().then(function(media_id){ console.log(media_id) // 保存音頻信息到服務器 voice.save(media_id) }) ``` ## OAUTH處理 系統會默認從url參數中獲取`oauth=[授權類型參數]&wechat=[授權使用微信賬號]` 示例: ```javascript v.oauth().then(function(user){ console.log('你的昵稱是:',user.nickname) }) // 使用duogu賬號的base授權方式,如果沒有授權跳轉到index.html v.oauth('index.html','base','duogu').then(function(user){ console.log('你的openid是:',user.openid) }) v.oauth.then(function(user){ }) ``` ## 其他已經封裝的API 1. `v.getLocation(type = 'wgs84').then(result => result)` 2. `v.openLocation(config)` 3. `v.getNetworkType().then(result => result)` 4. `v.scanQRCode(needResult = true,scanType = ["qrCode","barCode"]).then(result => result)` 5. `v.openProductSpecificView(productId,viewType = 0)` **tips** 其他常用特性會逐漸封裝