[toc]
### 一. export与export default的区别
1. export
可以导出多个
import可以多个，但是要加花括号{}
```
--utils--
var a = 10;
function b(){
console.log(20);
}
class c {
d(){
console.log(30);
}
}
export { a, b, c }; //导出变量a, 函数b，原型class c
```
```
--js--
import {a, b, c} from "../../utils/util";
Page({
onLoad(){
console.log(a); //打印变量a 10
b(); //执行函数b 20
var f = new c; //创建一个原型c的实例f
f.d(); //执行f中的d方法 30
}
});
```
2. export default
可以导出多个
导出的是一整个uitls包，需要再次声明变量获取utils包中需要的方法和变量
```
--utils--
export default {a, b, c}
```
```
--js--
import utils from "../../utils/util"; //直接获得utils整个包
const a = utils.a; //获取utils中的a变量
const b = utils.b; //获取utils中的b方法
const c = utils.c; //获取utils中的原型c
Page({
onLoad(){
console.log(utils); //{a: 10, b: ƒ, c: ƒ}
console.log(a); //打印a 10
b(); //执行b函数 20
var f = new c; //创建一个原型c的实例
f.d(); //执行实例f的d方法 30
}
});
```
### 二. Http请求方法与数据分离
>#### 方法1：直接封装方法
http请求单次或者多次相同的请求的情况下，创建一个http Class，请求时创建实例，传递参数
```
--utils--
/* 创建一个HTTP类 */
class HTTP {
/* 创建一个request方法，接受params: url, method, data, success */
request(params){
if(!params.method){
params.method = 'GET';
}
/* 在request方法中执行一个wx.request请求 */
wx.request({
url: params.url, //接收params参数
data: params.data,
header: {
'Content-Type': 'json'
},
success:(res)=>{
/* 当statusCode以2开头时执行success方法 */
let statusCode = res.statusCode.toString();
if(statusCode.startsWith("2")){
params.success(res.data);
}else{
wx.showToast({
title: '网络错误',
icon: 'none'
})
}
},
fail:()=>{
wx.showToast({
title: '网络错误',
icon: 'none'
})
}
})
}
}
export { HTTP };
```
```
--js--
import {HTTP} from "../../utils/util";
Page({
onLoad(){
/* 直接通过HTTP原型发送请求 */
/* 创建一个HTTP实例为exp */
var exp = new HTTP();
/* 使用exp中的request()方法 */
exp.request({
/* 传递参数url,success */
url: 'https://douban.uieee.com/v2/movie/top250',
/* success方法中传递一个回调函数，其中执行handleData方法 */
success: res=>{
this.handleData(res)
}
});
},
handleData(res){
console.log(res);
}
});
```
> #### 方法2：class继承分离请求
当需要发送多次不同的请求时，创建一个model文件夹，存数据
```
--utils--
与上一致
```
model文件夹下的movie.js
```
--model/movie.js--
import {HTTP} from '../utils/util';
/* 创建一个movieModel类继承HTTP上的方法 */
class movieModel extends HTTP {
/* 在movieModel中创建一个getTop250方法, 并传递一个callback方法 */
getTop250(callback){
/* 执行HTTP中的request方法,传递url, success函数 */
this.request({
url: 'https://douban.uieee.com/v2/movie/top250',
success: res=>{
/* 使用接收到的callback方法处理res */
callback(res);
}
});
}
/* 创建一个getComingSoon方法，原理与上相同 */
getComingSoon(callback){
this.request({
url: 'https://douban.uieee.com/v2/movie/coming_soon',
success: res=>{
callback(res);
}
});
}
}
export {
movieModel
};
```
js调用movieModel原型，创建实例获取数据
```
--js--
/* 导入movieModel原型 */
import {movieModel} from "../../models/movies";
Page({
onLoad(){
/* 创建一个movieModel的实例：movies */
var movies = new movieModel;
/* 执行movies中的getTop250方法 */
movies.getTop250(this.handleData);
},
handleData(res){
console.log(res);
}
});
```
>#### 方法3：promise
创建一个promise()方法，其中return Promise原型
```
--utils--
/* 创建一个promise()方法，其中封装Promise实例 */
function promise(url){
return new Promise((resolve, reject)=>{
/* 执行wx.request方法 */
wx.request({
url: url,
header: {'content-type': 'json'},
success: (res)=>{
/* 请求成功时，执行resolve */
resolve(res);
},
error(err){
/* 请求失败时，执行reject */
reject(err);
}
});
})
}
```
```
--js--
/* 使用封装好的promise方法，传递url参数 */
promise(coming_soon).then(res=>{
handleData(res)
});
```
>#### 方法4：class配合promise
1. 用Promise的方法封装http请求
```
--utils/http.js--
class HTTP {
request({url, method="GET", data={}}){
return new Promise((resolve, reject)=>{
wx.request({
url: 'https://douban.uieee.com/v2/movie/' + url,
data,
header: {'content-type':'json'},
method,
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();
}
});
});
}
_show_error(){
wx.showToast({
title: '网络错误',
icon: 'none'
});
}
}
export {
HTTP
}
```
2. 构筑一个新的对象继承HTTP的request方法，并调用它
```
--movie.js--
import {HTTP} from "../utils/http";
class MovieModel extends HTTP {
getTop250(){
return this.request({
url: 'top250'
});
}
getInTheaters(){
return this.request({
url: 'in_theaters'
});
}
getComingSoon(){
return this.request({
url: 'coming_soon'
});
}
}
export {
MovieModel
}
```
3. 在index.js中调用
```
import {MovieModel} from "../../model/movie";
```
```
var movieModel = new MovieModel;
var top250 = movieModel.getTop250();
var inTheaters = movieModel.getInTheaters();
var comingSoon = movieModel.getComingSoon();
Promise.all([inTheaters, top250, comingSoon]).then(res=>{
// console.log(res);
let [inTheaters, top250, comingSoon] = res;
console.log(inTheaters);
console.log(top250);
console.log(comingSoon);
});
// movieModel.getTop250().then((res)=>{
// console.log(res);
// });
```
- 小程序配置
- 1 开始第一个小程序
- 2 navigationBar
- 3 flex弹性布局
- 4 响应式长度单位: rpx
- 5 添加新的页面
- 6 配置tabBar
- 7 欢迎页跳转到有tabBar的页面
- 小程序语法
- 1. 数据绑定
- 2. 列表渲染
- 3. 条件渲染
- 4. 小程序和vue data读取方式
- 5. 属性的数据绑定方式
- 6. bindtap与catchtap
- 7. event.targe和event.currentTarget
- 组件&demo
- 1. scroll-view
- 2. swiper
- 3. 制作一个音乐播放组件
- 4. chooseImage配合缓存创建头像
- 5. 获取input表单value(搜索栏实现)
- 6. map
- 7. Form表单提交获取数据
- 小程序API
- 1. 缓存 wx.setStorageSync
- 2. 选择图片 wx.chooseImage
- 3. 加载 wx.showLoading
- 4. 弹出框 wx.showToast
- 5. 分享与获取用户信息
- 项目结构类
- 1. 代码封装
- 2. wx.request请求数据分离
- 3. 组件
- 1. slot
- 2. 父元素传递class到子元素
- 3. 子组件向父组件传值
- 4. wxml中引用wxs封装方法