applogo.png

车抵贷
购物领券
2021-07-24 微信搜索 热度:487

微信小程序底部导航图标尺寸:APP和微信小程序有什么区别?(微信小程序和网站的区别)

首先,小程序是什么微信小程序底部导航图标尺寸?

小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。对于开发者而言,小程序开发门槛相对较低,难度不及APP,能够满足简单的基础应用,适合生活服务类线下商铺以及非刚需低频应用的转换。小程序能够实现消息通知、线下扫码、公众号关联等七大功能。其中,通过公众号关联,用户可以实现公众号与小程序之间相互跳转。

小程序最大的特别是无需安装,可以热更新,基于微信。这也就是和普通的APP程序最大的区别。

列举一下区别:

小程序基于微信,如果违规了什么的,会被微信封停,需要微信去审核。APP如果不走应用市场,是无需审核,同时安装后不会被封停之类的。

小程序无需安装,直接在微信中使用。APP需要安装。

小程序更加轻量级,目前的限制是2M大小。不适合做大型应用,市场做一些轻场景,块场景。APP就更加自由了,开发者想怎么做怎么做。

小程序可以实现的功能受限于腾讯,APP可以实现功能受限于谷歌或苹果。

小程序版本简单,只开发一版本。APP需要开发android和ios

小程序兼容简单,APP要考虑不同的版本和机型

小程序的权限没有APP的权限大,小程序的权限被微信控制。APP的权限开发者自行申请

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

1、首先打开微信开发工具,载入需要修改的小程序工程。

微信小程序底部导航图标尺寸:APP和微信小程序有什么区别?(微信小程序和网站的区别)

2、然后打开app.json页面,在window下写下面的代码,先用color和selectedColor设置底部菜单点击前和点击后文字的颜色。

微信小程序底部导航图标尺寸:APP和微信小程序有什么区别?(微信小程序和网站的区别)

3、然后在list中设置两个标签,其中使用pagePath和text填写一下点击跳转的路径和选项的名字。

微信小程序底部导航图标尺寸:APP和微信小程序有什么区别?(微信小程序和网站的区别)

4、最后填写点击前的图标和点击后的图标,这里每个选项用两个颜色图标,可以去找矢量图,尺寸大约在64像素左右,其中iconPath为点击前的图标,而selectedIconPath为点击后的图标。

微信小程序底部导航图标尺寸:APP和微信小程序有什么区别?(微信小程序和网站的区别)

5、最后设置好后,在左侧的预览就可以看到菜单的样式了:

微信小程序底部导航图标尺寸:APP和微信小程序有什么区别?(微信小程序和网站的区别)

app和小程序,设计上有什么不同?

1)功能支持

小程序我们都知道是基于微信的应用程序,开发必须依靠微信给的接口(微信给啥就是啥),能实现的功能被大大的限制了。而且小程序上线也就2年的时候,还有一些功能不完善。

App 依靠于手机系统,可以实现复杂且多的功能,App 开发已经有近10年的积累,各类控件比较完善,换句话说就是开发者能力越大,展示效果越丰富。

2)内存体积

小程序代码提交不能超过规定大小2M,这部分程度上限制了开发的可能性。

App 就不同了,没有这部分的限制,我们更新软件的时候经常看到几十兆,几百兆,甚至游戏类的几个G的下载体积。

3)体验及流畅

小程序的体验略逊于 App , 小程序使用时没有那么稳定,容易出现错误闪退,特别是在一些功能复杂的应用中,虽然说小程序已经优化了很多,有时仍会出现卡顿感。

2.差异在哪里?具体表现

1)顶部导航栏

App:可以保留导航栏,也可以去掉,可拓展性强,灵活性高。

小程序:导航栏右侧有个无法去除和编辑的胶囊(titlebar),设计时也不能在导航上增加其他功能。所以在 App 转小程序时,导航栏的功能要换位置或者在放在导航栏下。

实现效果也略欠缺一些,例如微信提供原生和自定义的两种导航栏:

(一)原生的导航栏支持更改颜色,但字体颜色仅支持黑/白两种;

