微信小程序开发的静态页面怎么写?
小编为大家带来了时下非常流行的微信功能微信小程序的相关内容。日常生活中你一定用过微信小程序。最近出现了一款微信小程序游戏,大家可以去玩一下。朋友圈火了。小编给大家带来的是小程序开发静态页面设置的相关内容。
页面设置
每个页面都必须在app.json文件中进行设置,底部导航的设置也是在这个文件中实现的。
“页面”:[
'页面/索引/索引',
'页面/联系人/联系人',
'页面/查找/myfind',
'页面/消息/我',
'页面/日志/日志'
]1234567
底部导航的代码设置如下:
'标签栏':{
'颜色':'#9b9db1',
'selectedColor':'#3cc51f',
'borderStyle''黑色',
'背景颜色':'#ffffff',
'列表':[
{
'pagePath':'页面/索引/索引',
'iconPath':'images/wechat.png',
'selectedIconPath':'images/wechatHL.png',
'短信'
},
{
'pagePath':'页面/联系人/联系人',
'iconPath':'images/wechat.png',
'selectedIconPath':'images/wechatHL.png',
'text':'地址簿'
},
{
'pagePath':'页面/finds/myfind',
'iconPath':'images/wechat.png',
'selectedIconPath':'images/wechatHL.png',
'text':'发现'
},
{
'pagePath':'pages/mes/me',
'iconPath':'images/wechat.png',
'selectedIconPath':'images/wechatHL.png',
'文本':'我'
}
]
}1234567891011121314151617181920212223242526272829303132
其中,“pagePath”:“pages/index/index”是要跳转到的页面,“iconPath”:“images/wechat.png”是未选中的图片,“selectedIconPath”:“images/wechatHL.png " 是选择时的图片。
3.消息页面的实现。
3.1. index.wxml 的实现
第一个是头像部分,第二个是中间的消息,第三个是最右边的部分。
wx:for="{{messages}}" 是一个循环。
wx:if="{{item.num0}}" 是一个if语句,表示当数字大于0时,视图将被显示,否则将被隐藏。
设置控件的值只需传递{{}}即可,如上面的{{item.message}}
3.2 index.wxss文件的实现
这个文件是index的样式设置,通过类名设置相关view的高度。
微信小程序的火爆,让很多朋友想要开发微信小程序。小编整理的关于微信小程序静态页面设置的内容对于想要开发小程序的朋友来说会有一定的帮助。微信小程序给大家的生活带来了很多便利。有能力开发小程序的合作伙伴可以开发出更多的功能,为大家的生活带来更多的便利。