Taro踩坑记录(VUE多端同构)

全局变量

1. VUEX
2. global
   utils新建一个global.js

const globalData = {};
export const setGlobalData = (key, val) => {
  globalData[key] = val;
}
export const getGlobalData = (key) => {
  return globalData[key];
}

全局方法

同上，新建一个globalMethods.js

const globalMethods = {};
/* 此处定义方法
	例如：
*/
globalMethods.toast = str => {
  Taro.showToast({
    title: str,
    duration: 2000,
    icon: "none"
  });
};
export default globalMethods;

Taro自定义navBar

<template>
  <view class="navBar">
    <view
      class="navigation-bar"
      :style="{	'padding-top':`${paddingTop}px`,
      			'height':`${height}px`,
      			'line-height':`${height}px`,
      			background:background,
      			color:color,
      			'font-size':fontSize}">
      <view>{{ title }}</view>
    </view>
  </view>
</template>

<script>
import Taro from "@tarojs/taro";
export default {
  props: ["background", "color", "fontSize", "title"],
  data() {
    return {
      paddingTop: 44,
      height: 44
    };
  },
  created(){
    //导航栏自适应
    let systemInfo = Taro.getSystemInfoSync();
    let reg = /ios/i;
    this.paddingTop = systemInfo.statusBarHeight;//导航状态栏上内边距
    const h = reg.test(systemInfo.system) ? 44 : 48
    this.height = h
  }
};
</script>

<style>
.navigation-bar {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  color: #000000;
  background: #ffffff;
  z-index: 99;
  text-align: center;
}
</style>

web-view

由于h5页面不支持web-view组件，直接使用网址跳转

toDetail(item) {
      if(process.env.TARO_ENV === "h5"){
        window.location.href = item.essayUrl
        return
      }
      const url = encodeURIComponent(item.essayUrl);
      Taro.navigateTo({
        url: `/pages/web-view/index?url=${url}`
      });
}

自定义tabbar

1. app.config.js 配置

tabBar: {
    custom: true,
	/* ... */
}

2. tabbar页面记得引入自定义的tabbar组件

<template>
	<customTabBar ref="tabBar"></customTabBar>
</template>

import customTabBar from "@/components/custom-tab-bar/index.vue"
export default {
	components: { customTabBar },
	onShow() {
    	this.$refs.tabBar.selected = 0
    	this.msgUnread = getGlobalData("msgUnread");
  	},
}

3. 自定义tabbar组件

<template>
  <cover-view class="tab-bar">
    <cover-view class="tab-bar-border"></cover-view>
    <cover-view
      v-for="(item, index) in list"
      :key="index"
      class="tab-bar-item"
      @tap="switchTab(item.pagePath, index)"
    >
      <cover-image
        :src="selected === index ? item.selectedIconPath : item.iconPath"
      ></cover-image>
      <cover-view
        :style="{ color: `${selected === index ? selectedColor : color}` }"
        >{{ item.text }}</cover-view
      >
    </cover-view>
  </cover-view>
</template>

<script>
import Taro from "@tarojs/taro";
export default {
  data() {
    return {
      selected: 0,
      color: "#000000",
      selectedColor: "#333333",
      list: [
        {
          pagePath: "/pages/home/index",
          text: "首页",
          iconPath: "../../images/home.png",
          selectedIconPath: "../../images/home_active.png",
        },
        {
          iconPath: "../../images/mine.png",
          selectedIconPath: "../../images/mine_active.png",
          pagePath: "/pages/mine/index",
          text: "我的",
        },
      ],
    };
  },
  methods: {
    switchTab(path, index) {
      Taro.switchTab({ url: path });
      this.selected = index;
    },
  },
};
</script>

<style>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48PX;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 999;
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1PX;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item cover-image {
  width: 27PX;
  height: 27PX;
}

.tab-bar-item cover-view {
  font-size: 10PX;
}
</style>

注意CSS中使用PX保证不会自动转换为rpx

使用@代替相对路径

在config文件夹下index.js中

const path = require('path')
const config = {
	alias: {
    	'@/components': path.resolve(__dirname, '..', 'src/components'),
    	'@/utils': path.resolve(__dirname, '..', 'src/utils'),
    	'@/constant': path.resolve(__dirname, '..', 'src/constant')
  	},
}

为避免报错，创建jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["./src/components/*"],
      "@/utils/*": ["./src/utils/*"],
      "@/constant/*": ["./src/constant/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

坑

1. Eslint
   Taro自带Eslint，但是text标签内存在换行会影响页面内容，因此建议注释.eslintrc中的代码从而关闭Eslint

2. CSS
   CSS scoped不起作用，需要转为使用CSS Modules 或者 避免使用同名class，以及结合子代选择器使用。

本文地址：https://blog.csdn.net/weixin_45495667/article/details/110244290