H5如何拉起微信扫一扫

npm install weixin-js-sdk

在需要调用JS接口的页面引入如下JS文件，（支持https）：[http://res.wx.qq.com/open/js/jweixin-1.2.0.js](http://res.wx.qq.com/open/js/jweixin-1.2.0.js)

import wx from "weixin-js-sdk";

WEIXIN_JSDK() {    const url = encodeURIComponent(location.href.split("#")[0]); //获取当前页面路由    http.fetchGet(`后端接口$ {        url    }`).then(data = >{        let a = data.data.data;        wx.config({            debug: false,            // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。            appId: a.appid,            // 必填，公众号的唯一标识            timestamp: a.timestamp,            // 必填，生成签名的时间戳            nonceStr: a.noncestr,            // 必填，生成签名的随机串            signature: a.signature,            // 必填，签名            jsApiList: ["scanQRCode", "getLocation"] // 必填，需要使用的JS接口列表        });    });},

wx.ready(function() {    wx.scanQRCode({        // 微信扫一扫接口        desc: "scanQRCode desc",        needResult: 1,        // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，        scanType: ["qrCode", "barCode"],        // 可以指定扫二维码还是一维码，默认二者都有        success: function(res) {            const getCode = res.resultStr; // 当needResult 为 1 时，扫码返回的结果        } else {}    },    fail: function(res) {        Toast(res.errMsg);    }});});

public function renew() {  //获取ticket  $ticket = $this->get_access_token($pay['app_id'],$pay['secret']);  //生成JSSDK实例  $opt['app_id'] = $pay['app_id'];  $opt['jsapi_ticket'] = $ticket['ticket'];  $opt['url'] = '此处填写你的当前地址url';  $wx = $this->configuration($opt);  $data['wx'] = $wx;  return ajax_return($data,'成功',0);}
public function get_access_token($appid,$secret) {  //获取已存储d的token，token值2小时失效，需要自己存储  $token = DB::name('wxtoken')->value('token');  //获取ticket  $get_jsapi_ticket = $this->get_jsapi_ticket($token);  $get_jsapi_ticket = json_decode($get_jsapi_ticket,true);  //如果token失效，就重新获取  if($get_jsapi_ticket['errcode'] == 40001 || $get_jsapi_ticket['errcode'] == 42001 ) {    $get_url="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$appid."&secret=".$secret;    $data = $this->curl($get_url);    $data = json_decode($data,true);    DB::name('wxtoken')->where('id',1)->update(['token'=>$data['access_token']]);    $get_jsapi_ticket = $this->get_jsapi_ticket($data['access_token']);  }  return($get_jsapi_ticket);}
//获取ticketpublic function get_jsapi_ticket($token) {  $get_ticket_url="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=".$token."&type=jsapi";  $data = $this->curl($get_ticket_url);  return($data);}
//生成随机字符串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;}
//返回配置config数据public function  configuration($option) {  //签名算法  $timestamp=time();  //时间戳  $noncestr =$this->createNonceStr();  //拼接$signature原型  $ping="jsapi_ticket=".$option['jsapi_ticket']."&noncestr=".$noncestr."&timestamp=".$timestamp."&url=".$option['url'];  //加密生成signature  $signature=sha1($ping);  $signPackage = array(  "appID" => $option['app_id'],  "noncestr" => $noncestr,  "timestamp"=> $timestamp,  "signature"=> $signature,  "jsapi_ticket"=> $option['jsapi_ticket']          );  //返回参数  return($signPackage);}