利用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 相关文章推荐
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
react-router中的属性详解
Jun 01 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
Jun 14 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
js 解析 JSON 数据简单示例
Apr 21 Javascript
JS高级程序设计之class继承重点详解
Jul 07 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 shell命令合并图片的代码
2011/06/23 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
[51:06]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS Liquid
2018/03/30 DOTA
通过Python实现自动填写调查问卷
2017/09/06 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
Python如何将装饰器定义为类
2020/07/30 Python
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
Internal修饰符有什么含义
2013/07/10 面试题
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
学校安全防火方案
2014/06/07 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
学术会议开幕词
2016/03/03 职场文书
python中数组和列表的简单实例
2022/03/25 Python