可修改式基础地址
config.js
~~~
var config={
base_api_url:"http://douban.uieee.com/v2/"
}
export {
config
}
~~~
HTTP封装
utils/http.js
~~~
import { config } from "../config";
class HTTP {
request(params) {
if (!params.method) {
params.method = "GET";
}
wx.request({
url: config.base_api_url + params.url,
method: params.method,
data: params.data,
header: {
"Content-Type": "json"
},
success: function (res) {
var statusCode = res.statusCode.toString();
if (statusCode.startsWith("2")) {
params.success(res.data);
} else {
wx.showToast({
title: "网络错误",
icon: "none"
});
}
}
})
}
}
export {
HTTP
}
~~~
继承类传递url继续封装
models/movie.js
~~~
import { HTTP} from "../utils/http";
const movie = "movie/"
class MovieModel extends HTTP{
getTop250(callback) {
this.request({
url: movie + "top250",
success: res => {
callback(res);
}
})
}
getComingSoon(callback) {
this.request({
url: movie + "coming_soon",
success: res => {
callback(res);
}
})
}
}
export {
MovieModel
}
~~~
页面调用封装的HTTP和MovieModel（两者二选一）
~~~
import {HTTP} from "../../utils/http";
const httpTop250 = new HTTP();
import {MovieModel} from "../../models/movie";
const movie = new MovieModel();
onLoad: function (options) {
// httpTop250.request({
// url: "top250",
// success: res=>{
// console.log(res);
// }
// })
movie.getTop250(res=>{
console.log(res);
})
}
~~~
- 小程序环境配置
- 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回调，类式封装