学习微信小程序WXML之条件渲染

本文是关于学习微信小程序开发的笔记,聚焦于WXML的条件渲染。通过示例解释了当condition变量变化时如何控制页面内容显示,如:wx:if和hidden的区别。wx:if在切换时涉及局部渲染,适合频繁切换;hidden则始终渲染,控制显示隐藏,适用于初始化渲染成本较高的场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

此贴为学习9 小时搞定微信小程序开发 的笔记
文档:条件渲染 · 小程序

这是一个解决今天吃什么这一大难题的一小段代码。

<!--index.wxml -->
<view>今天吃什么?</view>
<view wx:if="{{condition === 1}}">
    饺子
</view>
<view wx:elif="{{condition === 2}}">
    米饭
</view>
<view wx:else>
    面食
</view>
//index.js
Page({
    data:{
        condition: Math.floor(Math.random()*3+1)
    }
})

当页面传入的condition变量的值为1时,今天就吃饺子,当值为2时,今天就吃米饭;当为其他值时,今天就吃面食。js文件里就是condition变量生成一个1-3的随机整数。Math.random()生成0-1的浮点随机数,Math.floor()对浮点数处理来返回一个向下取整的整数。

渲染结果:
这里写图片描述

wx:if和hidden的区别

这两个都能控制元素的显示,但wx:if的条件在切换时,框架会有一个局部渲染的过程,从而确保条件块在渲染时可以销毁,并进行重新渲染。而hidden属性始终都会渲染,通过hidden属性可以控制视图上的显示或隐藏。一般来说,wx:if有更高的切换消耗,hidden有更高的初始话渲染消耗。所以如果元素要频繁切换的话,用hidden更好。

### 微信小程序 WXML 生成海报 在微信小程序中,通过`<canvas>`组件结合WXML和JS逻辑层代码能够实现自定义的海报绘制。以下是基于此方法的一个具体实例。 #### 使用 Canvas 绘制海报 为了创建一张带有文字、图片等内容的海报,在页面配置文件(如page.json)里声明使用 canvas 类型: ```json { "usingComponents": {}, "navigationBarTitleText": "Canvas Poster", "backgroundColor": "#ffffff" } ``` 接着是在对应的wxml文件内放置一个 `<canvas>`标签用于绘图操作,并设置其唯一标识符以便后续调用[^1]。 ```html <!--index.wxml--> <view class="container"> <!-- 定义画布 --> <canvas type="2d" id="myCanvas"></canvas> </view> ``` 随后,在wxss样式表中调整该控件大小适应布局需求: ```css /* index.wxss */ .container { display: flex; justify-content: center; } #myCanvas { width: 375px; /* 可根据实际场景修改尺寸 */ height: 604px; } ``` 最后编写js脚本完成具体的绘画动作,这里假设要在一个矩形区域内写入一段描述性的文案并附上logo图标作为例子展示[^3]: ```javascript // index.js Page({ onReady() { const ctx = wx.createCanvasContext('myCanvas'); // 设置背景颜色 ctx.setFillStyle('#f8f8ff'); ctx.fillRect(0, 0, 375, 604); // 添加Logo 图片 let logoPath = '/images/logo.png'; // 假设路径下存在名为logo.png 的资源文件 ctx.drawImage(logoPath, 10, 10, 50, 50); // 描绘说明文字 ctx.setFontSize(14); ctx.setTextBaseline('top'); ctx.setFillStyle('#0A0A0A'); ctx.fillText('微信小程序 • 长按识别', 10, 70); // 执行渲染命令 ctx.draw(); } }) ``` 上述过程展示了利用微信小程序内置API以及HTML5 Canvas API来构建个性化的视觉内容的方式之一。值得注意的是,当涉及到更复杂的图形组合或是希望保存最终成果供用户分享时,则可能还需要进一步探索诸如导出为临时本地文件等功能扩展[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值