wechat_app.html,h5微信打开app

wx-open-launch-app

首先在main.js中引用jssdk

import ShareMethods from './assets/js/wxJssdk'

Vue.use(ShareMethods)

Vue.prototype.$shareJs = ShareMethods

ShareMethods.init() // 微信分享初始化

写要跳转的按钮

跳xxxtest app

export default {

data () {

return {

testParam: `xxxxxxxx`//客户端给的url

}

},

created () {

this.$shareJs.initWxJsSdk({

is_wx_share: '0',

is_wx_loc: '0'

}, true)

},

mounted () {

console.log('客户端传参', this.testParam)

var btn = document.getElementById('launch-btn');

btn.addEventListener('launch', function (e) {

console.log('success')

})

btn.addEventListener('error', function (e) {

console.log('fail', e.detail)

})

},

methods: {

}

}

备注：

这是我的wxjssdk.js

/* eslint-disable */

import Vue from 'vue'

import { getWxSignature } from '@/api/commonApi'

let JssdkObj = {

is_load_wxjssdk: false,

is_share_flag: false,

is_get_loc: false,

is_hide_wxmenu: false,

wx_share_param: {

title: '', //分享自定义标题，不传就按照

stime_title: '', //分享朋友圈标识，不传就使用title

desc: '', //分享自定义内容，限制30个字

img_url: '', //分享自定义图片

timestamp: '',

nonceStr: '',

share_uid: '-1', //分享人加密用户id

state: '', //分享模块标识

app_id: '',

share_url: '',

self_params: '', //自定义参数值

successFunc() {},

cancleFunc() {},

failFunc() {},

commFunc() {}

},

wx_auth_json: null,

wx_jsapi_list: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'getLocalImgData', 'getNetworkType', 'openLocation', 'getLocation', 'closeWindow', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem', 'scanQRCode', 'chooseWXPay', 'hideOptionMenu'],

wx_hide_menu_list: ['menuItem:share:appMessage', 'menuItem:share:timeline', 'menuItem:share:qq', 'menuItem:share:weiboApp', 'menuItem:favorite', 'menuItem:share:facebook', 'menuItem:share:QZone', 'menuItem:copyUrl', 'menuItem:openWithQQBrowser', 'menuItem:openWithSafari', 'menuItem:share:email'

],

wx_show_menu_list: ['menuItem:share:appMessage', 'menuItem:share:timeline'],

wx_open_tag_list: ['wx-open-launch-weapp','wx-open-launch-app'],

isWeixin () {

return navigator.userAgent.toLowerCase().indexOf('micromessenger') > -1

},

isDevEnv () {

return process.env.VUE_APP_ENV === 'development'

}

}

