uni-app开发微信小程序与h5的一些随手笔记(持续更新)

1. 要想在微信小程序不能再css中使用background-image!(虽然测试是可以的,但是真机的时候有可能出错。uni-app官网也有提及到)

2. 在h5端进行调试的时候发现点击事件不生效,可能原因如下

  • 如果是有图片的,有可能是图层之间的问题,给点击的图片添加z-index增大层级即可

3. 将数组变成对象的写法:{....arr}

  • 原数组:[{...},{...},{...}]

  • 转成对象后:{{...},{...},{...}}

4. 拼接数组:

  • 数组与数组之间的拼接:[...arr1,...arr2]

  • 元素与数组之间的拼接:['...',...arr]

5.想把一个key值没有规律的对象的某些属性提取出来合成新的数组

  • 使用map

  • 参考链接:【前端】js中Map的用法_风信子-CSDN博客_前端map

  • 实例如下:

            async getGoosList() {
				let mapObj = new Map();
				let testObj = {};
				uni.showLoading();
				const {
					data: res
				} = await getGoodsList()
				if (res.code === 0) {
					this.hotArr=res.data.hot_goods
					uni.$u.setProperty(testObj, '0.goods')
					testObj['0'].goods = uni.$u.deepClone(res.data.hot_goods);
					mapObj.set('0', {
						...testObj
					})
					for (let key in res.data.goods_list) {
						const temp = uni.$u.getProperty(res.data.goods_list, key)
						this.leftArray.push(temp.name)
						mapObj.set(key, temp.sons)
					}
					this.leftArray = ['热门', ...this.leftArray]
					for (const item of mapObj) {
						this.rightListArr.push(item[1])
					}
				}
				uni.hideLoading();
				this.$nextTick(() => {
					this.getElementTop();
				});
			},

6. uni-app中跨域的配置(只存在于h5端)

  • 打开manifest.json的源码视图,在其中加入配置项

  • 记得每次对配置文件进行更改之后要重启项目!!不然不成功

"h5": {
		"devServer": {
			"port": 8000, //端口号
			"disableHostCheck": true,
			"proxy": {
				"/api": {
					"target": "......", //目标接口域名
					"changeOrigin": true, 
					"secure": false, 
					"pathRewrite": {
						"^/api": ""//重写
					}
				}
			}
		}
	}
  • 由于使用了请求拦截,因此还需要配置如下:

	    //在非h5情况下
		// #ifndef H5
		config.baseURL = '.....';//服务器ip地址或者域名
		// #endif
		//在h5情况下
		// #ifdef H5
		config.baseURL = '/api';
		// #endif

 7.post提交相当于一个表单,关键看数据是否正确提交了

8.uni-app开发h5的注意事项:uni-app的H5版使用注意事项 - DCloud问答

9.打包的时候要把路由模式修改成hash模式,运行路径修改。如果没修改的会出现打包以后发布上去页面找不到

	"router":{
		"mode":"hash",
		"base":"./"
	}

10. h5打包前的相关配置

  • uni-app开发H5配置,打包注意事项_look_地中海的博客-CSDN博客_uniapp打包h5?

  • uniapp 打包成h5部署到服务器的步骤记录_yehaocheng520的博客-CSDN博客_h5 部署?

 11.uni-app开发如何判断运行平台

//获取项目运行的平台
export const getPlatform=()=>{
	let platForm=undefined;
	// #ifdef APP-PLUS
	platForm="APP"
	// #endif
	// #ifdef H5
	platForm="H5"
	// #endif
	// #ifdef MP-WEIXIN
	platForm="MP-WEIXIN"
	// #endif
	return platForm
}

 12.全局挂载的使用

1)需要挂载的目标文件:common/common.js,向外暴露出getPlatform方法

//获取项目运行的平台
export const getPlatform=()=>{
	let platForm=undefined;
	// #ifdef APP-PLUS
	platForm="APP"
	// #endif
	// #ifdef H5
	platForm="H5"
	// #endif
	// #ifdef MP-WEIXIN
	platForm="MP-WEIXIN"
	// #endif
	return platForm
}

 2)在main.js中进行全局挂载

//引入
import {getPlatform} from './common/common.js';
//全局挂载
Vue.prototype.$getPlatform = getPlatform

3)在任意组件中使用(记住不要忘记this.调用,这个this即是Vue的示例对象)

