20 需要注意

easycom组件规范

HBuilderX 2.5.5起支持

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。

比如前述举例的uni-rate组件 (opens new window)，它导入到uni- app项目后，存放在了目录/components/uni-rate/uni-rate.vue

同时它的组件名称也叫uni-rate，所以这样的组件，不用在script里注册和引用。 如下：

    <template>
    		<view>
    			<uni-rate></uni-rate><!-- 这里会显示一个五角星，并且点击后会自动亮星 -->
    		</view>
    	</template>
    <script>
    	// 这里不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用
    	export default {
    		data() {
    			return {
    				
    			}
    		}
    	}
    </script>

不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。

组件库批量安装，随意使用，自动按需打包。以官方的uni-ui为例，在HBuilderX新建项目界面选择uni- ui项目模板，只需在页面中敲u，拉出大量组件代码块，直接选择，即可使用。大幅提升开发效率，降低使用门槛。

在DCloud插件市场 (opens new window)下载符合components/组件名称/组件名称.vue目录结构的组件，均可直接使用。

easycom是自动开启的，不需要手动开启。

如果你的组件名称或路径不符合easycom的默认规范，可以在pages.json的easycom节点进行个性化设置，自定义匹配组件的策略。另见 (opens new window)

如果不使用easycom，手动引用和注册vue组件，则需要分3步写如下代码：

1. import导入组件
2. components里注册组件
3. template中使用组件

    <template>
    		<view>
    			<uni-rate text="1"></uni-rate><!-- 3.使用组件 -->
    		</view>
    	</template>
    	<script>
    		import uniRate from '@/components/uni-rate/uni-rate.vue';//1.导入组件
    		export default {
    			components:{uniRate }//2.注册组件
    		}
    	</script>

scroll-view

其实是关于 scroll-view 失效的问题，复制官方代码后会发现 scroll-view 横向滚动不生效，其实是没有设置好样式，将 scroll- view 容器设置宽度，并设置 white-space: nowrap; scroll-view 容器的每一项都设置宽度和 display:inline- block

    .scroll-view {
        width: 100%;
        white-space: nowrap;
        .item {
            position: relative;
            display: inline-block;
            width: 218rpx;
            padding-bottom:16rpx;
            margin-right: 16rpx;
            line-height: 34rpx;
        }
    }

阅读全文