1. 程式人生 > >微信小程式初體驗--封裝http請求

微信小程式初體驗--封裝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