H5公众号跳转小程序 wx-open-launch-weapp_微信公众号跳转到小程序

最近工作中遇见需要实现公众号跳转小程序的功能

另外附加进微信公众号官网说明【目录 | 微信开放文档】

一、引入JS文件

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

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

【https://res.wx.qq.com/open/js/jweixin-1.6.0.js】

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

二、页面

    <div>
        <wx-open-launch-weapp id="launch-btn"
  appid="wx xxxxxxxx"  
  username="gh_xxxxxxxx"  
  path="pages/home/index?user=123&action=abc"
>
  // appid 是所需跳转的小程序appid，即小程序对应的以wx开头的id
  // username 是所需跳转的小程序原始id，即小程序对应的以gh_开头的id
  // 跳转时，有 appid 会优先使用appid，没有 appid 才会使用username
            <template>
                <style>
                    .btn {
                        padding: 12px
                    }
                </style>
 
                <button class="btn">打开小程序</button>
            </template>
        </wx-open-launch-weapp>
    </div>
   
    <script>
        var btn = document.getElementById('launch-btn');
        btn.addEventListener('launch', function (e) {
            //alert('success');
        });
        btn.addEventListener('error', function (e) {
            //alert('fail', e.detail);
        });
    </script>

三、通过config接口注入权限验证配置并申请所需开放标签

        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: "", // 必填，公众号的唯一标识
            timestamp: "", // 必填，生成签名的时间戳
            nonceStr: "", // 必填，生成签名的随机串
            signature: "", // 必填，签名
            jsApiList: [
                "onMenuShareTimeline",
                "onMenuShareAppMessage",
                "checkJsApi",
                "scanQRCode"
            ], // 必填，需要使用的JS接口列表
            openTagList: ['wx-open-launch-weapp'], // 可选，需要使用的开放标签列表，例如['wx-open-launch-weapp','wx-open-launch-app']
        });
        wx.ready(function () {
            //config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
        });
        wx.error(function (res) {
            //console.log('res', res);
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });

四、下面是获取公众号相关参数的共用类

using Common;
using LitJson;
using System;
using System.Collections.Generic;
using System.IO;
using System.Net;
using System.Net.Security;
using System.Security.Cryptography;
using System.Security.Cryptography.X509Certificates;
using System.Text;
 
namespace IntelligentPhyExamGuid_WeChat.Model
{
    /// <summary>
    /// 微信请求体
    /// </summary>
    public class WxPayDataParamIn
    {
        public static string jsapi_ticket = String.Empty;
        public static DateTime access_token_Date = Convert.ToDateTime("1900-01-01");
        public static int expires_in = 7000;
        /// <summary>
        /// openid用于调用统一下单接口
        /// </summary>
        public string Openid { get; set; }
 
        /// <summary>
        /// access_token用于获取收货地址js函数入口参数
        /// </summary>
        public string Access_token { get; set; }
 
        //采用排序的Dictionary的好处是方便对数据包进行签名，不用再签名之前再做一次排序
        private SortedDictionary<string, object> m_values = new SortedDictionary<string, object>();
        /**
        * 设置某个字段的值
        * @param key 字段名
         * @param value 字段值
        */
        public void SetValue(string key, object value)
        {
            m_values[key] = value;
        }
 
        /**
        * 根据字段名获取某个字段的值
        * @param key 字段名
         * @return key对应的字段值
        */
        public object GetValue(string key)
        {
            object o = null;
            m_values.TryGetValue(key, out o);
            return o;
        }
 
        public string GetOpenidAndAccessTokenFromCode(string code)
        {
            try
            {
                //构造获取openid及access_token的url
                WxPayDataParamIn data = new WxPayDataParamIn();
                data.SetValue("appid", System.Configuration.ConfigurationManager.AppSettings["WeixinAppId"]);
                data.SetValue("secret", System.Configuration.ConfigurationManager.AppSettings["WeixinAppSecret"]);
                data.SetValue("code", code);
                data.SetValue("grant_type", "authorization_code");
                string url = "https://api.weixin.qq.com/sns/oauth2/access_token?" + data.ToUrl();
 
                //请求url以获取数据
                string result = Get(url);
                LogHelper.AddErrorLog("3 result==>" + result);
 
                //保存access_token，用于收货地址获取
                JsonData jd = JsonMapper.ToObject(result);
                Access_token = (string)jd["access_token"];
 
                //获取用户openid
                Openid = (string)jd["openid"];
                SessionHelper.OpenId = Openid;
                LogHelper.AddErrorLog("4 openid==>" + Openid + "   access_token==>" + Access_token);
                string wechatUrl = SessionHelper.RedirectUrl;
                if (wechatUrl.Contains("?"))
                {
                    wechatUrl += "&openid=" + Openid;
                }
                else
                {
                    wechatUrl += "?openid=" + Openid;
                }
 
                LogHelper.AddErrorLog("wechatUrl==>" + wechatUrl);
                return wechatUrl;
            }
            catch (Exception ex)
            {
                return "";
            }
        }
 
        /**
        * @Dictionary格式转化成url参数格式
        * @ return url格式串, 该串不包含sign字段值
        */
        public string ToUrl()
        {
            string buff = "";
            foreach (KeyValuePair<string, object> pair in m_values)
            {
                if (pair.Value == null)
                {
                    LogHelper.AddErrorLog("WxPayData内部含有值为null的字段!" + pair.Key);
                    return "";
                }
 
                if (pair.Key != "sign" && pair.Value.ToString() != "")
                {
                    buff += pair.Key + "=" + pair.Value + "&";
                }
            }
            buff = buff.Trim('&');
            return buff;
        }
 
