微信小程式前端傳到伺服器後端中文亂碼問題(附AES)
微信小程式前端傳到伺服器後端中文亂碼問題
問題描述
微信小程式通過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.首