微信小程序获取当前用户信息

微信小程序获取当前用户信息,第1张

一个很常用的功能,但是我还是发现有一些需要注意的地方在里面,简单记录一下。

第一个问题就是这个 button 组件需要添加 open-type 属性,并指定为 getUserInfo 类型,来获取用户基本信息。还有另外一种做法,具体可以参考 官方文档的说明 。

放一个动图哈哈哈

js 部分就是响应点击事件,使用 api wxgetUserInfo(Object object)

获取用户信息,注意传递给 wxgetUserInfo 的是一个字典其中包含了两个函数分别作为成功和失败的回调函数(callback function)

注意 this 的指代对象发生了变化,最开始的this是指代 Page() 构造出来的对象,在函数里面使用 this 会说未指定,所以我们使用了 that 承接一下,这也算传统艺能咯。

另外一点:获取用户信息时会自动d出一个对话框问用户是否提供信息,这个d窗只d出一次,如果用户点击了拒绝后来又想改为允许,可以使用 wxopenSetting({})

除了可以获取用户的昵称之外还有很多信息可以得到,还有一个比较常用的就是用户头像了也就是 resuserInfoavatarUrl 。

微信小程序中的rich-text可以接收转移html标签

字体的样式处理 可以通过 给rich-text添加类名设置字体样式

的样式(自适应)

获取的html标签字符串replace(/<img/g, '<img style="max-width:100%;height:auto;display:block;margin:10px 0;"')

一般是先修改json值再setData 比如:

page({

data:{

s1:{a:"",b:"b"}

},

changeData:function(e){

var cData=thisdatas1;

cDataa="1";//先修改json值

thissetData({ //再set值

s1:cData

})

}

})

回答不容易,希望能帮到您,满意请帮忙采纳一下,谢谢 !

<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:">

下图是小程序 小米Lite 的 Tab 切换效果:切换 Page 时,Tab 下方的指示器(红色横条)是没有滚动效果而是直接闪现到下一个 Page 的,这也是市面上小程序常见的 Tab 切换效果。

原生端 TabLayout 常见的功能就是我们的目标效果,所以 目标效果 如下:

通过了解小程序组件及技术支持,选定通过 scroll-view 、swiper 、swiper-item 、movable-area 、movable-view 配合 插槽 和 抽象节点 来实现自定义组件 tab-layout 。

具体如下图所示 :

主要实现(点击跳转查看源码)

1复制 tab-layout 组件到项目中 (点击跳转至源码 TabLayout 目录)

4在布局文件中使用 TabLayout 组件,并通过抽象节点 generic:item-tab 和 generic:item-page 分别与自定义的 Tab 和 Page 绑定

5使用自定义属性 indexAreaHeight 为 Index 及其活动区域设置高度

6使用自定义属性 tabList 设置数据源,根据数据源将自动生成对应数量的 Tab 和 Page

7按需选择可采用插槽 slot = "index" 或自定义属性 indexStyle 设置 Index 的样式

布局文件 indexwxml 中:

样式文件 indexwxss 中

布局文件 indexwxml 中

PS: 还有一个很重要的方法 onPageUpdata ,用于抽象节点 item-tab 和 item-page 通知父节点 tab-layout 刷新数据,在子控件中通过 thistriggerEvent("updata") 触发

可能出现问题:

1 当 item-page 中存在竖直滚动的 scroll-view 时出现滑动冲突该如何解决?

在 item-page 组件 attached 方法中按需为 scroll-view 设置固定高度或占满屏幕剩余位置 (点击跳转查看参考写法)

2当 item-page 或 item-tab 中调用 thissetData ( ) 之后,发现自定义属性 item 获取值为 null

出现该种情况,应在 thissetData ( ) 之后,执行 thistriggerEvent("updata") 触发 tab-layout 的 onPageUpdata 方法重新得到 item 值

3如何实现 " 懒加载 " ,即当 Tab 首次被选中时,才进行对应 Page 的数据加载?

为自定义组件 item-page 设置一个懒加载标志位暂定为 isLoadData ,通过订阅自定义属性 currentIndex ,在 currentIndex 属性变化或组件进行到 attached 生命周期时,通过判断 isLoadData 和 currentIndex 是否与 position 相等来进行数据加载并调整标志位 (点击跳转查看参考写法)

在小程序越来越普及的现状下,如何使得小程序能给用户带来更完善的显示效果和使用体验,是每一个开发者都应该力尽其责的事。鉴于本人当前对小程序和网页端的熟悉程度,该组件或许还存在很多瑕疵,如有更好的见解或建议,欢迎留言。

小程序没有所谓的compute计算属性,看文档发现有wxs模版,这个可以充当是小程序的计算属性了。

具体的使用方法如下:(记录一下,怕时间久了忘记了)

官方文档地址( >

以上就是关于微信小程序获取当前用户信息全部的内容,包括:微信小程序获取当前用户信息、微信小程序rich-text中的nodes属性、求教怎么更改微信小程序中app.js的 globalData 属性,值等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9273439.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-26
下一篇 2023-04-26

发表评论

登录后才能评论

评论列表(0条)

保存