原創聲明:本文為作者原創，未經允許不得轉載，經授權轉載需注明作者和出處
STEP 06 微信小程序代碼問題分析
源碼地址：https://github.com/CFETeam/weapp-demo-album
這兒修改成自己的host，全局常量嘛
官方demo 是開發工具0.9版本出的，那時候有Promise 方法，現已移除
直接運行會報如下錯誤：
Promise is not a constructor
解決方案：
在request.js文件頭加上一個引用：
var Promise=require('./bluebird.min.js');
module.exports = (options) => {
return new Promise((resolve, reject) => {
options = Object.assign(options, {
success(result) {
if (result.statusCode === 200) {
resolve(result.data);
} else {
reject(result);
}
},
fail: reject,
});
console.log(options);
wx.request(options);
});
};
“bluebird.min.js”文件可以到百度官方下載（77.4kb）
這里涉及的ES5與ES6 可以參考其他文章學習
在api.js中：
var config = require('../config.js');
module.exports = {
getUrl(route) {
return `https://${config.host}${config.basePath}${route}`;
},
};
即可看到訪問的api方法
STEP 07 微信相冊程序JS分析調試
/page/album/album.js就是我們的核心啦
onload方法
onLoad() {
this.renderAlbumList(); 這一步進行渲染相冊列表
this.getAlbumList().then((resp) => { request 訪問我們服務器再加載數據到頁面的"albumlist" list集合
console.log(resp.data);
this.setData({ 'albumList': this.data.albumList.concat(resp.data) });
this.renderAlbumList(); 再次渲染
});
},
getAlbumList方法
// 獲取相冊列表
getAlbumList() {
this.showLoading('加載列表中…');
setTimeout(() => this.hideLoading(), 1000);
return request({ method: 'GET', url: api.getUrl('/list') });
},
打印出來的訪問：
{method: “GET”, url: “https://www.wxapptest.cc/applet/album/list"}
renderAlbumList方法（這個不是重點）
// 渲染相冊列表
renderAlbumList() {
let layoutColumnSize = this.data.layoutColumnSize;
let layoutList = [];
console.log(this.data.albumList.length);
if (this.data.albumList.length) {
console.log("失敗2");
layoutList = listToMatrix([0].concat(this.data.albumList), layoutColumnSize);
console.log(layoutList);
let lastRow = layoutList[layoutList.length - 1];
if (lastRow.length < layoutColumnSize) {
let supplement = Array(layoutColumnSize - lastRow.length).fill(0);
lastRow.push(...supplement);
}
}
console.log("失敗3");
this.setData({ layoutList });
},
chooseImage方法（前面這么多廢話，就只是為了它 ！上傳）
// 從相冊選擇照片或拍攝照片
chooseImage() {
wx.chooseImage({
count: 9,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
this.showLoading('正在上傳圖片…');
console.log(api.getUrl('/upload'));
wx.uploadFile({
url: api.getUrl('/upload'),
filePath: res.tempFilePaths[0],
name: 'image',
success: (res) => {
let response = JSON.parse(res.data);
if (response.code === 0) {
console.log(response);
let albumList = this.data.albumList;
albumList.unshift(response.data.imgUrl);
this.setData({ albumList });
this.renderAlbumList();
this.showToast('圖片上傳成功');
} else {
console.log(response);
}
},
fail: (res) => {
console.log('fail', res);
},
complete: () => {
this.hideLoading();
},
});
},
});
},
分析重點
wx.uploadFile({
url: api.getUrl('/upload'), 訪問的是這個： https://www.wxapptest.cc/applet/album/upload
filePath: res.tempFilePaths[0],
name: 'image',
success: (res) => {
let response = JSON.parse(res.data);
if (response.code === 0) {
console.log(response);
let albumList = this.data.albumList;
albumList.unshift(response.data.imgUrl); 獲取上傳后的img的url
this.setData({ albumList });
this.renderAlbumList(); 重新刷新渲染頁面
this.showToast('圖片上傳成功');
} else {
console.log(response);
}
},
fail: (res) => {
console.log('fail', res);
},
complete: () => {
this.hideLoading();
},
});
大致效果如下：
出現這個問題莫慌。分析問題出在哪兒，是APP端問題還是SERVER響應問題
先從APP端debug開始：
1.分析APP請求
只是服務器返回的執行的是fail 方法，說明APP沒問題
uploadfile方法其實很簡單，但是我們要學會分析問題的方法
我們繼續追蹤到這個請求，看服務器有沒有接收到
從APP到nginx到nodejs再到對象服務器（COS）
2.接著我們開始查nginx 的log日志
nginx日志在/etc/nginx/logs文件夾下cd /etc/nginx/logs
tail www.qcloud.la.error.log //查看
貼上日志：
2016/12/05 01:16:15 [error] 3731#3731: *10 upstream timed out (110: Connection timed out) while reading response header from upstream, client: 101.244.40.73, server: www.wxapptest.cc, request: "POST /applet/album/upload HTTP/1.1", upstream: "http://127.0.0.1:9993/applet/album/upload", host: "www.wxapptest.cc"
2016/12/05 01:17:10 [error] 3731#3731: *14 upstream timed out (110: Connection timed out) while reading response header from upstream, client: 101.244.40.73, server: www.wxapptest.cc, request: "POST /applet/alb
![Uploading 77554422121jdf2322w_667991.gif . . .]um/upload HTTP/1.1", upstream: "http://127.0.0.1:9993/applet/album/upload", host: "www.wxapptest.cc"
2016/12/05 01:23:29 [error] 3731#3731: *16 upstream timed out (110: Connection timed out) while reading response header from upstream, client: 101.244.40.73, server: www.wxapptest.cc, request: "POST /applet/album/upload HTTP/1.1", upstream: "http://127.0.0.1:9993/applet/album/upload", host: "www.wxapptest.cc"
2016/12/05 01:23:53 [error] 3731#3731: *20 upstream timed out (110: Connection timed out) while reading response header from upstream, client: 101.244.40.73, server: www.wxapptest.cc, request: "POST /applet/album/upload HTTP/1.1", upstream: "http://127.0.0.1:9993/applet/album/upload", host: "www.wxapptest.cc"
2016/12/05 01:25:00 [error] 3731#3731: *23 upstream timed out (110: Connection timed out) while reading response header from upstream, client: 101.244.40.73, server: www.wxapptest.cc, request: "POST /applet/album/upload HTTP/1.1", upstream: "http://127.0.0.1:9993/applet/album/upload", host: "www.wxapptest.cc"
2016/12/05 01:26:54 [error] 3731#3731: *28 upstream timed out (110: Connection timed out) while reading response header from upstream, client: 101.244.40.73, server: www.wxapptest.cc, request: "POST /applet/album/upload HTTP/1.1", upstream: "http://127.0.0.1:9993/applet/album/upload", host: "www.wxapptest.cc"
發現nginx服務器能接受此stream請求，說明nginx并沒有問題
3.接著我們開始查nodejs的log日志
前文中說過
pm2 show 0 指令標明了nodejs進程運行的日志路徑
打開到根路徑：
cd /root/.pm2/logs
tail album-out.log
操作如下：
# tail album-out.log
POST /applet/album/upload - - - - ms
GET /applet/album/list 200 36 - 18.726 ms
GET /applet/album/list 200 36 - 17.683 ms
POST /applet/album/upload - - - - ms
POST /applet/album/upload - - - - ms
POST /applet/album/upload - - - - ms
GET /applet/album/list 200 36 - 16.605 ms
GET /applet/album/list 200 36 - 19.785 ms
GET /applet/album/list 200 36 - 19.398 ms
POST /applet/album/upload - - - - ms
日志已經接收到了POST方法，沒毛病
所以，對于此項目我折騰很久也沒運行起來（主要我并不會nodejs而且COS新版SDK沒時間去看）
總結出是nodejs項目與COS直接的讀取存儲接口發生了問題
downloadImage方法
// 下載圖片
downloadImage() {
this.showLoading('正在保存圖片…');
console.log('download_image_url', this.data.imageInAction);
wx.downloadFile({
url: this.data.imageInAction,
type: 'image',
success: (resp) => {
wx.saveFile({
tempFilePath: resp.tempFilePath,
success: (resp) => {
this.showToast('圖片保存成功');
},
fail: (resp) => {
console.log('fail', resp);
},
complete: (resp) => {
console.log('complete', resp);
this.hideLoading();
},
});
},
fail: (resp) => {
console.log('fail', resp);
},
});
this.setData({ showActionsSheet: false, imageInAction: '' });
},
其實前面講了那么多了，這個wx.downloadFile()方法顯得特別容易理解了
那些重復的話我就不寫了
針對了騰訊相冊這個demo寫了4篇進行了梳理，雖然最后沒跑通，或許是實力欠缺，但是騰訊也太坑了。四篇文章梳理一個完整的全程小程序搭建已經網絡通訊的分析調試
此系列若有講錯的地方，請各位給點建議，互相學習共同提高！！！
共8條評論
Ctrl+Enter
