[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** 其他常用特性会逐渐封装