uniapp学习笔记-问题

1.内置组件不能绑定 class 的问题

在使用扩展的 UI 组件，比如 uni-ui等给这些组件绑定 class 时，渲染并不能渲染成功。

只能在给他们包一层view 自定义 calss 。避免全局的样式污染。

2. 定位 API 调用，需要增加授权配置manifest.json

增加配置,允许小程序调用位置的权限接口。然后通过requiredPrivateInfos定义你需要哪些方法。

{
  /* 小程序特有相关 */
  "mp-weixin": {
    // ...
    "permission": {
      "scope.userLocation": {
        "desc": "请求获取地理信息"
      }
    },
    "requiredPrivateInfos": [
      "getLocation",
      "chooseAddress",
      "choosePoi",
      "chooseLocation"
    ]
  }
}

3. 小程序不支持自定义双向绑定model

在调用组件时可通过v-model绑定。

在 uniapp 中，则是不可以的。 小程序不支持

4.不能绑定给 style、class 对象

小程序端不支持绑定对象给 class、style，比如：

<view :class="boxStyle"></view>


 computed: {
    boxStyle() {
      return {
        active: this.activeTab ? true : false,
      };
    },
  }

这样是不行的，渲染后的元素节点显示 object 。 不通过计算属性，直接在属性上绑定逻辑。

 <view :class="[activeTab ? 'active' : '']"></view>

5.一些全局的配置色彩，字号 注意单位、格式。

在配置pages.json的一些设置，颜色都是必须是十六进制颜色，不能是 rgb 或 rgba

• globalStyle.navigationBarBackgroundColor 导航栏背景颜色
• globalStyle.backgroundColor 下拉显示出来的窗口的背景色
• tabBar.color tab 上的文字默认颜色
• tabBar.backgroundColor tab 的背景色
• tabBar.fontSize 文字默认大小
• tabBar.iconWidth 图标默认宽度（高度等比例缩放）
  …

自定义手机顶部的导航栏。

通常手机顶部信号、电量等一些状态占据手机的部分位子。想让这部分区域也融入到我们的程序中。

配置pages.jons

{
  "globalStyle": {
    "navigationStyle": "custom"
  }
}

设置自定义导航样式，这样你的页面会以手机屏幕的最顶端开始。顶部标题、返回都需要自己去定义了。

6.在视图中不能直接使用绑定在Vue.prototype上的全局变量

直接在视图使用Vue.prototype上的变量是访问不到的。向下面这样：

  <img :src="$baseUrl + data.imgUrl" />

可以通过计算属性，或者提供一个变量值.

  <img :src="avatarUrl" />

7.uniapp路由跳转

uniapp跳转官方地址

7.1.uni.navigateTo保留当前页面，跳转到应用内的某个页面

使用uni.navigateBack可以返回到原页面

//需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。
//参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；
//如 'path?key=value&key2=value2'，path为下一个页面的路径，
//下一个页面的onLoad函数可得到传递的参数
uni.navigateTo({
	url:'./index/index'
});

注意：

• 页面跳转路径有层级限制，不能无限制跳转新页面
• 跳转到 tabBar ，页面只能使用 switchTab 跳转

7.2.uni.redirectTo关闭当前页面，跳转到应用内的某个页面。

uni.redirectTo({
	url: './index/index'
});

7.3 uni.reLaunch关闭所有页面，打开到应用内的某个页面。

uni.reLaunch({
	url: './index/index'
});

7.4.uni.switchTab跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

uni.switchTab({
	url: '/pages/index/index'
});

注意：

• 需要跳转的 tabBar页面的路径（在pages.json文件中配置的tabBar页面），路径后不能带参数，可以用uni.reLaunch代替

7.5.uni.navigateBack关闭当前页面，返回上一页面或多级页面。

可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

uni.navigateBack({
	delta: 2  //返回两层页面
});