可修改式基礎地址
config.js
~~~
var config={
base_api_url:"http://douban.uieee.com/v2/"
}
export {
config
}
~~~
Promise封裝HTTP
utils/http.js
~~~
import { config } from "../config";
class HTTP {
request({url,method="GET",data={}}) {
const promise = new Promise((resolve, reject) => {
wx.request({
url: config.base_api_url + url,
data,
method,
header: {
'Content-Type': 'json',
},
success: (res=>{
const statusCode = res.statusCode.toString();
if (statusCode.startsWith("2")) {
resolve(res.data);
} else {
this._show_error();
}
}),
fail: (err=> {
reject(err);
this._show_error();
})
})
})
return promise;
}
_show_error() {
wx.showToast({
title: '網絡錯誤',
icon: 'none'
})
}
}
export {
HTTP
};
~~~
繼承類MovieModel再次封裝
models/movie.js
~~~
import {HTTP} from "../utils/http";
class MovieModel extends HTTP{
getInTheaters(){
return this.request({
url:"in_theaters"
})
}
getTop250(){
return this.request({
url:"top250"
})
}
getComingSoon(){
return this.request({
url:"coming_soon"
})
}
}
export {MovieModel};
~~~
頁面調用HTTP
Promise.all().then(res=>{}),res會生成一個數組,需要用數組裝載
~~~
import {MovieModel} from "../../models/movie-p";
const movieModel = new MovieModel();
Page({
onLoad(){
const inTheaters = movieModel.getInTheaters()
const top250 = movieModel.getTop250();
const comingSoon = movieModel.getComingSoon();
Promise.all([inTheaters,top250,comingSoon]).then(res=>{
let [inTheaters,top250,comingSoon] = res;
console.log(inTheaters);
console.log(top250);
console.log(comingSoon);
})
}
})
~~~
- 小程序環境配置
- 1.生命周期
- 頁面生命周期
- 組件生命周期
- 2.小程序組件
- 點擊事件bindtap|catchtap
- swiper輪播
- wx:for循環
- 播放音樂
- map
- tabBar底部頁面切換
- scroll-view可滾動視圖區域。
- web-view裝載顯示網頁
- priviewImage新頁面預覽照片
- chooseImage本地選擇照片
- onReachBottom上拉刷新,加載等待條
- setStorage緩存
- showToast彈出提示框
- slot父組件wxml傳遞到子組件
- form表單
- 小程序.wxs,方法在.wxml調用
- 3.組件前身:模板、模板傳參
- 4.自定義組件、組件傳參|傳wxss|wxml代碼
- 5.小程序正則
- 6.小程序頁面跳轉
- 7.open-type 微信開放功能
- 實例
- 1.第一個實例 hello world
- 2.第二個實例豆瓣電影數據渲染
- 豆瓣1.0基本版
- 豆瓣2.0升級版
- 豆瓣3.0豪華版
- 3.第三個實例多接口在同一頁面使用
- HTTP封裝
- 基礎報錯提示,類式封裝
- Promise回調,類式封裝