小程序day03补充

一、wx.request网络请求

小程序不存在跨域问题,存在域名合法性

在小程序开发过程中,可以不去配置域名表名单

但是需要在微信开发者工具设置 : 详情=> 本地设置=>勾选不检验合法域名

wx.request({
	url:'地址',
	method:'GET|POST',
	data:{},	//传递参数
	header:{},  //请求头
	timeout:60000,	//请求超时
	success(res){
		//请求成功
	},
	fail(err){
		//请求失败
	}
})

二、使用promise实现request的封装

2.1 封装promise(request.js)

var {BASE_URL} = require('./global')

export function request(){
    return new Promise(function(resolve,reject){
        //编写request请求
        wx.request({
            url: BASE_URL + url,
            data: params.data || {},
            method: params.method || "GET",
            header: params.header || {},
            timeout: params.timeout || 60000,
            success: resolve,
            fail: reject
        })
    })
}

//调用: 
//request('/index/index',{data:{},method:"get",header:{},timeout:2000})

2.2 编写全局变量(global.js)

export const BASE_URL="地址"

2.3 封装后端接口对应的请求方法(api.js)

var request = require("./request");
// 1.获取后端数据信息
export  const  请求方法名 = (params ={})=>{
    return request('路径',params);
}

2.4使用api.js中的文件进行数据渲染

var {请求接口方法名} =request('路径');

请求接口方法名().then(res=>{
    console.log(res)
})

三、处理swiper样式

calc是css的计算方法,运算符两边要保留空格
//官方定义的轮播图高度较低,所以要子定义高度
height:calc(100vw * 400 / 750)


//其他样式设置查看官方文档
<swiper>
	<swiper-item>
    	<image src=""></image>
    </swiper-item>    
</swiper>

四、小程序对话框、弹框

4.1 对话框

click(){
    //1. 显示消息提示框
	wx.showToast({
		title:'数据加载中',
		icon:'loading',
		duration:'过期时间',
		success(){
			console.log('弹窗成功');
		}
	})
    
    //2. 显示loading提示框
    wx.showLoading({
        title:'数据加载中'
    })
    
    //3. 隐藏loading提示框
    setTimeout(function(){
        wx.hideLoading()
    },2000)
    
    //4. 显示模式对话框
    wx.showModal({
        title:'删除提示',
        content:'您确定要删除当前的数据吗',
        confirmText:'删除'
        ...
    })
}

4.2 弹框

click(){
	//1. 显示操作菜单
    wx.showActionSheet({
        itemList:['相册','拍照'],
        success(res){
            switch(res.tapIndex){
                case 0:
                	break;
                case 1:
                 	break;
            }
        }
    })
}

五、缓存操作 (类似localStorage)

5.1 设置缓存(可以存储多种类型)

_setStorage(){
    //1. 同步设置(key和data分别要填对应的值)
    wx.setStorageSync('name','admin')
    
    //2. 异步设置
    wx.setStorage({
        key:'pass',
        data:123
    })
}

5.2 获取缓存

_getStorage(){
	//1. 同步获取
    var name=wx.getStorageSync('name');
    console.log(name);
    
    
    //2. 异步获取
    wx.getStorage({
        key:'pass',
        success(res){
            console.log(res);
        }
    })
}

小程序的api绝大多数都支持Promise,可以直接使用async和await||then

(注意: promise和回调不能同时使用)

async/await，用来简化Promise异步操作

以上代码还可以写为

async _getStorage(){
	let pass=await wx.getStorage({key:'pass'});
    console.log(pass)
}

5.3 删除缓存

wx.removeStorage({})
//一次只能删除一个缓存

5.4 清空缓存

wx.clearStorage()
//清空缓存