uni-app 取路由参数的两种方式，selectorQuery 对象实例，uni.upx2px

uni-app

• 路由参数

/**
*路由取参 两种方式
*first：通过data
*second： 通过计算属性computed:
*getCurrentPages()  函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
*/

<script>
  export default {
    data() {
      const routers = getCurrentPages()
      const { product_id } = routers[routers.length - 1].options
      const { appName } = uni.getSystemInfoSync()
      return {
        product_id,
        appName,
      }
    },
    computed: {
        product_id(){
          const routers = getCurrentPages()
          const { product_id } = routers[routers.length - 1].options;
           //routers[routers.length - 1]  当前页面
          //routers[routers.length - 2]  上一个页面
          return product_id;
        },
    },
  }
</script>

• selectorQuery 对象实例

//uni.createSelectorQuery()   返回一个 selectorQuery 对象实例。select(类名)
uni.createSelectorQuery().select('.class').boundingClientRect((res)=>{
 const {top,right,bottom,left,height,width} =res;//节点的上，右，下，左的边界坐标，width，height节点的宽高
}).exec();

• uni.upx2px(number)

设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx
举例说明：
若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 640，结果为：117upx。
若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为：750 * 200 / 375，结果为：400upx。

data() {
      return {
        headerHight:uni.upx2px(1538),
      }
    },

更多内容

求关注，微信公众号-前端程序猿Pro，不至于前端~