微信小程序组件及获取用户权限
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序组件及获取用户权限相关的知识，希望对你有一定的参考价值。
参考技术A <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/list.wxss */
.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/list.js
Page(
/**
* 页面的初始数据
*/
data:
msg:"你是我的小宝贝",
list:[
url:"https://www.baidu.com",
imageUrl:"https://img1.baidu.com/it/u=2519912129,4264910682&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
title:"我的小可爱",
content:"可爱可爱"
,
imageUrl:"https://img1.baidu.com/it/u=931545919,4030748642&fm=253&fmt=auto&app=138&f=JPEG?w=306&h=459",
title:"我的小可爱",
content:"mao可爱可爱"
,]
,
change:function(str)
this.setData(
msg:str.detail
)
,
childGO(e)
wx.navigateTo(
url: '/pages/webpage/webpage?url='+e.detail,
)
,
/**
* 生命周期函数--监听页面加载
*/
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="rItem.url">
<image class="img1" src="rItem.imageUrl"></image>
<view class="row">
<view class="title">rItem.title</view>
<view class="dec">rItem.content</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/ListItem.js
Component(
/**
* 组件的属性列表
*/
properties:
/* 子组件用properties来接收对象 */
rItem:
/* 如果没有传入对象显示的默认值 */
type:Object,
value:
imageUrl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-a7c5da54b8008049fe43089752c74ce2_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648446806&t=9f16e5a2c12d51ba32169795e4d339f7',
title:'我的小可爱',
content:'我的小可爱我的小可爱我的小可爱我的小可爱'
,
/**
* 组件的初始数据
*/
data:
,
/**
* 组件的方法列表
*/
methods:
go(e)
console.log(e)
let url = e.currentTarget.dataset.url;
this.triggerEvent('childGO',url)
)
<view class="t" bindtap="handler" >msg</view>
.t
font-size: 25px;
padding: 10px;
text-align: center;
// components/Header/Header.js
Component(
/**
* 组件的属性列表
*/
properties:
msg:
type:String,
value:'我是Header'
,
/**
* 组件的初始数据
*/
data:
,
/**
* 组件的方法列表
*/
methods:
handler:function()
/* 直接改子组件里的msg父组件不会同步所以不能直接改 */
/* this.setData(
msg:'你好'
) */
this.triggerEvent('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()
wx.getUserProfile(
desc: '亲爱的宝贝', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) =>
console.log(res)
let
userInfo:
avatarUrl,
nickName
= res;
this.setData(
nicheng: nickName,
touxiang: avatarUrl
)
)
,
以上是关于微信小程序组件及获取用户权限的主要内容，如果未能解决你的问题，请参考以下文章