search

wolichuang / dailyInterview

面试、工作中遇到的issue
0 stars 0 forks source link

小程序 #37

Open wolichuang opened 3 years ago

wolichuang commented 3 years ago

H5页面调起微信支付

前端在H5页面调起微信支付有两种办法，一是利用内置对象，二是通过引用微信的js sdk，从写法上来看用内置对象方法比较简单 一、设置支付目录 请确保实际支付时的请求目录与后台配置的目录一致，否则将无法成功唤起微信支付。 二、设置授权域名 开发公众号支付时，在统一下单接口中要求必传用户openid，而获取openid则需要您在公众平台设置获取openid的域名，只有被设置过的域名才是一个有效的获取openid的域名，否则将获取失败。

  1. 利用内置对象 
    
function onBridgeReady(){
WeixinJSBridge.invoke(

'getBrandWCPayRequest', { "appId":"", //公众号名称，由商户传入

"timeStamp":"1395712654", //时间戳，自1970年以来的秒数

"nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串

"package":"prepay_id=u802345jgfjsdfgsdg888",

"signType":"MD5", //微信签名方式：

"paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名

},

function(res){ if(res.err_msg == "get_brand_wcpay_request:ok" ) {} // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回 ok，但并不保证它绝对可靠。});}

if (typeof WeixinJSBridge == "undefined"){ if( document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);

}else if (document.attachEvent){ document.attachEvent('WeixinJSBridgeReady', onBridgeReady);

document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);}

}else{onBridgeReady();}


2. 微信JS-SDK

通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。
  1. 步骤一：绑定域名 【必需】先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。登录后可在“开发者中心”查看对应的接口权限。
  2. 步骤二：引入JS文件【必需】在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js
  3. 步骤三：通过config接口注入权限验证配置 【必需】 wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

appId: '', // 必填，公众号的唯一标识

timestamp: , // 必填，生成签名的时间戳

nonceStr: '', // 必填，生成签名的随机串

signature: '',// 必填，签名，见附录1

jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

});

  1. 步骤四：通过ready接口处理成功验证
  2. 步骤五：通过error接口处理失败验证
  3. 步骤六：判断当前客户端版本是否支持指定JS接口

wx.checkJsApi({ jsApiList: ['chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,

success: function(res) { // 以键值对的形式返回，可用的api值true，不可用为false

// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}

}

});

###  navigateTo:fail page "pages/navigate/navigate" is not found

app.json 中没有注册路径


### 轮播图点击事件
// swiper 弹出链接 handleLinkSwiper(event) { let url = JSON.stringify(event.target.dataset.url); url = encodeURIComponent(url); wx.navigateTo({ url: `/pages/service/web-view/index?url=${url}` }); } ```