微信小程序组件及获取用户权限

<view>父组件msg的值:{{msg}}</view>

<Header msg="{{msg}}" bindchildChange="change" ></Header>

<block wx:for="{{list}}" wx:key="index">

<ListItem rItem="{{item}}" bindchildGO="childGO"></ListItem>

</block>

<Header  msg="{{msg}}"></Header>

/ pages/list/listwxss /

item{

    padding: 5px;

}

img1{

    width: 120px;

    height: 120px;

    border-radius: 5px;

}

row{

    flex: 1;

    height: 120px;

}

title{

    padding: 10px;

}

dec{

    padding:0 10px;

}

// pages/list/listjs

Page({

    /

      页面的初始数据

     /

    data: {

        msg:"你是我的小宝贝",

     list:[{

         url:"https://wwwbaiducom",

         imageUrl:"https://img1baiducom/it/u=2519912129,4264910682&fm=253&fmt=auto&app=138&f=JPEGw=800&h=500",

         title:"我的小可爱",

         content:"可爱可爱"

     },

     {

         imageUrl:"https://img1baiducom/it/u=931545919,4030748642&fm=253&fmt=auto&app=138&f=JPEGw=306&h=459",

         title:"我的小可爱",

         content:"mao可爱可爱"

     },]

    },

    change:function(str){

        thissetData({

            msg:strdetail

        })

    },

    childGO(e){

        wxnavigateTo({

          url: '/pages/webpage/webpageurl='+edetail,

        })

    },

    /

      生命周期函数--监听页面加载

     /

    onLoad: function (options) {

    },

    /

      生命周期函数--监听页面初次渲染完成

     /

    onReady: function () {

    },

    /

      生命周期函数--监听页面显示

     /

    onShow: function () {

    },

    /

      生命周期函数--监听页面隐藏

     /

    onHide: function () {

    },

    /

      生命周期函数--监听页面卸载

     /

    onUnload: function () {

    },

    /

      页面相关事件处理函数--监听用户下拉动作

     /

    onPullDownRefresh: function () {

    },

    /

      页面上拉触底事件的处理函数

     /

    onReachBottom: function () {

    },

    /

      用户点击右上角分享

     /

    onShareAppMessage: function () {

    }

})

 "usingComponents": {

    "ListItem":"/components/ListItem/ListItem",

    "Header":"/components/Header/Header"

  }

<view class="flex item" bindtap="go" data-url="{{rItemurl}}">

<image class="img1" src="{{rItemimageUrl}}"></image>

<view class="row">

<view class="title">{{rItemtitle}}</view>

<view class="dec">{{rItemcontent}}</view>

</view>

</view>

img1{

  width: 120px;

  height: 120px;

  display: block;

  border-radius: 5px;

}

item{

  padding: 5px;

}

row{

  flex: 1;

  height: 120px;

}

title{

  padding: 10px;

}

dec{

  padding: 0 10px;

}

flex{

  display: flex;

}

flex-between{

  justify-content: space-between;

}

flex-center{

  justify-content: center;

  align-items: center;

}

// components/ListItem/ListItemjs

Component({

  /

    组件的属性列表

   /

  properties: {

    / 子组件用properties来接收对象 /

    rItem:{

      / 如果没有传入对象显示的默认值 /

      type:Object,

      value:{

        imageUrl:'https://gimg2baiducom/image_search/src=http%3A%2F%2Fpic1zhimgcom%2Fv2-a7c5da54b8008049fe43089752c74ce2_rjpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpic1zhimgcom&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpegsec=1648446806&t=9f16e5a2c12d51ba32169795e4d339f7',

      title:'我的小可爱',

      content:'我的小可爱我的小可爱我的小可爱我的小可爱'}

    }

  },

  /

    组件的初始数据

   /

  data: {
  },

  /

    组件的方法列表

   /

  methods: {

   go(e){

    consolelog(e)

    let url = ecurrentTargetdataseturl;

    thistriggerEvent('childGO',url)

   }

  }

})

<view class="t" bindtap="handler" >{{msg}}</view>

t{

    font-size: 25px;

    padding: 10px;

    text-align: center;

}

// components/Header/Headerjs

Component({

    /

      组件的属性列表

     /

    properties: {

    msg:{

        type:String,

        value:'我是Header'

    }

    },

    /

      组件的初始数据

     /

    data: {

    },

    /

      组件的方法列表

     /

    methods: {

    handler:function(){

        / 直接改子组件里的msg父组件不会同步所以不能直接改 /

        / thissetData({

            msg:'你好'

        }) /

        thistriggerEvent('childChange','你可真坏啊')

    },
    }

})
<button bindtap="getuserInfo" plain type="primary">获取用户信息</button>

<image src="{{touxiang}}" class="t"></image>

<view>{{nicheng}}</view>

<!-- 想要已进入页面就显示头像和昵称使用 open-type 标签 -->

<open-data type="userAvatarUrl"></open-data>

<open-data type="userNickName"></open-data>

<!-- 使用语言 -->

<open-data type="userLanguage"></open-data>

data: {

        msg: 'csgo',

        touxiang: "",

        nicheng: ""

    },

getuserInfo() {

        wxgetUserProfile({

            desc: '亲爱的宝贝', // 声明获取用户个人信息后的用途，后续会展示在d窗中，请谨慎填写

            success: (res) => {

                consolelog(res)

                let {

                    userInfo: {

                        avatarUrl,

                        nickName

                    }

                } = res;

                thissetData({

                    nicheng: nickName,

                    touxiang: avatarUrl

                })

            }

        })

    },

以上就是关于微信小程序组件及获取用户权限全部的内容，包括:微信小程序组件及获取用户权限、、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！