记------小程序记录1

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

由于没有系统的学习过小程序，一点点摸索前进

今天被捉去协助一个小程序的页面。

---

开发小程序底部tab

本来以为像H5一样完全可以提取一个组件进行巧用，思考了无数情景。后来查看了一下uni-app文档+度娘

小程序是本身自己支持的
uni-app的pages路由在这个文件我们可以看到一个tabBar

在 pages.json 中提供 tabBar配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取pages.json 中配置的 tabBar 信息，渲染原生tab。

其格式为：

	  "tabBar": {
		    "color": "#888888",
		    "selectedColor": "#67d0a2",
		    "borderStyle": "white",
		    "height": "56px",
		    "list": [
		      {
		        "pagePath": "pages/index/index",
		        "text": "首页",
		        "iconPath": "xxx.png",
		        "selectedIconPath": "xxx.png"
		      },
		      {
		        "pagePath": "pages/myPage",
		        "text": "我的",
		        "iconPath": "xxx.png",
		        "selectedIconPath": "xxx.png"
		      }
		    ]
		  },

Tips

• 当设置 position 为 top 时，将不会显示 icon
• tabBar 中的 list 是一个数组，只能配置最少2个、最多5个tab，tab 按数组的顺序排序。
• tabbar切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式
• tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar页面，只会触发每个页面的onShow，不会再触发onLoad。
• 顶部的 tabbar目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hellouni-app->模板->顶部选项卡。

---

总结

还有一些常见问题 ，暂未遇见，随见随记吧！