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

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

　　微信小程序最近又推出了新功能，各路人士都纷纷开始研究，关于微信小程序的使用，许多公司企业都喜欢，那么关于微信小程序的页面的例子，下面小编就为大家分享一些微信小程序制作的页面的实例，大家一起来看一看学一学吧!

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

　　开发工具下载

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

　　微信小程序架构

　　这个就是程序的基本架构。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。

　　底部标签

　　底部标签是一个tabBar。实现比较简单，只需要简单配置一下即可。 app.json

　　{

　　"pages":[

　　"pages/function/function",

　　"pages/pay/pay",

　　"pages/account/account",

　　"pages/index/index",

　　"pages/logs/logs"

　　"tabBar":{

　　"color": "#464a56",

　　"selectedColor": "#6595e9",

　　"backgroundColor": "#FFFFFF",

　　"borderStyle": "white",

　　"list": [{

　　"pagePath": "pages/function/function",

　　"text": "功能",

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

　　"selectedIconPath": "images/tab_function_sel.png"

　　},{

　　"pagePath": "pages/pay/pay",

　　"text": "收款",

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

　　"selectedIconPath": "images/tab_consume_sel.png"

　　},{

　　"pagePath": "pages/account/account",

　　"text": "账户",

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

　　"selectedIconPath": "images/tab_account_sel.png"

　　}]

　　"window":{

　　"navigationBarBackgroundColor": "#6595e9",

　　"navigationBarTextStyle":"white",

　　"navigationBarTitleText": "V50",

　　"backgroundColor": "#eeeeee",

　　"backgroundTextStyle":"light"

　　}

　　值得注意的地方，就是 pages 接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

　　文件名不需要写文件后缀，因为框架会自动去寻找路径.json, .js , .wxml, .wxss的四个文件进行整合。

　　页面标题

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

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

　　原来如此!我们只需要把所有页面通用的配置放在 page.json，然后在各个page的 .json文件里面配置每个页面特有的属*即可。因为在上面的 app.json 中已经配置了通用页面的 window属*了，我们只需要在function.json中配置页面标题即可：

　　{

　　"navigationBarTitleText": "功能"

　　以上就是今天的微信小程序制作的页面的实例的全部的内容啦!大家看明白了吗?阅读完本篇文章后大家对微信小程序制作的页面的实例应该很清楚的了解了吧!希望微微风的文章能够给大家带来一些帮助，帮助大家更加了解微信的各种功能，多多关注微微风，后面还有更多精彩内容。