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

深碍√TFBOYSˉ_ 2022-12-03 08:27 135阅读 0赞

# block #

--------------------

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

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

# 属性插值 #

--------------------

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

双引号里面双花括号：

# 组件属性 #

--------------------

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

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

wx:for 循环遍历

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

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

--------------------

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

思路：既然要显示不同样式的组件，那就要新建两种组件；然后在展示页，通过 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钩子中接收 。 ####

声明式：

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

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

另外一个页面接收参数：

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

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

![在这里插入图片描述][20200902203250550.png_pic_cnter]  
然后打印这个tap事件对象：  
![在这里插入图片描述][20200902203853308.png_pic_cente]  
下面这个是打印的e里面，可以看到有我们自定义的whatever属性及值：  
![在这里插入图片描述][20200902203359987.png_pic_ceter]  
在跳转过去的页面也能后看到打印的参数：  
![在这里插入图片描述][2020090220401174.png_pic_cnter]

# wxml事件 #

--------------------

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

微信小程序官方文档 \[指南\]-\[小程序框架\]-\[事件系统\]：[https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html][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][https_developers.weixin.qq.com_miniprogram_dev_api_network_request_wx.request.html]

不校验合法域名，仅能在开发中使用，一旦上线，还是得备案合法域名。  
![在这里插入图片描述][20200902114848405.png_pic_cnter]

[https_developers.weixin.qq.com_miniprogram_dev_reference_wxml_conditional.html]: https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html
[https_developers.weixin.qq.com_miniprogram_dev_reference_wxml_data.html]: https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html
[https_developers.weixin.qq.com_miniprogram_dev_framework_view_wxml]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/
[https_developers.weixin.qq.com_miniprogram_dev_reference_wxml]: https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_ceter]: /images/20221123/5f452c55b1a14a66a33c32106ec3af2e.png
[20200902203250550.png_pic_cnter]: /images/20221123/9cbfea2471a9484c92817736ec4a0858.png
[20200902203853308.png_pic_cente]: /images/20221123/3413649b46764a89a234c125896aa5c2.png
[20200902203359987.png_pic_ceter]: /images/20221123/4d88cbdf7ba5493a8ee83d3f4f2f5203.png
[2020090220401174.png_pic_cnter]: /images/20221123/29ff4c32dff647c09efca16842bb0da7.png
[https_developers.weixin.qq.com_miniprogram_dev_framework_view_wxml_event.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
[https_developers.weixin.qq.com_miniprogram_dev_api_network_request_wx.request.html]: https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
[20200902114848405.png_pic_cnter]: /images/20221123/06819a5845ec4bb9bd6526a4af61eac3.png