利用uni-app生成微信小程序的踩坑记录


Posted in Javascript onApril 05, 2022

前言

毕设要求写一个浏览器端,一个APP端,一个微信端,刚开始以为要学三个技术然后写三个客户端,后来知道了uni-app这个神器,一次编写就可以编译生成APP、H5以及各种小程序版本的客户端。然而我比较熟悉的是web的前端开发,而且浏览器用于测试也是唾手可得,所以整个开发过程中用浏览器测试的基本上都很顺利,展现的效果也很好,然而在编译小程序端的时候出了很大的问题,整个页面都扭曲了,经过这两天的查资料与修复,终于得到了浏览器中的效果,正好也记录一下这些坑。

1.不允许id选择器

这个问题是最容易发现的,在h5页面中用id标记标签很常见,然后在css中用#+id来设置标签的style,但是微信小程序中是不能用id选择器的,从警告内容中很容易发现。

利用uni-app生成微信小程序的踩坑记录

从警告中还可以看出,小程序中标签名、属性名选择器都不能用。

2.默认竖排

在H5页面中,元素默认是横排的,但是在小程序中,元素是默认竖排的,因此最好显式的设置元素的横排竖排,这样就不会发生页面错乱了。

.row-arrange{
    flex-direction: row;	/*横排元素*/
}

3.图片加载不出来

其实这个原因官网的文档上有写,不过我没仔细看

利用uni-app生成微信小程序的踩坑记录

而且H5中用相对路径可以正常加载,但是在小程序中就不行了,所以最好还是用绝对路径吧。

../../../static/xxx.jpg # 相对路径
/static/xxx.jpg # 绝对路径

4.eval函数不可用

之前写H5的时候,总是很习惯的用eval(字符串)来得到数字、JavaScript对象等,但是在微信小程序端这些转换都会报错,因此最好的方式是使用对应的转换API,比如数字可以用parseInt、JSON对象可以用JSON.parse等。

5.getStorage异步

在H5页面中,这样写是可以拿到存储的数据的:

var data;
uni.getStorage({
	title : 'xxx',
	success : function(res){
		data = res.data;
	}
})
this.data = data;

但是在小程序中,这段代码就会出错,我猜是小程序中读取存储数据略慢吧,而且我上面的这种写法也不标准,因此严格应该这样写就不会出错:

var vm = this;
uni.getStorage({
	title : 'xxx',
	success : function(res){
		vm.data = res.data;
	}
})

6.props的中的值不可修改

props : { 
	questions : {
		type : Array,
		default : []
	},
},

如上所示,我一开始是直接利用questions中的数据通过v-for来进行动态的页面渲染,用这种方式questions的值可以直接从标签的属性设置,会非常方便,即使后面利用this.questions.push(x)给它增加新元素H5页面也可以更新。但是在微信小程序端就没有反应了,不管怎么修改,它都不能动态的进行渲染,因此我在data中增加了一个ques用来进行渲染的数据来源:

data() {
	return {
		ques : [],
	};
},
props : { 
	questions : {
		type : Array,
		default : []
	},
},
created : function(){
	...
	this.ques = this.questions;
},

然后只需要利用ques中的数据进行渲染即可,如果要添加元素,也是通过修改ques来办到,如this.ques.push(x)

7.wx.uploadFile携带字符串参数

上传文件时,按照微信官方的文档,总是不能成功提交表单格式的字符串参数,有一种解决方法是把上传文件和上传字符串分割成两个接口,但由于我的上传文件包含权限验证的token,因此必须在上传文件的同时携带token才行,所以最终用了拼接地址的方法解决了这个问题:

wx.uploadFile({
	url: vm.fileurl + '/file/uploadPic?token=' + tokenJson['token'] + '&userId=' + tokenJson['userId'], //图片文件上传接口
	filePath: vm.src,
	name: 'pic',  //
	header: { 
		'Content-Type': 'multipart/form-data',
	},
	formData: {
		method: 'POST'   //请求方式
	},
	success (res){
		...
	}
})

8.picker的multiSelector mode中选择框出现undefined

展示一下出错的效果图:

利用uni-app生成微信小程序的踩坑记录

可以看到所有的选项都成了undefined。

这里是因为我一开始的数据使用的都是普通数组,每一列都是字符串或数字数组,比如[[1,2,3],[1,2,3,4,5]]这样,在H5页面中这样做没有问题,但是在小程序中就会出现错误,因此这里每一列都必须采用对象数组,例如一个很简单的解决方案:

首先写数据的时候需要用对象数组的方式

data() {
    return {
		area : [[{'name':'北京市'},{'name':'河北省'}],[{'name':'邢台市'},{'name':'石家庄市'}],[{'name':'不知道县'}]],
		areaIndex : [1,0,0],
	}
}

然后在标签中用如下的方法:

<picker mode="multiSelector" :value="areaIndex" :range="area" range-key="name" @columnchange="changeColumn" style="width:100%;">
	<view class="row-arrange">
		<text class="little-font-size">{{area[0][areaIndex[0]].name}}</text>
		<text class="little-font-size">{{area[1][areaIndex[1]].name}}</text>
		<text class="little-font-size">{{area[2][areaIndex[2]].name}}</text>
	</view>
</picker>

注意这里的range-key不能带冒号,而且里面的值应该是对象数组中的key

总结

到此这篇关于利用uni-app生成微信小程序踩坑的文章就介绍到这了,更多相关uni-app生成微信小程序内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js对象关系图 方便dom操作
Mar 18 Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
js 数组去重的四种实用方法
Sep 09 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
了解javascript中的Dom操作
May 27 Javascript
vue 兄弟组件的信息传递的方法实例详解
Aug 30 Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 Javascript
前端JS获取URL参数的4种方法总结
Apr 05 #Javascript
threejs太阳光与阴影效果实例代码
JS实现数组去重的11种方法总结
Apr 04 #Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 #Vue.js
JavaScript模拟实现网易云轮播效果
Javascript中Microtask和Macrotask鲜为人知的知识点
vue中div禁止点击事件的实现
Apr 02 #Vue.js
You might like
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
利用python修改json文件的value方法
2018/12/31 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
django框架两个使用模板实例
2019/12/11 Python
python 爬取疫情数据的源码
2020/02/09 Python
Django-migrate报错问题解决方案
2020/04/21 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
深入浅出CSS3 background-clip,background-origin和border-image教程
2011/01/27 HTML / CSS
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
应届生.NET方向面试题
2015/05/23 面试题
生产车间主管岗位职责
2013/12/28 职场文书
水电施工员岗位职责
2015/04/11 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
新员工入职感言范文!
2019/07/04 职场文书
python实现三次密码验证的示例
2021/04/29 Python
Redis实现订单过期删除的方法步骤
2022/06/05 Redis