小程序入场布局图（微信小程序场景）

本篇文章给大家谈谈小程序入场布局图，以及微信小程序场景对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、微信公众号小程序跳转如何设置一排多张图片？
• 2、微信小程序：“我的”页面布局（一）：微信用户信息获取及UI
• 3、微信小程序：“我的”页面布局（二）：可配置功能菜单列表
• 4、微信小程序九宫格为什么竖着

微信公众号小程序跳转如何设置一排多张图片？

简单来说，就是将多张图片并排放，然后给每张图片添加小程序，其实在微信图文排版工具中有一个“布局”的功能，你可以选用三列布局，然后在每列里上传图片，这样就可以将三张图片并列放在一行

一、使用三列布局

二、上传图片

三、添加小程序

四、小程序的展示方式选择“图片”

五、查看最终效果

微信小程序：“我的”页面布局（一）：微信用户信息获取及UI

先做小程序“我的”页面，需要注意的有两个点：

先上图，有图才有真相：

这一块我增加了一个隐藏的button, 未获取到用户信息时，显示为默认头像和“微信授权”的文字提示，登陆后，头像变为微信头像，文字变为微信昵称。

具体ui为判断没有授权则显示默认头像及提示，并在其上层覆盖一个透明的button，用户触发授权事件。

在js中需要注意的是，open-type="getUserInfo"需要做老版本兼容，老版本通过wx.getUserInfo即可唤起授权页面，不需要添加button去触发

详情见下一篇： 微信小程序：“我的”页面布局（二）：可配置功能菜单列表

微信小程序：“我的”页面布局（一）：微信用户信息获取及UI

微信小程序：“我的”页面布局（二）：可配置功能菜单列表

微信小程序：“我的”页面布局（二）：可配置功能菜单列表

比较懒，还是上一篇的图：

如上一篇所属，“我的”页面菜单列表主要是用到了wx: for和navigator

利用navigator可以很方便的实现菜单功能，它带有的url和class、hover-class可以很轻松的设置点击效果及点击跳转地址：

在js中甚至不需要做什么事情，我这里把菜单的数据放在了js中，通过修改data中的menuitems即可达到配置的作用，甚至如果有需求，还可以放在服务端做成可随意变化的：

微信小程序：“我的”页面布局（一）：微信用户信息获取及UI

微信小程序：“我的”页面布局（二）：可配置功能菜单列表

微信小程序九宫格为什么竖着

微信小程序九宫格通常是竖着排列的，这是因为微信小程序的设计理念是以手机屏幕为主要展示平台，而手机屏幕的高度通常比宽度更小，因此竖向排列可以更好地适应手机屏幕的尺寸和比例。

此外，竖向排列还可以更好地利用手机屏幕的滑动操作，用户可以通过上下滑动来浏览更多的内容，而不需要左右滑动，这也符合了微信小程序的设计原则，即简洁、高效、易用。因此，微信小程序九宫格通常是竖向排列的。

小程序入场布局图的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于微信小程序场景、小程序入场布局图的信息别忘了在本站进行查找喔。