小学期小程序实训篇2_页面全局配置、局部配置、差值表达式、wx:key、事件event、弹窗反馈显示

2021-05-09 12:01:15 阅读：147 来源： 互联网

一、页面配置

页面配置分为

全局页面配置：在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:for可能会警告，要求使用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

标签：微信,配置,json,期小,JSON,实训,页面,弹窗,wx
来源： https://blog.csdn.net/qq_24654501/article/details/116559845

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9