uniBridge 使用文档

概述

此封装适用于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'
])
...

使用说明

1.判断是否在浏览器 返回true or false

isH5()

2.判断是否在微信小程序，返回true or false

isMpWechat()

3.判断是否在微信浏览器，返回true or false

isWechatH5()

4.获取设备id，返回设备id

getDeviceId()

5.设置页面标题

setTitle('我是标题')

6.toast提示

  /**
   * 提示框
   * @param {Object} str
   * @param {Function} fn
   * @param {number} duration 等待时长ms，默认2000
   */
toast('登录成功',()=>{ 跳转页面等 }, 3000)

7.confirm确认框，点确认才会往下走

  /**
   * 确认框，点确认才会往下走
   * @param {String} title
   */

await confirm('确定退出？')
继续执行..

8.showAction显示操作菜单

  /**
   * 显示操作菜单ActionSheet
   * @param {Array} itemList 选项列表
   * @return {i,text} 下标，文本
   * 返回值i下标，返回值text文本内容；
  */

let {i, text } = await showAction(['关注', '取消关注'])

9.previewImg预览图片

  /**
   * 预览图片
   * @param {String} urls 图片地址数组
   * @param {Number} current 图片下标
  */

previewImg([
   'https://xxaa.png',
   'https://xxbb.jpg'
   ], 0)

10.goToTop回到页面顶部

  /**
   * 回到页面顶部
   * @param {Number} duration 默认300ms
   * @param {Number} scrollTop 默认0
   */
await goToTop()

11.复制内容

  /**
   * 复制内容
   * @param {String} data 
   */
await copy('我是复制的文本')

12.scanCode微信小程序扫码（微信网页功能待集成）

const res = await scanCode()

13.openSetting微信小程序中打开设置

await openSetting()

14.getNetWorkStatus微信小程序获取网络状态

const type = await getNetWorkStatus()
type = wifi | 2g | 3g | 4g | 5g | none（无网络）

15.call打电话

call(13333333333)

16.jsonp解决GET类型请求跨域的jsonp插件

await jsonp(url, query = {})
继续执行..

17.loadScript动态加载js

loadScript(url, callback)

18.getQueryParams获取页面路径中query参数

   /**
   * 获取页面路径中query参数
   * @param {String} key 获取query参数key的值，不传则获取参数对象
   */
路径：/pages/hello?name=amy&age=18
const { name, age } = getQueryParams()

19.share分享（微信h5中未测试，小程序真机未测试）

  /**
   * @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: () => {
            分享成功回调，未测试
        }
  })
}

20.getLocation获取定位信息

/**
   * 获取定位信息，使用uni.getLocation封装，uni.getLocation中h5获取定位失败后会尝试使用百度定位；
   * @param {String} key 地图的key
   * @returns { latitude, longitude } 返回经纬度信息
   */
const { latitude, longitude } = await getLocation(ak)

21.uLocation.getCurrentLngLat指定百度地图获取定位信息（仅支持H5）

  /**
   * @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()

22.lngLatToAddress逆地址解析

  /**
   * @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
        }
    }

23.checkMpWxUpdate检查小程序更新，如有新版本，提示用户重新进入(未测试)

onShow() {
    checkMpWxUpdate()
}