console.log(this.$getPlatform())

11.uni-app小程序开发的时候,数据还没加载出来的时候会显示undefined的处理方式

1)数据没到就给他转圈圈、数据到了把圈圈关了

2)v-if判断不显示

3)骨架屏

12.参数拼接:

把对象转换为字符串拼接到url后面_weixin_55869763的博客-CSDN博客https://blog.csdn.net/weixin_55869763/article/details/115457890

13.js文件中引入另外一个js文件

  • 这里举例request.js文件中引入joinUrl.js文件

uni-app开发微信小程序与h5的一些随手笔记(持续更新)_第1张图片

  1)在joinUrl文件中定义如下:

// let data = {
// 	name: 'haha',
// 	age: 11
// }
export const joinUrl = (data) => {
	// 遍历对象data   然后进行字符串拼接
	// 遍历结果 key是属性名 data[key]是值
	let urlString = ''
	for (let key in data) {
		urlString += key + "=" + data[key] + '&'
	}
	// 因为经过循环字符串最后面会多一个 & 使用substring把最后一个删除
	urlString = urlString.substring(0, urlString.length - 1)
	return urlString
}

2)在request.js文件中引入如下

//引入
import {joinUrl} from '../common/joinUrl.js';//这个目录根据实际而定

//调用
console.log('拼接之后的config.data',joinUrl(config.data))

15. 当需要对请求进行统一性处理的时候(这里使用的是uview中封装的请求拦截)

  • 举例【1】

1)在请求拦截中的配置,最主要的是if (config?.custom?.auth) 这个判断,即当你在请求数据的时候如果配置项传递的custom.auth为true,那么便会发生相应的请求拦截,具体你要在拦截器中进行什么样的逻辑动作,那你自行定义。custom对象下的属性可以自定义,你定义了什么属性进行什么样的拦截操作,你倒是请求的时传递这个相应的属性即可。

比如这里定义的custom下的属性auth主要是用来判断请求的时候是否需要携带token,当你请求的时候传递的 custom: { auth: ture},那么就会发生拦截

uni.$u.http.interceptors.request.use((config) => {
		config.data = config.data || {}
		// let sign=signString+secret
		if (config?.custom?.auth) {
			const token = uni.getStorageSync('token');
			config.header.Authorization = token
		}
		return config
	}, config => {
		return Promise.reject(config)
	})

 2)使用

//第一个为params参数,第二个参数为其他配置说明
const res=await getIndex({user_id:'14'},{ custom: { auth: false}})
  •  举例【2】
if (config?.custom?.sign) {
	let secret = 'DKGd35slt5sc48s4q';
	config.data = sortKey(config.data) //对参数进行排序
	let signString = joinUrl(config.data) //对排序后的参数进行拼接
	// let sign=signString+secret
	config.header.Authorization = token
}

16.客户端发起的每个请求,都需要携带sign参数,服务端根据sign的内容进行相同的参数封装,由此判断传递参数是否遭到恶意篡改。

注意:将除“sign”外的所有参数按key进行字典升序排列,排序后的参数(key=value)用&拼接起来。

1)示例:

let secret = "CFUMAO";//仅为示例,具体值另行交接。
let data = {type:"home",action:"search",time:"1610101123"};
let sign = md5('action=search&type=home&time=1610101123'+secret);

 2)封装(将对象key值按字典升序之后并以&的形式拼接起来):

export const joinUrl = (data) => {
	// 遍历对象data   然后进行字符串拼接
	// 遍历结果 key是属性名 data[key]是值
	let urlString = ''
	for (let key in data) {
		urlString += key + "=" + data[key] + '&'
	}
	// 因为经过循环字符串最后面会多一个 & 使用substring把最后一个删除
	urlString = urlString.substring(0, urlString.length - 1)
	return urlString
}
export const sortKey = (arys) => {
	//先用Object内置类的keys方法获取要排序对象的属性名,再利用Array原型上的sort方法对获取的属性名进行排序,newkey是一个数组
	var newkey = Object.keys(arys).sort();
	//console.log('newkey='+newkey);
	var newObj = {}; //创建一个新的对象,用于存放排好序的键值对
	for (var i = 0; i < newkey.length; i++) {
		//遍历newkey数组
		newObj[newkey[i]] = arys[newkey[i]];
		//向新创建的对象中按照排好的顺序依次增加键值对
	}
	return newObj; //返回排好序的新对象
}

 3)引入md5

  • 具体引入步骤参考我的另外一篇文章:

