鍓嶈█寰俊鏀粯涓氬姟锛岄拡瀵瑰皬绋嬪簭銆佸井淇℃祻瑙堝櫒鍜岄潪寰俊娴忚鍣ㄤ笁绉嶅満鏅紝鎴戜滑鍙互浣跨敤瀹樻柟灏忕▼搴忕▼搴忔敮浠樸€丣SAPI鏀粯銆丠5鏀粯鏉ュ彂灞曘€傝繖鏄竴绡囧緢鏈夌敤鐨勬枃绔狅紝鎺ㄨ崘鏀惰棌銆俻s锛氭枃绔犵殑鐐硅禐鏁拌繙杩滃皯浜庢敹钘忔暟馃槶锛屽悇浣嶇湅鏂囩殑鏈嬪弸鏀惰棌鏃惰寰楃偣璧炲摝锛佸噯澶囧伐浣滃紑閫氬井淇″晢鎴峰彿锛屽井淇″叕浼楀彿锛岀劧鍚庢寜鐓ф楠ゅ噯澶囦竴鍫嗗鏍告暟鎹紝鐒跺悗璁剧疆鐩稿叧閰嶇疆銆傚洜姝わ紝鏈€濂芥彁鍓嶅噯澶囧ソ璧勬枡瀹℃牳锛屼互鍏嶈€借寮€鍙戣繘搴︺€傞厤缃楠わ細瀹樻柟鏂囨。锛屾寜鐓у畼鏂规枃妗ｉ厤缃嵆鍙€傜壒鍒渶瑕佹敞鎰忕殑鏄紝閰嶇疆鐨勫晢鎴疯处鎴风殑鏀粯鎺堟潈鐩綍蹇呴』涓庡叕浼楀彿鐨勬巿鏉冨煙鍚嶄竴鑷达紝鍚﹀垯浼氭敮浠樺け璐ワ紒鍙傝€冿細JSAPI鏀粯閰嶇疆鏂囨。H5鏀粯閰嶇疆鏂囨。灏忕▼搴忔敮浠楯S-SDKH5鏀粯寮€鍙戞祦绋嬭姹傚垱寤鸿鍗曟帴鍙ｈ幏鍙栬鍗曟暟鎹紙orderId锛岃鍗曞彿锛屾敮浠橀噾棰濓級璇锋眰鏀粯鎺ュ彛甯rderId锛岃幏鍙杕web_url璺宠浆鍒板井淇℃敮浠樹腑闂撮〉闈web_url锛屾敮浠樻垚鍔熷悗鑷姩璋冪敤寰俊鏀粯璺宠浆鍒伴厤缃殑杩斿洖椤甸潰锛堣姹傛敮浠樻椂鎼哄甫鐨勫弬鏁皉edirectUrl锛夈€傚弬鑰冩枃妗ｅ疄鐜颁唬鐮佷吉浠ｇ爜馃槀asyncwxPayByH5(){//鍟嗗搧淇℃伅letgoodsList={goodsId:1};letparams={goodsList:goodsList,}//1.鍒涘缓涓€涓鍗昹etdata=awaitcreateOrder(params);//鑾峰彇璁㈠崟id:orderId;璁㈠崟鎬婚噾棰濓細orderTotalPrice锛涜鍗曞彿锛歰rderNolet{orderId,orderTotalPrice,orderNo}=data;letparamsPay={orderId,//redirectUrl:鏀粯瀹屾垚鍚庤繑鍥炵殑椤甸潰redirectUrl:`${location.origin}/orderList`};//2.璇锋眰鏀粯let{mweb_url}=awaitwxPay(params);//3.璺宠浆鍒板井淇℃敮浠樹腑闂撮〉window.location.replace(mweb_url);}锛屾敞鎰忓晢鎴疯处鍙风殑鏀粯鎺堟潈鐩綍鍜屽叕浼楀彿鐨勬巿鏉冨煙鍚嶄竴瀹氳涓€鑷达紝redirect_url涓€瀹氳urlencoded锛堝悗闈㈡垜浠湪缁堢绔鐞嗮煠級璋冭瘯闇€瑕佸湪绾跨幆澧冿紙闇€瑕侀儴缃插埌鍏綉鏈嶅姟鍣紝鏄犲皠鍒板叕浼楀彿閰嶇疆鐨勫畨鍏ㄥ煙鍚嶏級H5鏀粯鍙兘鍦ㄩ噷闈㈣皟闈炲井淇℃祻瑙堝櫒锛屽井淇℃祻瑙堝櫒鐜璋冩暣JSAPI鏀粯鍚姩JSAPI鏀粯寮€鍙戞祦绋嬭姹傚垱寤鸿鍗曟帴鍙ｉ€氳繃寰俊缃戦〉鎺堟潈鑾峰彇璁㈠崟鏁版嵁锛堣鍗昳d锛岃鍗曞彿锛屾敮浠橀噾棰濓級锛屾惡甯︽巿鏉冧唬鐮侀噸瀹氬悜鍒拌鍗曟敮浠橀〉闈紝骞跺湪閲嶅畾鍚戝湴鍧€鍚庨潰鎷兼帴璁㈠崟鏁版嵁锛堝洜涓鸿繖涓€姝ュ彧閫傜敤浜庡巻鍙茶矾鐢辨ā寮忥紝濡傛灉浣犵殑鍟嗗搧鐩殑鏄痟ash璺敱锛岃繖涓€姝ユ帹鑽愮湅杩欑瘒鏂囩珷锛夎繘鍏ユ敮浠橀〉闈㈠悗锛屽湪鍦板潃鏍忚幏鍙朿ode鍜岃鍗曟暟鎹紙orderId锛夛紝鐒跺悗璇锋眰鏀粯鎺ュ彛鑾峰彇鎴戜滑闇€瑕佺殑鏁版嵁锛堣繖涓猟ataguaranteeswx.configandwx.chooseWXPay涓や釜鏂规硶闇€瑕佺殑鍙傛暟锛夐€氳繃js-sdk鎻愪緵鐨勬柟娉曞彂璧锋敮浠橈紝鍏堥€氳繃js-sdk鎻愪緵鐨剋x.config()娉ㄥ叆鏉冮檺楠岃瘉閰嶇疆锛岀劧鍚庨€氳繃wx.ready()鎺ュ彛澶勭悊楠岃瘉鎴愬姛锛岀劧鍚庨€氳繃wx.checkJsApi()鍒ゆ柇瀹㈡埛绔増鏈槸鍚︽敮鎸佹寚瀹氱殑JS鎺ュ彛锛岀劧鍚庡湪wx.checkJsApi()鎴愬姛鍥炶皟鍑芥暟涓皟鐢╳x.chooseWXPay()鏉ラ€氳繃wx.chooseWXPay()鍙戣捣寰俊鏀粯璇锋眰鏀粯鎴愬姛鍥炶皟锛歝ancel:function(res){}锛屾敮浠樺け璐ュ洖璋冿細fail:function(err){}锛屽彇娑堟敮浠樺洖璋僣ancel:function(res){}杩涜澶勭悊涓嶅悓鏀粯缁撴灉灏婇噸绉瀬鍦般€傚弬鑰冩枃妗S-SDK瀹炵幇浠ｇ爜灏佽鑾峰彇寰俊鎺堟潈鐮佺殑鏂规硶鍜岃幏鍙栧湴鍧€鏍忔寚瀹氬弬鏁扮殑鏂规硶/***@description鎷︽埅url涓殑鎸囧畾鍙傛暟*@param{*}queryName闇€瑕佹嫤鎴殑鍙傛暟*@returns*/exportconstgetUrlParam=(queryName)=>{returndecodeURIComponent((newRegExp('[?|&]'+queryName+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null}/***鑾峰彇寰俊鏀粯鐨刢ode锛屼紶鍏ュ洖璋冨湴鍧€*@param{*}url*/exportfunctiongetWxCode(url){letwxUrlStart='https://open.weixin.qq.com/connect/oauth2/authorize?appid='+wechatAppId+'&redirect_uri=';璁﹚xUrlEnd='&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect';璁﹔edirect_uri=encodeURIComponent(url);璁゛llUrl=wxUrlStart+encodeURIComponent(redirect_uri)+wxUrlEnd;window.location.replace;鍦╫rderpage(}allUrl)鍒涘缓璁㈠崟锛屽井淇℃巿鏉冭幏鍙朿ode锛岃烦杞埌璁㈠崟鏀粯椤甸潰锛堝湴鍧€鏍忔惡甯rderId銆佽鍗曢噾棰濄€乧ode绛夎鍗曟暟鎹級asynccreateOrder(){//鍟嗗搧淇℃伅璁ゞoodsList={goodsId:1};letparams={goodsList:goodsList,}//1.鍒涘缓涓€涓鍗昹etdata=awaitcreateOrder(params);//鑾峰彇璁㈠崟id:orderId;璁㈠崟鎬婚噾棰濓細orderTotalPrice锛涜鍗曞彿锛歰rderNolet{orderId,orderTotalPrice,orderNo}=data;//寰俊缃戦〉鎺堟潈鍚庣殑閲嶅畾鍚戝湴鍧€leturl=`${location.origin}/pay?orderTotalPrice=${orderTotalPrice}&orderNo=${orderNo}&orderId=${orderId}`//寰俊鎺堟潈涓婇潰灏佽鐨勭綉椤垫柟娉昰etWxCode(url);},鏀粯椤甸潰浠ｇ爜//jsapi鏀粯asyncwxPayByJsApi(){let_this=this;//鑾峰彇璁㈠崟鏁版嵁鍜屾巿鏉冪爜const{orderTotalPrice,orderNo,orderId}=_this.$route.query;杩欎釜.orderInfo={orderTotalPrice,鎴杁erNo,orderId,orderSource}_this.code=getUrlParam('浠ｇ爜');letparams={orderId:_this.orderInfo.orderId,code:_this.code,//寰俊鎺堟潈鑾峰彇鐨刢ode}//璇锋眰鍚庡彴鎺ュ彛鏀粯letresp=awaitwxPay(params);//璋冪敤鍚庡彴鎺ュ彛wx.config({debug:false,//寮€鍚痙ebug妯″紡锛岃皟鐢ㄧ殑鎵€鏈堿PI鐨勮繑鍥炲€奸兘浼氬湪瀹㈡埛绔繘琛屽憡璀︼紝濡傛灉瑕佹煡鐪嬩紶鍏ョ殑鍙傛暟鍙互鎵撳紑onPC绔紝閫氳繃log鎵撳嵃鍙傛暟淇℃伅锛屽彧浼氬湪PC绔墦鍗癮ppId:wechatAppId,//蹇呭～锛屽叕浼楀彿鐨勫敮涓€鏍囪瘑timestamp:resp.timeStamp,//蹇呭～锛岀敓鎴愮鍚嶇殑鏃堕棿鎴硁onceStr:resp.nonceStr,//蹇呭～锛岀敓鎴愮鍚嶇殑闅忔満瀛楃涓瞫ignature:resp.signature,//蹇呴渶锛岀鍚峧sApiList:['chooseWXPay']//蹇呴渶锛岃浣跨敤鐨凧S鎺ュ彛鍒楄〃});//doc:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1//娉ㄥ叆鏉冮檺楠岃瘉閰嶇疆wx.ready(function(){//鍒ゆ柇褰撳墠瀹㈡埛绔槸鍚ersion鏀寔鎸囧畾鐨凧S鎺ュ彛wx.checkJsApi({jsApiList:['chooseWXPay'],//闇€瑕佹鏌ョ殑JS鎺ュ彛鍒楄〃锛屾墍鏈塉S鎺ュ彛鍒楄〃瑙侀檮褰?,success:(res)=>{//浠ラ敭鍊煎鐨勫舰寮忚繑鍥烇紝鍙敤鐨刟pi鍊间负true锛屼笉鍙敤鐨勫€间负false//渚嬪锛歿"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}//鍙戣捣寰俊鏀粯璇锋眰wx.chooseWXPay({timestamp:resp.timeStamp,//鏀粯绛惧悕鏃堕棿鎴筹紝娉ㄦ剰寰俊jssdk涓殑鏃堕棿鎴冲瓧娈靛叏閮ㄤ娇鐢ㄥ皬鍐欍€備絾鏄渶鏂扮増鏀粯鍚庡彴鐢熸垚绛惧悕浣跨敤鐨則imeStamp瀛楁鍚嶉渶瑕佸ぇ鍐欍€係瀛楃nonceStr:resp.nonceStr,//鏀粯绛惧悕闅忔満瀛楃涓诧紝涓嶈秴杩?2浣峱ackage:resp.package,//缁熶竴鏀粯鎺ュ彛杩斿洖鐨刾repay_id鍙傛暟鍊硷紝鎻愪氦鏍煎紡濡傦細prepay_id=\*\*\*)signType:resp.signType,//寰俊鏀粯V3浼犲叆RSA锛屽井淇℃敮浠榁2浼犲叆鏍煎紡涓嶸2缁熶竴璁㈠崟绛惧悕鏍煎紡涓€鑷磒aySign:resp.paySign,//鏀粯绛惧悕鎴愬姛:(res)=>{//鏀粯鎴愬姛鍚庣殑鍥炶皟鍑芥暟_this.$router.push({path:'/payResult',query:{orderTotalPrice:_this.orderInfo.amount,orderNo:_this.orderInfo.orderNo,orderId:_this.orderInfo.orderId}});},澶辫触:(err)=>{_this.$router.go(-1);},cancel:function(err){//鐢ㄦ埛鍙栨秷鏀粯_this.$router.go(-1);},});}});});wx.error(err=>{_this.$router.go(-1);})}锛屽皬绋嬪簭鏀粯寮€鍙戞祦绋嬭姹傚垱寤鸿鍗曟帴鍙ｏ紝鍚庡彴缁熶竴涓嬪崟鑾峰彇orderId杩斿洖閫氳繃wx.login()鑾峰彇鐨刢ode鎼哄甫code鍜宱rderid鍙傛暟璇锋眰鎺ュ彛鑾峰彇鏀粯鎵€闇€鏁版嵁銆傝幏鍙栨敮浠樻墍闇€鏁版嵁鍚庯紝璋冪敤wx.requestPayment()鎺ュ彛璋冪敤寰俊鏀粯椤甸潰鏍规嵁鏀粯缁撴灉杩涜鐩稿簲鎿嶄綔銆傚皬绋嬪簭鏂囨。wx.login()灏忕▼搴忔枃妗x.requestPayment()鍙傝€冧唬鐮佹枃绔犲疄鐜颁唬鐮乤syncfunctionwxPay(goodId){//1.鍒涘缓璁㈠崟鑾峰彇orderIdletCreateTheOrder={goodId,//productid}letorderId=await鍒涘缓璁㈠崟锛堝弬鏁帮級锛?/2.鑾峰彇浠ｇ爜letcode=awaitwxlogin();//鍩轰簬promise灏佽鐨剋x.login()鏂规硶letparamsPay={orderId,code,}//3.鑾峰彇鏀粯鏁版嵁letpayData=awaitwxXcxPay(paramsPay);//4.鍙戣捣鏀粯letres=awaitpayment(payData);//鍩轰簬promise鍖呯殑wx.requestPayment()鏂规硶//5.鍒ゆ柇鏀粯鏄惁鎴愬姛letpayResult=res.errMsg;if(payResult=="requestPayment:ok"){鎺у埗鍙般€俵og("鏀粯鎴愬姛");}elseif(payResult=="requestPayment:failcancel"){console.log("鐢ㄦ埛鍙栨秷鏀粯");}else{console.log("鏀粯澶辫触");}}娉ㄦ剰浜嬮」鐢宠寰俊灏忕▼搴忚处鍙稟ppID锛堝皬绋嬪簭id锛夊拰AppSecret锛堝皬绋嬪簭key锛夌敵璇风被鍨嬪繀椤绘槸浼佷笟鎬ц川鐨勶紝鍚﹀垯鏃犳硶鎺ュ叆寰俊鏀粯銆傞鍏堥渶瑕佸井淇¤璇佹墠鑳芥帴鍏ュ井淇℃敮浠樺苟缁戝畾鍟嗘埛骞冲彴銆備娇鐢ㄧ涓€姝ヨ幏鍙栫殑AppID鐢宠鍟嗘埛骞冲彴璐﹀彿鑾峰彇MchID锛堝晢鎴穒d锛夊拰MchKey锛堝晢鎴峰瘑閽ワ級灏忕▼搴忓皢鍟嗘埛璐﹀彿涓庡井淇″拰鍟嗘埛杩涜鍏宠仈璁よ瘉鎴愬姛鍚庯紝鍦ㄥ井淇″悗鍙拌繛鎺ュ井淇℃敮浠樿彍鍗曡瘎璁哄尯鎸囨锛屽鏋滄湰鏂囧鎮ㄦ湁甯姪锛岃鐐硅禐鍏虫敞馃槉鏈粡鍏佽绂佹杞浇馃拰灏戣澶氬仛銆?/p>
