微信小程式前端傳到伺服器後端中文亂碼問題

問題描述

微信小程式通過wx.request介面連線伺服器並傳送data的json格式時，中文會出現亂碼現象

解決辦法

這裡給出我研究出來的解決辦法。先將你要傳送的資料進行AES加密，在後臺進行AES解密即可。雖然辦法稍微有點複雜，但是對於處理亂碼現象和增強資料的保密性安全性都有很大的幫助

這裡簡單說一下AES加解密的步驟：
1.前端運用到util.js和AES.js兩個檔案，其中在util.js裡面運用AES.js檔案設定有金鑰和偏移iv
2.在需要傳輸資料的demo.js中用util.js檔案暴露出來的介面方法encrypt加密
3.AESOperator.java是後端的工具類，在後端用其進行解密即可

程式碼如下

微信小程式前端程式碼

demo.js

var CryptoJS = require('../../util/util.js')

var name = CryptoJS.Encrypt('xxx');
wx.request({
      url: 'xxx',
      method: 'POST',
      dataType: 'STRING',
      data: {
		name:name
      },
      header: {
        'content-type': 'application/json' // 預設值
      },
      success:
 
 function (res) {
        console.log(JSON.parse(res.data))
      },
    })

demo.js主要用到了AES.js暴露的方法Encrypt，這裡注意要先require AES.js 過來才能使用它暴露的方法

Util.js

var CryptoJS = require('AES.js');
var key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF");
var iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412');
// AES加密
 

function Encrypt(word) {
  var srcs = CryptoJS.enc.Utf8.parse(word);
  var encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
  encrypted =encrypted.ciphertext.toString().toUpperCase();
  return encrypted;
}
// AES解密
function Decrypt(word) {
  var encryptedHexStr = CryptoJS.enc.Hex.parse(word);
  var srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
  var decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
  var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
  return decryptedStr.toString();
}
module.exports = {
  Encrypt: Encrypt,
  Decrypt: Decrypt,
}

AES.js