(二)虽然自定义的导航栏可以去除原生导航栏,支持图片通到导航栏上,但是所有页面都需要重新调整(原先导航栏的高度没有了,界面元素会跟着上移),而小程序不支持单个页面修改。

这是目前最麻烦的地方,量级小的应用还可以,量级大的导致工作量大大增加。

同时,自定义导航容易带来标题无法对齐、页面机型不同安全区域不同、全局刷新时页面会被整个下拉等等问题。

建议页面多、复杂的情况,尽量减少使用自定义导航,也可以使用像马蜂窝一样,导航栏背景和图片背景衔接,效果也不错。

2)标签栏

App:可支持最少2个,最多5个的tab切换,图标大小以及底部标签栏高度可自定义。

小程序:也可支持最少2个,最多5个的tab切换,使用原生控件时,要遵从 icon 尺寸81*81px。

使用自定义标签栏时,可支持加入交互效果,例如提示数量气泡等,但是体验相比原生差一点,如果标签页是首次进入的页面,那么标签栏切换会造成跳动,需要开发做规避。

建议不带有交互的情况,尽量使用原生控件,就像站酷小程序 一样。

3)拖动排序

App:流畅、体验佳,例如发朋友圈时拖动照片排序。

小程序:除非必要,否则不建议使用拖动排序。图片和列表拖动在 Android机型上体验不够,会有卡顿的情况。

建议使用上下按钮替换上下拖动,或者图片排序使用标记的方式来进行排序。

4)文本省略

App:可实现日常所需的所有文字、段落效果。

小程序:文本限制行数,加省略号,并且增加全文展开方案实现有问题。无法预估到行尾位置省略。

建议通过换行增加全文展开按钮,或者控制字数,文本末尾增加全文展开。

5)原生组件

App:可以自定义组件库,对开发设计限制低。

小程序:部分组件是由微信创建的原生组件,有系统相机、输入框、地图、文本输入...等等,原生控件使用有一定的限制,不能在滚动、轮播、选择器、拖动区域中使用,层级最高无法被覆盖,可供修改的参数由微信提供。

建议在设计时以原生控件为基础修改,不要自造控件。同时注意使用场景,以免无法实现。

6)动画实现

App:动画流畅、无卡顿,想要的基本都能实现。

小程序:动画能力低于 H5 和 App ,动画对性能消耗大,尤其是在 Android 机型上,卡顿有稍显明显。当加载代码包时,当微信认为这个小程序占用过多的内存,会把此小程序强行退出,以保证微信的正常使用。

建议动画精简,尽量做减法设计。

3.总结

由于小程序本身的开发特殊性,在和 App 设计的会有一些的不同之处,例如:

1.页面多、复杂的情况,尽量减少使用自定义导航。

2.不带有交互的情况,尽量使用原生控件。

3.使用上下按钮替换上下拖动,或者图片排序使用标记的方式来进行排序。

4.通过换行增加全文展开按钮,或者控制字数,文本末尾增加全文展开。

5.在设计时以原生控件为基础修改,不要自造控件。同时注意使用场景,以免无法实现。

6.动画精简,尽量做减法设计。

上一篇:深圳龙岗微信群二维码:深圳通如何开通微信二维码支付和关闭?(手机开通深圳通二维码)

下一篇:公众号地图链接怎么加:怎么为微信公众平台添加地图?

赞 0
分享
猜你喜欢

丙肝是什么病微信交流群,丙肝母婴贴吧

耳鸣微信交流群,全国耳鸣交流群

打呼噜微信交流群,怎么加入陌生微信群

「东莞车迷微信群」求个东莞的大众高尔夫微信群

「聋人微信和扣扣群」微信有聋哑人的群吗

「加入菏泽大型微信群」如何加入菏泽一中高三一部十八班微信群

「启动微信群名软件」微信群怎么设置不让别人改群名?

「微信红包群规则复制」微信红包群规章制度是什么样的?

「微信稀奇古怪总代群」我想在微信上卖稀奇古怪的玩意,一件代发的,不需要加盟费!有的留个

「微信群群主有哪些特权」微信群主有哪些特权?

 

账号登录,或者注册个账号?