UniApp学习-多端兼容 & 跨域
阅读原文时间:2023年07月08日阅读:2

多端兼容配置

标签

<!-- 一般标签 -->
body  ———— page
div,ul, li, table,tr,td ———— view
span,b,i,font ———— text
a ———— navigator
img ———— image

js对象

APP和小程序无 document、xmlhttp、cookie、window、location、navigator、localstorage、websql、indexdb、webgl

对于基于js对象的第三方库,JQuery也不支持

vue语法

v-html:小程序不支持

小程序语法

<!-- 不遵循vue语法 -->
<view id="item-{{id}}"></view>

处理跨域

  1. egg-cors

    // 安装egg-cors包
    npm i egg-cors --save
    
    // 在plugin.js中设置开启cors
    exports.cors = {
      enable: true,
      package: 'egg-cors',
    };
    
    // 在config.default.js中配置
    config.security = {
      domainWhiteList: [ '前端网页托管的域名' ],
    };
  2. 配置webpack-dev-server代理

    // vue.config.js
    module.exports = {
      devServer: {
        proxy: {
          '/api': {
            target: 'https://api-remote.xxxx.com',
            pathRewrite: {
              '^/api': '/'
            }
          }
        },
      }
    }
    • mock

      文档: https://github.com/nuysoft/Mock/wiki

      借助mocker-apimockjs这两个工具,直接配置devServerbefore选项即可

      // vue.config.js
      const webpackApiMocker = require('mocker-api')
      
      module.exports = {
        devServer: {
          before (app) {
            webpackApiMocker(app, path.resolve('./mock/index.js'))
          }
        }
      }
      
      // mock/index.js
      const Mock = require('mockjs')
      
      const Random = Mock.Random
      const mock = Mock.mock
      
      const proxy = {
        'GET /api/user/list': mock({
          'array|3': [
            {
              id: 1,
              username: 'kenny',
              sex: 'male'
            }
          ]
        }),
        'POST /api/login/account': (req, res) => {
          return res.json({
            status: 'ok',
            data: {
              id: Random.id(),
              userName: Random.cname(),
              city: Random.city()
            }
          })
        }
      }
      
      module.exports = proxy
    • public-path

      // 1. 将`publicPath`这项配置拿出来单独放在一个配置文件中,比如`project-config.js`
      const projectName = 'xxx' // 当前工程名,此处自由发挥即可
      const isDev = isDev() // 是否为本地开发环境,此处自由发挥即可
      const CDN_HOST = process.env.CDN_HOST   // build时指定的CDN域名
      const APP_ENV = process.env.APP_ENV // build时指定的自定义环境
      
      module.exports = {
        publicPath: isDev
          ? '/'
          : `//${CDN_HOST}/static/${projectName}/${APP_ENV}/`,
      }
      
      // 2. 其次,我们fork了一版官方的uni-app源码,并对@dcloudio/vue-cli-plugin-uni/index.js做了点改动
      // @dcloudio/vue-cli-plugin-uni/index.js#L30
      // 获取本地的project-config配置
      module.exports = (api, options) => {
          const projectConfig = require(api.resolve('project-config'))
      Object.assign(options, {
          outputDir: process.env.UNI_OUTPUT_TMP_DIR || process.env.UNI_OUTPUT_DIR,
          assetsDir
      }, vueConfig, {
          // 重新对publicPath进行覆盖
          publicPath: process.env.NODE_ENV === 'production' ? projectConfig.publicPath : '/'
      })
      }
  3. uniapp推荐方式

    // manifest.json
    {
        "h5": {
            "devServer": {
                "proxy": {
                    "/api": {
                        "target": "https://api-remote.xxxx.com",
                        "pathRewrite": {
                            "^/api": "/"
                        }
                    }
                }
            }
        }
    }