博客

uni-app黑马商城项目功能点记录

1、uni-app中request请求封装

(1)我们将http进行一个封装

import config from './config.js'
let http = (options={})=>{
	// 返回一个promise对象
	return new Promise((resolve,reject)=>{
		// 在这里发起请求
		uni.request({
		    url:config.baseUrl+options.url, //我们请求的服务器端的地址
		    data:options.data || {},
			method:options.method || "GET",
		    header:options.header || {
		        "content-type":"application/json" //自定义请求头信息
		    },
		   timeout:options.timeout || 60000,//请求的时间
		   success:(res)=>{
			   resolve(res);
		   },
		   fail:(error)=>{
			   reject(error)
		   }
		});
	})
}
// 将我们封装的请求导出
export default http;

(2)api.js在上面的基础之上，我们进行二次封装

import http from './http.js';
// 轮播图数据的获取
export const _getBanner = ()=>{
	let options  = {
		url:'/api/getbanner'
	};
	return http(options)
};

(3)将上面的封装挂载到原型上

import api from './utils/api.js'
Vue.prototype.$api = api;

2、商品列表页面展示

(1)新老数据的拼接：

this.goods = [...this.goods,...this.res.message]

(2)当下拉触底的时候：

// 触底方法
onReachBottom(){
    if(this.goods.length < this.goods.pageIndex * 10){
    this.flag = true;
	return 
}
    //请求的页面加1;
    this.pageIndex++;
    //向后端发送页面数据的请求
    this.getGoodsList();
}

(3)当涉及到数据的下拉刷新时，我们需要将数据全部设置为初始数据，之后再去请求数据，在请求数据的时候，需要将我们下拉刷新状态取消

// 在pages.json文件中配置下来刷新
{
    path: 'pages/goods/goods',
    style: {
        navigationBarTitleText: '商品列表',
        enablePullDownRefresh: true
    }
}

onPUllDownRefresh(){
    this.pageIndex = 1;
    this.goods = [];
    this.flag = false;
    //我们间隔一秒钟去请求数据
    setTimeOut(()=>{
       this.getGoodsList(()=>{
       uni.stopPullDownRefresh()
       })
    },1000)
}
//当我们去调用这个函数的时候，要是传递了回调函数，则就调用，要是没有传递回调函数，则就不需要调用，此时我们可以这样去书写
callback && callback();

3、页面中地图的引入

uni-app组件里面，有个地图=》map

<map :longitude="longitude" :latitude="latitude" :markers="markers"></map>
data(){
return {
longitude:0,
latitude:0,
scale:13//缩放级别，取值范围为3-20
markers:[
      {
       latitude: 39.909,
       longitude: 116.39742,
       iconPath: '../../../static/location.png'
        }
      }
    ]
  }
 }

4、拨打电话

methods:{
    phone(){
    uni.makePhoneCall({
    phoneNumber:''//后面跟着我们需要拨打的号码即可
           })
    }
}

5、字符串padStart()的用法

 const str = '1'.padStart(2, 0);
 console.log(str, 'str is');//01(字符串前保留两位，当不足两位的时候，用0来进行填充)