近期在使用?uniapp, 但是并沒后搞懂他是如何將小程序的組件應(yīng)用再?uniapp?中的。
這個問題是我在使用了?vant?的小程序組件 (vant-weapp) 后發(fā)現(xiàn)的。

首先我創(chuàng)建了一個 自定義導(dǎo)航欄樣式的?uniapp；

操作：
在項目根目錄下的?pages.json?文件中 定義全局樣式?globalStyle?設(shè)置
"navigationStyle" : "custom"
然后在跳轉(zhuǎn)之后的頁面添加了一個自定義組件
操作：
在項目根目錄下的?pages.json?文件，跳轉(zhuǎn)的頁面屬性?styles?中增加設(shè)置

然后打開?pages/about/about.vue?文件
在templae下的view節(jié)點中加入

在?<script></script>?的?methods?屬性中加入

這個時候點擊?navbar顯示效果的?返回就會看到控制臺報錯
11:32:20.221 [WARN] : Component "pages/about/about" does not have a method "goBack" to handle event "click-left".
此問題已經(jīng)提交到 dcloud

解決辦法 手工創(chuàng)建一個組件

1. 找到?vant-weapp的nav-bar組件

2. 將?index.wxml?的內(nèi)容放到template中

3. 將?index.js?的內(nèi)容放到script中

4. 將?index.wxss的內(nèi)容放到?style?中

5. 然后修改語法

1. solt?節(jié)點刪掉 （我用不到這個東西，如果你有用需要自行處理）

2. block?改為?template

3. wx:if?改為?v-if

4. 樣式關(guān)聯(lián)修正

5. class 關(guān)聯(lián)修正

6. 其他 weapp 和 vue 不同的地方

https://hexo.hainuo.info/posts/adapt%20from%20weapp%20componet%20to%20uniapp%20componet/

<template>
<view :class="{customClass:true, vanNavBar:true, 'van-hairline--bottom':true , 'van-nav-bar--fixed':fixed }">
?<view class="van-nav-bar__left" @click="onClickLeft">
? ?<template v-if="leftArrow||leftText">
? ? ?<van-icon
? ? ? ?v-if="leftArrow"
? ? ? ?name="arrow"
? ? ? ?custom-class="van-nav-bar__arrow"
? ? ?/>
? ? ?<view v-if="leftText" class="van-nav-bar__text">{{ leftText }}</view>
? ?</template>
? ?<!-- <slot v-else name="left" /> -->
?</view>
?<view class="van-nav-bar__title title-class van-ellipsis">
? ?<template v-if="title">{{ title }}</template>
? ?<!-- <slot v-else name="title" /> -->
?</view>
?<view class="van-nav-bar__right" @click="onClickRight">
? ?<view v-if="rightText" class="van-nav-bar__text">{{ rightText }}</view>
? ?<!-- <slot v-else name="right" /> -->
?</view>
</view>
</template>
<script>
export default {
props:{
fixed:Boolean,
leftArrow:Boolean,
leftText:String,
title:String,
rightText:String,
},
methods:{
onClickLeft: function onClickLeft() {
this.$emit('click-left');
},
onClickRight: function onClickRight() {
this.$emit('click-right');
}
}
}
</script>
<style>
.van-ellipsis {
? ?overflow: hidden;
? ?white-space: nowrap;
? ?text-overflow: ellipsis;
}
.van-multi-ellipsis--l2 {
? ?overflow: hidden;
? ?text-overflow: ellipsis;
? ?display: -webkit-box;
? ?-webkit-line-clamp: 2;
? ?-webkit-box-orient: vertical;
}
.van-multi-ellipsis--l3 {
? ?overflow: hidden;
? ?text-overflow: ellipsis;
? ?display: -webkit-box;
? ?-webkit-line-clamp: 3;
? ?-webkit-box-orient: vertical;
}
.van-clearfix::after {
? ?content: '';
? ?display: table;
? ?clear: both;
}
.van-hairline,
.van-hairline--bottom,
.van-hairline--left,
.van-hairline--right,
.van-hairline--surround,
.van-hairline--top,
.van-hairline--top-bottom {
? ?position: relative;
}
.van-hairline--bottom::after,
.van-hairline--left::after,
.van-hairline--right::after,
.van-hairline--surround::after,
.van-hairline--top-bottom::after,
.van-hairline--top::after,
.van-hairline::after {
? ?content: ' ';
? ?position: absolute;
? ?pointer-events: none;
? ?box-sizing: border-box;
? ?-webkit-transform-origin: center;
? ?transform-origin: center;
? ?top: -50%;
? ?left: -50%;
? ?right: -50%;
? ?bottom: -50%;
? ?-webkit-transform: scale(0.5);
? ?transform: scale(0.5);
? ?border: 0 solid #eee;
}
.van-hairline--top::after {
? ?border-top-width: 1px;
}
.van-hairline--left::after {
? ?border-left-width: 1px;
}
.van-hairline--right::after {
? ?border-right-width: 1px;
}
.van-hairline--bottom::after {
? ?border-bottom-width: 1px;
}
.van-hairline--top-bottom::after {
? ?border-width: 1px 0;
}
.van-hairline--surround::after {
? ?border-width: 1px;
}
.van-nav-bar {
? ?height: 46px;
? ?position: relative;
? ?-webkit-user-select: none;
? ?user-select: none;
? ?text-align: center;
? ?line-height: 46px;
? ?background-color: #fff;
}
.van-nav-bar__arrow {
? ?color: #1989fa;
? ?vertical-align: middle;
? ?-webkit-transform: rotate(180deg);
? ?transform: rotate(180deg);
}
.van-nav-bar__arrow + .van-nav-bar__text {
? ?margin-left: -20px;
? ?padding-left: 25px;
}
.van-nav-bar--fixed {
? ?top: 0;
? ?left: 0;
? ?width: 100%;
? ?position: fixed;
}
.van-nav-bar__title {
? ?margin: 0 auto;
? ?max-width: 60%;
? ?font-size: 16px;
? ?font-weight: 500;
}
.van-nav-bar__left,
.van-nav-bar__right {
? ?bottom: 0;
? ?font-size: 14px;
? ?position: absolute;
}
.van-nav-bar__left {
? ?left: 15px;
}
.van-nav-bar__right {
? ?right: 15px;
}
.van-nav-bar__text {
? ?color: #1989fa;
? ?margin: 0 -15px;
? ?padding: 0 15px;
? ?display: inline-block;
? ?vertical-align: middle;
}
.van-nav-bar__text:active {
? ?background-color: #e8e8e8;
}
</style>