【微信小程序】设计用户信息栏

最新推荐文章于 2024-08-19 19:37:17 发布
最新推荐文章于 2024-08-19 19:37:17 发布
阅读量525 收藏 1
点赞数
文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ww_piu/article/details/123047318
版权
本文介绍了如何在微信小程序中设计用户信息栏，通过水平划分三个部分并采用多栏布局，利用rpx实现自适应屏幕宽度。内容涉及头像视图、文字视图的参数设置，包括margin、padding和border属性的运用，以及文字属性和字体设置，同时提到用户自定义功能，并预告了后续将涉及的数据库保存用户信息内容。
摘要由CSDN通过智能技术生成

在上文中已经调取了用户的基本信息【微信小程序】调用用户信息

接下来对用户的信息栏进行基本设计，结果如下图所示

创建用户信息视图，分析其大致框架，需要将用户信息视图在水平方向分为三个部分，设置视图排列方式为横向排列。

调整视图显示方式为多兰多列布局，设置为横向布局。

      

微信小程序设计了自身独特的像素单位rpx，特点是可以根据屏幕宽度进行自适应，规定了屏幕宽度为750rpx，因此可以利用rpx参数进行相应的参数设置。 

设置视图的对应展示方式和位置时，可以使用margin、padding两种方式，此外border可以改变边的属性，上述