        public static string Get(string url)
        {
            System.GC.Collect();
            string result = "";
 
            HttpWebRequest request = null;
            HttpWebResponse response = null;
 
            //请求url以获取数据
            try
            {
                //设置最大连接数
                ServicePointManager.DefaultConnectionLimit = 200;
                //设置https验证方式
                if (url.StartsWith("https", StringComparison.OrdinalIgnoreCase))
                {
                    ServicePointManager.ServerCertificateValidationCallback =
                            new RemoteCertificateValidationCallback(CheckValidationResult);
                }
 
                /***************************************************************
                * 下面设置HttpWebRequest的相关属性
                * ************************************************************/
                request = (HttpWebRequest)WebRequest.Create(url);
 
                request.Method = "GET";
 
                //设置代理
                //WebProxy proxy = new WebProxy();
                //proxy.Address = new Uri(WxPayConfig.PROXY_URL);
                //request.Proxy = proxy;
 
                //获取服务器返回
                response = (HttpWebResponse)request.GetResponse();
 
                //获取HTTP返回数据
                StreamReader sr = new StreamReader(response.GetResponseStream(), Encoding.UTF8);
                result = sr.ReadToEnd().Trim();
                sr.Close();
            }
            catch (System.Threading.ThreadAbortException e)
            {
                LogHelper.AddErrorLog("Thread - caught ThreadAbortException - resetting.");
                LogHelper.AddErrorLog(e.Message);
                System.Threading.Thread.ResetAbort();
            }
            catch (WebException e)
            {
                LogHelper.AddErrorLog(e.ToString());
                if (e.Status == WebExceptionStatus.ProtocolError)
                {
                    LogHelper.AddErrorLog("StatusCode : " + ((HttpWebResponse)e.Response).StatusCode);
                    LogHelper.AddErrorLog("StatusDescription : " + ((HttpWebResponse)e.Response).StatusDescription);
                }
                return "";
            }
            catch (Exception e)
            {
                LogHelper.AddErrorLog(e.ToString());
                return "";
            }
            finally
            {
                //关闭连接和流
                if (response != null)
                {
                    response.Close();
                }
                if (request != null)
                {
                    request.Abort();
                }
            }
            return result;
        }
 
        /**
        * 生成随机串，随机串包含字母或数字
        * @return 随机串
        */
        public static string GenerateNonceStr()
        {
            return Guid.NewGuid().ToString().Replace("-", "");
        }
 
        /// <summary>
        /// 获取jsapi_ticket
        /// </summary>
        /// <param name="access_token"></param>
        /// <returns>ticket</returns>
        public static string Getjsapi_ticket(string access_token)
        {
 
            var timespan = (DateTime.Now - access_token_Date);//获取时间差（秒）
            if (timespan.TotalSeconds < expires_in && !string.IsNullOrEmpty(jsapi_ticket))
            {
                return jsapi_ticket;
            }
            else
            {
                string ticket = "";
                string url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + access_token + "&type=jsapi";
                string response = Get(url);
                JsonData jd = JsonMapper.ToObject(response);
                ticket = (string)jd["ticket"];
                jsapi_ticket = ticket;
                access_token_Date = DateTime.Now;
                return ticket;
            }
 
        }
        /**
     * 生成时间戳，标准北京时间，时区为东八区，自1970年1月1日 0点0分0秒以来的秒数
      * @return 时间戳
     */
        public static string GenerateTimeStamp()
        {
            TimeSpan ts = DateTime.UtcNow - new DateTime(1970, 1, 1, 0, 0, 0, 0);
            return Convert.ToInt64(ts.TotalSeconds).ToString();
        }
 
        /**
        * @生成js验证签名，详见签名生成算法
        * @return 签名, sign字段不参加签名
        */
        public string MakeSign2()
        {
            //转url格式
            string str = ToUrl();
            var sha1 = SHA1.Create();
            var bs = sha1.ComputeHash(Encoding.UTF8.GetBytes(str));
            var signature = new StringBuilder();
            foreach (byte b in bs)
            {
                signature.Append(b.ToString("x2"));
            }
            //所有字符转为大写
            return signature.ToString();
        }
 
        public static bool CheckValidationResult(object sender, X509Certificate certificate, X509Chain chain, SslPolicyErrors errors)
        {
            //直接确认，否则打不开    
            return true;
        }
    }
}

五、使用微信共用类生成参数

            string jsapi_ticket = WxPayDataParamIn.Getjsapi_ticket(access_token);
            string noncestr = WxPayDataParamIn.GenerateNonceStr();
            string timestamp = WxPayDataParamIn.GenerateTimeStamp();
            string url2 = "";//当前地址;
 
            WxPayDataParamIn WxData = new WxPayDataParamIn();
            WxData.SetValue("jsapi_ticket", jsapi_ticket);
            WxData.SetValue("noncestr", noncestr);
            WxData.SetValue("timestamp", timestamp);
            WxData.SetValue("url", url2);
            string signature = WxData.MakeSign2();
 
            string pcode = ConfigurationManager.AppSettings["POIpcode"];//POI地图导航项目编码
            ViewBag.JumpAppleturl = $"/pages/index/index?pcode={pcode}&to={par}";//跳转小程序URL
            ViewBag.WeixinAppid = ConfigurationManager.AppSettings["WeixinAppId"];//微信公众号的appid
            ViewBag.POIAppid = ConfigurationManager.AppSettings["POIAppId"];//POI地图导航小程序appId
            ViewBag.Signature = signature;
            ViewBag.Timestamp = timestamp;
            ViewBag.Noncestr = noncestr;