从头开发一个微信小程序(会不断补充完善,直至毕设做完)
程序员文章站
2022-06-14 14:32:34
...
“从头”指的是:已经建立好初始项目
零、初始框架结构
- 建立images目录放此小程序用到的所有图片
- 在pages下建立开发过程成用到的所有页面
一、建立底部导航栏
- 在app.json中
- 导航栏代码为:tabBar那块
我的小程序tabBar有四个为:首页、全部分类、购物车、我的
不移过多,3个或4个布局最顺眼。
-
"pagePath"
:此导航对应的页面,需要自己新创建,page的创建技巧见后面。 -
"text"
:各个导航对应的文字 -
"iconPath"
:未选中此导航对应的图标 -
"selectedInconPath"
:选中此导航对应的图标
- iconPath和selectedInconPath这个两个属性是为了使用两个图标来模拟 选中导航变色的功能。所以下载图标时就一种图标下载两个颜色。
- 点我进入下载矢量图标的网站
"tabBar": {
"color": "#000000",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/home2.png",
"selectedIconPath": "images/home_selected.png"
},
{
"pagePath": "pages/all/all",
"text": "全部分类",
"iconPath": "images/social.png",
"selectedIconPath": "images/social_selected.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "images/cart.png",
"selectedIconPath": "images/cart_selected.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "images/my.png",
"selectedIconPath": "images/my_selected.png"
}
]
},
二、建立各个page
- (推荐)快速建立一个新的page的技巧:直接在app.json文件中的
"pages"
属性下按格式写入想要的页面名字,系统会自动给创建每个page所有的四个文件(.js .json .wxml .wxss)。
- (不推荐)否则,需要在pages目录下手动创建 新page所有的这四个文件。