easycom组件模式是怎么回事

官方文档：https://uniapp.dcloud.io/collocation/pages?id=easycom

easycom组件就是符合components/组件名称/组件名称.vue目录结构的组件。

简单说，只要听从官方的约定，那么无需引入、无需注册，可以实现开发时全局使用、打包时按需打包。

注意事项：

官方文档说的注意事项我就不重复了。
小程序原生组件要放到/wxcomponents/里面，并不是放到components里面，也不适用easycom。
符合components/组件名称/组件名称.vue目录结构，只要存放，无需其他任何操作就会被HBuilderX认出，但现实中几乎没人这么存，因为我们可能要使用多个组件库，这时候怎么办？你可以到pages.json去明确注册一下，这样存放路径就不那么受限了。例如：

// pages.json
{
    "easycom": {
        "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
    },
    
    // 以下为pages.json本身已有的内容
    "pages": [
        // ......
    ]
}

我们就看这行，它其实类似于正则替换，以u-开头的组件名，都会自动去@/uview-ui/components里面找。

"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"

如果还有一个组件库也是以u-开头作为组件名呢？怎么解决冲突？

首先看哪个组件库是低使用频率的，然后pages.json注册它的时候，不要写^u-(.*)，改成别的前缀，比如^ux-(.*)，使用的时候也注意要使用这个前缀就行了，比如。

vue语法 this.$emit('update:xxx') 在小程序不生效？

似乎就是不生效，可以用另外的写法：

this.$emit('update:fieldValue', e.detail.value);
// 改成：
this.$emit('update', e.detail.value);

其中fieldValue是prop名，由于父组件里要显式声明自定义事件，所以改成省略。

然后，父组件里需要显式声明自定义事件：

// 给组件加上
@update="password=$event"

页面间传递数据、调用方法的几种方式

URL传参

就不说了。

向navigateTo的页面传递数据、调用方法

这个是小程序的基础知识，在此简单说一下。比如，我想调用后一个页面的xxxToast方法，做法是：

A页面：

    methods: {
      onTap() {
        uni.navigateTo({
          url: '/pages/mine/index',
          success: (res) => {
            res.eventChannel.emit('xxxToast', { title: 'TOAST的标题' });
          }
        })
      }
    }

mine页面：

    onLoad() {
      const eventChannel = this.getOpenerEventChannel();
      eventChannel.on('xxxToast', ({title}) => {
        uni.showToast({
          title
        })
      }),
    },

向navigateBack的前一页传递信息

有这样一个场景，从文章列表页打开某个详情页，详情页有个删除按钮，点击删除，则文章被删除，并跳回列表页，列表页应重新ajax，或者从内存中的列表数组中删掉该文章。让列表页更新数据不允许无脑更新，必须是有指令才更新，没指令则不更新。我们分析一下：

似乎需要用navigateBack，但是navigateBack的success不具有res.eventChannel能力。
navigateBack没有url属性，无法URL传参。
换用navigateTo的话，被删除的详情页会留存在页面栈，手机回退会重新进入被删除的详情页，肯定不允许。
换用redirectTo的话，虽然详情页被杀掉，因此不会重新进入详情页，但是进入列表页之后，手机回退会又进一次列表页，也不允许。

所以，我们依然需要用navigateBack，然后用某种方式传递信息，怎么办呢？

可以利用getCurrentPages()获取页面栈，然后执行前一页的方法即可。

A页面：

    methods: {
      list() {
        // ...
      }
    }

mine页面（也就是B页面）：

原理是利用页面栈调用其他页面的方法。但不同平台又有区别。

H5和小程序必须先调用页面栈的方法，再回退，也就导致，页面栈要找倒数第二个页面。
APP可以有2个选择，那么采用上方的方法，要么是先回退，再调用页面栈的方法。

综合说，应当全平台统一采用先调页面栈、后回退的方式。

然后区分.$vm。

    methods: {
      onTap() {
            let pages = getCurrentPages();
            let prevPage = pages[pages.length - 2];
            // #ifdef H5
            prevPage.list();
            // #endif
            // #ifndef H5
            prevPage.$vm.list();
            // #endif
            uni.navigateBack()
      }
    }

A页面调用uni原生方法，B页面显示

现在，我们不跨页调用自定义方法，只是调用uni原生方法，这时候最简单，直接写到success就行了。适用于所有路由方法。不适用于H5，因为H5一旦路由变化就终止一切后续代码。

        uni.navigateBack({
          success: () => {
            uni.showToast({
              title: '哈哈哈'
            })
          }
        });

引用本地图片作为背景图

本地背景图片的引用路径推荐使用以~@开头的绝对路径。

动态添加右上角按钮

          // #ifdef APP-PLUS
            var wv = plus.webview.currentWebview();
            wv.setStyle({
                titleNView: {  
                    titleText: '删除'  
                }  
            });
          // #endif

同样的，plus.webview.currentWebview()可以做很多事，参看：

https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject

uni-app常见问题解决办法