微信小程序详解(3 页面配置 ,sitemap配置,数据绑定)

页面配置

介绍:
我们在对环境进行配置后,还需要对页面进行配置,页面配置可以改变页面的背景色,上拉,下拉,上面显示,下面显示等等功能,因此,我们要对页面进行配置,从而打到梅花界面,优化内容的作用
流程:
1.每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。
(注意:页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。)
文件内容为一个 JSON 对象
2.页面配置有一下配置
配置项
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
3.这些都是我们配置项的功能,以及如何实现功能的属性,大家可以看一看,熟悉一下,使用的时候,去官方看文档就行
(注意:
关于navigationStyle
iOS/Android 客户端 7.0.0 以下版本,navigationStyle 只在 app.json 中生效。
iOS/Android 客户端 6.7.2 版本开始,navigationStyle: custom 对 web-view 组件无效
开启 custom 后,低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0(不代表最低版本,只供调试用)可方便切到旧视觉
Windows 客户端 3.0 及以上版本,为了给用户提供更符合桌面软件的使用体验,统一了小程序窗口的导航栏,navigationStyle: custom 不再生效)

在这里插入图片描述
app.json配置的是全局配置,它的配置页面通用,但是如果你的页面的json文件进行了配置,那么便会覆盖全局配置,转用页面配置.

sitemap 配置

介绍:
微信现已开放小程序内搜索,开发者可以通过 sitemap.json 配置,或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索词条触发该索引时,小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时,会携带特定的 user-agent:mpcrawler 及场景值:1129。需要注意的是,若小程序爬虫发现的页面数据和真实用户的呈现不一致,那么该页面将不会进入索引中。

sitemap 配置
5.小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引,文件内容为一个 JSON 对象,如果没有 sitemap.json ,则默认为所有页面都允许被索引;sitemap.json 有以下属性:

配置项
在这里插入图片描述
rules
6.rules 配置项指定了索引规则,每项规则为一个JSON对象,属性如下所示:
在这里插入图片描述
matching 取值说明
在这里插入图片描述
(注:没有 sitemap.json 则默认所有页面都能被索引)
(注:{“action”: “allow”, “page”: “*”} 是优先级最低的默认规则,未显式指明 “disallow” 的都默认被索引)

数据绑定

介绍:
WXML 中的动态数据均来自对应 Page 的 data

简单绑定
7.数据绑定使用 Mustache 语法(双大括号)将变量包起来.
在这里插入图片描述

<!-- 1 字符串 -->
<view>{{msg}}</view>
<!-- 2 数值型 -->
<view>{{num}}</view>
<!-- 3 布尔型 -->
<view>是不是伪娘{{isGirl}}</view>
<!-- 4 object型 -->
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>
<!-- 5 在标签的属性中使用 -->
<view>自定义属性</view>
<!--6  使用bool类型充当属性 checked 
        字符串和花括号之间一定不要存在空格 否则会导致失败
-->
<view>
<checkbox checked></checkbox>
</view>
<!--  条件渲染 -->
<view>
<view>条件渲染</view>
<view wx:if="{{true}}">显示</view>
<view wx:if="{{false}}">隐藏</view>
</view>

这些都是比较基础的数据绑定
(注意: 花括号和引号之间如果有空格,将最终被解析成为字符串)
(注意:上述方式可以随意组合,但是如有存在变量名相同的情况,后边的会覆盖前面.)
(特别注意:不要直接写 checked=“false”,其计算结果是一个字符串,转成 boolean 类型后代表真值。)

总结:

页面配置:
我们在对环境进行配置后,还需要对页面进行配置,页面配置可以改变页面的背景色,上拉,下拉,上面显示,下面显示等等功能,因此,我们要对页面进行配置,从而打到梅花界面,优化内容的作用.
每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象.

sitemap 配置:
小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引,文件内容为一个 JSON 对象,如果没有 sitemap.json ,则默认为所有页面都允许被索引;

rules 配置项指定了索引规则,每项规则为一个JSON对象

数据绑定
WXML 中的动态数据均来自对应 Page 的 data。

总结注意点:

  • 页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。

  • 关于navigationStyleiOS/Android 客户端 7.0.0 以下版本,navigationStyle 只在 app.json 中生效。
    iOS/Android 客户端 6.7.2 版本开始,navigationStyle: custom 对 web-view 组件无效
    开启 custom 后,低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0(不代表最低版本,只供调试用)可方便切到旧视觉
    Windows 客户端 3.0 及以上版本,为了给用户提供更符合桌面软件的使用体验,统一了小程序窗口的导航栏,navigationStyle: custom 不再生效

  • 没有 sitemap.json 则默认所有页面都能被索引 {“action”: “allow”, “page”: “*”}
    是优先级最低的默认规则,未显式指明 “disallow” 的都默认被索引

  • 花括号和引号之间如果有空格,将最终被解析成为字符串

  • 数据绑定的上述方式可以随意组合,但是如有存在变量名相同的情况,后边的会覆盖前面

  • 特别注意:不要直接写 checked=“false”,其计算结果是一个字符串,转成 boolean 类型后代表真值。

好了,我们今天的内容就到这里了

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值