uni-app h5 使用微信JSSDK的方式

杨吉山 發表於 2024-8-2 11:17:00

综合各方经验及文档总结了以下我的使用方法，希望对有需要的同学有些帮助 第一步：npm install jweixin-module --save 第二步：common文件夹新建js文件，我这里命名jwx.js
<img src="https://img2024.cnblogs.com/blog/590646/202408/590646-20240802111435282-2025485911.png">
 jwx.js 文件内容
<div class="cnblogs_code">
<pre>var jWeixin = require('jweixin-module');
export default {
//判断是否在微信中 
 isWechat: function() {
 var ua = window.navigator.userAgent.toLowerCase();
 if (ua.match(/micromessenger/i) == 'micromessenger') {
 console.log('是微信客户端')
 return true;
 } else {
 console.log('不是微信客户端')
 return false;
 }
},
initJssdk:function(callback){
 // var uri = encodeURIComponent(window.location.href);
 var uri = encodeURIComponent(window.location.href.split('#')[0]);//获取当前url然后传递给后台获取授权和签名信息
 var url = `/proxyapi/api/account/wxshare`
 const token = uni.getStorageSync('token')
 const headers = {}
 if (token && token !== 'undefined') {
 headers['token'] = token
 }
 uni.request({
 url:url,//你的接口地址
 header: headers,
 data:{
 url:uri
 },
 success:(re)=>{
 console.log(re)
 var res = re.data
 //返回需要的参数appId,timestamp,noncestr,signature等
 //注入config权限配置
 jWeixin.config({
 debug: true,
 appId: res.data.appId,
 timestamp: res.data.timestamp,
 nonceStr: res.data.nonceStr,
 signature: res.data.signature,
 jsApiList: res.data.jsApiList
 });
 if (callback) {
 callback(res.data);
 }

 }
 })
},
//在需要定位页面调用
 getlocation: function(callback) {
 if (!this.isWechat()) {
 //console.log('不是微信客户端')
 return;
 }
 this.initJssdk(function(res) {
 jWeixin.ready(function() {
 jWeixin.getLocation({
 type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
 success: function (res) {
 // console.log(res);
 callback(res)
 },
 fail:function(res){
 console.log(res)
 },
 // complete:function(res){
 // console.log(res)
 // }
 });
 });
 });
},
openlocation:function(data,callback){//打开位置
 if (!this.isWechat()) {
 //console.log('不是微信客户端')
 return;
 }
 this.initJssdk(function(res) {
 jWeixin.ready(function() {
 jWeixin.openLocation({//根据传入的坐标打开地图
 latitude:data.latitude,
 longitude:data.longitude
 });
 });
 });
},
chooseImage:function(callback){//选择图片
 if (!this.isWechat()) {
 //console.log('不是微信客户端')
 return;
 }
 //console.log(data);
 this.initJssdk(function(res) {
 jWeixin.ready(function() {
 jWeixin.chooseImage({
 count:1,
 sizeType:['compressed'],
 sourceType:['album'],
 success:function(rs){
 callback(rs)
 }
 })
 });
 });
},
//微信支付
 wxpay: function(data,callback) {
 if (!this.isWechat()) {
 //console.log('不是微信客户端')
 return;
 }
 this.initJssdk(function(res) {
 jWeixin.ready(function() {
 jWeixin.chooseWXPay({
 timestamp: data.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
 nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
 package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
 signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
 paySign: data.paysign, // 支付签名
 success: function (res) {
 // console.log(res);
 callback(res)
 },
 fail:function(res){
 callback(res)
 },
 // complete:function(res){
 // console.log(res)
 // }
 });
 });
 });
}
}</pre>
</div>
第三步：main.js 文件里引入 import jwx from '@/common/jwx' Vue.prototype.$jwx = jwx
第四步：在需要的页面直接用this.$jwx.xxx(接口名称)调用即可
<div class="cnblogs_code">
<pre>if (this.$jwx && this.$jwx.isWechat()) {//检查是否是微信环境
 this.$jwx.getlocation(function (res) {//获取位置
 console.log(res);
 //拿到返回数据自行处理
 });

 //调用支付前应先处理订单信息，然后根据订单信息返回支付需要的timestamp,noncestr,package,signType,paySign等参数
//下面的rs.data为后台处理完订单后返回的；我的业务模式为用户点击提交订单，请求后台添加订单接口，订单添加完成后，后台根据订单id，订单金额等信息调用微信签名拿到timestamp,noncestr等参数返回;
 this.$jwx.wxpay({//调用支付，
 'timestamp':rs.data.timeStamp,
 'nonceStr':rs.data.nonceStr,
 'package':rs.data.package,
 'signType':rs.data.signType,
 'paysign':rs.data.paySign
},function (r) {
 if (r.errMsg == 'chooseWXPay:ok') {
 uni.redirectTo({//支付成功转到支付成功提示页面
 url: '/pages/paySuccess
 })
 }else{
 that.$msg('支付失败！');
 }
});
}</pre>
</div>
 原地址：https://ask.dcloud.net.cn/article/id-36813
 
fastadmin后台：Wxjssdk.php
<div class="cnblogs_code">
<pre><?php
namespace app\common\library;

use fast\Random;
use FilesystemIterator;
use think\Config;
use think\File;
use think\Hook;
use think\Cache;
/**
* @auther: xxf
* Date: 2019/11/8
* Time: 15:59
*/
class Wxjssdk {
private $appId;
private $appSecret;
public function __construct($appId, $appSecret) {
 $this->appId = $appId;
 $this->appSecret = $appSecret;
}

public function getSignPackage($url) {
 $jsapiTicket = $this->getJsApiTicket();
 $timestamp = time();
 $nonceStr = $this->createNonceStr();
 $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$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;
}

private function getJsApiTicket() {
 $ticket = Cache::get('jsapi_ticket',false);
 if (!$ticket) {
 $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) {
 Cache::set('jsapi_ticket',$ticket,3600);
 // $data = new stdClass();
 // $data->expire_time = time() + 4000;
 // $data->jsapi_ticket = $ticket;
 // file_put_contents($file, json_encode($data));
 }
 }
 return $ticket;
}

private function getAccessToken() {
 $access_token = Cache::get('access_token',false);
 if (!$access_token) {
 $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) {
 Cache::set('jsapi_ticket',$access_token,3600);
 }
 }
 return $access_token;
}

private function httpGet($url) {
 return file_get_contents($url);
}
}</pre>
</div>
调用：
<div class="cnblogs_code">
<pre>public function wxjssdk(){
 $jssdk = new Wxjssdk(APPID, AppSecret);
 $url = $this->request->param("url");
 $url = urldecode($url);
 $url_arr = explode("#",$url);
 // dump($url_arr);
 $url = $url_arr[0];
 $signPackage = $jssdk->getSignPackage($url);
 $config =array(
 'debug' => false,
 'appId' => $signPackage['appId'],
 'timestamp' => $signPackage['timestamp'],
 'nonceStr' => $signPackage['nonceStr'],
 'signature' => $signPackage['signature'],
 'jsApiList' => array(
 'hideAllNonBaseMenuItem',
 'hideMenuItems'
 )
 );
 $this->success("验证成功",$config);
}</pre>
</div>
  
来源：https://www.cnblogs.com/zhangzhijian/p/18338360

頁: [1]

琼殿技术论坛's Archiver

uni-app h5 使用微信JSSDK的方式