APP开发指南

	1. 除了登录接口和注册接口，所有接口需要登录之后才能调用，需要使用到token
	2. 登录时密码需要加密，可以使用crypto-js这个库对密码加密，否则无法调用成功
	3. 开发的软件需要能自定义域名或者ip地址，默认使用https://cloud.nvisual.com/
	4. 需要严格按照UI原型及产品需求文档进行开发
	5. 如开发中需要使用到ht，需将使用到ht的部分用webView引入

//nvisual的登录接口token是有过期时间的，如在调用期间token过期了，需要调用refreshToken来重新获取token，将token重新加入请求头中


import { storeToRefs } from 'pinia'
import { baseUrl } from './apiConfig.js'  // baseUrl为https://cloud.nvisual.com/diagramApi/wapi/
import { useCommonStore } from '@/store/index.js'

let isRefreshing = false // 是否正在刷新的标记
let requests = [] // 重试队列，每一项将是一个待执行的函数形式

const request = (url, data, method = 'Get') => {
  return new Promise((resolve, reject) => {
    const token = uni.getStorageSync('token') && JSON.parse(uni.getStorageSync('token'))
    const refreshToken = uni.getStorageSync('refreshToken') && JSON.parse(uni.getStorageSync('refreshToken'))
    if (!token) {
      // 不存在token时，请自行处理（建议跳到登录界面）
      return
    }
    let requestUrl
    const apiAddress = uni.getStorageSync('apiAddress') ? uni.getStorageSync('apiAddress') + 'diagramApi/wapi/' : baseUrl
    const isFullPath = url.includes('http')
    if (isFullPath) {
      // 是否是完整地址
      requestUrl = url
    } else {
      requestUrl = `${apiAddress}${url}`
    }
    uni.request({
      url: requestUrl,
      method,
      data,
      header: {
        Authorization: `Bearer ${(token && token.userToken) || ''}`,
        'Refresh-Token': (refreshToken && refreshToken.refreshToken) || '',
      },
      success: (r) => {
        const message = (r?.data?.message?.split(':')) || ['200'];
        const tokenError = ['5019', '5001', '5020']
        const { code } = r.data
        let tokenRefresh = false // 是否token过期
        if (tokenError.includes(message[0].trim()) || r.statusCode === 207 || code === 5054) {
          // 代表token只是过期,只需要重新获取token就好了
          tokenRefresh = true
        } else {
          if (r.data.code === 'token 错误需要退出') {
              // 此时必须重新登录，请自行处理（建议跳到登录界面）
            return
          }
          tokenRefresh = false
        }
        // 有些接口没有标准返回结构, 所以这种情况没有code , 在没有code的情况下, 默认为成功
        if (url !== 'v1/refresh_token' && ((code && (code === 5002 || code === 5001)) || tokenRefresh)) {
          // 说明token过期了,获取新的token.
          resolve(
            response({
              url: requestUrl,
              method,
              data,
            })
          )
        } else {
          resolve(r.data)
        }
        if (r.statusCode === 404) {
          // 请求未找到，自行处理
        }
      },
      fail: (err) => {
        console.log('err', err);
        if (uni.getStorageSync('apiAddress')) {
          uni.hideLoading()
          // 请求出错，自行处理
        }
      }
    })
  })
}

const response = (response) => {
  // 接下来会在这里进行token过期的逻辑处理
  const config = response?.config || response
  // 判断一下状态
  if (!isRefreshing) {
    // 修改状态，进入更新token阶段
    isRefreshing = true
    // 获取当前的请求
    return refreshToken().then(async res => {
      /**
       *  5122,"找不到刷新令牌"
          5125,"用户从另一台计算机登录"
          5121,"无效的刷新令牌"
          5123,"刷新令牌过期"
       */
      if (res.code === 200) {
        // 刷新token成功，将最新的token更新到header中，同时保存在localStorage中
        uni.setStorageSync('token', `{"userToken":"${res.data.access_token}","expires":null,"path":"/"}`)
        uni.setStorageSync('refreshToken', `{"refreshToken":"${res.data.refresh_token}","expires":null,"path":"/"}`)
        uni.setStorageSync('power', res.data.authority)
        uni.setStorageSync('userName', res.data.user)
        uni.setStorageSync('userId', res.data.userId)
        uni.setStorageSync('organization', res.data.organization)
        // 已经刷新了token，将所有队列中的请求进行重试 reverse()
        requests.forEach(cb => cb())
        // 完成之后在关闭状态且清空request
        isRefreshing = false
        requests = []
        return request(config.url, config.data, config.method)
      } else {
          // 重新登录，自行处理（建议跳到登录界面）
      }
    }).catch(res => {
      console.error(res);
      uni.hideLoading()
    })
  } else {
    // 正在刷新token
    // 将函数放进队列，用一个函数形式来保存，等token刷新后直接执行
    return new Promise(resolve => {
      // 将resolve放进队列，用一个函数形式来保存，等token刷新后直接执行
      requests.push(() => {
        resolve(request(config.url, config.data, config.method))
      })
    })
  }
}

