H5跳轉小程式，微信開放標簽wx-open-launch-weapp完整流程說明（踩坑之路）

近來做一個H5跳轉小程式的需求，一開始覺得沒啥留到后面再做，結果前期的大意造成了后期不斷的踩坑跳坑，對規則的不甚理解造成了這樣的一種現狀，為了后來的人不要和我一樣，我就寫了這篇講一些具體會遇到的情況，大家如果遇到可以按照我這樣做，我現在按照順序一步一步的把我的踩坑之路講述出來，

具體問題如下：
1.系結域名；
2.簽名演算法；
3.IP白名單；
4.config配置；
5.標簽的顯示；

一、首先是按照開放標簽的步驟來，注意設定js安全域名對應的是小程式的公眾號的安全域名，只有設定在那邊才能開始第二步，
二、引入完js檔案后，然后開始配置wx.config，涉及到簽名演算法（js-sdk使用權限簽名演算法），點進去附錄一看具體的操作

三、建議簽名演算法在后端完成，進去了之后像是發現了新世界，其實里面還是有許多坑要踩，首先是獲取access_token，再打開它的說明檔案，哇哦，又進入了一個新世界，是不是很刺激啊~~（https://github.com/night-king/weixinSDK 找到簽名演算法的代碼，大家有興趣可以看一下，不止簽名演算法，里面集成了很多代碼）

1. access_token需要公眾號的appid和appsecret（注意是小程式對應的公眾號）就按檔案講的get請求，這塊還有一點注意，就是在服務器上除錯需要將域名放入IP白名單，具體的設定在公眾號上面有，這塊非常重要千萬注意，不然會跳出40048這個錯誤碼，
2. 然后是jsapi_ticket同樣按照get請求獲得，這個如果access_token是對那必然也會成功，
3. 接下來是隨機字串（建議16位，因為官方示例也是16位）

         ///<param name="length">目標字串的長度</param>
         ///<param name="useNum">是否包含數字，1=包含，默認為包含</param>
         ///<param name="useLow">是否包含小寫字母，1=包含，默認為包含</param>
         ///<param name="useUpp">是否包含大寫字母，1=包含，默認為包含</param>
         ///<param name="useSpe">是否包含特殊字符，1=包含，默認為不包含</param>
         ///<param name="custom">要包含的自定義字符，直接輸入要包含的字串列</param>
        ///<returns>指定長度的隨機字串</returns>
        public static string GetRandomString(int length, bool useNum, bool useLow, bool useUpp, bool useSpe, string custom)
        {
            byte[] b = new byte[4];
            new System.Security.Cryptography.RNGCryptoServiceProvider().GetBytes(b);
            Random r = new Random(BitConverter.ToInt32(b, 0));
            string s = null, str = custom;
            if (useNum == true) { str += "0123456789"; }
            if (useLow == true) { str += "abcdefghijklmnopqrstuvwxyz"; }
             if (useUpp == true) { str += "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; }
             if (useSpe == true) { str += "!\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~"; }
            for (int i = 0; i < length; i++)
           {
                s += str.Substring(r.Next(0, str.Length - 1), 1);
            }
            return s;
        }

5. 接下來是時間戳

      public static long CreateTimestamp()
      {
          return (DateTime.Now.ToUniversalTime().Ticks - 621355968000000000) / 10000000;
      }

6. 簽名的url必須和你前端的url（也就是你要跳小程式之前的HTML）相同，注意要用http
7. 簽名加密

        /// <summary>
        /// 簽名演算法
        /// </summary>
        /// <param name="jsapi_ticket">jsapi_ticket</param>
        /// <param name="noncestr">隨機字串(必須與wx.config中的nonceStr相同)</param>
        /// <param name="timestamp">時間戳(必須與wx.config中的timestamp相同)</param>
        /// <param name="url">當前網頁的URL，不包含#及其后面部分(必須是呼叫JS介面頁面的完整URL)</param>
        /// <returns></returns>
        public static string GetSignature(string jsapi_ticket, string noncestr, long timestamp, string url, out string string1)
        {
            var string1Builder = new StringBuilder();
            string1Builder.Append("jsapi_ticket=").Append(jsapi_ticket).Append("&")
                          .Append("noncestr=").Append(noncestr).Append("&")
                          .Append("timestamp=").Append(timestamp).Append("&")
                          .Append("url=").Append(url.IndexOf("#") >= 0 ? url.Substring(0, url.IndexOf("#")) : url);
            string1 = string1Builder.ToString();
            return Sha1(string1);
        }


        /// <summary>
        /// Sha1
        /// </summary>
        /// <param name="orgStr"></param>
        /// <param name="encode"></param>
        /// <returns></returns>
        public static string Sha1(string orgStr, string encode = "UTF-8")
        {
            var sha1 = new SHA1Managed();
            var sha1bytes = System.Text.Encoding.GetEncoding(encode).GetBytes(orgStr);
            byte[] resultHash = sha1.ComputeHash(sha1bytes);
            string sha1String = BitConverter.ToString(resultHash).ToLower();
            sha1String = sha1String.Replace("-", "");
            return sha1String;
        }

8. 前面如果都是正確的話后面簽名應該是沒問題的，重要的在于url必須要相同，這個要千萬注意，不然后面會瘋狂彈出60032這個錯誤碼這個問題，IP白名單里面的操作也要注意，總之簽名演算法這塊要跟著規則來，如果第一次做的要多看幾次我的描述，不然后面出現的問題會很多，

四、wx.config的配置，這個要按照官方檔案來，剛進去頁面就要從后端請求相關資料，然后再在里面開始配置config

1. debug，一般為false，如果前期除錯可以寫成true
2. appid，注意這里還是要公眾號的appid不是小程式的appid！
3. timestemp，簽名的時間戳前面已經生成了拿來用就行了
4. noncestr，同上
5. signature，同上
6. jsapilist，這個必填不能不填，隨便填一個都行
7. opentaglist，我們是HTML網頁跳轉的所以填[“wx-open-launch-weapp”]
8. wx.ready這個為配置成功的回傳方法，要寫上去，不然可能蘋果手機會出現按鈕稍縱即逝（出現又消失）的情況

五、標簽的設定，wx-open-launch-weapp這個標簽具體幾個屬性說下

1. username這個屬性指的是你要跳轉的小程式的原始ID，這個要進小程式查設定就能知道
2. path為你要跳到的小程式的頁面，可以帶引數跳轉
3. 特別注意，這個按鈕點擊是跳轉的，點擊之前簽名屬性什么的都配置好了，如果配置好了按鈕會出現，如果沒有出現，那就是沒有配置好，

一般到了這里基本上就沒問題了，如果還有問題要多看我上面寫的，特別是配置域名和ip白名單這兩個地方，

附上：簽名演算法資源