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

杨吉山

综合各方经验及文档总结了以下我的使用方法，希望对有需要的同学有些帮助
第一步：npm install jweixin-module --save
第二步：common文件夹新建js文件，我这里命名jwx.js

 jwx.js 文件内容

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)  
                    // }  
                });  
            });  
        });  
    }  
}  

第三步：main.js 文件里引入
import jwx from '@/common/jwx'
Vue.prototype.$jwx = jwx

第四步：在需要的页面直接用this.$jwx.xxx(接口名称)调用即可

  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('支付失败！');  
        }  
    });  
  }

 原地址：https://ask.dcloud.net.cn/article/id-36813

 

fastadmin后台：Wxjssdk.php

<?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);
    }
}

调用：

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);
    }

 

来源：https://www.cnblogs.com/zhangzhijian/p/18338360