UniApp学习-多端兼容 & 跨域

多端兼容配置

标签

<!-- 一般标签 -->
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-api和mockjs这两个工具，直接配置devServer的before选项即可

     // 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": "/"
                       }
                   }
               }
           }
       }
   }