https://blog.csdn.net/weixin_46872121/article/details/122701853https://blog.csdn.net/weixin_46872121/article/details/1227018534)封装sign的并且在发起网络请求的时候一起以data的形式发送给服务器

uni.$u.http.interceptors.request.use((config) => {
		config.data = config.data || {}
		if (config?.custom?.sign) {
			let secret = 'DKGd35slt5sc48s4q';
			config.data = sortKey(config.data) //对参数进行排序
			let signString = joinUrl(config.data) //对排序后的参数进行拼接
			let beforeSign = signString + secret
			// console.log('加密前---', beforeSign)
			const aftreSign=md5.hex_md5(beforeSign)
			// console.log('加密后---', aftreSign)
			config.data.sign=aftreSign//将sign数据一同发送到后端
		}
		return config
	}, config => {
		return Promise.reject(config)
	})

18.判断对象是否为空

JSON.stringify(userInfo) != '{}'

19.easycom组件规范

        传统的vue组件,需要安装、引用、注册三个步骤才能使用组件。easycom将其简化 为一步,只要组件安装在项目的compnents目录下或者uni_modules目录下,并且符合components/组件名称/组件名称.vue目录结构,不用引入、注册、直接在页面中使用。

比如uni-rate组件,它到如下项目之后吗,存放在了目录/components/uni-rate/uni-rate.vue,同时它的组合名称也叫uni-rate,所以这样的组件,不用再script里注册和引用。如下:


        不管components目录下安装了多少组件,easycom打包后会自动剔除没有使用的组件,对组件的使用尤为友好。组件库批量安装,随意使用,自动按需打包。再uni-app中,easycom是自动开启的,不需要手动开启。

        如果你的组件名称或者路径不符合easycom得默认规范们可以再pages.json的easycom节点进行个性化设置。详见:uni-app官网

20.tab页面之间跳转传参问题

        我们知道,在uni-app中tab页面之间的跳转是无法传递参数的,所以一般我们采用本地存储的方式,比如举例如下:

      即当我们想从主页的某些元素中点击跳转到列表页,且需要携带一定的参数的时候,便可以采取以下方式:

 1. 给触发事件的元素绑定事件

  2.实现

			goToListTab(index, name) {
				uni.setStorageSync('item-index', index)
				uni.setStorageSync('item-name', name)
				uni.switchTab({
					url: `/pages/list/list`,
					success: function(e) {
						var page = getCurrentPages()[0]
						if (page == undefined || page == null) {
							return
						}
                        //h5端不支持使用onLoad()进行刷新,因此需要对其进行条件编译
						//#ifdef H5
						window.location.reload();
						//#endif
						// #ifndef H5
						page.onLoad()
						//#endif
					}
				});
			},

起初的时候,我并没有在跳转成功的回调函数中进行获取当前栈页面的操作,发现点击元素1跳转到列表页的时候,我是可以成功获取到保存在本地的参数的;但是当我从列表页返回首页,再次点击元素2(其他元素)的时候,发现无效。因此页面栈的相关知识也是很重要滴!可以参考这个连接getCurrentPages()的使用,(页面刷新) - L某人 - 博客园

 3.列表页获取保存在本地的参数数据,并进行相关的业务逻辑操作

    	this.itemIndex = uni.getStorageSync('item-index')
		his.itemName = uni.getStorageSync('item-name')

        leftTap(status,e={}) {
				let index1 = 0;
				let index=0;
				switch (this.itemName) {
					case '工商注册':
						index1 = 1;
						break;
					case '资质办理':
						index1 = 2
						break;
					case '财税服务':
						index1 = 3;
						break;
					case '知识产权':
						index1 = 4
						break;
					case '认证服务':
						index1 = 5
						break;
				}
				if (status) {
					//列表页触发的点击
					index = e.currentTarget.dataset.index;
					this.isClick = true;
				} else {
					//首页触发的点击
					index = index1
					this.isClick = false;
				}
				this.leftIndex = index;
				this.scrollInto = `item-${index}`;
			},

你可能感兴趣的:(uni-app,微信小程序,前端,vue.js,html5)