微信小程式初體驗--封裝http請求
最近看了一下微信小程式,大致翻了一下,發現跟angular很相似的,但是比angular簡單的很多具體可參考官方文件
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html?t=2017112
http://www.cnblogs.com/happen-/p/6278327.html
下面將封裝http請求服務部分的服務以及引用部分
// 本服務用於封裝請求 // 返回的是一個promisepromise var sendRrquest = function (url, method, data, header) {var promise = new Promise(function (resolve, reject) { wx.request({ url: url, data: data, method: method, header: header, success: resolve, fail: reject }) }); return promise; }; module.exports.sendRrquest= sendRrquest
在utils檔案中建立檔案requestService.js檔案
下邊是在page.js檔案中引用部分程式碼
// 介面一般通過使用Page函式註冊一個介面,接收一個Object物件,該物件指定了初始化資料/生命週期函式函式/事件處理函式 // data 存放頁面初始化資料資料,類似angular的的$scope // onLoad 生命週期函式 監聽頁面載入 // onReady 生命週期函式 監聽頁面首次渲染完成完成 // onShow 生命週期函式 監聽介面顯示 // onHide 生命週期函式 監聽介面隱藏 // onUnload 生命週期函式 監聽頁面解除安裝 // onPullDownRefresh 頁面相關事件 監聽使用者下拉事件// onReachBottom 頁面上拉到達底部觸發的事件 // onShareAppmessage 點選左上方分享事件 var testService = require('../../utils/testService.js') var request = require('../../utils/requestService.js') Page({ data:{ test:'123', positionlist:[] }, onLoad:function(){ }, onReady: function () { var that = this; testService.test('a'); testService.agerntest('a'); var url = 'https://webapi.tianjihr.com/position/searcher?sort=-refresh_time&offset=10&limit=10'; request.sendRrquest(url, 'GET', {}, {}) .then(function (response) { that.setData({ positionlist:response.data.list }); console.log(response); }, function (error) { console.log(error); }); }, onPullDownRefresh: function () { }, onShareAppMessage: function () { // 微信分享需要的配置引數 return { title: '自定義分享標題', desc: '自定義分享描述', path: '/page/user?id=123' } // console.log(1); } });
上邊的程式碼和js程式碼有不同的程式碼需要注意
1.非同步處理方式改變
原有方式是:
var promise = new Promise(); promise.resolve('成功'); promise.reject('失敗'); return promise;
現有的方式:
return new Promise(function (resolve, reject) { resolve('成功'); reject('失敗'); })
2.在promise成功或者失敗的回撥中不能直接賦值,如:
var that = this; test() .then(function(){ that.data.test=''; },function(){ })
需要使用如下方式:
var that = this; test() .then(function(){ that.setDatat={ test:123 }; },function(){ })
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
var app
= getApp();
function request(url,postData,doSuccess,doFail,doComplete){
var host
= getApp().conf.host;
wx.request({
url:
host+url,
data:postData,
method: 'POST' ,
success: function (res){
if ( typeof doSuccess
== "function" ){
doSuccess(res);
}
},
fail: function ()
{
if ( typeof doFail
== "function" ){
doFail();
}
},
complete: function ()
{
if ( typeof doComplete
== "function" ){
doComplete();
}
}
});
}
}
module.exports.request
= request;
|
相關推薦
微信小程式初體驗--封裝http請求
最近看了一下微信小程式,大致翻了一下,發現跟angular很相似的,但是比angular簡單的很多具體可參考官方文件 https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html?t
微信小程式初體驗,入門練手專案--通訊錄,部署上線(二)
接上一篇《微信小程式初體驗,入門練手專案--通訊錄,後臺是阿里雲伺服器》:https://www.cnblogs.com/chengxs/p/9898670.html 開發微信小程式最尷尬的是好不容易開發完了,卻在程式碼稽核時被卡住了。因為你可能認為你的類目是開放類目中的一個,但是微信可能判
微信小程式初體驗,入門練手專案--通訊錄,後臺是阿里雲伺服器
本文內容: 一、前言 二、相關概念 三、開始工作 四、啟動專案起來 五、專案結構 六、設計理念 七、路由 八、部署線上後端服務 同步交流學習社群: https://www.mwcxs.top/page/440 原始碼地址:https://github.com/sau
微信小程式初體驗,入門練手專案--通訊錄,後臺是阿里雲伺服器(一)
內容: 一、前言 二、相關概念 三、開始工作 四、啟動專案起來 五、專案結構 六、設計理念 七、路由 八、部署線上後端服務 一、前言(坑爹的玩意) 微信小程式自從2017年,被各種看好,不過一段時間過去了還是反響平平,下半年隨著各項功能的開放,很多企業陸續接入了
微信小程式初體驗-列表的上拉載入和下拉重新整理的實現
微信小程式可謂是9月21號之後最火的一個名詞了,一經出現真是轟炸了整個開發人員,當然很多App開發人員有了一個擔心,微信小程式的到來會不會讓移動端App顛覆,讓移動端的程式設計師失業,身為一個Android開發者我是不相信的,即使有,那也是需要個一兩年的過度和打
微信小程式初體驗-helloworld篇
首先,我們需要擁有一個帳號,如果你能看到該文件,我們應當已經邀請併為你建立好一個帳號。注意不可直接使用服務號或訂閱號的 AppID。 利用提供的帳號,登入 https://mp.weixin.qq.com ,就可以在網站的「設定」-「開發者設定」中,檢視到微信小程式的 AppID 了。 注
微信小程式初體驗筆記(圖書館爬蟲)
之前用PHP寫了一個爬蟲,結果圖書館不可以外網訪問,就暫停了,最近加深了一下JS,,發現微信小程式用得是JS開發的前端,用得樣式也是類似於CSS,可惜的是DOM不可以用了。看了兩天API,就上手寫了。主要是用到了input元件和button元件其他的就是正則爬蟲了。下面是de
關於微信小程式後臺常用的http請求類
import java.io.BufferedReader; import java.io.InputStream; import java.io.InputStreamReader; import java.io.OutputStream; import java.net
微信小程式開發中的http請求總結
在微信小程式進行網路通訊,只能和指定的域名進行通訊,微信小程式包括四種類型的網路請求。 普通HTTPS請求(wx.request) 上傳檔案(wx.uploadFile) 下載檔案(wx.downloadFile) WebSocket通訊(wx.connectSocket) 這裡以介紹wx.request
Egret之微信小遊戲初體驗
Egret 微信 小遊戲 一 : 首先介紹2個命令: ①:發布小遊戲 egret public --target wxgame ②:用微信開發者工具打開 egret run --target wxgame 二 : 步驟 ① : 使用egret 5.1.2及其以上的版本創建一個EUI的遊戲項目我使用
微信小程序初體驗,入門練手項目--通訊錄,後臺是阿裏雲服務器(一)
req 推薦 con 時間 com () oot int ngx 內容: 一、前言 二、相關概念 三、開始工作 四、啟動項目起來 五、項目結構 六、設計理念 七、路由 八、部署線上後端服務 同步交流學習社區: https://www.mwcxs.to
微信小程式wx.request()封裝
微信小程式開發過程中,請求用的次數是比較多的,那麼能自己每次的重複程式碼太多,所以還是自己封裝一個請求吧,使程式碼越來越精簡。 現在請求分為兩種一種是GET一種是POST,在微信小程式的請求中POST請求的header中的'content-type'為'applicati
微信小程式初踩坑
剛開始接觸微信小程式,有一點做網站的基礎,會點前端和js,下面是踩坑記錄 tabBar按鈕 1.1 tabBar不要拼錯了,之前有拼成toolbar,不要搞混了 1.2 tabBar上使用到的頁面都要在app.jon中註冊 展示資料 wx:for迴圈顯
微信小程式(一)http://v.juhe.cn不在合法域名列表中
登入微信公眾平臺。點選設定,在request合法域名下填入你所用到的第三方域名。具體如下: 此時,儲存重新整理頁面。回到你的微信開發者工具,清除快取,重新編譯,開啟專案詳情頁面。可以看到合法域名已經更新了。 到這一步已經配置完畢了。 執行程式
微信小程式登入元件封裝 —— 完成已登入狀態才能繼續的操作
小編推薦:Fundebug專注於JavaScript、微信小程式、微信小遊戲,Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務,眾多大佬公司都在使用。 此元件是專案中用到的,專案結束了,分享給大家,希望能對大家有所幫助 這裡只討論怎樣解決需要已
微信小程式初步入坑指南
微信小程式初步入坑小指南 安裝工具 app.json 為json格式的檔案,為一個配置檔案,屬於全域性的 初始化的檔案內容 { "pages":[ "pages/index/index", "pages/logs/l
charles抓取微信小程式資料(抓取http和https資料)
本文中使用的是mac上的抓包工具charles進行抓包,手機是華為榮耀8,安卓版本7.0(其實跟版本沒啥關係) 要想抓取到微信小程式的資料首先要解決的第一個問題件就是如何 通過charles抓取手機上的資料(HTTP) 具體配置過程如下: 第一步,charles上通過
微信小程式 用Promise封裝wx.request(),簡化程式碼結構
在app.js中 新增自定義post方法 //app.js App({ //other code... /** * 自定義post函式,返回Promise *
微信小程式-初入json渲染頁面
最近在弄小程式,感覺資料很少,自己是後端開發,之前自己玩過一點安卓,感覺還行挺像的首先看一下目錄吧在pages下的是頁面,js,css檔案,utils目錄下是工具類的js 可以引入app全域性的,app.json如下,裡面的pages配置頁面的新新增的頁面需要配置在裡面現
微信小程式初常
mypage.wxml <!--pages/mypage/mypage.wxml--> <!--容器--> <!--hover-class='':長按樣式 --&g