uniapp踩坑系列之二

今天在用真机在小程序上预览的时候。发现无法预览。一直报错超过微信最大2m。总共也才3个页面，怎么就那么大？

经过小程序包分析工具发现。打包以后的vender.js文件达到1.7m，最后发现，在main.js中引入了一些无用的第三方库。包括echarts和uview，node_modules中有两个包：uview-ui和uview，删除uview，echarts，然后在组件页面中删除了引入但是没有使用的第三方库以后xbuild运行发行在小程序开发者工具中发现只有738k。

第二是采用分包策略：

第一步：拆分原本在pages文件件中的页面。

第一步：在pages.json新增subPackages选项，如下图所示：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "风格报价计数器"
			}
		}
    ],
	"subPackages":[
		{
			"root":"formPage",
			"pages":[
				{
					"path":"form/form",
					"style" :
					{
					    "navigationBarTitleText": "填写房屋信息",
					    "enablePullDownRefresh": false
					}
				}
			]			
		},
		{
			"root":"selectCityPage",
			"pages":[
				{
					"path":"selectCity/selectCity",
					"style" :
					{
					    "navigationBarTitleText": "选择城市",
					    "enablePullDownRefresh": false
					}
				}					
			]
		}
	],
   "preloadRule": {
		"formPage/form/form": {
			"network": "all",
			"packages": ["formPage"]
		},
		"selectCityPage/selectCity/selectCity": {
			"network": "all",
			"packages": ["selectCityPage"]
		}
	},
}

第三步：在mainfest.json中新增optimization选项，开启分包

//main.fest.json中新增optimization选项

/* 小程序特有相关 */
    "mp-weixin" : {
        "appid" : "wx099e646e68351ca7",
        "setting" : {
            "urlCheck" : false
        },
        "usingComponents" : true,
		"optimization":{
			"subPackages":true
		}
    },

总结：如果真机无法在小程序预览，特别注意main.js中入口引入的库是否过大。

2 uview中swiper轮播组件图片为什么无法显示？

<template>
	<view class="content">
		<view class="swipter-box">
			<u-swiper :list="list" name="image" title></u-swiper>
		</view>
			<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}],
									
			}
		},
		onLoad() {

		},
		methods: {
	
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}	
	.swipter-box{
		width: 100%;
		height: 360rpx;
	}
</style>

按照官方的demo。却发现此时图片无法显示，审查原始发现图片确实已经生成了，也处于自动切换之中，也给外层的view添加了高度？为什么无法显示？

除了给外层的元素添加高度还需要手动添加width：100%

二：配置好http请求以后一直报错 can not read http...？

原因：拦截器的插件引入应该要放在Vue.use(uView);之后

import httpInterceptor from '@/common/js/http.interceptor.js'
import httpApi from '@/apis/http.api.js'

// #ifndef VUE3
import Vue from 'vue'

Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
Vue.use(uView);
Vue.use(httpInterceptor, app)
Vue.use(httpApi, app)

三： tabbar组件配置为什么text和icon无法显示？

最开始是如下配置的：

(1)pages.json

"tabBar": {
		"list": [{

				"pagePath": "pages/index/index"
			},
			{
				
				"pagePath": "pages/classify/classify"

			},
			{
			
				"pagePath": "pages/shopcart/shopcart"
			},
			{
				
				"pagePath": "pages/my/my"
			}
		]
	}

(2) 在components里新建一个tabbar组件

<template>
	<view class="page">
		<u-tabbar v-model="current" icon-size="30" :mid-button="false"  @change="changeTab">
		</u-tabbar>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				current: 0,
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						count: 2,
						isDot: true,
						customIcon: false,
						pagePath: "/pages/index/index"
					},
					{
						iconPath: "grid-fill",
						selectedIconPath: "photo-fill",
						text: '分类',
						customIcon: false,
						pagePath: "/pages/classify/classify"

					},

					{
						iconPath: "shopping-cart",
						selectedIconPath: "play-right-fill",
						text: '购物车',
						customIcon: false,
						pagePath: "/pages/shopcart/shopcart"
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						count: 23,
						isDot: false,
						customIcon: false,
						pagePath: "/pages/my/my"
					},
				],
			}
		},
		methods: {
			changeTab() {
				console.log("thsi.current", this.current)
			}
		},
		mounted() {}
	}
