知道了小程序的基本原理
我们来尝试做一个有功能的小程序
大概过程是这样的：
其实我也不知道这么做对不对
先这么干吧
出问题再说
那么
说干就干！
主页面搭建
首先我们假设这个小程序有三个主页面
小程序底部有常驻的三个tab
这三个tab分别对应这三个主页面
确定好需求
下面来实践一下
注册主页面
先在app.json里面注册三个主页面：
{"pages": [
"tabs/banner/banner",
"tabs/articles/articles",
"tabs/contact/contact"
]
}
写完运行之后
系统自动创建页面相关的文件：
注意
虽然在文件列表里articles排第一个
但在我们的pages列表里banner是排第一个
所以现在的默认页面显示的是banner
那么可以看到每个页面都生成了四个文件
wxml:
负责我们页面的显示结构
相当于一个画板
页面最主要的文件
用腾讯魔改的html语言
wxss:
负责页面各个要素的普通样式
比如颜色尺寸这些
主要用来美化
就是css
js:
负责页面的逻辑部分
比如数据临时存储
实践触发这些
比如你要让一个按钮工作
就需要在这里进行功能的实装
用javascript语言
json:
页面的配置
非特殊情况一般不用管
当然我们的app.json就是一个特殊的配置文件
负责配置整个app
那么我们举个例子来把主要的那三个文件的功能穿起来：
比如我们写一个按钮
那么：
wxml负责告诉页面负责放这个按钮
wxss负责定义按钮的大小位置颜色等等
js就负责这个按钮按下去之后要做什么
之后在合适的时候我们会用代码具体实现一下这三者之间的交互
那么现在页面注册好了
我们需要在小程序中加入tab
tab会永久存在于小程序的这三个页面中
建立Tab
Tab由于是全局性的东西
比较特殊
因此虽然它感觉像是一种控件
实际上却是在app.json里配置的
那么根据小程序文档：
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}]
},
tabBar要设置成这个样子
每个主页相连接的tab都要在list里面写一个实例
pagePath就写页面地址
text就是你的tab上面写什么名字
那么实装到我们自己的tabBar：
{"pages": [
"tabs/banner/banner",
"tabs/articles/articles",
"tabs/contact/contact"
],
"tabBar": {
"list": [
{
"pagePath": "tabs/banner/banner",
"text": "展厅"
},
{
"pagePath": "tabs/articles/articles",
"text": "展文"
},
{
"pagePath": "tabs/contact/contact",
"text": "展商"
}
]
}
}
配合pages里面的页面地址就能看明白了
运行之后这个效果：
注意模拟器里显示的是contact的地址
因为我点的是“展商”tabBar
有几个小tips：
- tabBar默认是在下面
- 文字可以改成大号的
- 可以加图片
- tab在被选中的时候可以变色
目前只是最粗糙的tabBar
我们甚至不能确定自己选中的是哪个tabBar
根据小程序文档
我们来看看tabBar的属性：
为了完成tabBar的基本美化
我们再调整两个：
- 被选中的颜色
- 图标
我们现在弄最简单的颜色
在tabBar代码中插入颜色属性selectedColor即可：
"tabBar": {
"selectedColor":"green",
"list": [
{
"pagePath": "tabs/banner/banner",
"text": "展厅"
},
{
"pagePath": "tabs/articles/articles",
"text": "展文"
},
{
"pagePath": "tabs/contact/contact",
"text": "展商"
}
]
}
效果：
选中的tabBar已经变成了绿色了
再来弄图标
先去网上下载好素材
http://www.iconfont.cn/
推荐上面这个地址
以下素材均来自于该网站
感谢作者“再也不与见”
然后在tabs文件夹下新建icon文件夹
把图标都扔进去
最后加入图标地址代码:
未选择图标地址属性iconPath
已选择图标属性selectedIconPath
"tabBar": {
"selectedColor":"green",
"list": [
{
"pagePath": "tabs/banner/banner",
"text": "展厅",
"iconPath":"tabs/icon/banner.png",
"selectedIconPath":"tabs/icon/bannerS.png"
},
{
"pagePath": "tabs/articles/articles",
"text": "展文",
"iconPath": "tabs/icon/article.png",
"selectedIconPath": "tabs/icon/articleS.png"
},
{
"pagePath": "tabs/contact/contact",
"text": "展商",
"iconPath": "tabs/icon/contact.png",
"selectedIconPath": "tabs/icon/contactS.png"
}
]
}
效果：
注意：
如果不放**的图标
**时候是什么也不显示的
反之亦然
今儿就到这儿了
明儿写navigationBar
就是顶上那个蓝条
晚安各位
23 October 2018 10:21