微信小程式用Promise解決wx.request的非同步時序問題
在app.js中寫一個公用方法(例如獲取使用者資訊),在頁面中要根據使用者資訊變動頁面顯示內容。
由於網路和非同步的問題,經常發生資料獲取在改動頁面顯示內容的程式碼之後。
為了解決這個時序非同步的問題,採用了Promise。
注意:網上查到微信小程式已於2017.12支援Promise,不需要在額外引入js檔案等操作
APP.js:
App({ globalData:{ UserData: '' }, //只在程式啟動時執行一次,獲取使用者資訊以及ID onLaunch: function (Object) { var that = this; }, //獲取使用者資訊 GetUserData:function(){ var that = this; return new Promise(function (resolve, reject) { wx.request({ url: 'XXXX', method: 'POST', data: {略}, header: { 'content-type': 'application/json; charset=utf-8' // 預設值 }, success: function (res) { that.globalData.UserData= res.data; resolve(); } }); }); } })
index.js:
onLoad: function() {
var that = this;
//呼叫
app.GetUserData().then((res) => {
that.setData({ userdata: app.globalData.GetUserData});
});
}
相關推薦
微信小程式用Promise解決wx.request的非同步時序問題
在app.js中寫一個公用方法(例如獲取使用者資訊),在頁面中要根據使用者資訊變動頁面顯示內容。 由於網路和非同步的問題,經常發生資料獲取在改動頁面顯示內容的程式碼之後。 為了解決這個時序非同步的問題,採用了Promise。 注意:網上查到微信小程式已於2017.12支
微信小程式 用Promise封裝wx.request(),簡化程式碼結構
在app.js中 新增自定義post方法 //app.js App({ //other code... /** * 自定義post函式,返回Promise *
微信小程式資料請求方法wx.request
<view wx:for='{{images}}' wx:key = 'index'> <image src='{{item.pic}}'></image> &nbs
微信小程式 豆瓣專案中wx.request遇到的問題
首先說遇到的問題 index.js var API_URL = 'https://api.douban.com/v2/movie/top250'; Page({ data: { movies: [] }, onLoad: function () {
微信小程式開發問題解決,常見BUG總結
小程式開發中的各種坑,進行簡要總結,歡迎填坑` 優化程式碼包 儘量減少程式碼包的大小,因為程式碼包大小直接影響到下載速度,從而影響使用者的首次開啟體驗。2M限制。小程式程式碼包經過編譯後,會放在微信的 CDN 上供使用者下載,CDN 開啟了 GZIP 壓縮,多數圖片格式大大降低程式碼包壓縮率。使用雲伺服器
微信小程式--用video完成一個視訊彈幕的專案
1.視訊播放器 2.選擇彈幕顏色 3.彈幕來了... 第一: index.wxml <!--index.wxml--> <view class="section tc"> <video id="myVideo" style
微信小程式 用canvas繪製的圖插入到分享中
用canvas繪製圖 createNewImg: function () { var that = this; var ctx = wx.createCanvasContext('mycanvas'); ctx.setFillStyle("#F4F4F4"); // context.set
微信小程式之條件渲染 wx:if與hidden比較
wx:if 1、在框架中,使用wx:if="{{condition}}" 來判斷是否需要渲染該程式碼: 如果條件成立就渲染 <view wx:if="{{condition}}">123</view> 2、在花括號中也可以寫條件判斷 <view>
微信小程式用js控制類名的切換用於改變不同的樣式
有時候,介面文字可能會很多,我們一開始設計介面的時候一定希望讓他展示出來幾行就行了,如果使用者需要檢視隱藏的部分,點選展開詳情就能把剩餘的內容顯示出來。 方法可能有些不好,但是實現功能了,有更好的方法可以一起交流哦 配圖解釋 設計樣式: 展開樣式 test.wxml
微信小程式用git進行版本控制的相關操作
一、將專案原始碼上傳到git上 二、下載git上的原始碼到本地 三、在微信小程式開發工具上進行開發 四、上傳程式碼 1.在控制檯進入程式碼所在資料夾 2.提交程式碼方法 git add -A
微擎平臺構建微信小程式應用挖坑解決方案————使用者資訊授權
如果您想加入一個友好的微信小程式開發討論平臺 請加QQ群:173683866【微信小程式技術交流】 微擎是什麼? 為什麼選擇微擎? 傻瓜式構建應用,可以直接
基於mpvue微信小程式 es6-promise.js封裝請求
在微信小程式中,實現前後臺互動用到的介面是wx.request() 在開發的過程中,每個涉及到互動的檔案都要使用wx.request()顯得很繁瑣,而且統一處理起來不方便,比如要改請求頭的話就需要每個檔案去改 所以我就嘗試對wx.request()進行封裝,統一管理起來
微信小程式上傳圖片wx.chooseImage和wx.uploadFile
wxml: <view class="container"> <view class='photo-wrap'> <view class='photo-image-wrap photo-image-wrap
微信小程式用console.log列印json資料
JSON.stringify(fun.nav_more(cp_nav_state)) JSON.parse()和JSON.stringify() JSON.parse() 方法用於將一個 JSON
微信小程式用定時器實現倒計時效果
平常在微信小程式開發的時候,因專案的需求,倒計時必不可少,下面主要講解定時器在微信小程式中的使用。這裡要先宣告一點的就是,該篇主要實現倒計時功能,而且實現是時長較短的倒計時,其他的優化什麼的不作主要考慮。如果實現簡單的60s倒計時效果,我們可直接使用setInterval即可
微信小程式之音訊播放-wx.createInnerAudioContext()小坑
咱們先看看官方示例地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/createInnerAudioContext.html建立innerAudioCon
微信小程式圖表外掛(wx-charts)
微信小程式圖表外掛(wx-charts)基於canvas繪製,體積小巧支援圖表型別餅圖、線圖、柱狀圖 、區域圖等圖表圖形繪製,目前wx-charts是微信小程式圖表外掛中比較強大好使的一個。 wx-charts基於canvas繪製的微信小程式圖表外掛
微信小程式顯示操作選單wx.showActionSheet
wx.showActionSheet({ itemList: ['A', 'B', 'C'], success: function (res) { console.lo
微信小程式用setData修改陣列或物件中的一個屬性值
在page中有如下陣列 data: { info:[ { name:"yuki", tou:"../img/head.jpg", zGong:130, gMoney:222222
微信小程式:列表渲染 wx:for
wx:for 也可以巢狀,下邊是一個九九乘法表 <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">