微信小程序（note4：block&属性插值&列表渲染&条件渲染&事件&数据请求）

block

---

微信小程序官方文档 [框架]-[WXML语法参考]-[条件渲染]：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html

<block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性；主要用来包裹，而且不会生成多余的标签，类似于空标签。

属性插值

---

微信小程序官方文档 [框架]-[WXML语法参考]-[数据绑定]：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html

双引号里面双花括号：

<view 属性="{{变量}}"></view>

组件属性

---

微信小程序官方文档 [指南]-[小程序框架]-[视图层]-[WXML]：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/

微信小程序官方文档 [框架]-[WXML语法参考]：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/

wx:for 循环遍历

wx.if wx:else 条件渲染 两者若一起使用，需放在上下位置，中间不能有其他组件

<view wx:if="{{1===0}}">测试wx：if<view>
<view wx:elif="{{1===1}}">111<view>
<view wx:elif="{{1===2}}">222<view>
<view wx:else>测试wx：else<view>

练习：根据数据不同，显示不同的组件

---

这是我们想要实现的效果，一串数据里面，每一条数据里图片的个数不一，少于三张的就展示一张（如标题1）；多于或等于三张的，就显示三张（如标题2）。这样虽然我们渲染的都是这组数据，但是根据图片个数不同，分别用不同的组件来展示他们。

思路：既然要显示不同样式的组件，那就要新建两种组件；然后在展示页，通过 wx:if 和 wx:else 来分别渲染组件；然后进行值的传递，实现动态数据渲染。

展示页面：定义数据，向子组件传参

>>render.js

Page({
    data: {
        arr:[
            {id:"R0001",title:"标题1",img1:"../../imgs/timg.jpg"},
            {id:"R0002",title:"标题2",img1:"../../imgs/333.jpg",img2:"../../imgs/111.jpg",img3:"../../imgs/222.jpg"},
            {id:"R0003",title:"标题3",img1:"../../imgs/timg.jpg"},
            {id:"R0004",title:"标题4",img1:"../../imgs/111.jpg",img2:"../../imgs/111.jpg",img3:"../../imgs/333.jpg"},
            {id:"R0005",title:"标题5",img1:"../../imgs/333.jpg",img2:"../../imgs/111.jpg",img3:"../../imgs/222.jpg"}
        ]
    }
)}

>>render.wxml

<view wx:for="{{arr}}">
	<comptwo wx:if="{{item.img3}}" objval="{{item}}" />
	<compone wx:else objval="{{item}}" />
</view>

组件1：接收参数，规定接收类型，然后渲染

>>compone.js

Component({
    properties: {
        objval:Object
    },
)}

>>compone.wxml

<view>
	<text class="text1">{{objval.title}}</text>
	<image class="text_one" src="{{objval.img1}}"></image>
</view>

>>compone.wxss

.text_one{
    width: 200rpx;
    height: 200rpx;
    margin-left: 50%;
    display: inline-block;
    vertical-align: middle;
}
.text1{
    display: inline-block;
    vertical-align: middle;
}

组件2：

>>comptwo.js

Component({
    properties: {
        objval:Object
    },
)}

>>comptwo.wxml

<text>{{objval.title}}</text>
<view>
	<image class="text_two" src="{{objval.img1}}"></image>
	<image class="text_two" src="{{objval.img2}}"></image>
	<image class="text_two" src="{{objval.img3}}"></image>
</view>

导航传参

---

导航跳转有 声明式 编程式 两种方式。

get传参的其中一种方式，直接在url后增加参数，然后跳转到另一个页面在 onLoad钩子中接收 。

声明式：

<navigator url="../getdata/getdata?name=sky&age=18">
	<view wx:for="{{arr}}">
		<comptwo wx:if="{{item.img3}}" objval="{{item}}" />
		<compone wx:else objval="{{item}}" />
	</view>
</navigator>

编程式：比如事件触发后跳转

<view bindtap="skiprou" wx:for="{{arr}}">
	<comptwo wx:if="{{item.img3}}" objval="{{item}}" />
	<compone wx:else objval="{{item}}" />
</view>

// 编程式导航跳转
skiprou(e){
    wx.navigateTo({
      url: '../getdata/getdata?name=susan&age=22',
    })
},

另外一个页面接收参数：

Page({
	//生命周期函数--监听页面加载
	onLoad: function (options) {
		console.log(options)
	},
)}

如果想要传递不同的参数呢，可以通过 data-这个属性：

然后打印这个tap事件对象：

下面这个是打印的e里面，可以看到有我们自定义的whatever属性及值：

在跳转过去的页面也能后看到打印的参数：

wxml事件

---

用户与程序交互的唯一入口

微信小程序官方文档 [指南]-[小程序框架]-[事件系统]：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

数据请求

---

微信小程序官方文档 [API]-[网络]-[发起请求]：https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html

不校验合法域名，仅能在开发中使用，一旦上线，还是得备案合法域名。