小程序开发的静态页面怎么写？

时间：2023-07-01 14:05 阅读数：33 人阅读分类：知识百科

　　小编为大家带来当下很火热的一个微信功能微信小程序相关的内容，大家在日常的生活中想必一定都是用过微信小程序的，最近出现一款微信小程序游戏跳一跳就大家的朋友圈流行了起来。小编为大家带来的是小程序开发的静态页面设置的相关内容。

　　页面的设置

　　每个页面都要在app.json文件中设置，底部导航的设置，也是在这个文件里实现。

　　"pages":[

　　"pages/index/index",

　　"pages/contacts/constact",

　　"pages/finds/myfind",

　　"pages/mes/me",

　　"pages/logs/logs"

　　]1234567

　　底部导航的代码设置如下：

　　"tabBar":{

　　"color":"#9b9db1",

　　"selectedColor":"#3cc51f",

　　"borderStyle":"black",

　　"backgroundColor":"#ffffff",

　　"list":[

　　{

　　"pagePath":"pages/index/index",

　　"iconPath":"images/wechat.png",

　　"selectedIconPath":"images/wechatHL.png",

　　"text":"消息"

　　{

　　"pagePath":"pages/contacts/constact",

　　"iconPath":"images/wechat.png",

　　"selectedIconPath":"images/wechatHL.png",

　　"text":"通讯录"

　　{

　　"pagePath":"pages/finds/myfind",

　　"iconPath":"images/wechat.png",

　　"selectedIconPath":"images/wechatHL.png",

　　"text":"发现"

　　{

　　"pagePath":"pages/mes/me",

　　"iconPath":"images/wechat.png",

　　"selectedIconPath":"images/wechatHL.png",

　　"text":"我"

　　}

　　]

　　}1234567891011121314151617181920212223242526272829303132

　　其中”pagePath”:”pages/index/index”就是想要跳转的页面，”iconPath”:”images/wechat.png”就是没被选中的图片，”selectedIconPath”:”images/wechatHL.png”就是被选中时候的图片。

　　3、消息页面的实现。

　　3.1、index.wxml的实现

　　第1是头像部分，第2是中间的消息，第3是最右边的部分。

　　wx:for=”{{messages}}”就是一个循环。

　　wx:if=”{{item.num>0}}”是一个if语句，这里表示当数字大于0，则显示这个view，否则隐藏。

　　要设置控件的值，通过{{}}即可，如上面的{{item.message}}

　　3.2 index.wxss文件的实现

　　该文件是index的样式设置，通过类名来设置相关view的高度等。

　　微信小程序的火热让很多的小伙伴想要开发微信小程序，小编为大家整理的关于微信小程序静态页面设置的内容对想要开发小程序的小伙伴有一定的帮助。微信小程序为大家的生活带来很多的便利，有能力开发小程序的小伙伴可以开发更多功能，为大家的生活带来更多便利。大家想要了解更多内容请关注微微风。