目录

谈谈你对uni-app的理解

uni中如何为不同的平台设置不同的代码

条件注释的作用和使用方法

        条件注释定义

        条件注释的语法

uniapp中封装接口请求相较于微信小程序有什么要注意的

uniapp中为什么会出现跨域问题,如何解决

谈谈你对uni-app的理解

详情请点击此处

uni中如何为不同的平台设置不同的代码

使用条件注释

        条件编译是用特殊的注释作为标记   
    
    
，在编译时根据这些特殊的注释


     


     


   ，将注释里面的代码编译到不同平台   
    
    
。

条件注释的作用和使用方法

uni-app 已将常用的组件   
    
    
、JS API 封装到框架中 




 




 

，开发者按照 uni-app 规范开发即可保证多平台兼容   

   

   

，大部分业务均可直接满足


     


     


   。

但每个平台有自己的一些特性

     

     

  ，因此会存在一些无法跨平台的情况 




 




 

。

大量写 if else
  




  




  
，会造成代码执行性能低下和管理混乱   

   

   

。 编译到不同的工程后二次修改  


  


  


，会让后续升级变的很麻烦

     

     

  。

在 C 语言中 
     
     
 ，通过 #ifdef


     


     


   、#ifndef 的方式

   




   




   ，为 windows 




 




 

、mac 等不同 os 编译不同的代码
  




  




  
。 uni-app 参考这个思路 



 



 



，为 uni-app 提供了条件编译手段            ，在一个工程里优雅的完成了平台个性化实现  


  


  


。

条件注释定义

条件编译是用特殊的注释作为标记


    




    




    ，在编译时根据这些特殊的注释













，将注释里面的代码编译到不同平台 
     
     
 。

条件注释的语法

写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头             ，以 #endif 结尾

   




   




   。

#ifdef：if defined 仅在某平台存在 #ifndef：if not defined 除了某平台均存在 %PLATFORM%：平台名称

uniapp中封装接口请求相较于微信小程序有什么要注意的

        如果uniapp要在web端进行适配,要注意请求跨域问题---需要配置代理

uniapp中为什么会出现跨域问题,如何解决

原因

 uniapp在web端进行适配时,会产生跨域问题

解决

   配置代理

封装统一的http请求

       针对于uni.request我们可以沿用之前我们在小程序中的封装思路


     



     



    ，封装http请求

封装的目的

封装代码 

const proxy = {     "/api":{              target:"http://59.111.104.104:8086",              pathRewrite:^/api     } } //http://59.111.104.104:8086/course /// 作用: 根据当前的url和代理得到完整url // 输入： 当前的url // 输出： 完整的url function getUrl(url){     for(let key in proxy){              if(url.startsWith(key)){                        // 匹配到了代理                        if(proxy[key].pathRewrite){                                 // 需要进行前缀重写                                 url = url.replace(new RegExp(proxy[key].pathRewrite),"")                        }                        url = proxy[key].target + url                        break;              }     }     ///返回处理后的url     return url; } function getHeader(header={}){     return {                        "Content-Type":"application/x-www-form-urlencoded",                        // #ifndef H5                        "Cookie":uni.getStorageSync("cookie"),                        // #endif                        ...header              } } function request(options){     return new Promise((reslove,reject)=>{              if(!options.header) options.header = {}              const header = getHeader(options.header);                           // 请求之前进行一些操作              // 加载代理              // #ifndef H5              options.url = getUrl(options.url)              // #endif              console.log(options.url)              uni.request({                        // 设置超时时间10s                        timeout:10000,                        ...options,                        header,                        success(res) {                                 // 响应之前进行一些操作                                 reslove(res)                        },                        fail(err) {                                 reject(err)                        }              })     }) } export function get(url,options){     return request({              url,              ...options,              method:"GET"     }) } export function post(url,data,options){     return request({              url,              data,              ...options,              method:"POST"     }) } //配置代理 //vue.config.js module.exports = {     devServer: {              proxy: {                        "/api": {                                 "target": "https://wk.myhope365.com",                                 "pathRewrite": {                                           "^/api": ""                                 }                        }              }     } }