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

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

================================================================================

<view

class=“navigation-bar”

:style="{ ‘padding-top’:${paddingTop}px,

‘height’:${height}px,

‘line-height’:${height}px,

background:background,

color:color,

‘font-size’:fontSize}">

{{ title }}

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组件

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组件

<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-view

:style=“{ color: ${selected === index ? selectedColor : color} }”

{{ item.text }}</cover-view