公众号wx-open-launch-weapp跳转小程序

本文主要是介绍公众号wx-open-launch-weapp跳转小程序，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.各种安全域名配置

2.https://res2.wx.qq.com/open/js/jweixin-1.6.0.js 这个文件一定是最新的 要不按钮出不来

3.wx.config  要配置一下。 我这边自己配置后台php 上代码

<?php


/**
 * Class AccessToken
 * @package App\Lib\Wechat
 * 微信 签名
 */
class  WechatConfig
{
    //生成签名的时间戳
    public $time;

    //生成随机字符串
    public $nonceStr;

    //签名
    public $signature;

    //AppId
    public $appId;

    public $url;

    public $ticket;

    public function __construct($url)
    {
        $this->url = $url;
        $this->setTime();
        $this->setNonceStr();
        $this->getJsapiTicket();
        $this->setAppId();
        $this->setSignature();
    }

    /**
     * @return mixed
     */
    public function getTime()
    {
        return $this->time;
    }

    /**
     * @param mixed $time
     */
    public function setTime()
    {
        $this->time = time();
    }

    /**
     * @return mixed
     */
    public function getNonceStr()
    {
        return $this->nonceStr;
    }

    /**
     * @param mixed $nonceStr
     */
    public function setNonceStr()
    {

        $chars='ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz';
        $chars = $chars.$this->time;
        $chars = str_shuffle($chars);
        $this->nonceStr  = substr($chars,0,16);
    }

    /**
     * @return mixed
     */
    public function getSignature()
    {
        return $this->signature;
    }

    /**
     * @param mixed $signature
     */
    public function setSignature()
    {
        //拼接字符串
        $string = 'jsapi_ticket='.$this->ticket.'&noncestr='.$this->nonceStr.'&timestamp='.$this->time.'&url='.$this->url;
        //生成签名
         $this->signature = sha1($string);
    }


    /**
     * @param mixed $appId
     */
    public function setAppId()
    {
        $this->appId =  config('WeChat.appId');
    }


    public function  getJsapiTicket()
    {

        $ticket = RedisAction::get('ticket');
        if(!$ticket)
        {
            $token = (new AccessToken())->getAccessToken();
            $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token={$token}";
            $wechatData = file_get_contents($url);
            $data=json_decode($wechatData,true);
            if(is_array($data) && isset($data['errmsg']) && $data['errmsg'])
            {
                $this->ticket = $data['ticket'];
                RedisAction::set('ticket',$data['ticket'],3600);
            }
        }
        $this->ticket = $ticket;
    }


    /**
     * @return array
     * 执行
     */
    public function handle()
    {
        return [
          "appId"=>$this->appId,
          "timestamp"=> $this->time,
          "nonceStr"=>  $this->nonceStr,
          "signature"=>  $this->signature,
        ];
    }

}

有config 信息以后 配置前端 Vue 

按钮信息

<wx-open-launch-weapp
              id="launch-btn"
              username="小程序的ghID"
              path="pages/login/login.html"//页面加html
          >
            <script type="text/wxtag-template">
              <img class="btn" width="28px" src="https://wzproduct.oss-cn-hangzhou.aliyuncs.com/icon/refresh.svg" //图片按钮 只能是外网的 本地路径不可以
                   alt="">
            </script>
</wx-open-launch-weapp>

vue js代码

 mounted() {
    document.addEventListener('WeixinOpenTagsError', function (e) {
      console.log(e.detail.errMsg); // 无法使用开放标签的错误原因，需回退兼容。仅无法使用开发标签，JS-SDK其他功能不受影响
    });
    var btn = document.getElementById('launch-btn');
    console.log(btn)
    btn.addEventListener('launch', function (e) {
      console.log(e)
      console.log('success');
    });
    btn.addEventListener('error', function (e) {
      console.log(e)
      console.log('fail', e.detail);
    });

  },
  created() {
    const oScript = document.createElement('script');
    oScript.type = 'text/javascript';
    oScript.src = 'https://res2.wx.qq.com/open/js/jweixin-1.6.0.js';
    oScript.onload = this.wxmini
    document.body.appendChild(oScript);
    this.setWxConfig();
  },
  methods: {

    setWxConfig() {
      const url = location.href.split('#')[0];  // 注意这里，我的项目中路由模式用的是history模式
      // 注意这里是调用接口获取到微信配置相关参数的
      weChatConfig({url: url}).then(res => {

        if (res.data.code == 200) {
          //调用微信配置
          this.WxConfig(res)
        }

      });
    },
    //微信配置
    WxConfig(res) {
      wx.config({
        debug: false, // 开启调试模式,
        appId: res.data.data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
        timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
        signature: res.data.data.signature, // 必填，签名，见附录1
        // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        openTagList: ["wx-open-launch-weapp"],     // 这里要配置一下
        jsApiList: [
          "checkJsApi",
          "openLocation",
          "getLocation",
          "closeWindow",
          "scanQRCode",
          "chooseWXPay",
          "previewImage",
          "chooseImage",
          "uploadImage",
          "getLocalImgData"
        ],
      })

      wx.ready(function (res) {
        console.log(res)
      });
      wx.error(function (res) {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
        console.log(res)
      });
    },

这篇关于公众号wx-open-launch-weapp跳转小程序的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！