uniapp小点梳理

1、手机端存本地缓存
可以设置成异步获取
uniapp小点梳理_第1张图片
同步获取key值或者异步获取,如果是在onshow或者onload里异步获取缓存数据并且uni.request异步请求接口,最后写同步获取key值。
在这里插入图片描述
2、全局路径定义
vue全局属性定义
在这里插入图片描述
地址引用
uniapp小点梳理_第2张图片
3、uniapp提示框(可以自定义取消按钮文字)
uniapp小点梳理_第3张图片
4、自定义组件创建引入
创建子组件
在这里插入图片描述
在这里插入图片描述
父组件template中放入子组件标签,@important引入,组件注册
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
5、父子组件互相传值
(1)子组件向父组件传值,给个事件,用$emit传值
uniapp小点梳理_第4张图片
父组件在子组件标签中绑定@事件名=“所传值名”,在methods中事件方法中接收子组件值(index)
在这里插入图片描述
uniapp小点梳理_第5张图片
(2)父组件向子组件传值
父组件data定义向下传递的值,子组件引用标签里绑定自定义属性传递data数据里的值,:属性名=“可以直接用data里定义的,不用this.xx”
uniapp小点梳理_第6张图片
在这里插入图片描述
子组件通过props接收参数,就可以在子组件页面用接收的参数
在这里插入图片描述
在这里插入图片描述
6、v-for三层循环
uniapp小点梳理_第7张图片
7、URL地址传参
url拼接传递参数
在这里插入图片描述
onLoad时,接收option参数
在这里插入图片描述
传递数组、对象数据先转成字符串,接收时再转成对象

uni.navigateTo({
		url:'/pages/apply/dwcj/dwcj?data='+JSON.stringify(dat)
				});

接收:(注意接收要用onLoad,onShow页面出现就执行还没接收到参数)

onLoad(options){
	console.log(options.data);
	console.log(JSON.parse(options.data))
}

8、判断object对象是否为空,例如{},先转成字符串判断

if(JSON.stringify(options)!='{}'){
	console.log("不为空");
}

9、子页面返回到固定页面(自执行函数,放在methods)

//返回按钮固定返回页面
			onBackPress(event) {
				uni.redirectTo({
					url: '/pages/index/sy'
				});
				return true;
			}

10、uniapp写的app,直接搬到小程序用时候,样式的改变
(1)background本地路径不显示,不能用…/路径,用@/xx绝对路径,或者图片转base64(图片转base64不能超过300kb,记得先把图片在线压缩下)
(2)图片显示用image标签,不用img标签
(3)例如input的placeholder默认显示的样式用class命名添加样式可以在app中显示,但在小程序中要用组件定义的改样式方式。
此时placehoder字体颜色不显示


要按组件写法placeholder-style=“定义样式”


11、小程序网络图片地址拼接报错undefined,报渲染层错误
在这里插入图片描述
tx是main.js里定义的公共地址Vue.prototype.$tx = “http://网络地址路径(例如www.xxx.com?path=)”;
index.tx是动态获取的图片路径(例如mzpt/2020/xxx)。页面page部分渲染时不支持调用公共变量,所以显示是网络地址为undefined


解决方法:页面初始化onLoad方法里是可以获取公共变量,所以在页面data里定义个变量,在onLoad方法里将公共变量赋值给页面变量

onLoad:function(){
			_this=this;
			console.log(_this.$tx);
			//tpdz重新赋值的网络地址前缀
			_this.tpdz=_this.$tx;
		}

v-if判断index.tx图片后缀地址不为空时显示,减少500报错


12、小程序报uniapp组件报错,例如xx:undefined,查看mainifest.json小程序AppleID有没有获取到
uniapp小点梳理_第8张图片
AppleID获取在微信公众平台——设置——底部appid(注册时最好是认证公司)
12、在不知道要循环多少input框的情况下,获取value值,不绑定v-moedl,让它自己获取,就能在同一页面的同一方法下同步到另一次调用的方法input值


b可以带别的参数

wzsr:function(event,b){
		//	当前的inputvalue值,在失去焦点时获取
				console.log(event.detail.value);

			},

13、只能在开发版小程序,并且体验版小程序在打开调试模式下调出地图,查看有没有勾选不检验合法域名,如果勾选了开发时不会曝露问题,但上传代码后会出现不是合法域名,要在微信公众平台添加域名,建议:开发是勾选不检验,上传是不勾选
uniapp小点梳理_第9张图片
14、导航如果出现打不开页面,注意域名可能是用的http,而不是https,因此在调用导航外部url是https
uniapp小点梳理_第10张图片
uniapp小点梳理_第11张图片
14、动态样式可以用:class绑定,也可以用 r e f s . x x . refs.xx. refs.xx.el.style操作dom绑定,微信小程序不能操作dom元素,可以用vue方法:style或者:class,此时需要动态变动width值,用:style绑定变量就行。注意样式与样式之间不能用分号而是逗号,jrcjl是动态变量先在data数据里面声明,接口数据成功后更改jrcjl值

data:{
	jrcjl:''     //一定是定义成字符串
}

//样式也是字符串,可以是width:jrcjl+'%',data里面定义jrcjl:‘50’

15、多级跳转,例如从首页——跳到任务清单——详情提交——确认页面——生成通知单——再跳转回到任务清单。
首页到任务清单用navigateTo,不销毁页面,同理任务清单到详情提交也用navigateTo;