export default {

init () {

if (JssdkObj.isWeixin()) {

if (JssdkObj.is_load_wxjssdk) {

return false

}

var myScript = document.createElement('script')

myScript.src = '//res2.wx.qq.com/open/js/jweixin-1.6.0.js'

document.body.appendChild(myScript)

Vue.nextTick(() => {

JssdkObj.is_load_wxjssdk = true

})

}

},

initHideSharePage () {

let _this = this

JssdkObj.is_hide_wxmenu = false

if (JssdkObj.isWeixin()) {

console.log('====initHideSharePage===window.WeixinJSBridge=' + typeof window.WeixinJSBridge)

if (typeof window.WeixinJSBridge !== 'undefined') {

// window.WeixinJSBridge同一页面只能调用一次，所以使用wx接口处理下

window.WeixinJSBridge.call('hideOptionMenu')

if (typeof wx !== 'undefined') {

wx.hideMenuItems({

menuList: ['menuItem:share:appMessage', 'menuItem:share:appMessage', 'menuItem:share:timeline'] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3

})

}

JssdkObj.is_hide_wxmenu = true

return false

}

setTimeout(() => {

_this.initHideSharePage()

}, 200)

}

},

// 展示微信分享效果

initSharePage (json) {

try {

this.setShareParam(json)

this.getWxAuthIfs()

} catch (error) {

console.log('初始化分享内容失败,原因：', error)

this.initHideSharePage()

}

},

initWxJsSdk (json, isNeedWxAuth) {

/**

* json={

* is_wx_share:0/1 // 1打开,0关闭 字符串类型，不然默认为0

* is_wx_loc:0/1 // 1打开,0关闭 字符串类型，不然默认为0

* wxLocCallback(){} // 当is_wx_loc定位标识打开，微信定位成功会回调该函数

* }

*/

let _isNeedWxAuth = isNeedWxAuth || true

JssdkObj.is_share_flag = false

try {

if (json.is_wx_share === '1') {

this.setShareParam(json)

}

if (json.is_wx_loc === '1') {

JssdkObj.is_get_loc = true

JssdkObj.wxLocCallback = typeof json.wxLocCallback === 'function' ? json.wxLocCallback : () => {}

}

if (_isNeedWxAuth) {

this.getWxAuthIfs()

}

} catch (error) {

console.log('=====initSharePage', JOSN.stringify(error))

}

},

setShareParam (json) {

/**

* json={

* state,分享模块标识

* share_uid,分享卡加用户ID

* title,分享标题，不传则以服务器配置

* stime_title,朋友圈分享标题内容，为空则直接使用title

* desc,分享内容,不传则以服务器配置

* img_url,分享图片,不传则以服务器配置

* self_params, 自定义参数值(不能带参数名称)

* success_func({share_type:'friend/time_line'}){},分享成功回调函数,friend-好友分享标识,time_line-朋友圈分享标识

* cancle_func({share_type:'friend/time_line'}){},取消分享动作回调函数,friend-好友分享标识,time_line-朋友圈分享标识

* fail_func({share_type:'friend/time_line'}){},分享失败回调函数,friend-好友分享标识,time_line-朋友圈分享标识

* comm_func({share_type:'friend/time_line'}){}分享公共(成功/失败都会调用)回调函数,friend-好友分享标识,time_line-朋友圈分享标识

* }

*/

JssdkObj.is_share_flag = true

JssdkObj.wx_share_param.state = json.state || ''

JssdkObj.wx_share_param.title = json.title || '缺少分享内容'

JssdkObj.wx_share_param.stime_title = json.stime_title || JssdkObj.wx_share_param.title

JssdkObj.wx_share_param.desc = json.desc || '缺少分享内容'

JssdkObj.wx_share_param.img_url = json.img_url || ''

JssdkObj.wx_share_param.self_params = json.self_params || ''

JssdkObj.wx_share_param.share_uid = json.share_uid || '-1'

JssdkObj.wx_share_param.successFunc = typeof json.success_func === 'function' ? json.success_func : () => {}

JssdkObj.wx_share_param.cancleFunc = typeof json.cancle_func === 'function' ? json.cancle_func : () => {}

JssdkObj.wx_share_param.failfunc = typeof json.fail_func === 'function' ? json.fail_func : () => {}

JssdkObj.wx_share_param.commFunc = typeof json.comm_func === 'function' ? json.comm_func : () => {}

},

getWxAuthIfs () {

let _this = this

let link = window.location.href

link = window.location.href.split('#')[0]

Vue.prototype.$toast.loading({

message: '加载中'

})

getWxSignature({

url: encodeURIComponent(link)

}).then(response => {

console.log('微信签名getWxSignature', response)

if (response.data.reCode === '0') {

let resJson = response.data.result

setTimeout(function() {

_this.regWxConfigIfs(resJson)

}, 200)

} else if (JssdkObj.wx_auth_json !== null) {

_this.regWxConfigIfs(JssdkObj.wx_auth_json)

}

}).catch(function(error) {

console.log('=getWxAuthIfs=catch===调用失败,' + JSON.stringify(error))

if (JssdkObj.wx_auth_json !== null) {

_this.regWxConfigIfs(JssdkObj.wx_auth_json)

}

})

},

regWxConfigIfs (json) {

var _this = this

JssdkObj.wx_auth_json = json

if (typeof window.WeixinJSBridge === 'undefined' || typeof wx === 'undefined') {

setTimeout(function() {

_this.regWxConfigIfs(json)

}, 200)

return false

}

wx.config({

debug: JssdkObj.isDevEnv(), // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

appId: json.appId, // 必填，公众号的唯一标识

timestamp: Number(json.timeStamp), // 必填，生成签名的时间戳

nonceStr: json.nonceStr, // 必填，生成签名的随机串

signature: json.signature, // 必填，签名

jsApiList: JssdkObj.wx_jsapi_list, // 必填，需要使用的JS接口列表

openTagList: JssdkObj.wx_open_tag_list

})

this.onWxReady()

},

onWxReady () {

var _this = this

try {

wx.ready(function(res) {

// config信息验证后会执行ready方法，

// 所有接口调用都必须在config接口获得结果之后，

// config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，

// 则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，

// 则可以直接调用，不需要放在ready函数中。

console.log('wx.ready', res)

_this.checkAllJsApi()

_this.openShareConfig()

if (JssdkObj.is_get_loc) {

_this.getWxLocation()

}

})

// 验证失败

wx.error(function(res) { // 如果失败,就隐藏右上角的所有菜单

console.log('wx.error=', res)

_this.initHideSharePage()

})

} catch (err) {

_this.initHideSharePage()

}

},

onShowMenuItems () {

var _this = this

console.log('执行了onShowMenuItems')

if (typeof window.WeixinJSBridge === 'undefined' || JssdkObj.wx_share_param.app_id.length === 0

) {

setTimeout(function() {

_this.onShowMenuItems()

}, 200)

} else {

console.log(

'====onShowMenuItems:' + JSON.stringify(JssdkObj.wx_show_menu_list)

)

wx.showMenuItems({

menuList: JssdkObj.wx_show_menu_list // 要显示的菜单项，所有menu项见附录3

})

}

},

checkAllJsApi () {

try {

wx.checkJsApi({

jsApiList: JssdkObj.wx_jsapi_list, // 需要检测的JS接口列表，所有JS接口列表见附录2,

success: function(res) {

// 以键值对的形式返回，可用的api值true，不可用为false

// 如：{'checkResult':{'chooseImage':true},'errMsg':'checkJsApi:ok'}

let resStr = JSON.stringify(res)

if (resStr.indexOf(':false') > -1) {

console.log('checkJsApi:' + resStr)

}

}

})

} catch (err) {

console.log('checkJsApi调用失败,原因:' + JSON.stringify(err))

}

},

updateAppMessageShareData () {

try {

//自定义“分享给朋友”的分享内容,需在用户可能点击分享按钮前就先调用

wx.updateAppMessageShareData({

title: JssdkObj.wx_share_param.title, // 分享标题

desc: JssdkObj.wx_share_param.desc, // 分享描述

link: JssdkObj.wx_share_param.share_url.replace('{WX_SHARE_TYPE}', '1'), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

imgUrl: JssdkObj.wx_share_param.img_url, // 分享图标

success: function(res) {

console.log('分享到好友成功:' + JSON.stringify(res))

JssdkObj.wx_share_param.successFunc({ share_type: 'friend' })

JssdkObj.wx_share_param.commFunc({ share_type: 'friend' })

},

trigger: function() {

console.log('用户点击分享到好友')

},

fail: function(res) {

console.log('分享到好友失败' + JSON.stringify(res))

}

})

} catch (err) {

console.log(

'updateAppMessageShareData调用失败,原因:' + JSON.stringify(err)

)

}

},

updateTimelineShareData () {

try {

//自定义“分享到朋友圈”按钮的分享内容,需在用户可能点击分享按钮前就先调用

wx.updateTimelineShareData({

title: JssdkObj.wx_share_param.stime_title, // 分享标题

link: JssdkObj.wx_share_param.share_url.replace('{WX_SHARE_TYPE}', '0'), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

imgUrl: JssdkObj.wx_share_param.img_url, // 分享图标

success: function(res) {

console.log('分享到朋友圈成功:' + JSON.stringify(res))

JssdkObj.wx_share_param.successFunc({ share_type: 'time_line' })

JssdkObj.wx_share_param.commFunc({ share_type: 'time_line' })

},

trigger: function() {

console.log('用户点击分享到朋友圈')

},

fail: function(res) {

console.log('分享到朋友圈失败' + JSON.stringify(res))

}

})

} catch (err) {

console.log(

'updateTimelineShareData调用失败,原因:' + JSON.stringify(err)

)

}

},

onMenuShareAppMessage () {

wx.onMenuShareAppMessage({

title: JssdkObj.wx_share_param.title,

desc: JssdkObj.wx_share_param.desc,

link: JssdkObj.wx_share_param.share_url.replace('{WX_SHARE_TYPE}', '1'),

imgUrl: JssdkObj.wx_share_param.img_url,

trigger: function(res) {

// console.log('用户点击分享到好友')

},

success: function(res) {

console.log('old分享好友成功:' + JSON.stringify(res))

JssdkObj.wx_share_param.successFunc({ share_type: 'friend' })

JssdkObj.wx_share_param.commFunc({ share_type: 'friend' })

},

cancel: function(res) {

// console.log('分享到好友操作已被取消')

JssdkObj.wx_share_param.cancelFunc({ share_type: 'friend' })

},

fail: function(res) {

// console.log('分享到好友失败')

// console.log(JSON.stringify(res))

JssdkObj.wx_share_param.failFunc({ share_type: 'friend' })

JssdkObj.wx_share_param.commFunc({ share_type: 'friend' })

}

})

},

onMenuShareTimeline () {

wx.onMenuShareTimeline({

title: JssdkObj.wx_share_param.stime_title,

link: JssdkObj.wx_share_param.share_url.replace('{WX_SHARE_TYPE}', '0'),

imgUrl: JssdkObj.wx_share_param.img_url,

trigger: function(res) {

console.log('用户点击分享到朋友圈', res)

},

success: function (res) {

console.log('old分享到朋友圈成功:' + JSON.stringify(res))

JssdkObj.wx_share_param.successFunc({ share_type: 'time_line' })

JssdkObj.wx_share_param.commFunc({ share_type: 'time_line' })

},

cancel: function (res) {

console.log('分享到朋友圈操作已被取消', res)

JssdkObj.wx_share_param.cancelFunc({ share_type: 'time_line' })

},

fail: function(res) {

console.log('分享到朋友圈失败', res)

JssdkObj.wx_share_param.failFunc({ share_type: 'time_line' })

JssdkObj.wx_share_param.commFunc({ share_type: 'time_line' })

}

})

},

getWxLocation () {

try {

wx.getLocation({

type: 'gcj02',

success: function(res) {

var latitude = res.latitude

var longitude = res.longitude

if (typeof JssdkObj.wxLocCallback === 'function') {

JssdkObj.wxLocCallback({

result: { reCode: '200', reInfo: '微信定位成功' },

latitude,

longitude

})

}

JssdkObj.wxLocCallback = null

},

fail: function(res) {

console.log('获取经纬度失败，原因:' + JSON.stringify(res))

if (typeof JssdkObj.wxLocCallback === 'function') {

JssdkObj.wxLocCallback({

result: { reCode: '1', reInfo: '获取经纬度失败' }

})

}

JssdkObj.wxLocCallback = null

}

})

} catch (err) {

console.log('getWxLocation调用失败,原因:' + JSON.stringify(err))

}

},

closeShareConfig () {

// 隐藏菜单

if (typeof wx !== 'undefined') {

wx.hideAllNonBaseMenuItem()

}

},

openShareConfig (json) {

if (!JssdkObj.is_share_flag) {

console.log('//分享开关未打开')

return false

}

if (!JssdkObj.is_hide_wxmenu) {

let _this = this

setTimeout(() => {

_this.openShareConfig(json)

}, 200)

return false

}

if (typeof json === 'object') {

this.setShareParam(json)

}

// 防止菜单没有隐藏

if (typeof wx !== 'undefined') {

wx.hideAllNonBaseMenuItem()

}

this.onShowMenuItems()

this.onMenuShareAppMessage()

this.onMenuShareTimeline()

},

openWxLocation (lat, lng, address) {

wx.openLocation({

latitude: parseFloat(lat), // 纬度，浮点数，范围为90 ~ -90

longitude: parseFloat(lng), // 经度，浮点数，范围为180 ~ -180。

name: '[商家位置]', // 位置名

address: address, // 地址详情说明

scale: 15 // 地图缩放级别,整形值,范围从1~28。默认为最大

// infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转

})

},

showImg (imgUrl, currUrl) {

wx.previewImage({

current: currUrl, // 当前显示图片的http链接

urls: imgUrl // 需要预览的图片http链接列表

})

},

chooseImage () {

this.getWxAuthIfs()

var _this = this

wx.chooseImage({

count: 6, // 默认9

sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有

sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有

success: function (res) {

var localIds = res.localIds // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片

console.log('微信图片返回', localIds)

_this.uploadImage(localIds[0])

},

fail: function (err) {

console.log(JSON.stringify(err))

}

})

},

uploadImage (id) {

wx.uploadImage({

localId: id, // 需要上传的图片的本地ID，由chooseImage接口获得

isShowProgressTips: 1, // 默认为1，显示进度提示

success: function (res) {

const serverId = res.serverId // 返回图片的服务器端ID

console.log('serverId', serverId)

}

})

},

showShareWxGuide (shareMsg) {

const _shareMsg = shareMsg || '点击右上角可转发分享哦~'

Vue.$toast({ message: _shareMsg, position: 'middle', duration: 3000 })

},

goAPP(){

this.getWxAuthIfs();

}

}