微信公众号JSSDK · 万能Web开发文档笔记 · 看云

企业🤖AI智能体构建引擎，智能编排和调试，一键部署，支持私有化部署方案广告

官方<https://mp.weixin.qq.com/wikit=resource/res_main&id=mp1421141115> 文件<https://res.wx.qq.com/open/js/jweixin-1.4.0.js> ### 分享自定义 ~~~ {php echo register_jssdk();} <script> wx.ready(function () { sharedata = { title: '微信JS-SDK Demo', desc: '微信JS-SDK,帮助第三方为用户提供更优质的移动web服务', link: jssdkconfig.url, imgUrl: 'http://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRt8Qia4lv7k3M9J1SKqKCImxJCt7j9rHYicKDI45jRPBxdzdyREWnk0ia0N5TMnMfth7SdxtzMvVgXg/0', success: function(){ alert('success'); }, cancel: function(){ alert('cancel'); } }; wx.hideOptionMenu(); wx.showMenuItems({ menuList: [ 'menuItem:share:timeline', 'menuItem:share:appMessage', 'menuItem:copyUrl', 'menuItem:favorite', 'menuItem:openWithSafari', 'menuItem:openWithQQBrowser' ], }); wx.onMenuShareAppMessage(sharedata); wx.onMenuShareTimeline(sharedata); }); 收货地址共享jssdk>1.2 wx.openAddress({ success : function(res){ alert(JSON.stringify(res)); },cancel: function () { alert("取消了");} }); </script> ~~~ ~~~ $wx = $_W['account']['jssdkconfig']; ~~~ 关闭当前页,无需签名 ~~~ document.addEventListener("WeixinJSBridgeReady", function onBridgeReady() { WeixinJSBridge.call("closeWindow"); }); a 标签等直接用 WeixinJSBridge.call("closeWindow"); ~~~ 支付的调用 ~~~ $.post("{$payurl}",{}, function(data){//发送到下单接口 data = JSON.parse(data);//获取json数据 WeixinJSBridge.invoke('getBrandWCPayRequest', { 'appId' : data.appId, 'timeStamp': data.timeStamp, 'nonceStr' : data.nonceStr, 'package' : data.package, 'signType' : data.signType, 'paySign' : data.paySign }, function(res) { if(res.err_msg == 'get_brand_wcpay_request:ok') { alert('成功支付'); } else if(res.err_msg == 'get_brand_wcpay_request:cancel'){ alert('支付取消'); }else{ alert("error code:"+res.err_msg); } }); }); ~~~ 图片浏览,只需要图片加上 weixin 类即可 ~~~ var weixinimg=[]; var weixinsrc=[]; weixinimg=$('.weixin'); for (var i=0;i<weixinimg.length;i++){ weixinsrc[i]=weixinimg[i].src; } $('.weixin').click(function(){ var index = $('.weixin').index(this); wx.previewImage({ current: weixinsrc[index], urls:weixinsrc }); }); ~~~ 单多图上传 ~~~ //单图上传 $('#i1').on('click', function () { wx.chooseImage({ count:1, success: function (res) { var localIds = res.localIds; syncUpload1(localIds); } }); }); var syncUpload1 = function(localIds){ var localId = localIds.pop(); wx.uploadImage({ localId: localId, isShowProgressTips: 1, success: function (res) { var serverId = res.serverId; // 返回图片的服务器端ID $.post("{$_W['siteroot']}app/index.php?i={$weid}&c=entry&do=ajax1&m=we7_demo",{mid:serverId},function(data){ $('#img1').html('<li class="weui_uploader_file" style="background-image:url('+data.src+')"></li>'); $('#imgi').html('<input value="'+data.src+'" type="hidden" name="files" />'); },'json'); } }); }; //多图上传 $('#headimgurl2').on('click', function () { wx.chooseImage({ success: function (res) { var localIds = res.localIds; syncUpload(localIds); } }); }); var syncUpload = function(localIds){ var localId = localIds.pop(); wx.uploadImage({ localId: localId, isShowProgressTips: 1, success: function (res) { var serverId = res.serverId; // 返回图片的服务器端ID $.post("{$_W['siteroot']}app/index.php?i={$weid}&c=entry&do=ajax1&m=we7_demo",{mid:serverId},function(data){ $('#img2').append('<li class="weui_uploader_file" style="background-image:url('+data.src+')"></li>'); $('#file2').append('<input value="'+data.src+'" type="hidden" name="files[]" />'); },'json'); if(localIds.length > 0){ syncUpload(localIds); } } }); }; ~~~ 扫码 ~~~ document.querySelector('#qr').onclick = function () { wx.scanQRCode({ needResult: 1,//0是微信处理,1是结果 desc: '我们自己来处理结果', scanType: ["qrCode","barCode"], success: function (res) { var result = res.resultStr; $.alert(result,"扫描结果"); } }); }; ~~~ 自动获取地理位置,需要腾讯地图蜜月 ~~~ wx.getLocation({ type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02' success: function (res) { var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90 var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。 var speed = res.speed; // 速度，以米/每秒计 var accuracy = res.accuracy; // 位置精度 //alert(JSON.stringify(res)); $.get("http://apis.map.qq.com/ws/geocoder/v1/?location="+latitude+","+longitude+"&key={$mapkey}&get_poi=0&output=jsonp&callback=?",function(data) { console.log(data); if(data.status==0){ var province = data.result.address_component.province; province = preg_replace('/市/',"",province); province = preg_replace('/省/',"",province); var city = data.result.address_component.city; city = preg_replace('/市/',"",city); var qu = data.result.address_component.district; $("#address1").val(province+" "+city+" "+qu); $("#address2").val(province+" "+city+" "+qu); } },'jsonp'); } }); ~~~ 查看位置 ~~~ wx.openLocation({ latitude: 23.099994,//纬度 longitude: 113.324520,//经度 name: 'TIT 创意园',//名称 address: '广州市海珠区新港中路 397 号', scale: 14,//缩放等级1-28 默认1最大 infoUrl: 'http://weixin.qq.com',//详细信息 }); ~~~ 显示影藏关闭 ~~~ wx.ready(function () { wx.hideOptionMenu(); }) wx.ready(function () { wx.showOptionMenu(); }) wx.ready(function () { wx.closeWindow(); }) ~~~ 阻止滑动 ~~~ function stopDrop() { var c; $(document.body).on('touchstart', function(a) { c = a.originalEvent.changedTouches[0].clientY }); $(document.body).on('touchmove', function(a) { var y = a.originalEvent.changedTouches[0].clientY; var b = $(this).scrollTop() }); $(document.body).on('touchend', function(a) { c = a.originalEvent.changedTouches[0].clientY; $(this).scrollTop(0) }) } stopDrop(); ~~~ 下单1分钱返回 ~~~ Array ( [appid] => wx001 [attach] => 1 [bank_type] => CFT [cash_fee] => 1 [fee_type] => CNY [is_subscribe] => Y [mch_id] => 111 [nonce_str] => IgtZ3c0g [openid] => oN44zxCvQlYaAoEFU3UDa0uiysqA [out_trade_no] => YO20180128022645129464 [result_code] => SUCCESS [return_code] => SUCCESS [sign] => 7C604C785ED4119FC60FB23C97E76EC4 [time_end] => 20180128022652 [total_fee] => 1 [trade_type] => JSAPI [transaction_id] => 4200000100201801282214387872 ) ~~~ 支付成功通知返回 ~~~ Array ( [card_fee] => 0.01 [card_id] => [card_type] => 0 [fee] => 0.01 [from] => return [is_usecard] => 0 [result] => success [tag] => Array ( [acid] => 1 [uid] => 1 [transaction_id] => 4200000084201801282604370765 ) [tid] => YO20180128222321512481 [type] => wechat [uniacid] => 1 [uniontid] => 2018012822232100005314224341 [user] => oN44zxCvQlYaAoEFU3UDa0uiysqA [weid] => 1 ) ~~~ 支付注意 ~~~ 支付成功处理方法,需要注意,在此方法内获取不到$_W值,以及使用借用后参数配置也是借用公众号的, public function payResult($params) {//支付成功处理 if ($params['result'] == 'success' && $params['from'] == 'notify') { $setting = pdo_get('uni_account_modules', array('module' => 'yoby_che', 'uniacid' => $params['uniacid'])); $arr = iunserializer($setting['settings']); } if ($params['from'] == 'return') { if ($params['result'] == 'success') { message('支付成功！',murl('entry', ['m'=>'yoby_che','do'=>'vpay'], 1,1), 'success'); } else { message('支付失败！',murl('entry', ['m'=>'yoby_che','do'=>'fm'], 1,1), 'error'); } } ~~~