此封装适用于Uniapp项目编译为微信小程序和h5项目的情况;
1.判断是否在浏览器
2.判断是否在微信小程序
3.判断是否在微信浏览器
4.获取设备id
5.设置页面标题
6.toast提示
7.confirm确认框
8.显示操作菜单ActionSheet
9.预览图片
10.回到页面顶部
11.复制文字
12.微信小程序扫码
13.微信小程序打开设置页面
14.微信小程序获取网络状态
15.打电话
16.jsonp
17.loadScript加载js
18.获取页面路径中query参数
19.分享功能(微信h5中未测试,小程序真机未测试)
20.获取定位经纬度信息
21.指定百度地图获取定位信息(仅支持H5)
22.逆地址编码,传入经纬度获得地址信息
23.检查微信小程序更新,如有新版本,提示用户重新进入(未测试)
// 1.安装依赖
npm i weixin-js-sdk // 微信sdk,微信h5中需要使用
npm i @ats/h5share // 公司分享插件,h5分享中需要使用
// 2.uniapp项目中使用
import uniBridge from '@/utils/uni-bridge.js'
// vue2 main.js
Vue.prototype.$uni = uniBridge;
// vue3 main.js
app.config.globalProperties.$uni = uniBridge
// 项目中使用
this.$uni.isH5()
this.$uni.isMpWechat()
this.$uni.showAction([
'选项1',
'选项2',
'选项3'
])
...
isH5()
isMpWechat()
isWechatH5()
getDeviceId()
setTitle('我是标题')
/**
* 提示框
* @param {Object} str
* @param {Function} fn
* @param {number} duration 等待时长ms,默认2000
*/
toast('登录成功',()=>{ 跳转页面等 }, 3000)
/**
* 确认框,点确认才会往下走
* @param {String} title
*/
await confirm('确定退出?')
继续执行..
/**
* 显示操作菜单ActionSheet
* @param {Array} itemList 选项列表
* @return {i,text} 下标,文本
* 返回值i下标,返回值text文本内容;
*/
let {i, text } = await showAction(['关注', '取消关注'])
/**
* 预览图片
* @param {String} urls 图片地址数组
* @param {Number} current 图片下标
*/
previewImg([
'https://xxaa.png',
'https://xxbb.jpg'
], 0)
/**
* 回到页面顶部
* @param {Number} duration 默认300ms
* @param {Number} scrollTop 默认0
*/
await goToTop()
/**
* 复制内容
* @param {String} data
*/
await copy('我是复制的文本')
const res = await scanCode()
await openSetting()
const type = await getNetWorkStatus()
type = wifi | 2g | 3g | 4g | 5g | none(无网络)
call(13333333333)
await jsonp(url, query = {})
继续执行..
loadScript(url, callback)
/**
* 获取页面路径中query参数
* @param {String} key 获取query参数key的值,不传则获取参数对象
*/
路径:/pages/hello?name=amy&age=18
const { name, age } = getQueryParams()
/**
* @param {Object} shareOption
shareOption自定义分享配置信息{
url: '', // 路径,默认当前页面地址
title: '', // 标题
desc: '', // 描述
imgUrl: '', // 图片
dest: '', // 分享平台 all, wechat, pyq, qq, qzone, weibo
callback: () => {} // 微信小程序分享成功回调
* @param {Object} params 获取微信配置参数,服务端提供接口文档
* @param {function} requersFn 获取微信配置方法,服务端提供接口文档
*/
该分享方法微信小程序、h5通用,传参有差别;
1.普通h5使用
share({
url: window.location.href,
title: '分享标题',
desc: '分享描述',
imgUrl: 'https://xxxxabc.png',
dest: 'all'
})
2.微信h5使用(因条件原因,未测试验证)
share({
url: window.location.href,
title: '分享标题',
desc: '分享描述',
imgUrl: 'https://xxxxabc.png',
dest: 'all'
},
{
appId: 'xxx',
...
},
requersFn
)
3.微信小程序使用(必须由用户主动触发,点击分享按钮或者右上角分享)
<button open-type="share">点击分享</button>
onShareAppMessage() {
// 配置分享到朋友
return share({
url: '/pages/Hello/Hello',
title: '分享标题',
desc: '分享描述',
imgUrl: 'https://xxxxabc.png',
dest: 'all',
callback: () => {
分享成功回调,未测试
}
})
},
onShareTimeline() {
// 配置分享到朋友圈
return share({
url: '/pages/Hello/Hello',
title: '分享标题',
desc: '分享描述',
imgUrl: 'https://xxxxabc.png',
dest: 'all',
callback: () => {
分享成功回调,未测试
}
})
}
/**
* 获取定位信息,使用uni.getLocation封装,uni.getLocation中h5获取定位失败后会尝试使用百度定位;
* @param {String} key 地图的key
* @returns { latitude, longitude } 返回经纬度信息
*/
const { latitude, longitude } = await getLocation(ak)
/**
* @description 获取当前位置经纬度
* @abstract 注意:必须在https的网站下才能使用,vue项目可配置vue.config.js文件devServer里面加https: true实现本地启动https的地址进行测试
* @param params.type:GPS坐标(默认),传其他任意字符串则默认转换为百度坐标;
* @param params.key:对应地图密匙,type参数不为GPS才需要传key
* @param params.enableHighAccuracy:是否开启高精度定位(默认true)
* @param params.timeout:GPS定位失败超时时间
* @param params.maximumAge:最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置
*/
const { latitude, longitude } = await uLocation.getCurrentLngLat()
/**
* @description 逆地址编码,传入经纬度获得地址信息
* @param {Float} param.longitude 坐标经度
* @param {Float} param.latitude 坐标纬度
* @param {Array} param.keys 对应地图key密匙['百度地图秘钥', '腾讯地图秘钥']
*/
使用方法:
const res = await lngLatToAddress({
latitude:39.9783691,
longitude:116.3060157,
keys: [
'百度地图key',
'腾讯地图key'
]
})
res结果包含解析地址的全部信息;
如遇报错getLocation:fail the api need to be declared in the requiredPrivateInfos field in app.json/ext.json
需要在manifest.json中源码视图添加权限
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "wx0525eb28b9eda11f",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true,
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
"requiredPrivateInfos": ["getLocation", "chooseLocation"],
"uniStatistics" : {
"enable" : true
}
}
onShow() {
checkMpWxUpdate()
}