1.移动端适配UI像素概念必须了解的css中的px是什么？它是视口像素，不是物理像素，不是逻辑像素，也不是渲染像素。ptlogicalpixel/point（像素）（devicepoint/devicepixel/point），为了调和距离不同造成的差异，将所有设备根据距离和视角缩放到等视距后得到的尺寸，为一个抽象的概念，这个单位是ios开发的px，Android开发的dp。对于pc，包括win（8+）linux，mac，各自系统或相应软件（如insidewebview）提供的图像界面处理引擎处理和缩放。比如iphone6的pt像素是375*667，但我们常称其为分辨率px。简单理解，一组三色LED代表一个物理像素，当然这取决于屏幕的物理特性和LED的处理方法。强调这是物理的，因为这是一个纯粹的硬件指标。例如，如果我把屏幕切成两半，物理像素就只有一半。所以我们一般所说的分辨率/像素分辨率就是物理像素ppi（pixelperinch）。Pixelsperinch是指屏幕每英寸的物理像素数。更高的ppi意味着更好的屏幕清晰度。所谓视网膜屏，其实是指在观看距离内超过人类识别能力的屏幕。例如，对于桌面设备，它大于192ppi。移动设备大于326ppi。假设一块ppi160、2英寸x3英寸的屏幕，物理像素应该是320x480。同理，ppi320，同样尺寸的屏幕，物理像素为640x960。视口像素的本质是DIP（DeviceIndependentPixels），中文意思是设备无关像素，是与上述所有像素没有绝对逻辑关系的单位。其实是浏览器内部对逻辑像素进行再处理的结果。简单理解，就是调整逻辑像素的缩放比例，实现一个适配设备的中间层。dprdevicepixelratio设备像素比，即物理像素与逻辑像素的比值。在web中，浏览器为我们提供了window.devicePixelRatio来帮助我们获取dpr。在css中，可以使用媒体查询min-device-pixel-ratio来区分dpr：@media(-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){}.在ReactNative中，我们也可以使用PixelRatio.get()来获取DPR。逻辑像素开发的基本开发流程是在head中设置width=device-width的viewport。其实就是让视口的大小等于逻辑像素的大小。在css中使用px，在合适的场景使用flex布局，或者配合vw进行自适应跨设备类型（pc<->手机<->平板）时使用mediaquery。如果跨设备类型之间的交互差异太大，可以考虑单独的项目开发。关于px的问题不同设备的物理像素是不一样的。我如何实现不同物理像素的布局，如果设计师给你一张图片，如何在css中转换成我想要的px。首先，你要明白设计师给你设计图的意图。一般国内设计师给出手机版的设计图，一般是750px。注意这里的px不是我们的px（逻辑像素），而是实际的物理像素，因为设计师是基于iphone6或者同等设备设计的，所以你要知道iphone6的逻辑像素其实是375，而dpr是2，那么就要将设计稿除以2，转化为逻辑像素。我们称这种设计图为双图。同理，如果size是375+375+375，那么我们要除以3，这就是所谓的三元组映射。如果设计团队使用InkKnife或BlueLake，您可以在两者中设置您的查看大小以获得我们需要的逻辑像素。如果设计师不用BlueLake等工具，给你的不是375的倍数怎么办？最简单的方法是将设计者给定的图纸的物理宽度w除以一个数字x。如果得到的商在360-414之间，那么你的换算公式就是【你在设计图上测得的物理像素数除以x】，那么dpr就是x，也就是x乘以图像。在web端编写CSS时，我们使用最多的单位是px，即CSS像素。当页面缩放比例为100%时，一个CSS像素等于一个设备无关像素。但是CSS像素很容易改变。当用户在浏览器上放大时，CSS像素会被放大，一个CSS像素会跨越更多的物理像素。页面缩放因子=CSS像素/设备无关像素。手机滚动问题！看一篇国外文章2.export和exportdefault阮一峰模块加载实现ES6模块和CommonJS模块的区别CommonJS模块输出一个值的副本，而ES6模块输出一个值的引用。CommonJS模块在运行时加载，而ES6模块是编译时输出接口。CommonJS加载的是一个对象（即module.exports属性），只有在脚本运行完毕后才会生成。ES6模块不是对象，它的对外接口只是一个静态定义，会在代码的静态分析阶段生成。CommonJS模块的require()是同步加载模块，ES6模块的import命令是异步加载的，有独立的模块依赖解析阶段。CommonJS模块是Node.js特定的，与ES6模块不兼容。在语法上，两者最明显的区别是CommonJS模块使用require()和module.exports，而ES6模块使用import和export。export导出指定名称的变量（变量也可以是函数或类）。导入命令接受一对花括号，它指定要从其他模块导入的变量名。花括号内的变量名必须与导入模块的导出外部接口名称相同。exportdefault指定模块的默认输出。使用导入命令时，用户需要知道要加载的变量或函数的名称，否则无法加载。但是，用户肯定希望快速上手，可能不愿意阅读文档来了解模块的属性和方法。为了给用户提供方便，让他们不用看文档就可以加载模块，exportdefault命令用于指定模块的默认输出。3、Nginx反向代理解决方案推荐Nginx作为后端服务器代理。优点：nginx反向代理实现了跨域，这是最简单的跨域方式。只需要修改nginx的配置即可解决跨域问题，支持所有浏览器，支持session，只要保证ajax请求APIServer和nginx设置一致即可，不会影响服务器性能。具有公网的Nginx服务器可以充当真实服务器的代理，可以在内网与其进行通信。让我们的服务器不直接暴露在外界，增加抗风险能力。我们只需要配置nginx，在一台服务器上配置多个前缀，就可以将http/https请求转发到多台真实服务器。原理类似于Node中间件代理（两个跨域），同源策略是浏览器需要遵循的标准，如果服务端请求服务器，则不需要遵循同源策略。简单实现（前端项目axios设置为baseURL:'/api'，服务端修改/etc/nginx/sites-available/default如下，然后重启nginx），然后访问你的实际ip地址：80/破折号路径：服务器{listen80default_server;听[::]:80默认服务器；#root/home/marhoo_ubuntu2/www;#如果您使用的是PHP索引，请将index.php添加到列表中index.htmlindex.htmindex.nginx-debian.html;本地主机；location/dash{别名/home/marhoo_ubuntu2/web;#配置别名到静态页面源码目录}location/api/{rewrite^/api/(.*)$/$1break;#rewritefunctionalltothebackend在请求中加上api前缀，方便识别。访问时去掉这个前缀。proxy_passhttp://192.168.31.104:7001;#将真实请求代理到真实服务器地址，带有/api/xxx的ajaxurl的请求将访问http://192.168.31.104:7001/xxxx}location/{#第一次尝试将请求作为文件服务,然后#作为目录,然后退回到显示404.try_files$uri$uri/=404;}}CORS方案服务器设置头：Access-Control-Allow-Origin优点：开发阶段后台可以在线测试接口，允许所有源跨域，前端开发可以实时调用API。保持会话的方案。确保凭据：true，并允许所有Origin访问，更改为origin：ctx=>ctx.get('origin')。前端项目的ajax请求保证跨域请求时带上cookies：withCredentials:true。4.Preload和prefetchplugins：preload-webpack-plugin脚本块会预加载并使用资源提示（如preloading）代替预加载，尤其是在移动端，需要考虑用户流量消耗的问题。Chrome中的预加载、预加载和预加载优先级Chrome中的预加载、预取和优先级四种缓存的故事5.box-sizingbox-sizing：主要用于计算一个元素的宽高之和，具体计算方法会根据box-sizing的属性值来决定。有两个属性值：content-box和border-box。默认是内容框。content-box：W3C的标准盒模型，设置元素的height/width属性是指content部分的高和宽。border-box：IE传统盒模型，设置元素的height/width属性是指border+padding+content部分的高/宽6.微信支付的每个证书都有公钥和私钥，私钥是自己生成签名的时候用的，公钥是给对方验证用的。比如调用统一下单接口，使用商户api证书的私钥生成签名，然后用你api证书的公钥验证你生成的签名是否正确。签名校验回调接口同理。微信用微信平台的私钥生成签名，然后你用微信平台的公钥验证签名的正确性，目的是防止篡改。简而言之，这是典型的非对称加密：证书验证私钥生成签名，公钥验证签名是否正确。注：前后端交互http协议header中的token也是采用非对称加解密，但是和signature是不同的概念，因为RSA签名和RSA加密是两个概念，如图以下。一、科普微信支付系统概念：①微信支付商户号（直连商户号）MCHID：位置：【微信支付中心商户平台】-【账户中心】-【商户信息】-【账户基本信息】-【微信支付商户ID】功能：与appid配对，收到的资金将进入MCHID。②微信支付关联商户账号AppID：位置：微信支付中心商户平台】-【产品中心】-【AppID账号管理】-【查看关联AppID信息】功能：请求下单接口时需要注意APPID的应用属性，例如公众号场景下的H5，需要使用应用属性为公众号的APPID。③商户API证书：包含商户商户ID、公司名称、公钥信息的证书。用于验证商户身份，证书包含商户编号、证书序列号、证书有效期等信息。作用：技术开发者在调用安全级别较高的微信支付接口（如：退款、企业红包、企业支付）时，会使用商户API证书。签发证书的CA类型分为两类商户API证书：微信支付签发的API证书（政府正在逐步废止）——证书文件和私钥文件可直接从商户平台下载。权威CA颁发的API证书——商户可以自行生成证书请求字符串，也可以使用微信支付提供的证书工具。向商户平台提交证书请求字符串后，才能获取证书文件。如果您自行生成证书请求字符串，请妥善保管私钥文件。如果证书请求字符串是微信支付证书工具生成的，私钥只能通过证书工具导出。④微信平台证书包含微信支付平台标识和公钥信息。商户可以使用平台证书中的公钥进行签名验证。接口：https://api.mch.weixin.qq.com...调用“获取平台证书接口接口”获取。平台证书会定期更换，商户应定期通过API下载新证书。平台证书更新引导位置：响应中的密文字段存在平台证书的加密公钥（需要APIv3对称解密，即消息公钥的敏感内容已经加密），保存，即可最好生成一个pem文件。功能一：跟进验证响应签名（在HTTP头Wechatpay-Signature中）和任意一个微信支付接口返回的验证签名串，保证返回的信息没有被篡改。具体教程功能2：开发者使用微信支付平台证书中的公钥对上传的敏感参数信息进行加密。⑤商户API私钥：制作商户API证书时，会生成商户私钥，保存在本地证书文件夹下的apiclient_key.pem文件中。功能一：开发者必须使用商户API私钥生成签名头。功能二：开发者使用商户私钥解密下行敏感信息密文。⑥APIkey（可暂时使用，已逐渐废弃，已被微信支付平台公钥替代）：商户调用微信支付API时，必须按照规定的规则对请求数据进行签名。服务器收到请求后，会进行签名验证，确定商户身份，防止他人恶意篡改请求数据。在签名计算规则中，使用的密钥是API密钥。⑦APIv3密钥位置：【微信支付中心商户平台】-【账户中心】-【API安全】-【APIv3密钥】应用：商户需要在微信支付系统启动前的位置设置APIv3密钥。密钥只有在用户端对称解密微信平台证书公钥密文（微信端APIv3加密）时才有用。科普：AES-GCM是经过NIST标准认证的加密算法，是一种能够同时保证数据机密性、完整性和真实性的加密模式。它最广泛的用途是在TLS中。APIv3是NIST标准密钥。2、支付类型：JSAPI支付应用场景：微信浏览器H5网页调用微信JSSDK执行JS支付。统一下单：同微信小程序支付，下单JSAPI，获取prepay_id发起支付：调用支付参数，按规则签名（appID为公众号ID），网页调用WeixinJSBridgeSDK发起支付,JSAPI调用支付。注意：为了微信端回复信息的准确性，需要调用平台证书获取解密公钥完成验证签名。当然，商家端的主动通信需要带上各种标准的Authorizationheader签名信息，以便微信端验证签名。小程序支付应用场景：微信小程序，使用微信支付提供的SDK调用小程序支付。统一下单：JSAPI下单，获取prepay_id发起支付：调用的支付参数按照规则进行签名（appID为小程序ID），前端通过wx.requestPayment()具体API调用支付.注意：为了微信端回复信息的准确性，需要调用平台证书获取解密公钥完成验证签名。当然商户端的主动通信需要携带各种标准的Authorizationheader签名信息
