模板与配置

标签：渲染 配置 程序 事件 tabBar 页面 模板 wx

能够使用 WXML模板语法渲染页面结构

WXML模板语法

数据绑定的基本原则

1.在data中定义数据：在页面对应的.js文件中，把数据定义到data对象中即可
2.在WXML(结构)中使用数据：
利用Mustache语法的格式
把data中的数据绑定到页面中渲染，使用Mustache语法(双大括号)将变量包起来即可。语法格式为：{{ 要绑定的数据名称 }}

• 应用场景：
  1.绑定内容：就是上面进行的数据声明以及渲染
  2.绑定属性：这个绑定的图片是网络上的(网址)
  3.运算(三元运算、算术运算)
  三元运算：
  算术运算：randomNum01:Math.random().toFixed(2)//随机生成0~1之间的小数，toFixed(2)只取两位小数；括号内填保留个数；而后再WXML中进行算术运算

事件

• 什么是事件？
  事件是渲染层到逻辑层的通讯方式。通过实践可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。
• 小程序中常见的事件

类型：tap
绑定方式：bindtap或bind:tap
事件描述：手指触摸后马上离开，类似于HTML中的click事件

类型：input
绑定方式：bindinput或bind:input
事件描述：文本框的输入事件

类型：change
绑定方式：bindchange或bind:change
事件描述：状态改变时触发

事件对象的属性列表

当事件回调触发的时候，会都收到一个事件(形参)对象event，它的详细属性如下所示：

每次事件被触发回调，都会创建出一个事件对象event，这个对象通过操作符.来调用以上的属性，来获取想要得到的数据；表中间的类型，指的是返回值类型。

target与currentTarget的区别
target是触发该事件的u案头组件，而currentTarget则是当前时间所绑定的组件。举例如下：

事件绑定

bindtap语法格式
在小程序中，不存在HTML中的onlick鼠标点击事件，而是通过tap事件来响应用户的触摸行为

• 1.通过bindtap,可以为组件绑定tap触摸事件，语法如下：
  <button type="primary" bindtap="btnTapHandler">按钮</button>
• 2.在页面的.js文件中定义对应的事件处理函数(btnTapHandler)，事件参数通过形参event(一般简写为：e)来接收：
  btnTapHandler(e){函数体}
  
  按钮被点击后，所创建的事件对象的信息被打印在了Console中

事件传参与数据同步

在事件处理函数中为data中的数据赋值

通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值，示例如下：

事件传参

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传参。例如如下代码：
<button type="primary" bindtap='btnHandler(123)'>事件传参</button>
这类似于java中调用有参方法或构造器，但是这样的形式是不允许的，因为规定：bindtap后面填写的是函数名，所以会将btnHandler(123)当作一个函数名来处理
传递参数的方式：通过data-参数名="{{2}}"，这种Mustache的方式传递参数，示例如下：
<button type="primary" bindtap='btnHandler' data-info="{{2}}">事件传参</button>
最终：

• info会被解析为参数名
• 数值2会被解析为参数的值

在事件处理</font color = "red">函数中,通过</font color = "red">event.target.dataset.参数名即可获得</font color = "red">参数的具体值

事件传参,在函数中通过固定语句e.target.dataset访问到参数

bindinput的语法格式

在小程序中，通过input事件来响应文本框的输入事件，语法格式如下：

• 1.通过bindinput，可以为文本框绑定输入事件，代码如下：
  <input bindinput="inputHandler"></input>
• 2.在页面的.js文件中定义事件处理函数，通过e.detail.value来获取文本框最新的值(注意：是detail，不是datail)

实现文本框和data之间的数据同步

• 实现步骤：
  1.定义数据：在data中定义一个变量
  2.渲染结构：在input中通过Mustache动态绑定这个变量，并且绑定一个函数
  3.美化文本框样式：在input标签选择器中进行美化
  4.绑定input事件处理函数：在.js文件中定义函数；在函数中，用this.setData访问到这个变量；再利用e.datail.value获取到最新值；并以用赋值语句为变量赋新值
  

条件渲染

wx:if

在小程序中，使用wx:if="{{condition}}"来判断是否需要渲染改代码块，代码示例：
<view wx:if="{{condition}}">True</view>如果condition这个条件是true的话，我们就展示这个组件，否则就不展示
也可以用wx:elif和wx:else来添加else条件，如：
<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>
解读为，如果type值为1，就显示男；如果是2，就显示女；否则显示保密；type值的操作只能在调试器、后台控制才有效，上面的input随改变type的值，但却对此情况无效

结合<block>标签使用wx:if

