sleeppingfrog
sleeppingfrog

uniapp踩坑系列之二

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

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

第二是采用分包策略：

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

uniapp踩坑系列之二_第1张图片

第一步：在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轮播组件图片为什么无法显示？

按照官方的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组件

（3）在页面引入tabb组件

结果发现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正常。但是小程序却无效？

原本代码：