最低0.47元/天 解锁文章
ww_piu
关注
小程序页面设计及获取用户公开信息
09-11
本资源带有单独的本地数据文件，可以实现文章列表读取数据，及获取微信用户公开信息。
毕业设计 微信小程序设计 小程序模板【截图+源码】 悦读神器
03-16
5. **API接口**：微信小程序提供了大量API接口，包括网络请求、用户信息获取、位置服务、文件操作、多媒体处理等，开发者可以根据需求调用这些接口实现功能。 6. **生命周期管理**：每个小程序页面都有自己的生命...
小程序用户表设计
taotaobaobei的博客
10-18 9785
CREATE TABLE `wx_user` ( `id` int(11) UNSIGNED NOT NULL AUTO_INCREMENT , `openid` char(28) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '小程序用户openid' , `nickname` varchar(100) CHARA...
微信答题小程序产品研发-数据库与数据表设计
最新发布
mon_star°的博客
08-19 879
对于经常查询的字段，如`user_id`, `category_id`, `exam_id`等，建立索引以提高查询效率。`announcement_id` (INT, PK)：公告唯一标识。`category_id` (INT, PK)：分类唯一标识。`question_id` (INT, PK)：题目唯一标识。`category_id` (INT, FK)：所属分类ID。`record_id` (INT, PK)：答题记录唯一标识。
【黄啊码】微信小程序：用户列表怎么做？
黄啊码
10-27 898
微wxml <view class="user_list"> <view class="row"> <view class="content"> <view class="top"> <view class="nickname">张三</view> <view class="open_btn"><switch chec...
关于用户信息系统的设计
weixin_52744725的博客
07-15 375
C语言设计用户信息管理系统
设计游戏用户信息表
m0_65635427的博客
11-24 1027
设计游戏用户信息表
微信小程序-实现电子围栏-半径-经纬度-是否在围栏内-画圆等操作-master.zip
05-07
2. **获取用户位置**：微信小程序提供了`wx.getLocation`接口，可以获取到用户的实时位置信息，包括经度（longitude）和纬度（latitude）。这通常是实现电子围栏的第一步。 3. **计算距离**：在地理坐标系统中，两...
微信小程序源码-仿酷狗音乐微信小程序
09-28
5. 数据持久化：利用微信小程序的本地缓存或数据库API，保存用户的播放历史、收藏歌曲等信息，实现用户个性化体验。 通过分析和学习这个“仿酷狗音乐微信小程序”的源码，开发者不仅可以提升微信小程序的编程技巧，...
微信小程序左右滚动公告栏效果代码实例
10-16
在微信小程序开发中，创建一个左右滚动的公告栏效果能够吸引用户的注意力，提供重要的信息更新。这个效果可以通过CSS样式和JavaScript编程实现。下面我们将详细探讨如何实现这一功能。 首先，我们要在小程序的页面...
微信小程序-顶部导航栏TopBar.zip
10-08
6. **API调用**：除了组件本身，可能还涉及到微信小程序的一些API，如`wx.setNavigationBarTitle`来动态改变顶部导航栏的标题，或者`wx.createSelectorQuery`进行DOM查询，以获取组件的位置信息等。 7. **生命周期...
微信小程序-微信小程序个人案例合集
08-05
WechatSmallApps 微信小程序最近很火热，虽然官方还在内侧，但是笔者还是经常看得到很多微信小程序相关的文章，既然它这么火热，自己也想学习并做出点东西。笔者刚毕业不久，参加工作也只有3个月，实际的开发能力并不能与大牛相比，所做的DEMO技术含量比较低，自己的目的在于记录下每次学习的过程和分享每一次学习之后的成果。由于工作比较忙，只能抽周末的时间来完善DEMO，计划中的DEMO有几个，以后会慢慢更新。 更新 [2017-02-12] 修改知乎日报案例的图片路径，修复获取知乎图片失败的问题，启动界面的图片获取接口被限制，暂无办法解决！ [2016-11-23] 由于官方IDE更新到了0.11.112301版本，移除了对Promise的支持，造成事项助手不能正常运行，解决此问题，在项目中引入第三方兼容库Bluebird支持Promise，代码已经整合到项目代码中。 [2016-11-16] 更新案例事项助手，配合微信小程序之ES6与事项助手教程开发，主要是介绍小程序ES6开发方法。 [2016-10-31] 小程序更新到最新版本 0.10.102800，删除之前兼容
微信小程序入门03-搭建权限系统，建库建表
低代码布道师的博客
05-16 2052
我们本篇是介绍如何搭建权限系统，包括如何建库建表，搭建库表就和盖房子打地基一样，地基打扎实了我们就可以往上盖楼了。
小程序用户表wx_user设计
weixin_30437847的博客
03-13 2233
CREATE TABLE `wx_user` ( `id` int(20) NOT NULL AUTO_INCREMENT, `openid` varchar(28) DEFAULT NULL COMMENT '小程序用户的openid', `nickname` varchar(100) DEFAULT NULL COMMENT '用户头...
微信小程序商城开发记录二之数据表结构设计
weixin_42204713的博客
10-31 5397
文章目录前言1、用户表2、产品表3、商品品牌表4、商品分类表5、订单表6、订单商品信息表7、购物车表8、收获地址表9、省市区地址联动表10、广告信息表11、优惠券表12、优惠券领取记录表13、搜索记录表14、意见反馈表细节说明SQL报错COMMENTunsignedENGINE=InnoDB不是默认就是这个引擎吗？AUTO_INCREMENT=22,它不是自增的吗？为什么还要设数字？utf8不是已经在my.ini里设置过了? 前言 思路：先设计基础核心表，再在核心表的基础上设计扩展表，最后设计其他的数据表。
微信小程序实现用户登录和新增/更新用户表
beijinglaomao的博客
08-28 4651
需求： 1. 用户打开小程序，在user表中记录用户的相关信息，可以导出在别的地方做记录 2. 在页面中也需要能够显示用户姓名头像等信息 3. 由于用户的昵称可以随时改，需要每次登录的时候更新一下信息，否则的话，导出来的用户表和微信里的用户名称对不上 基本逻辑： 1. 打开小程序阶段，onload的时候，通过云函数自动获取openid，并在user表中匹配，如果已经注册过，将hasRegistered设置为true 2. 用户点击按钮登录，调用bindgetuserinfo="getUserIn
微信小程序个人信息页面
qq_56687451的博客
09-02 1466
wxml: <viewclass="container"> <viewclass="userinfo"> <open-dataclass="userinfo-avatar"type="userAvatarUrl"></open-data> <viewclass="iser-info-box"> <open-dataclass="userinfo-nickname"type="userNi...
微信小程序云开发教程-手把手：小程序数据库设计
软件工程小施同学 的专栏
08-24 6658
本小节我们将手把手讲解小程序的数据库应该如何设计。 现在我们开始来学习，如何对一个系统进行数据库设计,设计的第一步是，我们需要根据系统功能，分析出应该有哪些信息需要存储，最终系统应该有哪些数据库表。 首先我们来看第一个功能，用户自动登录，那就需要存储用户的基本信息，所以需要建立一个用户表 第二个功能，展示搜索的热词，那么我们就需要提前存储词汇的信息，所以需要建立一个词汇表； 第三个功能，搜索某个词的近义词，那我们就需要一个表存储近义词信息，...
登录系统及表结构设计
赵KK的博客
08-14 1163
通过本文的介绍，我们了解了如何设计一个支持三方登录的登录系统，并给出了相应的表结构设计和代码示例。登录系统通过用户表和第三方登录表来存储用户信息和第三方登录信息，通过前端页面和后端接口实现用户登录和第三方登录的功能。同时，我们也详细介绍了登录流程和第三方登录流程，帮助你更好地理解登录系统的实现。
微信小程序设计规范：打造友好用户体验
微信小程序设计规范是微信官方为在其平台上优化用户体验而制定的一系列准则，这些原则旨在确保小程序页面设计的专业性和一致性。遵循这些规范，开发者可以创建出友好、高效且符合用户期望的应用场景。 首先，"友好...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值