接到需求 先调查
1.链接打开小程序
百度有1种方法思路是：前端写个h5页面，拿到链接里的参数 用该参数传给服务端 服务端调用微信urlscheme接口 生成打开小程序的短链接 返给前端 h5通过location.href去跳转此短链接即可
前端h5页面代码如下：
<!-- 打开小程序中转页 -->
<template>
<div>
正在打开小程序...
</div>
</template>
<script>
import { getQueryStringAll } from '../../assets/js/utils.js'
import { http } from '@/assets/js/http'
export default {
data() {
return {
};
},
created() {
// 获取url及参数
let fromType = getQueryStringAll('fromType');
let transportBulkLineId = getQueryStringAll('transportBulkLineId');
let _obj = {
fromType,
transportBulkLineId,
};
console.log('----url-_obj---',_obj);
// 判断必要参数是否全有 没有要提示错误
if (_obj.fromType && _obj.transportBulkLineId) {
this.handleReceive(_obj);
} else {
console.log('链接缺少必要参数');
}
},
mounted() {
},
methods: {
// 跳转到小程序
handleReceive(obj) {
http({
sid: "1049011",
data: {
transportBulkLineId: obj.transportBulkLineId,
fid: obj.fromType
},
encrypt: "0",
})
.then((res) => {
console.log(res);
// 去跳小程序
location.href = res.data.result.openlink;
})
.catch((err) => {
console.log(err);
});
},
},
};
</script>
经过上述方法测试 该方法只适用于 短信 除微信外的浏览器 如下官网介绍
image.png
而需求是：在微信聊天内打开小程序 所以需要支持微信浏览器，查资料发现上述方法自动废弃
于是又搜到方法2：使用微信外部标签wx-open-launch-weapp
标签介绍如下：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21
即写个h5页面 放入此标签 通过配置此标签的属性 包括path等 点击此标签时打开小程序指定的页面
查资料得 此标签只支持打开以下两种情形的小程序：
image.png
因为我的小程序是独立申请的 没有依赖公众号，因此，只能选择方法2 将h5页面静态网站托管在小程序云托管下面
方法和h5项目源码如下：
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/jump-miniprogram.html
将源码下载下来 查找需要替换的参数替换成自己小程序的参数即可
下一步就是将这个h5项目托管起来（是需要按流量收费的，一开始免费使用一个月 不怎么贵）
步骤：在微信开发者工具中点云开发--->更多--->静态网站-->上传文件夹 选择刚刚的h5项目 再在当前页面的网站配置里 填写索引文件路径h5-open-miniprogram/h5/jump-mp.html
以上完成链接分享打开小程序
具体在小程序中需要接收参数可以在h5页面标签配置的path中传递
我是在js中配好path值 通过标签属性赋值给的path
var fid = getQueryStringAll('fromType');
var transportBulkLineId = getQueryStringAll('transportBulkLineId');
var launchBtn = document.getElementById('launch-btn')
var path = '/pages/index/index.html?fromType=' + fid + '&transportBulkLineId=' + transportBulkLineId + '&isLinkUrlCome=1';
launchBtn.setAttribute('path', path)
小程序中接收参数：
if ((JSON.stringify(options) != '{}' && options.isLinkUrlCome)) {
let _param = {
transportLineId: options.transportBulkLineId || '',
fid: options.fromType || ''
}
this.setData({
param: _param
})
}
注意：以上方法只支持发布过后的小程序代码--即打开的小程序是发布版本后的小程序
补充方法 绑定公众号 链接打开小程序
其实并不一定是将小程序绑定在微信公众号下 而是已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序
也就是只要找一个认证过的公众号 在公众号的 功能设置 界面中点击“JS接口安全域名”后面对应的“设置”按钮。把h5页面的域名配置上去即可
vue写法
<template>
<div v-if="isWeixin&&is_version" class="wechat-web-container">
<p class="">点击以下按钮打开 “路歌好运宝”</p>
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxx"
path="pages/index/index?user=123&action=abc"
>
<script type="text/wxtag-template">
<div style="width: 200px; text-align: center; font-size: 17px; display: block; margin: 0 auto; padding: 8px 24px; border: none; border-radius: 4px; background-color: #07c160; color:#fff;">打开小程序</div>
</script>
</wx-open-launch-weapp>
</div>
<div v-else-if="isDesktop" class="wechat-web-container">
<p class="">请在手机打开网页链接</p>
</div>
<div v-else-if="!is_version" class="wechat-web-container">
<p class="">请使用7.0.12及以上版本的微信此链接</p>
</div>
</template>
<script>
export default {
data () {
return {
isWeixin: false,
isDesktop: false,
isMobile: false,
is_version: false
}
},
created () {
this.$shareJs.initWxJsSdk({
is_wx_share: '0',
is_wx_loc: '0'
}, true)
},
mounted () {
var ua = navigator.userAgent.toLowerCase()
var isWXWork = ua.match(/wxwork/i) == 'wxwork'
this.isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'
if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {
this.isMobile = true
} else {
this.isDesktop = true
}
if (this.isWeixin) {
let wxInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i) // 微信浏览器信息
this.is_version = this.isVersion(wxInfo[1], '7.0.12')
}
if (this.isWeixin) {
if (this.is_version) {
var btn = document.getElementById('launch-btn')
var fid = this.getQueryStringAll('fromType')
var transportBulkLineId = this.getQueryStringAll('transportBulkLineId')
var path = '/pages/index/index.html?fromType=' + fid + '&transportBulkLineId=' + transportBulkLineId + '&isLinkUrlCome=1'
console.log(path)
btn.setAttribute('path', path)
btn.addEventListener('launch', function (e) {
console.log('success')
})
btn.addEventListener('error', function (e) {
alert('小程序打开失败')
console.log('fail', e.detail)
})
}
}
},
methods: {
getQueryStringAll (name) {
const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
const urlObj = window.location
var r = urlObj.href.indexOf('#') > -1 ? urlObj.hash.split('?')[1].match(reg) : urlObj.search.substr(1).match(reg)
if (r != null) return unescape(r[2])
return null
},
isVersion (curV, reqV) {
var arr1 = curV.toString().split('.')
var arr2 = reqV.toString().split('.')
// 将两个版本号拆成数字
var minL = Math.min(arr1.length, arr2.length)
var pos = 0 // 当前比较位
var diff = 0 // 当前为位比较是否相等
var flag = false
// 逐个比较如果当前位相等则继续比较下一位
while (pos < minL) {
diff = parseInt(arr1[pos]) - parseInt(arr2[pos])
if (diff == 0) {
pos++
continue
} else if (diff > 0) {
flag = true
break
} else {
flag = false
break
}
}
return flag
}
}
}
</script>
<style scoped>
.wechat-web-container {
display: flex;
flex-direction: column;
align-items: center;
}
.wechat-web-container p {
position: absolute;
top: 40%;
}
.wechat-web-container wx-open-launch-weapp {
position: absolute;
bottom: 40%;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
}
</style>
注意：
1.需要在index.html中引用https//res.wx.qq.com/open/js/jweixin-1.6.0.js
1.6.0版本
2.写个wxjssdk的js 调用后端接口配置wx.config
/* 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'],
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 })
}
}
以上是微信sdk常用功能包括上传图片 获取地址 分享等一系列的配置都写上了
在main.js中 引用上述js 并调用
import ShareMethods from './assets/js/wxJssdk'
Vue.config.ignoredElements = ['wx-open-launch-weapp']
Vue.use(ShareMethods)
Vue.prototype.$shareJs = ShareMethods
ShareMethods.init() // 微信分享初始化
2.扫一扫打开小程序
小程序开发管理中提供了扫一扫打开小程序的开关 这里先去开启 并配置规则
方法如下：
小程序开放平台 开发管理--开发设置--- 扫普通链接二维码打开小程序
配个h5页面（中转页）路径 通过这个路径的码可以打开小程序（其实这个h5没什么功能作用 只是在小程序平台配置个与小程序页面的一个映射）
配置完成后即可打开小程序
在小程序中取二维码中路径的参数
onLoad(options) {
if (options && options.q) {
// 扫码进来的
let url= decodeURIComponent(options.q);
this.setData({
localUrl: url
})
this.isScanComeFun();
}
isScanComeFun() {
// start扫二维码进来的
try {
let url = this.data.localUrl;
console.log('当前页url', url);
var _obj = {
transportLineId: util.getQueryVariable('transportBulkLineId',url) || '',
fid: util.getQueryVariable('fromType',url) || ''
}
console.log('参数', _obj);
} catch (error) {
}
}
注意：配置体验版的小程序 扫一扫最多只支持配置5个url即参数不可变 变了就算一个url
线上直接配h5域名即可 参数可以变
