一、根据效果图动态设计rem?
Rem适配 如果设计图是750的话,就用苹果6的来进行开发,因为苹果6的宽度是375,正好是750的一半,如果根据设计稿1rem=100px的话,那么375的话就是1rem=50px。如果设计图是640的话,就用苹果5进行开发。
二、混合app
就是讲h5写好的移动端也页面,放到ios以及安卓的设备当中,在里面我们可以享受iOS和安卓给我们的所有支持,通过方法的调用,回调函数进行使用,给我们提供方法
三、js单线程
浏览器是多线程的,JS是单线程的(浏览器只分配一个线程来执行JS)
进程大线程小:一个进程中包含多个线程,例如在浏览器中打开一个HTML页面就占用了一个进程,加载页面的时候,浏览器分配一个线程去计算DOM树,分配其它的线程去加载对应的资源文件…再分配一个线程去自上而下执行JS
同步:在一个线程上(主栈/主任务队列)同一个时间只能做一件事情,当前事情完成才能进行下一个事情(先把一个任务进栈执行,执行完成,在把下一个任务进栈,上一个任务出栈…)
异步:在主栈中执行一个任务,但是发现这个任务是一个异步的操作,我们会把它移除主栈,放到等待任务队列中(此时浏览器会分配其它线程监听异步任务是否到达指定的执行时间),如果主栈执行完成,监听者会把到达时间的异步任务重新放到主栈中执行…
[宏任务:macro task]
- 定时器
- 事件绑定
- ajax
- 回调函数
- Node中fs可以进行异步的I/O操作
[微任务:micro task]
- Promise(async/await) => Promise并不是完全的同步,当在Excutor中执行resolve或者reject的时候,此时是异步操作,会先执行then/catch等,当主栈完成后,才会再去调用resolve/reject把存放的方法执行
- process.nextTick (node中实现的api,把当前任务放到主栈最后执行,当主栈执行完,先执行nextTick,再到等待队列中找)
- MutationObserver (创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。)
四、微信支付
1.微信外支付
微信外的话就是拿到一个url地址,然后我们跳转到这个地址,然后返回一个成功或者失败。我们根据返回的给用户提示就可以了。
2.微信内支付
信内支付比起微信外支付稍微复杂一点,但是也不难,(3步骤代码里面已经请求支付方式接口拿到了微信内支付所需要的参数)根据官方API
微信内置js对象 WeixinJSBridge,进行开发,至此微信浏览器内支付已经完成
//解决微信内置对象报错
weixinPay(data){
var vm= this;
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data));
document.attachEvent('onWeixinJSBridgeReady',vm.onBridgeReady(data));
}
}else{
vm.onBridgeReady();
}
},
//微信内置浏览器类,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
});
}
}
);
},
微信内部浏览器支付也可以封装一下,在全局都可以直接调用:
//微信浏览器支付
function wxpay(params,callback){
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', onBridgeReady(params,callback), false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', onBridgeReady(params,callback));
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(params,callback));
}
}else{
onBridgeReady(params,callback);
}
}
function onBridgeReady(params,callback){
var that = this
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId":params.appId,
"timeStamp":params.timeStamp,
"nonceStr":params.nonceStr,
"package":params.package,
"signType":params.signType,
"paySign":params.paySign
},
function(res){
callback(res)
}
);
}
组件中调用微信支付:
this.commonUtils.wxpay(res.data.data,function(payResult){
if(payResult.err_msg == "get_brand_wcpay_request:ok" ){
//执行
}
})