小学期小程序实训篇2_页面全局配置、局部配置、差值表达式、wx:key、事件event、弹窗反馈显示
2021/5/9 12:25:18
本文主要是介绍小学期小程序实训篇2_页面全局配置、局部配置、差值表达式、wx:key、事件event、弹窗反馈显示,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
目录
- 页面配置
- 差值表达式
- 事件
- 弹框反馈显示
一、页面配置
页面配置分为
- 全局页面配置:在app.json中配置,全局配置文件参考:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
- 局部页面配置:在每个页面的json文件配置,局部配置文件参考:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
全局配置文件
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象,有以下属性:
属性 | 类型 | 必填 | 描述 | 最低版本 |
---|---|---|---|---|
entryPagePath | string | 否 | 小程序默认启动首页 | |
pages | string[] | 是 | 页面路径列表 | |
window | Object | 否 | 全局的默认窗口表现 | |
tabBar | Object | 否 | 底部 tab 栏的表现 | |
networkTimeout | Object | 否 | 网络超时时间 | |
debug | boolean | 否 | 是否开启 debug 模式,默认关闭 | |
functionalPages | boolean | 否 | 是否启用插件功能页,默认关闭 | 2.1.0 |
subpackages | Object[] | 否 | 分包结构配置 | 1.7.3 |
workers | string | 否 | Worker 代码放置的目录 | 1.9.90 |
requiredBackgroundModes | string[] | 否 | 需要在后台使用的能力,如「音乐播放」 | |
plugins | Object | 否 | 使用到的插件 | 1.9.6 |
preloadRule | Object | 否 | 分包预下载规则 | 2.3.0 |
resizable | boolean | 否 | PC 小程序是否支持用户任意改变窗口大小(包括最大化窗口);iPad 小程序是否支持屏幕旋转。默认关闭 | 2.3.0 |
usingComponents | Object | 否 | 全局自定义组件配置 | 开发者工具 |
permission | Object | 否 | 小程序接口权限相关设置 | 微信客户端 7.0.0 |
sitemapLocation | string | 是 | 指明 sitemap.json 的位置 | |
style | string | 否 | 指定使用升级后的weui样式 | 2.8.0 |
useExtendedLib | Object | 否 | 指定需要引用的扩展库 | 2.2.1 |
entranceDeclare | Object | 否 | 微信消息用小程序打开 | 微信客户端7.0.9 |
darkmode | boolean | 否 | 小程序支持 | DarkMode |
themeLocation | string | 否 | 指明 theme.json 的位置,darkmode为true为必填 开发者工具 | 1.03.2004271 |
lazyCodeLoading | string | 否 | 配置自定义组件代码按需注入 | 2.11.1 |
singlePage | Object | 否 | 单页模式相关配置 | 2.12.0 |
页面局部配置
每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象,有以下属性:
属性 | 类型 | 默认值 | 描述 | 最低版本 |
---|---|---|---|---|
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色,如 #000000 | |
navigationBarTextStyle | string | white | 导航栏标题颜色,仅支持 black / white | |
navigationBarTitle | Text | string | 导航栏标题文字内容 | |
navigationStyle | string | default | 导航栏样式,仅支持以下值:default 默认样式custom 自定义导航栏,只保留右上角胶囊按钮。参见注 1。 | iOS/Android 微信客户端 7.0.0,Windows 微信客户端不支持 |
backgroundColor | HexColor | #ffffff | 窗口的背景色 | |
backgroundTextStyle | string | dark | 下拉 loading 的样式,仅支持 dark / light | |
backgroundColorTop | string | #ffffff | 顶部窗口的背景色,仅 iOS 支持 | 微信客户端 6.5.16 |
backgroundColorBottom | string | #ffffff | 底部窗口的背景色,仅 iOS 支持 | 微信客户端 6.5.16 |
enablePullDownRefresh | boolean | false | 是否开启当前页面下拉刷新。详见 Page.onPullDownRefresh | |
onReachBottomDistance | number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为px。详见 Page.onReachBottom | |
pageOrientation | string | portrait | 屏幕旋转设置,支持 auto / portrait / landscape 详见 响应显示区域变化 | 2.4.0 (auto) / 2.5.0 (landscape) |
disableScroll | boolean | false | 设置为 true 则页面整体不能上下滚动。只在页面配置中有效,无法在 app.json 中设置 | |
usingComponents | Object | 否 | 页面自定义组件配置 | 1.6.3 |
initialRenderingCache | string | 页面初始渲染缓存配置 | 2.11.1 | |
style | string | default | 启用新版的组件样式 | 2.10.2 |
singlePage | Object | 否 | 单页模式相关配置 | 2.12.0 |
二、差值表达式相关
JSON数据类型
这里说一下小程序里JSON配置的一些注意事项。
-
JSON文件都是被包裹在一个大括号中 {},通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中,在实践中,编写 JSON 的时候,忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。
-
JSON的值只能是以下几种数据格式,其他任何格式都会触发报错,例如 JavaScript 中的 undefined。
-
还需要注意的是 JSON 文件中无法使用注释,试图添加注释将会引发报错
数据类型
- 数字,包含浮点数和整数
- 字符串,需要包裹在双引号中
- Bool值,true 或者 false
- 数组,需要包裹在方括号中 [],注意数组支持不同类型的元素
- 对象,需要包裹在大括号中 {}
- Null
wx:for
循环注意:
- index对应的是数组的索引,item对应的是数组的每一项
- 只使用
wx:fo
r可能会警告,要求使用wx:key
(唯一标识),为了消除警告- 简单一般的数组:可以直接
wx:key="*this"
- 较复杂的对象数组:可以
wx:key="index"
- 简单一般的数组:可以直接
三、事件
事件要素,事件通过函数实现操作
- 事件源(谁发生)
- 事件类型(怎么发生)
- 事件操作程序(做了什么)
定义事件
- 准备标签用于绑定事件
- 使用
bindxxx
关键字,绑定一个tap
点击事件bindtap="myClick"
- page页面大括号中定义
myClick()
方法
例子1简单的加数
numAdd(){ var num1 = this.data.num num1+=10; this.setData({ num:num1 }) },
例子2实现点击按钮自定义数字的累加运算
- 需要使用事件传参的方式
- 使用html5新增的自定义属性来存储,必须使用data-xxx形式
- 使用data-num存储每次累加的数值,类似当前事件event的属性值
numAddSuper(event){ console.log(event) var num1 = this.data.num // 默认从data-num得到的为字符串,需要转换格式 var num2= event.currentTarget.dataset.num - 0 num1 = num1 + num2 this.setData({ num:num1 }) },
转换的方式
- 可以parseInt()
- 可以加数的方式隐式转换
四、弹框反馈、交互显示
- 使用ui组件库弹框反馈,就是一般方法的再封装:参考:https://developers.weixin.qq.com/miniprogram/dev/extended/weui/dialog.html
wx.showXxx()
实现交互,参考:https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html
交互显示
- wx.showToast()
- wx.showModal()
- wx.showLoading()
- wx.showActionSheet()
- …
myClick() { wx.showToast({ title: '成功', icon: 'success', duration: 2000 }), wx.showModal({ title: "showModal", cancelColor: 'cancelColor', content: "这是showModal的提示内容", }), wx.showLoading({ title: 'Loading', mask:true, }), wx.showActionSheet({ itemList: ["1","2"], alertText:"ActionSheet的警示文字!", itemColor:"#000000" }) },
弹框反馈
- Dialog
- Msg
- Toptips
- HalfScreenDialog
- ActionSheet
具体参考微信开发文档:https://developers.weixin.qq.com/miniprogram/dev/extended/weui/dialog.html
这篇关于小学期小程序实训篇2_页面全局配置、局部配置、差值表达式、wx:key、事件event、弹窗反馈显示的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28uniapp 小程序获取到数据库的换行符怎么展示-icode9专业技术文章分享
- 2024-09-20微信小程序全栈项目实战:从零开始的全面指南
- 2024-09-20微信小程序项目实战:零基础入门教程
- 2024-09-19微信小程序项目中miniprogram_npm文件跟node_modules文件的差别-icode9专业技术文章分享
- 2024-08-27小程序 单行显示,超出部分省略号显示的方法代码-icode9专业技术文章分享
- 2024-08-27微信小程序如何获取到特种设备的刘海屏高度-icode9专业技术文章分享
- 2024-08-27微信小程序如何获取苹果手机底部一横线高度信息方法代码-icode9专业技术文章分享
- 2024-08-27微信小程序 顶部状态栏标签背景为none但还是看不到状态栏什么原因-icode9专业技术文章分享
- 2024-08-21微信小程序全栈入门:从零开始的一站式指南
- 2024-08-21微信小程序入门:轻松打造你的第一款小程序