uniapp开发日常总结

因为首次开发uniapp遇到了很多的问题
1.比如tabbar如何配置
配置tabbar找到项目中的pages.json文件
在这个文件中来配置页面路由以及头部导航栏底部tabbar

"tabBar": {
		"color": "#333333",
		"selectedColor": "#8080FF",
		"backgroundColor": "#ffffff",
		"borderStyle": "white",
		"list": [
			{
				"pagePath": "pages/sys/workbench/index",
				"iconPath": "static/aidex/tabbar/app_2.png",
				"selectedIconPath": "static/aidex/tabbar/app_1.png",
				"text": "应用"
			},
			 {
				"pagePath": "pages/sys/bi/index",
				"iconPath": "static/aidex/tabbar/bi_1.png",
				"selectedIconPath": "static/aidex/tabbar/bi_2.png",
				"text": "看板"
			},
			{
				"pagePath": "pages/sys/user/index",
				"iconPath": "static/aidex/tabbar/my_1.png",
				"selectedIconPath": "static/aidex/tabbar/my_2.png",
				"text": "我的"
			}
		]
	}

在pages里添加头部导航栏

{
			"path": "pages/sys/car/archives",
			"style": {
				 "navigationBarTitleText": "车主档案"
			}
		},

2.h5跨域问题

在项目中找到如上，移动端和vx小程序没有跨域问题，但本地h5存在跨域所以找到源码视图中的h5

    "h5" : {
		"devServer": {
			"proxy": {
				"/api": {
					"target": "https://isp-agg-as-uat.human-horizons.com",//接口地址
					"pathRewrite": {
						"^/api": "/"
					}
				}
			}
		}
    }

在页面中通过uniapp提供的方法请求接口uni.request
具体就不这详细说明了
3.拨打电话功能
先设置下配置还是上图的manifest.json文件中查找
勾选完成后 通过uniapp提供的方法

callPhone(tel){
				uni.makePhoneCall({
					phoneNumber: tel
				})
			}

5.阻止冒泡click.native.stop
6.移动端回车@confirm
7.解决谷歌游览器字体不能小于12px的问题
transform: scale(0.90);
8.上拉加载下拉刷新
需要在pages.json中配置的路由上添加enablePullDownRefresh（监听页面用户下拉刷新事件的）

{
			"path": "pages/sys/car/carList",
			"style": {
				"navigationBarTitleText":"车档案",
				"enablePullDownRefresh":true
			}
		},

页面代码如下

<template>
    <view class="box">
     <view v-for="(item, index) in newsList" class="newslist">
		  <view class="item">  
			  {{item.title}}  
		  </view>
     </view>
     <view class="loading">{{loadingText}}</view>
 </view>
</template>
<script>
var _self, page = 1, timer = null;
export default {
 data(){
	 return{
		 newsList:[],
		 loadingText:'加载中...'
	 }
 
 },
 //页面加载
 onLoad(){
  _self = this;
  //获取首页数据
   this.getnewsList()
    },
	
 // 下拉刷新,初始化第一页数据
 onPullDownRefresh(){
  this.getnewsList();
 },
 //页面滚动到底部的事件
 onReachBottom(){
  if(timer != null){
   clearTimeout(timer);
  }
  timer = setTimeout(function(){
	//加载更多数据
   _self.getmorenews();
  }, 1000);
 },
 methods:{
  getmorenews(){
   if(_self.loadingText != '' && _self.loadingText != '加载更多'){
    return false;
   }
   _self.loadingText = '加载中...';
   //在当前页面显示导航条加载动画。
   uni.showNavigationBarLoading();
   uni.request({
   url: 'https://ceshi2.dishait.cn/api/v1/postclass/1/post/'+page,
    method: 'GET',
    success: function(res){
     _self.loadingText = '';
     if(res.data == null){
		 //在当前页面隐藏导航条加载动画。
      uni.hideNavigationBarLoading();
      _self.loadingText = '已加载全部';
      return false;
     }
     page++;
     console.log(res);
     _self.newsList = _self.newsList.concat(res.data.data.list);
     _self.loadingText = '加载更多';
     uni.hideNavigationBarLoading();
    }
   });
  },
  getnewsList(){
   page = 1;
   uni.showNavigationBarLoading();
   uni.request({
    url: `https://ceshi2.dishait.cn/api/v1/postclass/1/post/${page}`,
    method: 'GET',
    success: function(res){
		console.log(res)
     page++;
     _self.newsList = res.data.data.list;
     uni.hideNavigationBarLoading();
     uni.stopPullDownRefresh();
     _self.loadingText = '加载更多';
    }
   });
  }
 }
}
</script>
<style>
	.box{
		width: 100vw;
		height: 100vh;
	}
	.item{
		width: 100vw;
		height: 200rpx;
		border: 1rpx solid gray;
		text-align: center;
		line-height: 200rpx;
	}
	.loading{
		text-align: center;
		color: #8F8F94;
	}
</style>