uni.navigateTo({
					url:'/pages/apply/fhxc/csxq?id='+data.cjid
				});

但是详情提交到确认页面要用redirectTo关闭当前页面,跳转到某个页面;
同理确认页面跳到通知单也用redirectTo;

wx.redirectTo({
					url: "/pages/apply/fhxc/fhxcgzd?cjid="+_this.cjid
				})

而通知单页面跳转回任务清单时候,因为前两个页面已经关闭,所以可以用navigateBack,跳回到任务清单。

wx.navigateBack({
						    delta: 2
						});

小点:
小程序不支持onBackPress监听左上角返回键,因此可以用onUnload监听跳转到固定页面,注意reLaunch是关闭所有页面跳转到某一页面

// onUnload: function () {
		//     wx.reLaunch({
		//       url: '/pages/index/sy',
		//     })
		// },

16、微信小程序地图导航(腾讯地图插件)。小程序地图插件配置在app.json里面代码对应放在uniapp的mainifest.json对应的地图配置那(微信小程序权限配置)
uniapp小点梳理_第12张图片
配置好小程序后源码试图会出现相应代码,在代码里面插入对应插件代码
uniapp小点梳理_第13张图片
把地图代码块在需要处执行,注意如果在新页面初始化时候执行,返回会先返回到新建页面,再返回上一级,建议触发事件执行时地图代码运行直接跳到插件页面。

17、图片转二进制流,uni.uploadFile上传api会把image图片转成二进制流,(base64码转二进制流),formData传参数,后台要post接收封装为file的字段

sumit:function(){
				// console.log(_this.tildata.sjhm);
				uni.uploadFile({
				            url: _this.$httpUrl+'/xjxq/senddx', //仅为示例,非真实的接口地址
				            filePath: _this.qztp,   //图片数组,这里只有一张图片参数存的是base64
				            name: 'file',              //封装的字段名
				            formData: {
								'所传参数':'xx',
				            },
				            success: (uploadFileRes) => {
				                // console.log(uploadFileRes.data);
				            }
				        });
			},

页面提交出发sumit方法
18、uni.previewImage(OBJECT)预览图片能保存到手机照片图库
方法可以封装在公共js里面,这里函数命名tpyl,url为网络地址公共部分,tp为 图片网络地址后半段,[]中括号必不可少,括号里面是字符串格式,比如http://192.168.1.1.1/test+123.jpg . 注意:后台给的网络地址一定要加图片格式后缀比如.jpg,否则保存到手机时当前保存的图片会覆盖上一张图片,一定要有后缀名

tpyl(url,tp){
		// console.log(url+tp)
		uni.previewImage({
		    urls: [url+tp],
			// longPressActions是长按保存图片,单纯点开图片,就简单写
		    // longPressActions: {
		    // itemList: ['发送给朋友', '保存图片', '收藏'],
		    //     success: function(data) {
		    //         console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
		    //     },
		    //     fail: function(err) {
		    //         console.log(err.errMsg);
		    //     }
		    // }
		});
	},

19、uni.request请求方式header请求头默认为application/json,如果是get则不需要在请求时写header,但是post请求一定要加请求头’content-type’: ‘application/x-www-form-urlencoded’
GET:

uni.request({
				    url: _this.$httpUrl+'xxx?SSJG_DM='+_this.xfzid, 
					method:'GET',
					dataType:'json',
				    success: (res) => {
						console.log(res);
				    }
				});

POST:

uni.request({
				    url: _this.$ksxt+'xxxx', 
					method:'post',
					header:{
						'content-type': 'application/x-www-form-urlencoded',
					},
					data:{
						ryid:'123'
					},
					dataType:'json',
				    success: (res) => {
						console.log(res);
				    }
				});

get方法会把参数转为query string
post方法如果不指定header,数据会JSON序列化(当默认请求头为application/json时)
post指定请求头为’application/x-www-form-urlencoded’时,数据才转为query string,所以当后台接收为字符格式时候需要转为字符格式,要么写请求头,要么把data转JSON.stringify()再传,如果后台用实体类接收则不用写请求头,因为uni.request的POST默认为JSON序列,传list数组.

延申:vue请求axios是在封装时候get已经默认application/json请求头,post也已经默认application/x-www-form-urlencoded请求头,不需要特意改请求头直接用
20、uniapp发布成小程序后,页面数据加载前出现undefined,或者当数据为0时出现undefined,需要考虑是否是data中变量未定义。比如request从后台接收过的数据在h5页面中不需要定义数组内字段就能在页面试用

data(){
	imgArray:[],
},
methods:{
	uni.request({
				    url: _this.$httpUrl+'/xjxq/queryXjWtsj?cjid='+_this.cjid+'&xjid='+_this.xjid,
					method:'GET',
					dataType:'json',
				    success: (res) => {
						console.log(res);
						_this.imgArray=res.data.data;
						//此时template部分可以直接使用res.data.data中后台传的字段
				    }
				});
}

但在微信小程序中需要提前在data中声明后台传的字段才能不在页面初始化时候显示undefined,此时dwmc和jgjc就是后台会传的数据内字段

data(){
	imgArray:{
					dwmc:'',
					jgjc:""
	},
}

你可能感兴趣的:(笔记,vue)