近来做一个H5跳转小程序的需求，一开始觉得没啥留到后面再做，结果前期的大意造成了后期不断的踩坑跳坑，对规则的不甚理解造成了这样的一种现状，为了后来的人不要和我一样，我就写了这篇讲一些具体会遇到的情况，大家如果遇到可以按照我这样做，我现在按照顺序一步一步的把我的踩坑之路讲述出来。
具体问题如下：
1.绑定域名；
2.签名算法；
3.IP白名单；
4.config配置；
5.标签的显示；
一、首先是按照开放标签的步骤来，注意设置js安全域名对应的是小程序的公众号的安全域名，只有设置在那边才能开始第二步。
二、引入完js文件后，然后开始配置wx.config，涉及到签名算法（js-sdk使用权限签名算法），点进去附录一看具体的操作
三、建议签名算法在后端完成，进去了之后像是发现了新世界，其实里面还是有许多坑要踩。首先是获取access_token，再打开它的说明文档，哇哦，又进入了一个新世界，是不是很刺激啊~~（https://github.com/night-king/weixinSDK 找到签名算法的代码，大家有兴趣可以看一下，不止签名算法，里面集成了很多代码）
- access_token需要公众号的appid和appsecret（注意是小程序对应的公众号）就按文档讲的get请求，这块还有一点注意，就是在服务器上调试需要将域名放入IP白名单，具体的设置在公众号上面有，这块非常重要千万注意，不然会跳出40048这个错误码。
- 然后是jsapi_ticket同样按照get请求获得，这个如果access_token是对那必然也会成功。
- 接下来是随机字符串（建议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;
}
- 接下来是时间戳
public static long CreateTimestamp()
{
return (DateTime.Now.ToUniversalTime().Ticks - 621355968000000000) / 10000000;
}
- 签名的url必须和你前端的url（也就是你要跳小程序之前的HTML）相同，注意要用http
- 签名加密
/// <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;
}
- 前面如果都是正确的话后面签名应该是没问题的，重要的在于url必须要相同，这个要千万注意，不然后面会疯狂弹出60032这个错误码这个问题，IP白名单里面的操作也要注意，总之签名算法这块要跟着规则来，如果第一次做的要多看几次我的描述，不然后面出现的问题会很多。
四、wx.config的配置，这个要按照官方文档来，刚进去页面就要从后端请求相关数据，然后再在里面开始配置config
- debug，一般为false，如果前期调试可以写成true
- appid，注意这里还是要公众号的appid不是小程序的appid！
- timestemp，签名的时间戳前面已经生成了拿来用就行了
- noncestr，同上
- signature，同上
- jsapilist，这个必填不能不填，随便填一个都行
- opentaglist，我们是HTML网页跳转的所以填[“wx-open-launch-weapp”]
- wx.ready这个为配置成功的返回方法，要写上去，不然可能苹果手机会出现按钮稍纵即逝（出现又消失）的情况
五、标签的设置，wx-open-launch-weapp这个标签具体几个属性说下
- username这个属性指的是你要跳转的小程序的原始ID，这个要进小程序查设置就能知道
- path为你要跳到的小程序的页面，可以带参数跳转
- 特别注意，这个按钮点击是跳转的，点击之前签名属性什么的都配置好了，如果配置好了按钮会出现，如果没有出现，那就是没有配置好。
一般到了这里基本上就没问题了，如果还有问题要多看我上面写的，特别是配置域名和ip白名单这两个地方。