利用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 相关文章推荐
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
js+html5操作sqlite数据库的方法
Feb 02 Javascript
基于jQuery ligerUI实现分页样式
Sep 18 Javascript
老生常谈ES6中的类
Jul 31 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 Javascript
vue的项目如何打包上线
Apr 13 Vue.js
前端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
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
PHP cron中的批处理
2008/09/16 PHP
基于pear auth实现登录验证
2010/02/26 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
javascript 学习之旅 (1)
2009/02/05 Javascript
jQuery Selector选择器小结
2010/05/06 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
如何根据业务封装自己的功能组件
2019/04/19 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
Python基本数据类型详细介绍
2014/03/11 Python
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
详解Django的CSRF认证实现
2018/10/09 Python
python selenium操作cookie的实现
2020/03/18 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
Python图像读写方法对比
2020/11/16 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
个人思想理论学习的自我鉴定
2013/11/30 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
保安辞职信范文
2015/02/28 职场文书
从原生JavaScript到React深入理解
2022/07/23 Javascript