利用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 相关文章推荐
jquery mobile changepage的三种传参方法介绍
Sep 13 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
Feb 25 Javascript
React.js入门学习第一篇
Mar 30 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
Sep 14 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
利用js实现简单开关灯代码
Nov 23 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
php类
2006/11/27 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
用javascript实现画板的代码
2007/09/05 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
委托公证书
2014/04/08 职场文书
贺卡寄语大全
2014/04/11 职场文书
2014年党务公开方案
2014/05/08 职场文书
安全承诺书
2015/01/19 职场文书
死亡诗社观后感
2015/06/05 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
Python编写nmap扫描工具
2021/07/21 Python