如果要一次性控制多个组件的展示与隐藏，可以使用<block></block>标签将多个组件包装起来，并在标签上使用wx:if控制属性，如下：
<block wx:if="{{true}}">
<view>view1</view>
<view>view2</view>
<view>view3</view>
</block>
只起到包裹的作用；是一个包裹形容器，不在页面中做任何的渲染

结合hidden控制组件展示与隐藏

在小程序中，直接使用hidden="{{condition}}"也能控制元素的显示与隐藏，condition为true，表示需要隐藏；condition为false，表示不需要隐藏

flag值的改变通过AppDate中flag后的勾选框来决定

wx:if与hidden的对比

• 1.运行方式不同
  wx:if以动态创建和移除元素的方式，控制元素的展示与隐藏
  hidden以切换样式的方式(display:none/block;)，控制元素的显示与隐藏；意思就是：当两者都隐藏了之后，wx:if所控制的组件在wxml控制台上就找不到了，但hidden控制的语句还能够被找到
• 使用建议
  1.当需要进行频繁切换的时候，使用hidden；因为频繁的删除添加比较消耗性能
  2.控制条件比较复杂，建议使用wx:if搭配elif、else使用

列表渲染

wx:for

通过wx:for可以根据指定的数组，循环渲染重复的组件结构，如：

默认情况下，当前循环项的索引用index表示；当前循环想用item表示
添加过wx:for后，就可以访问到数组中的索引和元素了；关键字就是index和item

如何手动指定索引和当前项的变量名

通过上面的学习，我们观察到，在未声明索引和当前项的变量名的情况下，index和item被默认为变量名
我们可以通过wx:for-index="变量名"以及wx:for-item="变量名"的方式来手动确定索引名和变量名

wx:key的使用

类似于Vue列表渲染中的:key，小程序在实现列表渲染时，也建议为渲染出来的列表指定唯一的key值，从而提高渲染的效率
列表一般具有多个属性值，也就是说，存入数组的是个对象的情况，这个时候需要制定一个key；当渲染的数组没有其他多余的属性时，我们可以直接将索引作为key值

官方解释：当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
我的理解： 在不使用 wx:key的情况下, 如果 array 内的数据发生改变，则会重新创建每个Item对象然后渲染列表（费时费力）
在使用 wx:key的情况下，如果array中的数据发生改变，只是将对应的对象重新排序。未发生变化的对象，不会重新创建

WXSS模板样式

什么是wxss：wxss是一套样式语言，用于梅花WXML的组件样式，类似于网页开发中的CSS
什么是rpx尺寸单位：是微信小程序中独有的，用来解决屏幕适配的尺寸单位
rpx实现原理：监狱不同屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在狂赌上等分为份(即：当前屏幕的总宽度为750rpx)
1.在较小的设备上：一个单位代表的宽度小
2.在较大的设备上：一个单位代表的宽度大
小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配

rpx与px之间的单位换算：iPhone6为例，750rpx375px750物理像素点；即，1rpx==0.5px=1物理像素点

什么是样式导入：使用wxss提供的@import语法，可以导入外联的样式表。

• @import的语法格式
  @import后跟需要导入的外联央样式的相对路径，用;表示语句结束
  

全局样式和局部样式

全局样式

定义在app.wxss中的样式为全局样式，作用于每一个小程序的页面

全局配置

• 1.全局配置文件及常用的配置项
  小程序根目录下的app.json文件就是小程序的全局配置文件。常用的配置项如下:
  • pages
    记录当前小程序所有页面的存放路径
  • window
    全局设置小程序窗口的外观
  • tabBar
    设置小程序底部的tabBar效果
  • style
    是否启用新版的组件样式(前面提到过，启动新版样式V2)

window

• 1.小程序窗口的组成部分(前两部分由window控制)
  第一部分：导航栏区域(navigationBar)
  第二部分：背景区域(background默认不可见，下拉才可见)
  第三部分：页面的主体区域，用来显示wxml中的布局

• window节点常用配置项
  （navigation开头都是用于设置导航栏的）
  navigationBarTitleText String 字符串 导航栏标题文字内容
  navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如#000000
  navigationBarTextStyle String white 导航栏标题颜色，仅支持 black / white
  （background开头都是用于设置窗口背景的）
  backgroundColor HexColor #ffffff 窗口的背景色
  backgroundTextStyle String dark 下拉loading的样式，仅支持dark / light
  （控制页面效果的）
  enablePullDownRefresh Boolean false 是否全局开启下拉刷新
  onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离，单位为px

设置导航栏的标题
设置步骤：app.json->windom->navigationBarTitleText
设置导航栏背景颜色(只支持16进制的颜色表达)
设置步骤：app.json->window->navigationBarBackgroundColor
设置导航栏的标题颜色
设置步骤：app.json->window->navigationBarTextStyle
设置下拉刷新loading的样式
设置步骤：app.json->window->为backgroundTextStyle指定dark值
设置上拉触底的距离
设置步骤：app.json->window->onReachBottomDistance

