微信小程序有什么界面例子?如何进行微信小程序的页面搭建?

9158APP 0

微信小程序有什么界面例子?如何进行微信小程序的页面搭建?

微信小程序最近推出了新功能,各界人士都开始研究。对于微信小程序的使用,很多公司企业都喜欢。那么关于微信小程序页面的例子,下面小编就给大家分享一些微信小程序页面。我们来看一个小程序创建的页面示例,学习一下吧!

本文通过一个实际例子来讲解如何搭建微信小程序页面。首先我们看一下本文要实现的页面效果:

微信小程序有什么界面例子?

开发工具下载

微信官方有集成开发调试、代码编辑、程序发布等功能的开发者工具。

微信小程序架构

微信小程序架构

这是程序的基本结构。最关键最本质的是app.js、app.json、app.wxss

这三个。其中.js后缀是脚本文件,json后缀是配置文件,wxss后缀是样式表文件。

底部标签

底部标签是tabBar。实现比较简单,只需要简单的配置。应用程序.json

{

“页面”:[

'页面/功能/功能',

'页数/付费/付费',

'页面/帐户/帐户',

'页面/索引/索引',

'页面/日志/日志'

],

'标签栏':{

'颜色''#464a56',

'选定的颜色''#6595e9',

'背景颜色''#FFFFFF',

'borderStyle''白色',

'列表': [{

'pagePath''页面/功能/功能',

'文本':'功能',

'iconPath''images/tab_function_default.png',

'selectedIconPath''images/tab_function_sel.png'

},{

'pagePath''页面/支付/支付',

'文本''付款',

'iconPath''images/tab_consume_default.png',

'selectedIconPath''images/tab_consume_sel.png'

},{

'pagePath''页面/帐户/帐户',

'文本':'帐户',

'iconPath''images/tab_account_default.png',

'selectedIconPath''images/tab_account_sel.png'

}]

},

'窗户':{

'navigationBarBackgroundColor''#6595e9',

'navigationBarTextStyle':'白色',

'navigationBarTitleText''V50',

'背景颜色''#eeeeee',

'backgroundTextStyle':'浅色'

}

}

值得注意的是,页面

接受一个数组,每一项是一个字符串,用于指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息,数组中的第一项代表小程序的初始页面。小程序增减页面需要正确

要修改的页面数组。

文件名中不需要写文件后缀,因为框架会自动寻找路径中的.json、js、wxml、wxss这四个文件进行集成。

页面标题

页面标题

如何实现这个标题?我们看一下官方文档。

这个标题如何实现? 我们翻看一下官方文档

看到这个就应该知道需要在指定页面的json文件中配置该页面了。继续查看官方文档

看到这里,你应该就知道了,需要在指定页面的json文件中进行页面配置。继续查看官方的文档

就是这样!我们只需要将所有页面通用的配置放在page.json中,然后在每个页面中

只需在.json 文件中配置每个页面的唯一属性即可。因为它在上面

普通页面的window属性已经在app.json中配置好了。我们只需要在function.json中配置页面标题即可:

{

'navigationBarTitleText''功能'

以上就是今天微信小程序制作的页面示例的全部内容了!你明白吗?看完这篇文章,大家应该对微信小程序制作的页面示例有了清晰的认识了!希望冯薇薇的文章能给大家带来一些帮助。