const refreshToken = () => {
  return request('v1/refresh_token', null, 'Post')
}

// 使用示例：
	// 1. get请求：request('v1/xxxxx')
	// 2. post请求：request('v1/xxxxx', {xxx:xxx,xxx:xxx}, 'Post')
	// 3. 其他请求方式参上

export default request

const PI = 3.14159265358979324;

function transformGCJ2WGS(gcjLon, gcjLat) {
  const d = delta(gcjLon, gcjLat)
  return [gcjLon - d.lon, gcjLat - d.lat]
}
function delta(lon, lat) {
  const a = 6378245.0 //  a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
  const ee = 0.00669342162296594323 //  ee: 椭球的偏心率。
  let dLat = transformLat(lon - 105.0, lat - 35.0)
  let dLon = transformLon(lon - 105.0, lat - 35.0)
  const radLat = lat / 180.0 * PI
  let magic = Math.sin(radLat)
  magic = 1 - ee * magic * magic
  const sqrtMagic = Math.sqrt(magic)
  dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * PI)
  dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * PI)
  return {
    lat: dLat,
    lon: dLon
  }
}

function transformLat(x, y) {
  let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
  ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0
  ret += (20.0 * Math.sin(y * PI) + 40.0 * Math.sin(y / 3.0 * PI)) * 2.0 / 3.0
  ret += (160.0 * Math.sin(y / 12.0 * PI) + 320 * Math.sin(y * PI / 30.0)) * 2.0 / 3.0
  return ret
}
function transformLon(x, y) {
  let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
  ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0
  ret += (20.0 * Math.sin(x * PI) + 40.0 * Math.sin(x / 3.0 * PI)) * 2.0 / 3.0
  ret += (150.0 * Math.sin(x / 12.0 * PI) + 300.0 * Math.sin(x / 30.0 * PI)) * 2.0 / 3.0
  return ret
}

export default transformGCJ2WGS

import { ref, getCurrentInstance } from 'vue'
setup() {
  const	wv = ref(null) // 定义(app)webview对象节点
  const params = ref(null) // 需要传入app端的信息
  
  const { proxy } = getCurrentInstance()
  
  onLoad((option) => {
    if (option.id) {
      const paramsData = {}
      paramsData.id = option.id
      paramsData.token = uni.getStorageSync('token')
      paramsData.refreshToken = uni.getStorageSync('refreshToken')
      paramsData.apiAddress = uni.getStorageSync('apiAddress')
      params.value = paramsData
    }
  })
  
  onReady(() => {
    // #ifdef APP-PLUS
    var currentWebview = proxy.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
    setTimeout(function() {
      wv.value = currentWebview.children()[0]
      if (params.value.id) {
        wv.value.evalJS(`requestData(${JSON.stringify(params.value)})`) // 像app端传输数据
      }
    }, 1000);
  })
}

// index.html页面：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>nvisual</title>
  <script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="app"></div>
  <script>
    let appSendData = null

    // 用来监听数据发送成功在执行挂载
    class ListenerSend {
      getListenerFn(listenerFn) {
        this.listenerFn = listenerFn
      }
      action() {
        this.listenerFn()
      }
    }

    const listener = new ListenerSend()

    document.addEventListener('UniAppJSBridgeReady', function () {
      uni.getEnv(function (res) {
        console.log('当前环境：' + JSON.stringify(res));
      });
    });

    // HTML 接受APP发送过来的消息(APP端)
    function requestData(data) {
      appSendData = data
      // 执行vue的挂载
      listener.action()
    }
  </script>
  <script type="module" src="/src/main.js"></script>
</body>

</html>

import { createApp } from 'vue'
import App from './App.vue'

import router from "./router"
const pinia = createPinia()

const mountApp = () => {
  createApp(App).use(router).use(pinia).mount('#app')
}

// 将挂载函数存入
listener.getListenerFn(mountApp)

// HTML 接受APP发送过来的消息(APP端)
    function requestData(data) {
      if (data.type === 'init') {
        appSendData = data
        listener.action()
      } else if (data.type === 'event') {
        window.globalDetailStore.getSendEventMessage(data)
      }
    }

<script>
import { useDetailStore } from '@/store/index.js'
export default {
  setup() {
    const detailStore = useDetailStore()
    window.globalDetailStore = detailStore
  }
}
</script>

import { defineStore } from 'pinia'

export default defineStore('detailStore', {
  state: () => {
    return {
      sendEventMessage: {}, // 接收传过来的数据
    }
  },
  actions: {
    getSendEventMessage(message) {
      this.sendEventMessage = message
    },
  },
})

watch(() => detailStore.sendEventMessage, (newValue) => {
  if (newValue) {
    if (newValue.data.type === 'onmarked') {
      // 监听到了扫码结果
      onmarked(newValue)
    } else if (newValue.data.type === 'endScan') {
      // 监听到了扫码结束
    } else if (newValue.data.type === 'renderDetail') {
      renderDetailRe(newValue.data.value)
      lastRenderId = newValue.data.value
    }
  }
})