微信小程序实际案例详解 页面搭建,ignore在微信开发者

来源:未知 浏览 135次 时间 2021-06-14 10:28

开发工具下载

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

微信小程序架构

这个就是程序的基本架构。最关键也是必不可少的网络营销培训集成了开发调试、代码编辑及程序发布等功能。 下载地址

微信小程序架构

这个就是程序的基本架构。最关键也是必不可少的是 app.js、app.json、app.wxss 这三个。其中如何检查网站死链是 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": "功能" } 轮播图

接下来实现顶部的轮播图。微信提供了一个swiper组件来实现轮播图。

 

标签: pages文件页面tab