var CryptoJS = CryptoJS || function(u, p) {
  var d = {},
    l = d.lib = {},
    s = function() {},
    t = l.Base = {
      extend: function(a) {
        s.prototype = this;
        var c = new s;
        a && c.mixIn(a);
        c.hasOwnProperty("init") || (c.init = function() {
          c.$super.init.apply(this, arguments)
        });
        c.init.prototype = c;
        c.$super = this;
        return c
      },
      create: function() {
        var a = this.extend();
        a.init.apply(a, arguments);
        return a
      },
      init: function() {},
      mixIn: function(a) {
        for (var c in a) a.hasOwnProperty(c) && (this[c] = a[c]);
        a.hasOwnProperty("toString") && (this.toString = a.toString)
      },
      clone: function() {
        return this.init.prototype.extend(this)
      }
    },
    r = l.WordArray = t.extend({
      init: function(a, c) {
        a = this.words = a || [];
        this.sigBytes = c != p ? c : 4 * a.length
      },
      toString: function(a) {
        return (a || v).stringify(this)
      },
      concat: function(a) {
        var c = this.words,
          e = a.words,
          j = this.sigBytes;
        a = a.sigBytes;
        this.clamp();
        if (j % 4)
          for (var k = 0; k < a; k++) c[j + k >>> 2] |= (e[k >>> 2] >>> 24 - 8 * (k % 4) & 255) << 24 - 8 * ((j + k) % 4);
        else if (65535 < e.length)
          for (k = 0; k < a; k += 4) c[j + k >>> 2] = e[k >>> 2];
        else c.push.apply(c, e);
        this.sigBytes += a;
        return this
      },
      clamp: function() {
        var a = this.words,
          c = this.sigBytes;
        a[c >>> 2] &= 4294967295 <<
          32 - 8 * (c % 4);
        a.length = u.ceil(c / 4)
      },
      clone: function() {
        var a = t.clone.call(this);
        a.words = this.words.slice(0);
        return a
      },
      random: function(a) {
        for (var c = [], e = 0; e < a; e += 4) c.push(4294967296 * u.random() | 0);
        return new r.init(c, a)
      }
    }),
    w = d.enc = {},
    v = w.Hex = {
      stringify: function(a) {
        var c = a.words;
        a = a.sigBytes;
        for (var e = [], j = 0; j < a; j++) {
          var k = c[j >>> 2] >>> 24 - 8 * (j % 4) & 255;
          e.push((k >>> 4).toString(16));
          e.push((k & 15).toString(16))
        }
        return e.join("")
      },
      parse: function(a) {
        for (var c = a.length, e = [], j = 0; j < c; j += 2) e[j >>> 3] |= parseInt(a.substr(j,
          2), 16) << 24 - 4 * (j % 8);
        return new r.init(e, c / 2)
      }
    },
    b = w.Latin1 = {
      stringify: function(a) {
        var c = a.words;
        a = a.sigBytes;
        for (var e = [], j = 0; j < a; j++) e.push(String.fromCharCode(c[j >>> 2] >>> 24 - 8 * (j % 4) & 255));
        return e.join("")
      },
      parse: function(a) {
        for (var c = a.length, e = [], j = 0; j < c; j++) e[j >>> 2] |= (a.charCodeAt(j) & 255) << 24 - 8 * (j % 4);
        return new r.init(e, c)
      }
    },
    x = w.Utf8 = {
      stringify: function(a) {
        try {
          return decodeURIComponent(escape(b.stringify(a)))
        } catch (c) {
          throw Error("Malformed UTF-8 data");
        }
      },
      parse: function(a) {
        return b.parse(unescape(encodeURIComponent(a)))
      }
    },
    q = l.BufferedBlockAlgorithm = t.extend({
      reset: function() {
        this._data = new r.init;
        this._nDataBytes = 0
      },
      _append: function(a) {
        "string" == typeof a && (a = x.parse(a));
        this._data.concat(a);
        this._nDataBytes += a.sigBytes
      },
      _process: function(a) {
        var c = this._data,
          e = c.words,
          j = c.sigBytes,
          k = this.blockSize,
          b = j / (4 * k),
          b = a ? u.ceil(b) : u.max((b | 0) - this._minBufferSize, 0);
        a = b * k;
        j = u.min(4 * a, j);
        if (a) {
          for (var q = 0; q < a; q += k) this._doProcessBlock(e, q);
          q = e.splice(0, a);
          c.sigBytes -= j
        }
        return new r.init(q, j)
      },
      clone: function() {
        var a = t.clone.call(this);
        a._data = this._data.clone();
        return a
      },
      _minBufferSize: 0
    });
  l.Hasher = q.extend({
    cfg: t.extend(),
    init: function(a) {
      this.cfg = this.cfg.extend(a);
      this.reset()
    },
    reset: function() {
      q.reset.call(this);
      this._doReset()
    },
    update: function(a) {
      this._append(a);
      this._process();
      return this
    },
    finalize: function(a) {
      a && this._append(a);
      return this._doFinalize()
    },
    blockSize: 16,
    _createHelper: function(a) {
      return function(b, e) {
        return (new a.init(e)).finalize(b)
      }
    },
    _createHmacHelper: function(a) {
      return function(b, e) {
        return (new n.HMAC.init(a,
          e)).finalize(b)
      }
    }
  });
  var n = d.algo = {};
  return d
}(Math);
(function() {
  var u = CryptoJS,
    p = u.lib.WordArray;
  u.enc.Base64 = {
    stringify: function(d) {
      var l = d.words,
        p = d.sigBytes,
        t = this._map;
      d.clamp();
      d = [];
      for (var r = 0; r < p; r += 3)
        for (var w = (l[r >>> 2] >>> 24 - 8 * (r % 4) & 255) << 16 | (l[r + 1 >>> 2] >>> 24 - 8 * ((r + 1) % 4) & 255) << 8 | l[r + 2 >>> 2] >>> 24 - 8 * ((r + 2) % 4) & 255, v = 0; 4 > v && r + 0.75 * v < p; v++) d.push(t.charAt(w >>> 6 * (3 - v) & 63));
      if (l = t.charAt(64))
        for (; d.length % 4;) d.push(l
            
  
           

              
              
            
            
相關推薦
			   
            
            
            
 

    

    
    
微信小程式前端介面和後端伺服器(PHP)的對接
     
 
                關於微信小程式的介面編寫的資料和書籍比比皆是，很容易找到。也就是說似乎大家都忙於處理表面的皮的技術的專研，但我一直好奇這層皮和後端伺服器是如何通訊交流的，如何實現資訊交換的。所以本文重點研究這部分知識。1、-- 最簡單的前端和後端通訊的例程前端：*.wxml裡建立一個按鈕，呼 

  
 

    

    
    
微信小程式前端傳到伺服器後端中文亂碼問題(附AES)
     
  
  
  
 微信小程式前端傳到伺服器後端中文亂碼問題 
 問題描述 
 微信小程式通過wx.request介面連線伺服器並傳送data的json格式時，中文會出現亂碼現象 
 解決辦法 
 這裡給出我研究出來的解決辦法。先將你要傳送的資料進行AES加密，在後臺進行AES解密即可。雖然辦法稍微有點複雜，但 

  
 

    

    
    
微信小程式-獲取使用者資訊-後端寫法
     
  
 
 之前介紹了兩種小程式獲取使用者資訊的寫法，其中第二種需要後端配合完成。 
 後端我使用了一個第三方的 jar 包： 
  
 我使用的是 2.9.6.BETA 版本。 
 這個版本提供了通過微信引數解析使用者資訊的方法，只要在配置檔案中把微信小程式的資訊配置完成就可以直接使用，非常方便。  

  
 

    

    
    
微信小程式下載檔案，後端PHP處理流程
     
 
								
								            
						
                 有問題可以掃碼加我微信，有償解決問題。承接小程式開發。

微信小程式開發交流qq群   173683895  、 526474645 ；

正文：


場景：微信小程式呼叫 wx.downloadFi 

  
 

    

    
    
WebApi接收微信小程式上傳的圖片（二進位制檔案流）並儲存在伺服器指定路徑
     
  
  
  
 找了好多天都沒找到小程式批量上傳圖片的方法，然後我現在的邏輯是： 
  
  取到上傳圖片的集合，迴圈呼叫小程式wx.UploadFile方法,依次上傳 
  後端取到檔案之後生成唯一MD5碼（相同的檔案生成的MD5碼是唯一的），然後取前兩位後兩位建立資料夾，儲存圖片前判斷下圖片是否存在。（ 

  
 

    

    
    
微信小程式上傳圖片功能（附後端程式碼）
     
  
 
 幾乎每個程式都需要用到圖片，在小程式中我們可以通過image元件顯示圖片。 
 當然小程式也是可以上傳圖片的，微信小程式文件也寫的很清楚。 
 上傳圖片 
 首先選擇圖片 
 通過wx.chooseImage(OBJECT)實現 
  
 官方示例程式碼 
 ? 
 
  
   
     1 2 

  
 

    

    
    
微信小程式上傳圖片(附後端程式碼)
     
 
							
							
							幾乎每個程式都需要用到圖片。 
在小程式中我們可以通過image元件顯示圖片。

當然小程式也是可以上傳圖片的，微信小程式文件也寫的很清楚。



上傳圖片


  首先選擇圖片


通過wx.chooseImage(OBJECT)實現



官方示例程式碼

 

  
 

    

    
    
微信小程式上傳圖片到伺服器
     
 
							
							
							



這就讓我有點懵，不知道該不該寫上header~ 
再看看程式碼，感覺沒有什麼問題，反正呼叫API來回來去都是那幾句話：

   wx.uploadFile({
      url: 'url',
      filePath: that.data.ima 

  
 

    

    
    
微信小程式 —— 上傳檔案到伺服器（例：上傳圖片到伺服器）
     
 
								
								            
							
							
							上傳圖片到伺服器：

1.先在前端寫一個選擇圖片的區域來觸發wx.chooseImage介面並用wx.setStorage介面把圖片路徑存起來。




-wxml
  <view class=" 

  
 

    

    
    
微信小程式上傳多圖到伺服器並獲取返回的路徑
     
 
                
微信小程式上傳圖片很簡單：
//點選選擇圖片
  chooseimage:function(){
    var that = this;
    wx.chooseImage({
       count: 9, // 預設9 
      sizeType: ['ori 

  
 

    

    
    
微信小程式上傳圖片到伺服器wx.uploadFile
     
  
 
 專案中肯定會遇到上傳檔案到伺服器端，小程式提供了很有用的api 
 wxml程式碼： 
 <image  mode='widthFix' src="{{imgUrl}}"></image>
<view bindtap="getPhoto">上傳圖片</vie 

  
 

    

    
    
微信小程式上傳圖片到php伺服器
     
 
								
								            
							
							
							js程式碼如下



 submitPhoto(){
    var that = this;
    wx.uploadFile({
      url: 'http://xxx.cn/upload. 

  
 

    

    
    
微信小程式需求IIS伺服器配置https關於SSL,TLS的綜合解決方案
     
  
 
 1.伺服器安裝證書：必須確保證書是sha256RSA簽名演算法的，反正sha1是肯定出問題。 
  
 2.為了保證小程式在IOS上正常執行，必須保證伺服器的TLS為1.2及以上版本，下面網址可以測試你伺服器的證書等情況： 
  https://www.ssllabs.com/ssltes 

  
 

    

    
    
微信小程式上傳圖片，視訊及預覽
     
 wxml 
 
 <!-- 圖片預覽 -->
<view class='preview-warp' wx:if="{{urls}}">
  <image  src='{{urls}}' />
</view>
<view class="prew_video" 

  
 

    

    
    
微信小程式上傳(多個檔案上傳)
     
  
 
  
  
 微信小程式上傳(多個檔案上傳) 
 /**
  * 上傳照片//選擇圖片時限制9張，如需超過9張，同理亦可參照此方法上傳多張照片
  */
uploadImg:function(){
   var that = this;
   wx.chooseImage({
       count 

  
 

    

    
    
微信小程式 上傳圖片至阿里雲OSS（支援多圖片上傳）
     
  
 
 
 我們先講下為什麼要把圖片檔案上傳到雲伺服器呢， 有什麼好處呢？ 
 1、能減輕我們自己伺服器的頻寬 
 如果一個程式裡有多處地方用到使用者上傳圖片等功能的話，建議還是放到阿里雲或者千牛雲等其他平臺上來儲存我們的圖片，可以給公司的伺服器減少很多壓力，磁碟儲存也就不會太大 
 2、提升使用者體驗感  

  
 

    

    
    
微信小程式 —— 頁面傳值
     
 小程式頁面傳值的方式： 
1.正向傳值：上一頁面 -->  下一頁面 
 
 url傳值 
 本地儲存 
 全域性的app物件 
 
2.反向傳值：下一頁面 -->  上一頁面 
 
 本地儲存 
 全域性的app物件 
 
先說一下正向傳值： 
1.url傳值： 
  

  
 

    

    
    
微信小程式元件傳值的實驗
     
  
 
  
  
 實驗目的 
 驗證微信小程式框架wepy元件之間進行資料傳遞的猜想與疑問  1. 猜想一: 元件在進行傳值的時候:<my-content :item.sync="myDate.item">這種寫法是否支援?  2. 猜想二: 元件中是否可以引用其他元件,並進行資料傳遞 
 實 

  
 

    

    
    
微信小程式同聲傳譯 Face2FaceTranslator 開發
     
  
 
  
  
 微信小程式同聲傳譯 Face2FaceTranslator 開發 
  
  騰訊開源了微信小程式的同聲傳譯外掛 Face2FaceTranslator ;開發者可以在小程式使用同聲傳譯的功能，以下是本人在專案中做的 demo；我們的小程式是用美團的 mpvue 做的。 
  
 Fac 

  
 

    

    
    
java接收微信小程式上傳的檔案
     
  
 
 用微信小程式上傳檔案,微信會生成一個wx://開頭的臨時地址,很多人看到這個臨時地址直接懵逼了,檔案在哪裡啊,怎麼取檔案,其實檔案流就在請求頭裡面,需要自己去讀取.一開始我也走了很多彎路,查閱了幾篇帖子,其實都有一些坑沒有指出來.為了方便以後大家程式碼複用,我在此做一個整合.避免後人掉坑.
 1.首