tabBar

tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：
1.底部tabBar
2.顶部tabBar
注意：
1.tabBar中职能配置最少两个、最多五个tab页签
2.当渲染顶部tabBar时，不显示icon，只显示文本

• tabBar的6个组成部分
  1.backgroundColor：tabBar的背景颜色
  2.selectedIconPath：选中时的图片路径
  3.iconPath：未选中时的图片路径
  4.selectedColor：tabBar上的文字选中时的颜色
  5.color：未选中时字体的颜色
  6.borderStyle：tabBar上边框的颜色

tabBar是与window节点平级的，在app.json中设置。常用属性：

list是必选项 绑定tab项，每个tab项的配置选项有很多，如下：

pagePath与text是必选项：因为pagePath代表要跳转的页面；text代表页面名称，就是位置下面的文字，见左下角

完整的配置tabBar步骤：

• 一：
  1.把资料目录中的images文件夹，拷贝到小程序的根目录中，就是与pages平级
  2.将需要用到的小图标分组(每一个tab页签是一组，一组两张图，选中的、没选中的)
  • 图片名称包含-active的是选中之后的图标
  • 不包含-active的是未选中后的图标
• 二：
  创建对应页签数量的页面：pages中创建；并且tab页签对应页面要放在数组头部来显式声明
• 三：
  配置tabBar选项
  • 1.打开app.json配置文件，和pages、window平级，新增tabBar节点
  • 2.tabBar节点中，新增list数组，这个数组中存放的，是每个tabBar项的配置对象（就是要添加的页面）
  • 3.在list数组中，新增每一个tab页面的配置对象。对象中包含的属性如下：
    • 1.selectedIconPath：选中时的图片路径
      2.iconPath：未选中时的图片路径
      3.pagePath：添加的页面所对应的文件路径
      4.text：页签名
      

页面配置

页面配置文件的作用：
小程序每个页面都有自己的.json配置文件，用来对当前页面的窗口外观、页面效果等进行配置

页面配置和全局配置的关系

在小程序中，app.json中的window节点，可以全局配置小程序中每个页面的窗口表现。
如果，某些小程序页面想要拥有自己独特的窗口表现时，就需要在页面级别的.json文件中去配置，以实现特殊需求
当页面配置与全局配置冲突时，就近原则。配置位置也在大括号里面

页面配置中常用的配置项

****下拉刷新效果，一般出现在需要加载的页面中；而一些浏览性质的页面并不需要，所以建议不要再window节点中设置enablePullDownRefresh属性，而是在各个页面的.json文件中自行配置

网络数据请求

小程序中网络数据请求的限制

出于安全性方面的考虑，在小程序官方对数据接口的请求做出了如下两个限制：
1.只能请求HTTPS类型的接口(网络接口有两种HTTP和HTTPS)
2.必须将接口的域名添加到信任列表中

如何配置request合法域名

需求：假设在自己的微信小程序中，希望请求https://www.escook.cn/域名下的接口
配置步骤：登录微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名
注意事项：
1.域名支持https协议
2.域名不能使用IP地址或locaohost
3.域名必须经过ICP备案
4.服务器域名一个月内最多可申请5次修改

发起GET请求

调用微信小程序提供的wx.request()方法，可以发起GET数据请求

发起POST请求

与上面唯一不同是method，请求方法改为POST

如何在页面刚加载的时候就请求数据

在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的onload事件中调用获取数据的函数
在发送请求中，我们是通过点击按钮实现请求数据的，但希望进入到页面的时候就加载数据。通过onload事件，在这个事件中调用GETinfo和POSTinfo

通过以上案例，我们可以知道，当我们需要页面一加载就进行的事件，可以把这个时间放入到onload()方法中

如何跳过request请求

如果后端程序员仅仅提供了http协议的接口、暂时没有提供https协议的接口。我们就需要跳过请求，进行开发
为了不影响开发进程，我们可以在微信开发者工具中，临时开启开发环境不校验请求域名、TLS版本以及HTTPS证书选项，跳过request合法域名的校验

关于跨域和Ajax的说明

跨域问题只存在于基于浏览器的Web开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。
Ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起Ajax请求”，而是叫做“发起网络数据请求”。

案例-本地生活(首页)

• 1.新建项目并梳理项目结构
• 2.配置导航栏效果
• 3.配置tabBar效果
• 4.实现轮播图效果
• 5.实现九宫格效果
• 6.实现图片布局
  

知识点见案例代码

标签：渲染,配置,程序,事件,tabBar,页面,模板,wx
From： https://www.cnblogs.com/hezhipeng/p/16875088.html