UNI-APP踩坑记

main.js

• 在引入工程下的文件时，不能从根路径写起，正确写法./xxx/xxx/xxx

组件

• 引用组建时，注意components和comments属性名称。

这两个名称有点相似，但代表的意思相差甚远，写的时候一定要注意。如果一个新页面在引入组件时没有引用成功，除了检查组件的name属性是否正确，还要检查页面的components是否写对了，否则一个组件都引入不进来。

页面

• 页面返回，传递参数至上一页面。

1. 通过redirectTo方式

   var pages = getCurrentPages() //获取页面栈
   var prePage = pages[pages.length-2] //获取上一页面对象
   uni.redirectTo({
   	url: '../../' + prePage +'?param1=' + '张三' +'&param2=' + '001'
   }); 

此种方式可以传递参数至上一页面，但会造成上一个页面实例在页面栈中存在两个。一个是跳转之前的实例，另一个是返回页面调用该方法产生的新实例。举例来说，A调用navigateTo方法跳转至B页面，此时页面栈中会存在A页面的实例，然后B调用redirectTo跳转至A，此时A又会产生一个，此时页面栈中就是A、A，若在A页面点击返回按钮，还是会返回A。

2.通过navigateBack方式

此种方式可以很方便的返回上一页面，但是官方API不直接支持传参给上一页面，所以需要结合官方提供的缓存方式进行；如果不是UNI-APP写的而是Vue的话，可以给上一页面定义一个修改数据的方法，返回页面获取上一页面实例，然后调用定义的方法也可以。

A 跳转 B，
/*
* B页方法
*/
uni.setStorage({
   	key: "club",
   	data: this.current,
   	success() {
   		uni.navigateBack({
   			delta: 1 //返回的页面数，因为是上一页，所以填1
   		})
   	}
   })

/*
* A页方法
*/
onShow(){
   var self = this 
   uni.getStorage({
   	key: "club",
   	success(res) {
   		const data = res.data
   		self.$data.club.id = data.id
   		self.$data.club.name = data.name
   	}
   })
}

$data 是Vue提供的支持，本来想通过调用this.setData方法进行，但发现UNI-APP不支持。

需要注意的是，this若在回调函数使用时，指向的作用域不是当前对象，如果将上文A页面的方法改写为

onShow(){
	//var self = this
	uni.getStorage({
		key: "club",
		success(res) {
			const data = res.data
			this.$data.club.id = data.id
			this.$data.club.name = data.name
		}
	})
}

系统将会提示：thirdScriptError Cannot read property '$data' of undefined;at pages/xx/xxxx onShow function;at api getStorage success callback function TypeError: Cannot read property '$data' of undefined
原因是this出现在getStorage方法的回调函数中，此时this指向的作用域已不是当前页面。如果想指向当前页面的话，需要在使用前将当前页面的实例保存到变量中，也就是方法中注释掉的部分var self = this

• 页面高度默认没有铺满整个屏幕

根据上述图片可以看到，默认情况下page是不会填充整个屏幕的，是根据里面的控件内容，如果需要铺满整个屏幕需要设置page控件的高度。

接口

• uni.requestPayment(OBJECT)

  以下是官方示例，需要注意的点就是返回的结果需要调用JSON.stringify()进行处理，不能直接通过对象.属性值的方式获取err_desc，要先进行JSON处理才可以。

  // 仅作为示例，非真实参数信息。
  uni.requestPayment({
      provider: 'wxpay',
      timeStamp: String(Date.now()),
      nonceStr: 'A1B2C3D4E5',
      package: 'prepay_id=wx20180101abcdefg',
      signType: 'MD5',
      paySign: '',
      success: function (res) {
          console.log('success:' + JSON.stringify(res));
      },
      fail: function (err) {
          console.log('fail:' + JSON.stringify(err));
      }
  });