微信小程序开发实战(页面配置)

简介: 微信小程序开发实战(页面配置)

小程序窗口的组成部分😶‍🌫️


如 👇

image.png

了解 window 节点常用的配置项😶‍🌫️


image.png

设置导航栏的标题😶‍🌫️


设置步骤:app.json 👉 window 👉 navigationBarTitleText

需求:把导航栏上的标题,修改成 “小白开发小程序”

效果如👇

image.png

设置导航栏的背景颜色😶‍🌫️


设置步骤:app.json 👉 window 👉 navigationBarBackgroundColor

需求:把导航栏上的标题,修改成 “小白开发小程序”

效果如👇

image.png

设置导航栏的标题颜色😶‍🌫️

设置步骤:app.json 👉 window 👉 navigationBarTextStyle


需求:把导航栏上的标题颜色,从默认的 black 修改为 white


注意❗: navigationBarTextStyle 的可选值只有 black 和 white


效果如👇

image.png

全局配置下拉刷新😶‍🌫️


概念:下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。

设置步骤:app. window 👉 把 enablePullDownRefresh 的值设置为 true

注意❗:在 app.json 中启用下拉刷新功能,会作用于每个小程序页面!

效果如👇

6.gif

全局配置下拉刷新背景颜色😶‍🌫️


当全局开启下拉刷新功能之后,默认的窗口背景为白色。如何自定义下拉刷新窗口背景色,

设置步骤: app.json 👉 window 👉 为 backgroundColor 指定16进制的颜色值 #66ccff。

注意❗:在 app.json 中启用下拉刷新功能,会作用于每个小程序页面!

效果如👇

7.gif

全局开启下拉刷新Loading的样式😶‍🌫️


当全局开启下拉刷新功能之后,默认窗口的 loading 样式为白色,如果要更改 loading 样式的效果 👇

设置步骤为 app.json 👉 window 👉 为 backgroundTextStyle 指定 dark 值。

注意: backgroundTextStyle 的可选值只有 light 和 dark

效果如👇

8.gif

上拉触底是移动端的专有名词😶‍🌫️


概念:上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。

设置步骤: app.json 👉 window 👉 为 onReachBottomDistance 设置新的数值

注意❗:默认距离为50px,如果没有特殊需求,建议使用默认值即可。

最后


image.png

下篇文章再见ヾ( ̄▽ ̄)ByeBye

image.png


相关文章
|
6天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
6天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
6天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
6天前
|
小程序 应用服务中间件 Linux
【Nginx】微信小程序后端开发、一个域名访问多个服务
【Nginx】微信小程序后端开发、一个域名访问多个服务
18 0
|
6天前
|
小程序 测试技术 API
外卖小程序实战-接单后小票机自动打印订单
外卖小程序实战-接单后小票机自动打印订单
15 0
|
6天前
|
小程序
外卖小程序实战
外卖小程序实战
10 0
|
6天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
16 1
|
6天前
|
小程序 前端开发 JavaScript
轻松学会微信小程序开发(一)
轻松学会微信小程序开发(一)
|
6天前
|
JSON 小程序 JavaScript
微信小程序开发1
微信小程序开发1
|
6天前
|
小程序
uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)
uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)
78 0

热门文章

最新文章