uniapp 使用微信jssdk 调起 地图,扫码,分享等功能
引入文件:
jweixin-module/lib/index.js
这个可以 随便找个目录 执行 npm install jweixin-module --save 就可以获得,然后从 node_modules 目录下找到 jweixin-module 目录复制到 components 目录下就可以了。或者直接下载
链接: https://pan.baidu.com/s/1gfXn42fHO9Ch6ruOAY8GKw 提取码: gvfw
核心代码:
com.js
import jweixin from '@/components/jweixin-module/lib/index.js'; const apiUrl = '/api'; const siteUrl = 'http://10.10.34.116:8080'; const shareData = { title: "分享标题", desc: "分享描述", link: "https://10.10.34.116:8080/h5", imgUrl: 'https://10.10.34.116:8080/assets/images/share.png' }; const openPage = function(path){ if (getCurrentPages().length > 9) { uni.reLaunch({ url: path }) } else { uni.navigateTo({ url: path }); } } const checkMobile = function(tel){ var phoneReg = tel.match(/^1[3-9]\d{9}$/); if(phoneReg){ return 1; }else{ return 0; } }; //判断是否在微信中 const isWechat = function() { var ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/micromessenger/i) == 'micromessenger') { // console.log('是微信客户端') return true; } else { // console.log('不是微信客户端') return false; } }; //获取微信JSSDK授权 const getWxConfig = function(){ var that = this; if (!that.isWechat()) { uni.showToast({ title: '请在微信里操作', icon: 'none' }); return; } uni.request({ url: that.siteUrl+'/login/index', header: { 'content-type': 'application/x-www-form-urlencoded' }, data: { do: 'jssdk', url: window.location.href,//当前页面的域名 }, method: 'GET', success: (res) => { console.log('getWxConfig->',res.data); jweixin.config({ debug: false, appId: res.data.appId, timestamp: res.data.timestamp, nonceStr: res.data.nonceStr, signature: res.data.signature, jsApiList: [ 'scanQRCode', 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'openLocation' ] }) jweixin.ready(function() { // 用户检查接口权限用 比如 想用调起扫码功能 scanQRCode 这部分代码上线的时候需要屏蔽,否则老弹窗 jweixin.checkJsApi({ jsApiList: ['scanQRCode'], success: function(res) { // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"} } }); //分享给朋友接口 jweixin.onMenuShareAppMessage(that.shareData); //分享到朋友圈接口 jweixin.onMenuShareTimeline(that.shareData); }); jweixin.error(function(res){ console.log(res,'接口验证失败'); }); } }); }; export default { apiUrl, siteUrl, openPage, checkMobile, formatDate, isWechat, shareData, getWxConfig, jweixin }
使用方法:
引入自定义类 com
import com from '@/common/com.js';
onLoad里 调用
com.getWxConfig();
调起分享 默认把分享封装到com类里了,当然也可以每个页面单独配置
注意 wx.onMenuShareAppMessage() 调用换成 com.jweixin.onMenuShareAppMessage()
var shareData = { title: "分享标题", desc: "分享描述", link: "https://10.10.34.116:8080/h5", imgUrl: 'https://10.10.34.116:8080/assets/images/share.png' }; //分享给朋友接口 com.jweixin.onMenuShareAppMessage(shareData); //分享到朋友圈接口 com.jweixin.onMenuShareTimeline(shareData);
调起扫码 wx.scanQRCode:
com.jweixin.scanQRCode({ // 默认为0,扫描结果由微信处理,1则直接返回扫描结果, needResult: 1, // 可以指定扫二维码还是一维码,默认二者都有 scanType: ["qrCode", "barCode"], success: function(res) { console.log(res); if (res.errMsg == 'scanQRCode:ok') { console.log('扫码结果:',res.resultStr); } } });
调起微信地图导航 wx.openLocation
openMap(lng, lat, name, place) { com.jweixin.openLocation({ // 纬度,必须浮点数,范围为90 ~ -90 latitude: parseFloat(lat), // 经度,必须浮点数,范围为180 ~ -180。 longitude: parseFloat(lng), // 位置名 name: name, // 地址详情说明 address: place ? place: '', // 地图缩放级别,整型值,范围从1~28。默认为最大 scale: 15, //国标02 type: 'gcj02', // 在查看位置界面底部显示的超链接,可点击跳转 infoUrl: '' }) },
后台获取微信授权接口:Thinkphp5.x
Jssdk.php 封装好的类 放Tp站点更目录下 applictation/common/library/Jssdk.php 可以放别的位置,注意修改命名空间
<?php namespace app\common\library; class Jssdk { private $appId; private $appSecret; private $tempPath = ROOT_PATH . '/../runtime/temp/'; public function __construct($appId, $appSecret) { $this->appId = $appId; $this->appSecret = $appSecret; } public function getSignPackage($url = '') { $jsapiTicket = $this->getJsApiTicket(); $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://"; $url = $url ? $url : "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; $timestamp = time(); $nonceStr = $this->createNonceStr(); $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url"; $signature = sha1($string); $signPackage = array( "appId" => $this->appId, "nonceStr" => $nonceStr, "timestamp" => $timestamp, "url" => $url, "signature" => $signature, "rawString" => $string ); return $signPackage; } private function createNonceStr($length = 16) { $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; $str = ""; for ($i = 0; $i < $length; $i++) { $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1); } return $str; } // jsapi_ticket private function getJsApiTicket() { // 先判断./jsapi_ticket_xgNcGqAcP5oEzXUgx.json文件是否存在,不存在先创建 if(is_file($this->tempPath."/jsapi_ticket_xgNcGqAcP5oEzXUgx.json")){ $data = json_decode(file_get_contents($this->tempPath."/jsapi_ticket_xgNcGqAcP5oEzXUgx.json")); if ($data->expire_time < time()) { $accessToken = $this->getAccessToken(); $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken"; $res = json_decode($this->httpGet($url)); $ticket = $res->ticket; if ($ticket) { $data->expire_time = time() + 7000; $data->jsapi_ticket = $ticket; $fp = fopen($this->tempPath."/jsapi_ticket_xgNcGqAcP5oEzXUgx.json", "w"); fwrite($fp, json_encode($data)); fclose($fp); } } else { $ticket = $data->jsapi_ticket; } }else{ $accessToken = $this->getAccessToken(); $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken"; $res = json_decode($this->httpGet($url)); $ticket = $res->ticket; $data=(object)[]; if ($ticket) { $data->expire_time = time() + 7000; $data->jsapi_ticket = $ticket; $fp = fopen($this->tempPath."/jsapi_ticket_xgNcGqAcP5oEzXUgx.json", "w"); fwrite($fp, json_encode($data)); fclose($fp); } } return $ticket; } // access_token private function getAccessToken() { // 先判断./access_token_xgNcGqAcP5oEzXUgx.json文件是否存在,不存在先创建 if(is_file($this->tempPath."/access_token_xgNcGqAcP5oEzXUgx.json")){ $data = json_decode(file_get_contents($this->tempPath."/access_token_xgNcGqAcP5oEzXUgx.json")); if ($data->expire_time < time()) { $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret"; $res = json_decode($this->httpGet($url)); $access_token = $res->access_token; if ($access_token) { $data->expire_time = time() + 7000; $data->access_token = $access_token; $fp = fopen($this->tempPath."/access_token_xgNcGqAcP5oEzXUgx.json", "w"); fwrite($fp, json_encode($data)); fclose($fp); } } else { $access_token = $data->access_token; } }else{ $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret"; $res = json_decode($this->httpGet($url)); $access_token = $res->access_token; $data=(object)[]; if ($access_token) { $data->expire_time = time() + 7000; $data->access_token = $access_token; $fp = fopen($this->tempPath."/access_token_xgNcGqAcP5oEzXUgx.json", "w"); fwrite($fp, json_encode($data)); fclose($fp); } } return $access_token; } private function httpGet($url) { $curl = curl_init(); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); curl_setopt($curl, CURLOPT_TIMEOUT, 500); curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false); curl_setopt($curl, CURLOPT_URL, $url); $res = curl_exec($curl); curl_close($curl); return $res; } }
在controller里调用
引入类 use app\common\library\Jssdk;
调用:
$jssdk = new Jssdk("已认证服务号appId", "secret密钥");//登陆公众账号后台获取 $signPackage = $jssdk->getSignPackage($wxurl); echo(json_encode($signPackage)); exit();