JS单线程，微任务和宏任务，根据设计图设计rem比例，混合app的使用，微信支付和支付宝支付

一、为什么JavaScript是单线程？

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。

JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

二、宏任务和微任务

ES6 规范中，microtask 称为 jobs，macrotask 称为 task
宏任务是由宿主发起的，而微任务由JavaScript自身发起。

在ES3以及以前的版本中，JavaScript本身没有发起异步请求的能力，也就没有微任务的存在。在ES5之后，JavaScript引入了Promise，这样，不需要浏览器，JavaScript引擎自身也能够发起异步任务了。

所以，总结一下，两者区别为：
宏任务（macrotask）
由宿主（Node、浏览器）发起的，是后执行的

1. script (可以理解为外层同步代码)
2. setTimeout/setInterval
3. UI rendering/UI事件
4. postMessage，MessageChannel
5. setImmediate，I/O（Node.js）

微任务（microtask）
由JS引擎发起的，是先执行的

1. Promise
2. MutaionObserver
3. Object.observe（已废弃；Proxy 对象替代）
4. process.nextTick（Node.js）
   

三、根据设计图设计rem比例

rem是css单位，rem是根据根html元素的字体大小来计算单位的。
浏览器默认的 html font-size=16px， 这样如果我们需要设置字体的大小为12px, 通过计算可知 12 / 16 = 0.75；因此只需要设置 font-size= 0.75rem。

1. 现在页面上设置用户禁止缩放 引入meta头部标签

<meta name="viewport"   content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

2. 创建rem.js 文件

window.onload = function(){
   function rem(){
	   document.documentElement.style.fontSize=document.documentElement.clientWidth / 7.5 + 'px';
	// 此处的7.5是指效果图宽为 750px
	}
rem()
window.onresize = rem()  
}

3. 最后给body设置一下字体大小

body{
	font-size:0.16rem;
}

四、混合app的使用

移动端App

目前市场上主流的APP分为三种：原生APP、Web APP（即HTML5）和混合APP三种，相对应的定制开发就是原生开发、H5开发和混合开发。

混合开发

混合开发就是原生+WebApp(即HTML5)协作开发。
混合开发是一种取长补短的开发模式，原生代码部分利用Web View插件或者其它框架为H5提供容器，程序主要的业务实现、界面展示都是利用与H5相关的Web技术进行实现的。比如京东、淘宝、今日头条等APP都是利用混合开发模式而成的。
就是当web开发时遇到比较复杂的效果时，让原生进行开发，然后web通过某种方法进行调用，从而大到小要实现的效果。

优点：

1. 开发效率高，节约时间。同一套代码Android和IOS基本上都可使用；
2. 更新和部署比较方便，每次升级版本只需要在服务器端升级即可，不再需要上传到App Store进行审核；
3. 代码维护方便、版本更新快，节省产品成本；
4. 比web版实现功能多；
5. 可离线运行。

缺点：

1. 功能/界面无法自定：所有内容都是固定的，不能换界面或增加功能；
2. 加载缓慢/网络要求高：混合APP数据需要全部从服务器调取，每个页面都需要重新下载，因此打开速度慢，网络占用高，缓冲 时间长，容易让用户反感；
3. 安全性比较低：代码都是以前的老代码，不能很好地兼容新手机系统，且安全性较低，网络发展这么快，病毒这么多，如果不实时更新，定期检查，容易产生漏洞，造成直接经济损失；
4. 既懂原生开发又懂H5开发的高端人才难找。
   以上就是原生开发、H5开发和混合开发各自的优缺点。相比之下，由于现代人的个性化需求越来越明显，所以原生APP开发也越来越多，定制化的服务更能满足消费者的需求。若您也想要定制一款别开生面的APP，就来找我们吧！

微信支付和支付宝支付

微信支付
支付分为微信内支付和微信外支付
先进行判断 是在微信内还是微信外

//判断是否微信
        is_weixn(){
          var ua = window.navigator.userAgent.toLowerCase();
          if (ua.match(/MicroMessenger/i) == 'micromessenger'){
            return true;
          } else {
            return false;
          }
        },

微信内支付
微信内置js对象 WeixinJSBridge，进行开发，至此微信浏览器内支付已经完成

 //微信内置浏览器类，weChatParameter对象中的参数是3.步骤代码中从后端获取的数据
        onBridgeReady(){
          var  vm = this;
          var timestamp=Math.round(vm.weChatParameter.timeStamp).toString();
          WeixinJSBridge.invoke(
            'getBrandWCPayRequest',{
              debug:true,
              "appId":vm.weChatParameter.appId,     //公众号名称，由商户传入
              "timeStamp":timestamp, //时间戳，自1970年以来的秒数
              "nonceStr":vm.weChatParameter.nonceStr, //随机串
              "package":vm.weChatParameter.package,
              "signType":vm.weChatParameter.signType, //微信签名方式：
              "paySign":vm.weChatParameter.paySign, //微信签名
              jsApiList: [
                'chooseWXPay'
              ]
            },
            function(res){
              // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
              if(res.err_msg == "get_brand_wcpay_request:ok" ){
                Toast({
                  message: '支付成功',
                  position: 'middle',
                  duration: 3000
                });
                vm.number=null
                vm.$router.go(-1)
                //window.location.href = vm.BASE_URL + 'index.html#/depositResult'
              }else{
                Toast({
                  message: '支付失败',
                  position: 'middle',
                  duration: 3000
                });
              }
            }
          );
        },

微信外支付
官方文档

if(this.wechatpayType == 'wxpay_php'){
           // console.log("微信外支付")
            let data={
              amount:this.number,
            }
            this.$http.outsideWeChatPay(data).then( res => {
              if(res.data.code === 200){
                let url=res.data.data
                window.location.replace(url)   //这里是后端返回的URL直接进行跳转即可完成微信外支付
              }else{
                Toast({
                  message: res.data.msg,
                  position: 'middle',
                  duration: 1000
                });
              }
            });
          }

在支付完后跳回原来的页面 接收支付结果并进行刷新

document.addEventListener("visibilitychange", function() {
    //需要的操作
});