微信小程序引用组件的方式

1.component引入

先创建

 

 

 再需要的页面在对应的json中引入

{
    "navigationBarTitleText": "结算",
    "usingComponents": {
        "goods-form":"/components/order/order-submit/goods-form/goods-form"
    }
      
}

再使用

<goods-form></goods-form>

2.通过import引入

先定义一个组件

<template name="goods-form">
    <view class="address-picker" style="padding:0 24rpx;">
        <view class="form-title text-more">{{item.form.name?item.form.name:'表单信息'}}</view>
        <view class="form-list">
            <view class="form-one flex-row" wx:for="{{item.form.list}}" wx:for-index="formId" wx:for-item="form" wx:key="index">
                <view class="flex-grow-0 list-name {{form.type=='text'?'flex-y-center':''}} {{form.required==1?'required':''}}">{{form.name}}</view>
                <view class="flex-grow-1 flex-y-center" wx:if="{{form.type=='text'}}">
                    <input bindConfirm="formInput" bindInput="formInput" bindblur="formInput" data-form-></input>
                </view>
                <view class="flex-grow-1" wx:if="{{form.type=='textarea'}}">
                    <textarea autoHeight="true" bindConfirm="formInput" bindInput="formInput" bindblur="formInput" data-form-></textarea>
                </view>
                <block wx:if="{{form.type=='time'}}">
                    <view class="flex-grow-1" style="justify-content:flex-end;text-align:right;">
                        <picker bindchange="formInput" data-form->
                            <view>{{form.default?form.default:'请选择'}}</view>
                        </picker>
                    </view>
                    <view class="flex-grow-0">
                        <image class="right-jiantou" src="{{__wxapp_img.store.jiantou_r.url}}"></image>
                    </view>
                </block>
                <block wx:if="{{form.type=='date'}}">
                    <view class="flex-grow-1" style="justify-content:flex-end;text-align:right;">
                        <picker bindchange="formInput" data-form->
                            <view>{{form.default?form.default:'请选择'}}</view>
                        </picker>
                    </view>
                    <view class="flex-grow-0">
                        <image class="right-jiantou" src="{{__wxapp_img.store.jiantou_r.url}}"></image>
                    </view>
                </block>
                <view class="flex-grow-1 flex-row" style="flex-wrap:wrap" wx:if="{{form.type=='radio'}}">
                    <view bindtap="selectForm" class="default {{v.is_selected==1?'d-active':''}}" data-form->{{v.name}}</view>
                </view>
                <view class="flex-grow-1 flex-row" style="flex-wrap:wrap" wx:if="{{form.type=='checkbox'}}">
                    <view bindtap="selectForm" class="default {{v.is_selected==1?'d-active':''}}" data-form->{{v.name}}</view>
                </view>
                <block wx:if="{{form.type=='uploadImg'}}">
                    <view bindtap="uploadImg" class="flex-grow-1 flex-y-center" data-form->
                        <view style="text-align:right;width:100%;font-size:0" wx:if="{{form.default}}">
                            <image mode="aspectFit" src="{{form.default}}" style="width:88rpx;height:96rpx"></image>
                        </view>
                        <view style="text-align:right;width:100%;color:#c9c9c9;" wx:else>
                            <view>{{form.tip?form.tip:'请选择图片'}}</view>
                        </view>
                    </view>
                    <view class="flex-grow-0 flex-y-center">
                        <image src="{{__wxapp_img.balance.right.url}}" style="width:12rpx;height:18rpx;margin-left:18rpx;"></image>
                    </view>
                </block>
            </view>
        </view>
    </view>
</template>

　　使用

<block wx:if="{{item.mch_id==0&&item.form&&item.form.is_form==1&&item.form.list.length>0}}>
                    <import src="/components/order/order-submit/goods-form/goods-form"></import>
                    <template is="goods-form" data="{{item:item,index:index,__wxapp_img:__wxapp_img}}"></template>
                </block>

　　3.通过include导入

 

 使用

 <include src="/components/footer/footer"></include>