微信开发常用技巧(1)-微信分享页用户名称带输入法头像解决方案

来源:互联网 发布:网络技术员需要会什么 编辑:程序博客网 时间:2024/05/16 06:27

微信分享页用户名称带输入法头像解决方案

微信开发的分享页,开发者通常都是用代码获取url的参数值来输入到页面,这里会有两个问题

1.怎么获取url的参数值;
2. 用户头像需要转码;
3. 用户可能使用输入法自带的表情来命名;ps:然而微信居然支持这种操作


解:

1.怎么获取url的参数值:

function GetRequest() {            var url = location.search; //获取url中"?"符后的字串            var theRequest = new Object();            if(url.indexOf("?") != -1) {                var str = url.substr(1);                strs = str.split("&");                for(var i = 0; i < strs.length; i++) {                    theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);                }            }            return theRequest;        }//用法GetRequest().nickname

2.用户头像需要转码这个很简单使用js自带的encodeURIComponent和decodeURIComponent就可以解决
代码如下:

//这个是加密encodeURIComponent("==")//这个是解码encodeURIComponent("==")

3.用户可能使用输入法自带的表情来命名、

我看到很多微信的网站都没有去解决的这个在url传这种参数,通常是直接用通用解码方式如:
(1)encode来传,但是用户体验不是很好,因为图标昵称就没有了变成了一个框,
(2)页面发送请求,从后台获取,这对与一个单个分享页面是没有必要的。
研究了一下后发现可以用base64来编码解决,网上百度了很多有的不能用,假的,
终于找到一个可以用的代码(因为base64可能产生+/=,等符号会对获取hash有影响,建议!!加上encodeURIComponent转码):

(function(root, factory) {    if (typeof define === "function" && define.amd) {        define([], factory);    } else if (typeof module === "object" && module.exports) {        module.exports = factory();    } else {        root.Base = factory();    }}(this, function() {    'use strict';    function Base64() {        // private property        this._keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";    }    //public method for encoding    Base64.prototype.encode = function (input) {        var output = "", chr1, chr2, chr3, enc1, enc2, enc3, enc4, i = 0;        input = this._utf8_encode(input);        while (i < input.length) {            chr1 = input.charCodeAt(i++);            chr2 = input.charCodeAt(i++);            chr3 = input.charCodeAt(i++);            enc1 = chr1 >> 2;            enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);            enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);            enc4 = chr3 & 63;            if (isNaN(chr2)) {                enc3 = enc4 = 64;            } else if (isNaN(chr3)) {                enc4 = 64;            }            output = output +                this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +                this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);        }        return output;    }    // public method for decoding    Base64.prototype.decode = function (input) {        var output = "", chr1, chr2, chr3, enc1, enc2, enc3, enc4, i = 0;        input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");        while (i < input.length) {            enc1 = this._keyStr.indexOf(input.charAt(i++));            enc2 = this._keyStr.indexOf(input.charAt(i++));            enc3 = this._keyStr.indexOf(input.charAt(i++));            enc4 = this._keyStr.indexOf(input.charAt(i++));            chr1 = (enc1 << 2) | (enc2 >> 4);            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);            chr3 = ((enc3 & 3) << 6) | enc4;            output = output + String.fromCharCode(chr1);            if (enc3 != 64) {                output = output + String.fromCharCode(chr2);            }            if (enc4 != 64) {                output = output + String.fromCharCode(chr3);            }        }        output = this._utf8_decode(output);        return output;    }    // private method for UTF-8 encoding    Base64.prototype._utf8_encode = function (string) {        string = string.replace(/\r\n/g,"\n");        var utftext = "";        for (var n = 0; n < string.length; n++) {            var c = string.charCodeAt(n);            if (c < 128) {                utftext += String.fromCharCode(c);            } else if((c > 127) && (c < 2048)) {                utftext += String.fromCharCode((c >> 6) | 192);                utftext += String.fromCharCode((c & 63) | 128);            } else {                utftext += String.fromCharCode((c >> 12) | 224);                utftext += String.fromCharCode(((c >> 6) & 63) | 128);                utftext += String.fromCharCode((c & 63) | 128);            }        }        return utftext;    }    // private method for UTF-8 decoding    Base64.prototype._utf8_decode = function (utftext) {        var string = "", i = 0, c = 0, c1 = 0, c2 = 0, c3 = 0;        while ( i < utftext.length ) {            c = utftext.charCodeAt(i);            if (c < 128) {                string += String.fromCharCode(c);                i++;            } else if((c > 191) && (c < 224)) {                c2 = utftext.charCodeAt(i+1);                string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));                i += 2;            } else {                c2 = utftext.charCodeAt(i+1);                c3 = utftext.charCodeAt(i+2);                string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));                i += 3;            }        }        return string;    }    var Base = new Base64();    return Base;}));var result = encodeURIComponent(Base.encode('125中文'));  //--> "MTI15Lit5paH"console.log(result);//2.解密var result2 = Base.decode(decodeURIComponent(result)); //--> '125中文'console.log(result2);
原创粉丝点击