7.19Uniapp-wx小程序案例bug总结

1.uniapp axios 请求适配

报错信息：uniapp Unhandled promise rejection TypeError: adapter is not a functio

解决方案：在 main.js 加入这段配置

axios.defaults.adapter = function(config) {
  return new Promise((resolve, reject) => {
      console.log(config)
      var settle = require('axios/lib/core/settle');
      var buildURL = require('axios/lib/helpers/buildURL');
      uni.request({
          method: config.method.toUpperCase(),
          url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),
          header: config.headers,
          data: config.data,
          dataType: config.dataType,
          responseType: config.responseType,
          sslVerify: config.sslVerify,
          complete: function complete(response) {
              response = {
                  data: response.data,
                  status: response.statusCode,
                  errMsg: response.errMsg,
                  header: response.header,
                  config: config
              };

              settle(resolve, reject, response);
          }
      })
  })
}

2.uniapp 登录拦截器（验证）

//页面白名单 
   const whiteList = ['/pages/Login/Login','/pages/index/index']
   
   function hasPermission(url){
	   
	   //请求路径在白名单中直接跳转，或者嗲有token的直接跳转
	   for(let i = 0;i<whiteList.length;i++){
		   if(url.indexOf(whiteList[i]) != -1  || uni.getStorageSync('Token')){
			   return true
		   }
	   }
	   return false
	   
   }
   
   uni.addInterceptor('redirectTo',{
	   invoke(e){
		   console.log(e);
		   if(!hasPermission(e.url)){
			   uni.navigateTo({
					url:'/pages/Login/Login'
			   })
			
				return false
		   }
		   return true
	   },success(e){
		 console.log(e)
	   },fail(e){
		   console.log(e)
	   }
   })

方案二

let needLogin = [	"/pages/index/index",	] 
let list = ["navigateTo", "redirectTo", "reLaunch", "switchTab"];
list.forEach(item => { //用遍历的方式分别为,uni.navigateTo,uni.redirectTo,uni.reLaunch,uni.switchTab这4个路由方法添加拦截器
		uni.addInterceptor(item, {
			invoke(e) { // 调用前拦截
				//获取用户的token
				const token = uni.getStorageSync('uni_id_token')
				//获取当前页面路径（即url去掉"?"和"?"后的参数）
				const url = e.url.split('?')[0]
				//判断要打开的页面是否需要验证登录
				if (needLogin.includes(url) && token == '') {
					uni.showToast({
						title: '该页面需要登录才能访问，请先登录',
						icon: 'none'
					})
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				
				
				return true
			},
			fail(err) { // 失败回调拦截 
				console.log(err);
			},
		})
	})

拦截器遇到的问题

使用uni.addInterceptor拦截器时发现的一个小问题

在小程序模式下获取不到 tabber底部点击以及通过声明式路由跳转拦截无反应

解决方案:

在子组件最外层再定义一层编程式点击路由跳到本页来响应拦截

总结：

路由守卫是指路由变化的时候的回调钩子拦截Token并非只有路由守卫还得有一种拦截器思想

拦截分两种

一种验证本地存储的token单独提出来

二是每个接口种拦截用返回值

3.第三方微信登录请求

第一次请求用户基本信息名称地区头像 …
第二次请求获取微信Code 码为下次请求铺垫
第三请求 https://api.weixin.qq.com/sns/jscode2session? appid= secret= code码 grant_type=authorization_code

4.第四次请求用拿来的openid 操作上传组件服务器为唯一标识

4.uni-app开发微信小程序之background-image

用uniapp开发app时使用background-image属性设置本地图片能正常显示，但在开发微信小程序中使用background-image时在开发者工具中正常，但在真机调试中居然无法显示，在查阅官方文档后发现

在小程序中不支持使用相对路径，后根据官方解释尝试以下两种方法
1.转为base64格式图片菜鸟工具在线转base64.xxx{ background-image:url('data:(此处为转码后的代码)'}
2.把图片上传到测试服务器
以上两种情况都可以实现

5.小程序navigateTo跳转页面报错fail webview count limit exceed

注：总结bug

原因因为官方规定wx.navigateTo({}) 跳有限制要求
解决：将 navigateTo 换成 redirectTo

wx.navigateTo({}) ，保留当前页面，跳转到应用内的某个页面，小程序中页面栈最多十层。