一：小程序组件

1：小程序组件建立

第一步创建组件：

创建一个组件(子组件，文件夹+小的文件夹+选中右击建立compinents页面然后出现4个样式页面)，然后在pages的其中一个页面（父组件）的json中引入组件

第二步使用组件：

使用子组件，子组件的文件名就是pages的wxml中的标签名进行使用

第三步基本方法操作：1：父传子

父组件做的操作：第一步：通过标签属性的方式来传递数据将获取的数组的item赋值给一个变量然后子组件通过[properties]接收，子组件通过触发事件向页面传参列如：

 父：<block wx:for="{{arr}}" wx:key="index">   
  <swiper-item>
   <Compont rItem="{{item}}" bindtap="go" data-url="          {{item.path}}">
  </Compont>
  
子：
  <view class="swiper-item ">
  <image class="active" data-url="{{rItem.path}}" 
  bindtap="getUrl" 
  src="{{rItem.image}}"></image>
  </view>
 子.js:
  properties: {
rItem:{
  type:Object,
  value:[]
},
 },

子组件需要做的操作：第一步：子组件的js中在properties中先接收对象这个对象名就是父组件传过来的然后写表面接收的数据类型

子组件展示效果：

总结：父传子：@1 先在pages的页面中先将页面的基本样式写出来，然后在将wxml和wxss中的样式剪切到子组件中；@2 在页面中将子组件的文件名作为标签使用。用block无意义的占位符将for循环写在上面，下面的子组件的标签中将循环的item赋值给一个变量，页面的js中将数组的信息写入；@3 子组件：将之前cv过来的wxml中，把这个变量写在页面中，并在js的properties中先接收对象这个对象名就是父组件传过来的然后写表面接收的数据类型基础的页面渲染就可以了

第三步基本方法操作：2：子传父

通过自定义事件绑定要传递的数据

  //this.triggerEvent("父组件自定义事件的名称",要传递的参数)
   this.triggerEvent("itemChange",{index});

父组件要使用子组件的话，首先在json中引入，然后在页面中用子组件标签<子组件名></子组件名>

父组件向子组件传参通过自己页面内的子标签传递，通过子组件的传递的方法名进行绑定接收的方法

子组件向父组件传参通过绑定方法传递，通过properties进行接收。

还有一个点，如果将父组件的写在子组件标签内容的元素显示出来呢，这时候就用到slot

二：slot[插槽]

slot 标签其实就是一个占位符插槽，写在子组件内用来接收父组件通过标签传递过来的
等到父组件调用子组件的时候，再传递标签过来最终这些被传递的标签，就会替换 slot 插槽的位置

子组件wxml，增加一个slot

 父：<CompA msg="{{msg}}" bindhandler="handler">
<view style="font-size:30px;" slot="s1">张国荣--沉默是金</view>
<view style="font-size:30px;" slot="s2">张学友--吻别</view>
</CompA>
子：<slot name="s1"></slot>
 <view bindtap="childChange">{{msg}}</view>
 <!-- 插槽里面显示的是组件标签插入的内容 -->
 <slot name="s2"></slot>

三：获取用户信息：

     页面的wxml：  <button bindtap="getUserInfo" 
     plain type="primary">获取用户信息     </button>
       <image src="{{touxiang}}"></image>
        <view>{{nichen}}</view>
     页面的js：data: {
    touxiang:'',
    nichen:''
},
getUserInfo: function () {
    wx.getUserProfile({
        desc: '亲爱的宝贝：',
        success: (res) => {
            console.log(res)
            let {userInfo:{avatarUrl,nickName}} = res;
            this.setData({
                nichen:nickName,
                touxiang:avatarUrl
            })
        }
    })
},

想要一进入页面就显示头像和昵称需要使用open-type标签

 <open-data type="userAvatarUrl"></open-data>
 <open-data type="userNickName"></open-data>
 <!-- 使用语言 -->
<open-data type="userLanguage"></open-data>

四：获取地址

 wxml：    <button bindtap="getAdress">获取地址信息</button>
      <view>{{addressStr}}</view>
       
 js：      getAdress() {
    /* 获取经纬度实时地址 */
    wx.getLocation({
        type: 'wgs84',
        success:(res)=>{
            console.log(res)
            this.setData({
                addressStr:'经度：'+res.longitude+' 纬度：'+res.latitude
            })
        }
    })
    /* 选择收货地址 */
    // wx.chooseAddress({
    //     success:({cityName,countyName,detailInfo})=>{
    //         this.setData({
    //             addressStr:cityName+countyName+detailInfo
    //         })
    //     }
    // })
    /* 选择地址 */
    // wx.chooseLocation({
    //     success:({address,name})=>{
    //        this.setData({
    //            addressStr:address+name
    //        })
    //     },
    //     fail:(err)=>{
    //         wx.showToast({
    //           title: '确认是否授权',
    //           icon:"error"
    //         })
    //     },
    //     // complete:(res)=>{
    //     //     console.log(res)
    //     // }
    // })
},

小程序组件之传值和用户信息获取