微信小程序图标尺寸（微信小程序图标尺寸圆形怎么设置视频）

摘要： 本文目录一览：1、设计微信小程序是按照什么尺寸做?2、如何修改微信小程序的图标?...

本文目录一览：

• 1、设计微信小程序是按照什么尺寸做?
• 2、如何修改微信小程序的图标?
• 3、微信小程序ui设计尺寸规范
• 4、微信小程序底部tab图标大小

设计微信小程序是按照什么尺寸做?

1、rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

2、设计小程序上的轮播图的图片是16：9的宽高比例，所以商家在给小程序商城设计轮播图的时候，尽量按照这个尺寸来选择。如果有多张轮播图，建议几张的轮播图的尺寸大小保持一致，这样整体的视觉上看起来就非常美观、整洁。

3、小程序开发尺寸是rpx（responsive pixel），可以实现一稿适配所有屏幕尺寸，小程序编译后，rpx会做一次px换算。换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px。这里了解就行，设计稿尺寸375px或750px都没问题。

如何修改微信小程序的图标?

首先打开微信开发工具，载入需要修改的小程序工程。然后打开app.json页面，在window下写下面的代码，先用color和selectedColor设置底部菜单点击前和点击后文字的颜色。然后在list中设置两个标签，其中使用pagePath和text填写一下点击跳转的路径和选项的名字。

点击编辑小程序，可以对基本信息进行修改，比 名称、布局、图标等等。点击基本信息，然后修改图标，如图所示。小程序的图标尺寸和大小都是有要求的，144*144，规格按照要求要求制作完成后上传。设置完成后点击发布，进行刷新，在微信上搜索小程序就发生变化了。

第一步，右键“微信”快捷方式，找到最下面的属性点开。 第二步，在快捷方式里面，找到更改图标选项，点开。 第三步，点击浏览按钮，找到微信的安装程序所在文件夹。 第四步，找到启动文件选中即可。 第五步，选中图标点击确定。 这时候桌面上的快捷方式图标就改变了，变成了真正的微信小图标。

新建一个微信小程序0607，完成后，大致架构如图。打开app.json，在其中配置topbar，如图，红色部分表示的代码；注意：绿色处的逗号，不可省略。上图代码运行后，即可看到添加的底部导航，如图。

具体如下： 首先第一步根据下图箭头所指 ，找到并点击【微信】图标。 第二步打开软件后，根据下图箭头所指 ，点击底部【发现】选项。 第三步在【发现】页面中，根据下图箭头所指 ，点击【小程序】选项。 第四步进入【小程序】页面后，根据下图箭头所指 ，找到并点击相关小程序。

微信小程序想要放在手机桌面上，可以进行如下操作： (参考环境： 手机型号：OPPOK9， 手机系统：Android11 ，ColorOSV11 APP版本：微信0.32) 打开微信，下滑首页，如图箭头所示点击顺序 小程序界面中，点击自己需要添加到桌面的小程序进入。 进入之后，点击小程序右上方的三个小点。

微信小程序ui设计尺寸规范

设计商品图尺寸，建议详情图尺寸：宽度800，高度不限，输出画质70%，格式：jpg.目前微信小程序分享图片分享卡片的图片尺寸长宽比例是5：4，只要是这样的比例就可以了，比如50px*40px；100px*80px…设置成这样的图片大小，在分享卡片是就不会出现图片变得扭曲或者宽高被隐藏的问题出现了。

小程序开发尺寸是rpx（responsive pixel），可以实现一稿适配所有屏幕尺寸，小程序编译后，rpx会做一次px换算。换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px。这里了解就行，设计稿尺寸375px或750px都没问题。

在微信提供的标准组件库中，各种控件元素均已考虑到了页面点击效果以及不同屏幕的适配，因此再次推荐使用或模仿标准控件尺寸进行设计。

绿框：导航栏主体，高度即我们计算出的高度。 蓝框：紧随其后，位于底部，高度固定为胶囊区域高度减去8px。 红框：胶囊下方，设置为8px高度，采用 grid布局，保证内容水平居中对齐。这样设计，标题自然居中，且在不同设备上保持一致性。安卓机的标题偏左，这时灵活调整布局就显得尤为重要。

由于腾讯给开发者规定的小程序大小不能超过1MB，可以承载的内容有限，因而小程序要做到尽可能的简单。思途门票小程序用起来十分方便，能够随时随地查询购买门票了。在搜索框里输入想要查询的景点，即可瞬时购买相关门票，节省用户时间。由于小程序不足1MB，操作过程中页面跳转速度也很快。

微信小程序底部tab图标大小

1、制作的icon要在50*50px以内（红色）， 小程序导航icon周围系统自留了空间（蓝色），此处的小房子icon是34*39px 微信小程序，简称小程序，英文名MiniProgram，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

2、text： tab 上按钮文字。 iconPath： 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 selectedIconPath： 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。跳转到普通页，可以直接通过返回按钮返回。

3、小程序源码打包后的大小限制为1M，超大传不上去。MINA框架实现的tabbar，最多5个tab。不能开启普通网页。微信小程序（weixinxiaochengxu），简称小程序，英文名MiniProgram，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

4、首先打开微信开发工具，载入需要修改的小程序工程。然后打开app.json页面，在window下写下面的代码，先用color和selectedColor设置底部菜单点击前和点击后文字的颜色。然后在list中设置两个标签，其中使用pagePath和text填写一下点击跳转的路径和选项的名字。