1. 首页
  2. 文章中心
  3. uni-app

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

92 阅读 0 评论
我是靠谱客的博主 坦率八宝粥，这篇文章主要介绍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

  • 实例如下：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
            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的源码视图，在其中加入配置项

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

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
"h5": {
		"devServer": {
			"port": 8000, //端口号
			"disableHostCheck": true,
			"proxy": {
				"/api": {
					"target": "......", //目标接口域名
					"changeOrigin": true, 
					"secure": false, 
					"pathRewrite": {
						"^/api": ""//重写
					}
				}
			}
		}
	}

  • 由于使用了请求拦截，因此还需要配置如下：

复制代码
1
2
3
4
5
6
7
8
	    //在非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模式，运行路径修改。如果没修改的会出现打包以后发布上去页面找不到

复制代码
1
2
3
4
	"router":{
		"mode":"hash",
		"base":"./"
	}

10. h5打包前的相关配置

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

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

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

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//获取项目运行的平台
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方法

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//获取项目运行的平台
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中进行全局挂载

复制代码
1
2
3
4
//引入
import {getPlatform} from './common/common.js';
//全局挂载
Vue.prototype.$getPlatform = getPlatform

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

复制代码
1
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文件

  1）在joinUrl文件中定义如下：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 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文件中引入如下

复制代码
1
2
3
4
5
//引入
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}，那么就会发生拦截

复制代码
1
2
3
4
5
6
7
8
9
10
11
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）使用

复制代码
1
2
//第一个为params参数，第二个参数为其他配置说明
const res=await getIndex({user_id:'14'},{ custom: { auth: false}})
  •  举例【2】
复制代码
1
2
3
4
5
6
7
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）示例：

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

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

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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的形式发送给服务器

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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.判断对象是否为空

复制代码
1
JSON.stringify(userInfo) != '{}'

19.easycom组件规范

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

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

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
        <view>
            <uni-rate></uni-rate><!-- 这里会显示一个五角星，并且点击后会自动亮星 -->
        </view>
    </template>
<script>
    // 这里不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用
    export default {
        data() {
            return {

            }
        }
    }
</script>

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

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

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

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

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

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

  2.实现

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
			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.列表页获取保存在本地的参数数据，并进行相关的业务逻辑操作

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
    	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开发微信小程序与h5的一些随手笔记（持续更新）的全部内容，更多相关uni-app开发微信小程序与h5内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(61)

相关文章

uniapp编译到h5隐藏指定页面底部tabbar
uniapp编译到h5隐藏指定页面底部tabbar
Selenium自动化测试之Xpath网页元素定位
Selenium自动化测试之Xpath网页元素定位
selenium常见的元素定位方法、断言总结建议关注下父子元素定位和elements复数定位史上最全！Selenium元素定位的30种方式Python selenium —— 父子、兄弟、相邻节点定位方式详解Xpath : 使用部分属性值模糊匹配来定位页面元素
selenium常见的元素定位方法、断言总结建议关注下父子元素定位和elements复数定位史上最全！Selenium元素定位的30种方式Python selenium —— 父子、兄弟、相邻节点定位方式详解Xpath : 使用部分属性值模糊匹配来定位页面元素
selenium 页面经常改变元素_【Web自动化总结】Selenium处理特殊页面元素技巧
selenium 页面经常改变元素_【Web自动化总结】Selenium处理特殊页面元素技巧
uni-app开发微信小程序与h5的一些随手笔记（持续更新）
uni-app开发微信小程序与h5的一些随手笔记（持续更新）
移动端、公众号、小程序pdf转图片，pdfh5.js
移动端、公众号、小程序pdf转图片，pdfh5.js
selenium元素定位
selenium元素定位
uniapp(App端)关于PDF的一系列问题PDF，如何预览的问题PDF，ArrayBuffer类型对象的问题PDF，转码的问题
uniapp(App端)关于PDF的一系列问题PDF，如何预览的问题PDF，ArrayBuffer类型对象的问题PDF，转码的问题

评论列表共有 0 条评论

立即
投稿
返回
顶部