</script>
<style scoped>
</style>

（3）在页面引入tabb组件

<template>
	<view class="hone-page">
		<view>  xxx	</view>
		<tarbar></tarbar>
	</view>
</template>

<script>
	import tabbar from "@/components/tabbar/tabbar.vue"
	import {
		allsetPromsie
	} from "@/common/js/utils.js"
	export default {
		components:{tabbar},
		data() {
			return {
				title: 'Hello',
				keyword: "",
				navBg: "transparent",
				supplierList: [],
				keywordList: ["海底捞", "牛肉", "糕点", ],
				hotWords: ["叮咚特供", "宅家烧烤", "小龙虾", "早餐", "蛋糕"],
				bannerList: [],
				hotRecomend: [],
				tabTitleList: [],
				tabContList: [],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0,
				
			}
		},
		onLoad() {

		},
		methods: {
			
		},
		mounted() {
			this.getMainList()


		}

	}
</script>

<style scoped>
	
</style>

结果发现tabbar无法显示text和icon。对着uview的tabbar组件案例发现并没有什么问题。

最后发现问题出在pages.json这里。tabbar的是个全局配置；需要在pages.json中进行配置。tabbar中其实无需引入list数据。把tabbar改成如下：即可正常显示

pages.json

"tabBar": {
		"list": [{
				"iconPath": "home",
				"selectedIconPath": "home-fill",
				"text": "首页",
				"customIcon": false,
				"pagePath": "pages/index/index"
			},
			{
				"iconPath": "grid-fill",
				"selectedIconPath": "photo-fill",
				"text": "分类",
				"customIcon": false,
				"pagePath": "pages/classify/classify"

			},
			{
				"iconPath": "shopping-cart",
				"selectedIconPath": "play-right-fill",
				"text": "购物车",
				"customIcon": false,
				"pagePath": "pages/shopcart/shopcart"
			},
			{
				"iconPath": "account",
				"selectedIconPath": "account-fill",
				"text": "我的",
				"customIcon": false,
				"pagePath": "pages/my/my"
			}
		]

只需要在pages.json中配置即可。无需单独引入

四：上拉加载h5正常。但是小程序却无效？

原本代码：

<template>
    <view class="home-page">
     <view>xxxx其他内容</view>

    /*滚动区域*/
     <view class="tab-content-wrap">
				<u-sticky :offset-top="40">
					<u-tabs-swiper ref="uTabs" :list="tabTitleList" :current="current" @change="tabsChange"
						:is-scroll="false" swiperWidth="750">
					</u-tabs-swiper>
				</u-sticky>
				<view class="tab-item-list">
					<view class="tab-item-block" v-for="(k,index) in curTabList" :key="index">
						<u-lazy-load
							threshold="-350" 
							border-radius="10" 
							:image="k.defaultImage" 
							:height="300"							
							:index="index"
						>							
						</u-lazy-load>
						<view class="tab-title">
							<text class="twoEps"><text class="suppiler ">{{k.supplierName}}</text>{{k.goodsName}}</text>
						</view>
					</view>
				</view>
			</view>
        <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus"  :load-text="loadText">
		</u-loadmore>
</view>

<script>
    data(){
        pageNum: 1,
		loadStatus: "loadmore",
		loadText:{
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
		},
		tabTotalPageSize:0,
		total:0 //下拉tab

    },
    methods:{
        onReachBottom() {
			console.log(111)
			this.pageNum++;
			let url=this.tabList[this.current]&&this.tabList[this.current].dataUrl
			this.curTabUrl=`${url}&pageNum=${this.pageNum}&pageSize=10`
			this.loadStatus = "loading"
			if (this.pageNum <= this.tabTotalPageSize) {
				this.$u.api.getCurTabData(this.curTabUrl).then(res => {
					console.log("loadi---success")
					
					this.loadStatus = "loadmore"
					this.curTabList = this.curTabList.concat(res.list);
					let temp = []
					this.curTabList.forEach(item => {
						temp.push(item)
					})
					if (this.curTabList.length >= this.total) {
						this.loadStatus = "nomore"
					}
				}).finally(() => {
					this.loadStatus = "loadmore"
				})
			} else {
				this.loadStatus = "nomore"
				console.log("加载结束")
				return
			}
		}}
            
</script>

结果发现h5正常。但是在小程序模拟器上拉加载根本没有任何效果。

经过测试，发现问题所在：没有给页面元素，也就是.home-page{}设置高度和overflow方式

正确的设置是

.hone-page {
		background-image: linear-gradient(#FFEBCC, #fff);
		height: 100vh;
		overflow: scroll
	}

注意这里的overflow：是scroll而不是auto；千万注意这里的高度设置和overflow方式要设置对。这里上拉加载的实现主要是通过onReachBottom实现的。u-loadmore只是给底下加了一个加载提示的状态而已

六：为什么通过uni.navigateTo无法跳转页面？

原因：跳转的页面本身属于tabbar控制的，只能通过switchTab实现跳转

七：为什么uview中tabs标签吸顶在h5中正常。小程序却滚动到tab标签页位置却发现消失不见了？

原本代码结构如下

    <view class="tab-content-wrap">
                <u-sticky :offset-top="offsetTop"  :enable="true">
                    <u-tabs :list="tabTitleList" :current="current" @change="tabsChange"
                        :is-scroll="false" >
                    </u-tabs>
                </u-sticky>
                <view class="tab-item-list">
                    xxxxtab显示的内容区
                </view>
    </view>
   
    data() {
			return {
                offsetTop:0
            }
    }

这里要动态的计算小程序胶囊按钮本身的高度和它距离页面顶部高度。然后设置offset-top值

created(){
			 this.getTopHeight();
		},
methods: {
			//获取顶部距离
			    getTopHeight() {
			      let that = this;
			      uni.getSystemInfo({
			        success: function (e) {
			             //48为自定义导航栏高度，一般为44
							//#ifdef MP-WEIXIN
							let topPx = e.statusBarHeight + 48 // 顶部状态栏+沉浸式自定义顶部导航
							that.offsetTop = topPx / (uni.upx2px(topPx) / topPx) // px转rpx，这里必须转化为rpx，不然适配失败
							//#endif
			        },
			      });
			    },
		}

至此解决了这个问题

八：为什么u-search组件点击右侧搜索不触发？

<u-navbar :is-back="true" immersive>
			<u-search shape="round"  v-model="keyword" @search="goListpage" clear></u-search>
		</u-navbar>

methods:{
    goListpage(){
        uni.navigateTo({
					url:"../prodList/prodList"
				})
    }
}

 这里特别要注意：点击搜索的时候触发的只是u-serach组件中的custom事件，如果改成custom事件是可以触发的。但是当用户点击手机键盘上的完成这时候就触发了search事件。所以这里是一个坑。

search	用户确定搜索时触发，用户按回车键，或者手机键盘右下角的"搜索"键时触发	value：输入框的值	-
custom	用户点击右侧控件时触发	value：输入框的值

修改如下：

<u-navbar :is-back="true" immersive>
			<u-search shape="round" @custom="goListpage" v-model="keyword" @search="goListpage" clear></u-search>
		</u-navbar>

九：HBuild，er X 创建小程序的项目后，在微信开发者工具中报错:Error: app.json: app.json 未找到的问题。h5运行正常

解决办法：

在project.config.json中做如下配置：    "miniprogramRoot": "./unpackage/dist/dev/mp-weixin",。重新运行微信开发者根据即可正常运行

十：uview的吸顶组件+tabs为什么h5上正常。在小程序中却出现向下滚动吸顶正常但是向上滚动却无法回归到原本的位置，下不来了？

看到网上有解决方案是通过给数组添加默认数据解决（解决uView中uSticky和uTabs组合使用吸上去下不来的问题_宝码的博客-CSDN博客_u-sticky）

发现根本解决不了问题。后来通过更改结构和滚动逻辑实现了tabs吸顶以后正常回归。

原本页面结构

<view class="home-page">
		    <u-navbar back-text="返回" :is-back="false" title="商城"></u-navbar>
            <view class="tab-content-wrap">
				<u-sticky :offset-top="offsetTop" :enable="enable">
					<u-tabs :list="tabTitleList" :current="current" @change="tabsChange" :is-scroll="false">
					</u-tabs>
			    </u-sticky>
		<view class="tab-item-list">
                <view class="tab-item-block" v-for="(k,index) in curTabList" :key="index">
        <view>
 
</view>

<script>

    data(){
        return{
            tabList: [],
            enable: true,
            curTabList: [],
    }
}


</script>


<style>
    
.home-page {
		background-image: linear-gradient(#FFEBCC, #fff);
		height: 100vh;
		overflow: visible
	}



</style>

更改以后的页面结构：

<view class="home-page">
		
		<scroll-view scroll-y="true" style="height: 90vh;" @scroll="scrollpage">
		    <u-navbar back-text="返回" :is-back="false" title="商城"></u-navbar>
            <view class="tab-content-wrap">
				<u-sticky :offset-top="offsetTop" :enable="enable">
					<u-tabs :list="tabTitleList" :current="current" @change="tabsChange" :is-scroll="false">
					</u-tabs>
			    </u-sticky>
		<view class="tab-item-list">
                <view class="tab-item-block" v-for="(k,index) in curTabList" :key="index">
        <view>
    </scroll-view>
</view>

<script>

    data(){
        return{
            tabList: [],
            enable: true,
            curTabList: [],
    },
    methods:{
        scrollpage(e){
				console.log(e.detail.scrollTop)
				if(e.detail.scrollTop<=40){
					this.enable=false
				}else{
					this.enable=true
				}
		},
    }
}


</script>


<style>
    
.home-page {
		background-image: linear-gradient(#FFEBCC, #fff);
		height: 100vh;
		overflow: visible
	}



</style>

没错：就是把整个页面的内容包裹在一个新的scrioll-view里。然后给scrioll-view添加一个滚动事件。当向上滚动的距离小于某个值的时候，设置u-sticky 吸顶组件的enabled为false即可

十一：u-view图片加载远程地址为何h5正常，微信小程序无法加载？

原本代码：

<block v-for="(item,index) in supplierList" :key="index">
    <u-image :widht="100" :height="100" shape="circle"
		:src="item.imgUrl" mode="aspectFit">
    </u-image> 
</block>

 看起来没有任何问题。但是在微信小程序端无法加载图片，h5端却显示正常。问题就出在宽高的设置。首先图片必须要设置宽高，否则不会显示；其次，宽高的设置要带单位。更改如下

<block v-for="(item,index) in supplierList" :key="index">
	<view class="classify-item">
		<view class="classify-img">
									
			<u-image width="100rpx" height="100rpx" shape="circle"
					:src="item.imgUrl" mode="aspectFit">
			</u-image>
		</view>
	</view>
</block>

此时再次运行小程序，显示正常

十二：uview 下拉菜单组件设置以后导致底下内容在安卓上无法滚动？点击也无效

源码如下：

<u-dropdown ref="uDropdown">
				<u-dropdown-item v-model="curSupplier" :title="supplierName" :options="supplierList"></u-dropdown-item>
				<u-dropdown-item v-model="curPriceIndex" title="价格" :options="priceArea">
					<view class="price-wrap">
						<view class="price-item" @click="handerClickPrice(item,index)"
							:class="curPriceIndex==index?'priceActive':''" v-for="(item,index) in priceArea"
							:key="item.value">
							{{item.label}}
						</view>
					</view>
					<view class="center price-btn">
						<u-button type="primary" size="medium" shape="circle" @click="confirmPrice">确定</u-button>
					</view>
				</u-dropdown-item>
				<u-dropdown-item v-model="curPriceIndex" title="筛选" :options="priceArea">
					<view class="filter-innerr-wrap">
						<scroll-view scroll-y="true" class="cont-scroll-view">
							<view class="fitler-item">
								<view class="filter-title">
									商品类型
								</view>
								<view class="filter-item-list">
									<view class="filter-item-data" v-for="item in  filteredParams.supplierMap"
										:key="item.supplierCode">
										{{item.supplierName}}
									</view>
								</view>
							</view>
							<view class="fitler-item">
								<view class="filter-title">
									品牌
								</view>
								<view class="filter-item-list">
									<view class="filter-item-data" v-for="(item,i) in  filteredParams.brandList"
										:key="i">
										{{item}}
									</view>
								</view>
							</view>
							<view class="fitler-item">
								<view class="filter-title">
									分类
								</view>
								<view class="filter-item-list">
									<view class="filter-item-data" v-for="item in  filteredParams.categoryMap"
										:key="item.categoryCode">
										{{item.categoryName}}
									</view>
								</view>
							</view>
						</scroll-view>
						<view class="btn-wrap">
							<u-button plain shape="circle" size="medium" style="margin-right:20rpx"
								@click="closeDropDown">重置
							</u-button>
							<u-button @click="closeDropDown" type="primary" shape="circle" size="medium ">确定</u-button>
						</view>
					</view>


				</u-dropdown-item>
			</u-dropdown>
//以下是图片展示区域
<scroll-view scroll-y="true" clas="cont-scroll-veiw">
				<view class="tab-item-list">
					<view class="tab-item-block" v-for="(k,index) in list" :key="index">
						<u-lazy-load threshold="-350" border-radius="10" :image="k.defaultImage" :height="300"
							:index="index" @click="viewDetail(k)">
						</u-lazy-load>
						<view class="tab-title">
							<text class="twoEps"><text class="suppiler ">{{k.supplierName}}</text>{{k.goodsName}}</text>
						</view>
						<view class="tab-price">
							<view class="price-lt">
								<view class="goodsPrice">
									¥{{parsePrice(k.goodsPrice)}}
								</view>
								<view class="mallPrice">
									¥{{parsePrice(k.mallPrice)}}
								</view>
							</view>
							<view class="price-rt center">
								<view class="cart-icon center" @click="addToShopCart(k)">
									<text class="iconfont icon-gouwuche fs38"></text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>

问题：小程序开发者工具滚动图片正常。但是通过手机预览发现滚动失效。踩了不少坑。最后按照发现原因：

在使用uview的dropdown组件时页面的点击事件 navigator失效，在点击事件打印值也没有执行，观察页面样式时发现 由于是组件的遮罩层覆盖住了页面 导致的问题(uview可能是在打开/关闭下拉菜单时更改了 遮罩层的透明度而已)

（1）在node_modules里的uview-ui->components->u-dropdown->u-dropdown.vue文件里添加判断

<view class="u-dropdown" :style="isShowMask?'':'overflow:hidden'">
 根标签进行style控制

（2）在data中申明一个变量isShowMask

	data() {
			return { 
				isShowMask:false,  //控制dropdown组件的显示和隐藏
				showDropdown: true, // 
     }

（3）在下拉菜单打开和关闭时分别控制isShowMask:false的状态

	open(index) {
				// 重置高亮索引，否则会造成多个菜单同时高亮
				// this.highlightIndex = 9999;
				// 展开时，设置下拉内容的样式\\
				this.isShowMask=true
				xxxxx
    },
	close(index) {
				
				this.isShowMask=false
				this.$emit('close', this.current);
                xxxxx
    }

此时完美解决

十三：uniapp内置组件checkout复选框为什么更改样式无效？

 <view class="item" v-for="(item, index) in list" :key="index">
                <checkbox @click="change(item)" class="ckbox_item"  :checked="item.checked"  >
                    <text class="item_title"> {{item.name}}</text>
                </checkbox>
 </view>

单独给checkbox添加类名chbox_item是无效的，正确做法：

、

.ckbox_item{

		/* #ifdef H5 */
            .uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
                color: #fff;
                border:.2667vw solid #0064F0;
                background: #0064F0;
            }
        /* #endif */
            ::v-deep .wx-checkbox-input {
                border:.2667vw solid #A4A5B3;
                width: 4.8vw;
                height: 4.8vw;
            }
            ::v-deep .wx-checkbox-input.wx-checkbox-input-checked {
                color: #fff;
                border:.2667vw solid #0064F0;
                background: #0064F0;
            }
    }

以上就能正常修改其样式，但是遗憾的通过微信开发者工具无法查看到checkbox的类.wx-checkbox-input.wx-checkbox-input-checked，