微信小程序开发之十一 —— 页面渲染

最新推荐文章于 2023-09-07 17:37:02 发布

@不胜寒

最新推荐文章于 2023-09-07 17:37:02 发布

阅读量1k

点赞数 1

分类专栏：微信小程序文章标签：小程序 javascript

本文链接：https://blog.csdn.net/weixin_45079619/article/details/107528952

版权

文章目录

学习前后

上一篇：微信小程序开发之十 —— 点击事件
下一篇：微信小程序开发之十二 —— 数据携带

变量渲染到页面

首先先在页面的js文件的page({})函数前面添加一些JavaScript代码

let title = "小程序假期开发学习";
let name = "bushenghan";
let a = -3;
let now = new Date();

这个是写在js最前面的，跟Page并列，不要写在Page里面
这个是js语法，所以要使用分号隔开，注意区分与Page里面逗号分隔的区别

在page的data数据里面添加以下代码：

data: {
   
    charat: title.charAt(5),
    concat: name.concat(title),
    upcase: name.toUpperCase(),
    abs: Math.abs(a),
    now: now.toString(),
    year: now.getFullYear(),
    time: now.getTime(),
  },

.wxml绑定数据，将数据渲染到页面

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

@不胜寒

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信小程序开发之十一 —— 页面渲染

快来学习微信小程序开发呀 —— 页面渲染
复制链接

扫一扫

专栏目录

《web开发：（微信小程序）页面渲染和事件》

yexiangCSDN的专栏

02-02

657

一、页面渲染 1. 条件渲染 1. wx:if 在小程序中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块： <view wx:if="{{condition}}"> True </view> 也可以用 wx:elif 和 wx:else 来添加一个 else 块： <view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length &g...

微信小程序开发-列表渲染和条件渲染

黑猫中校的燃烧战场

11-11

1809

数据绑定我就不说，看看官方文档就行了，主要就注意下this.setData({})改变数据值就行。一、列表渲染在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item block并不会渲染出来 wx:key项目的唯一标识符，一般来说最好设置一个挺不错的，免得报wa

参与评论您还未登录，请先登录后发表或查看评论

微信小程序开发系列三 小程序页面渲染

跟着互联网

01-12

1288

一、事件处理 // index.wxml <view bindtap="myclick">点击我</view> // index.js Page({ myclick: function(){ console.log("clicked") } }) bind开头的事件不会阻止事件冒泡，catch开头的事件会阻止事件冒泡二、更新数据 小程序在Page对...

微信小程序开发---条件渲染和列表渲染

最新发布

gaoqiandr的博客

09-07

1394

【代码】微信小程序开发---条件渲染和列表渲染。

微信小程序知识点整理(三)——条件渲染与列表渲染

泊一的博客

12-19

643

文章目录一、条件渲染`wx:if``block wx:if`hiddenhidden 和 `wx:if` 的区别二、列表渲染wx:for`block wx:for`指定索引和当前项的变量名列表渲染中的 `wx:key`1. `wx:key` 的作用说明2. `wx:key` 的注意事项一、条件渲染 wx:if 在小程序中，使用 wx:if="{{condition}}"来判断是否需要渲染该代码...

微信小程序项目实例——备忘录

05-24

总结，这个“微信小程序项目实例——备忘录”涵盖了微信小程序的基础开发、前端设计、数据管理、用户交互等多个方面的知识点，为学习微信小程序开发提供了实用的示例。通过实践这样的项目，开发者可以深入理解微信小...

微信小程序项目实例——飞机大战

05-24

在这个“微信小程序项目实例——飞机大战”中，我们将探讨如何利用微信小程序框架开发一款类似于经典街机游戏“雷电”的飞行射击游戏。首先，我们要了解微信小程序的基础架构。它基于JavaScript，使用WXML（WeChat...

微信小程序项目实例——双人五子棋

05-28

总的来说，"微信小程序项目实例——双人五子棋"是一个集成了前端技术、游戏逻辑、用户体验和跨平台适配的综合实践项目。通过这个项目，开发者不仅可以提升微信小程序的开发技能，也能深入理解和应用棋类游戏的算法...

微信小程序项目实例——狼人杀

05-24

在本项目中，我们将深入探讨如何使用微信小程序开发一个狼人杀的游戏应用。狼人杀是一种广受欢迎的社交策略游戏，它需要玩家通过语言表述、逻辑推理和角色扮演来进行互动。微信小程序作为轻量级的应用平台，非常适合...

微信小程序项目实例——印记

05-06

【微信小程序项目实例——印记】是一个综合性的开发案例，它展示了如何利用微信小程序平台来创建一个功能丰富的日记应用。这个项目的核心目标是提供一个简洁、易用的日记记录和查看平台，用户可以通过它来分享生活中...

微信小程序页面渲染实现方法

10-16

主要介绍了微信小程序页面渲染实现方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

微信小程序学习笔记之函数定义、页面渲染图文详解

12-12

前面一篇介绍了微信小程序目录结构、基本配置。这里再来介绍一下函数定义、页面渲染。 小程序逻辑app.js：定义App函数用来注册一个小程序，包含全局数据和函数，指定小程序的生命周期回调等。整个小程序只有一个 App 实例，全部页面共享使用。 //app.js App({ onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) // 登录 wx.login({

微信小程序开发5——页面样式文件

qq_48043256的博客

09-13

553

微信小程序开发5——页面样式文件一、关于WXSS WXSS是基于CSS扩展的页面样式语言，用于描述WXML的组件样式，具有CSS的大部分特性，对CSS部分兼容如选择器，扩展了尺寸单位等。尺寸单位意义 rpx WXSS规定屏幕宽度为750rpx rem WXSS规定屏幕宽度20rem px 由不同手机型号决定，渲染时换算二、盒子模型盒子模型是布局的基础，CSS假定每一个元素都会生成一个或多个矩形框，每个元素框中心都有一个内容区content，内容区到边框距离pad

微信小程序视图与渲染

dancheng1的博客

10-31

348

导入外部模板：写好外部模板（header.xwml）这里是头部的组件其他页面调用：如果一个模板页面中有两个模板，可以利用name值调用外部模板（footer.xwml）这是底部内容1 这是底部内容2 其他页面调用

微信小程序开发文档——视图与渲染（三）难点

Qjy_985211的博客

02-12

492

微信小程序开发——视图与渲染（一） 微信小程序开发——视图与渲染（二）渲染标签（一）条件标签 1. 使用方法 wx:if="{{ 条件真或假 }}" 2.也可以把判断内容放到数据里，同样可以显示。 3. 实现点击按钮，内容的显示与隐藏交替出现。也可以使用 else。如果 if 等于 true 显示，那么 else 就为 false 不显示。（二）循环...

小程序实现简单页面渲染

m0_71933813的博客

12-30

1317

pages 用来存放所有小程序的页面 utils 用来存放工具性质的模块 (例如: 格式化时间的自定义模块) app.js 小程序项目的入口文件 app.json 小程序项目的全局配置文件 app.wxss 小程序项目的全局样式文件 project.config.json 项目的配置文件 sitemap.json 用来配置小程序及其页面是否允许被微信索引 1.app.json用来对微信小程序进行全局配置，决定页面文件的路径（全局配置） 1）.pages存放项目的页面（哪个页面在最前面，哪个页面就是

微信小程序--条件渲染&列表渲染

weixin_44215175的博客

01-23

4115

条件渲染： wx:if 表示判断单个组件 block wx:if 表示判断块，也即判断多个组件 wx:if 在微信小程序框架里，使用wx:if = "{{condition}}"来判断是否需要渲染该代码块 <view wx:if= "{{condition}}"> true </view> //如果condition为真，则显示 true ，否则不显示使用wx...

小程序页面渲染问题

Audrey___的博客

05-07

667

1.模拟ajax请求，后台拿到数据 2.绑定数据到页面 3.页面无数据尝试打印data数据 console.log("数据绑定： "+ that.data.result) 打印结果原来是格式错误。采用JSON.stringify() 将JS值或对象或数组转换为JSON字符串。 result: JSON.stringify(res.result) 打印正常 ...

微信小程序开发之——个人中心

06-08

好的，我很愿意回答你关于微信小程序开发中个人中心的问题。在微信小程序中，个人中心通常包括用户信息展示、个人信息设置、订单管理、消息通知等功能。下面我简单介绍一下如何开发一个基本的个人中心页面。 1. 页面布局在小程序中，可以使用 WXML 和 WXSS 来布局和样式化页面。可以使用 flex 布局来实现页面的排版和布局。在个人中心页面中，通常会包含用户头像、用户名、等级、积分、订单、收藏等信息。可以使用小程序提供的组件来实现这些功能。 2. 数据展示在小程序中，可以使用 WXS 或者调用 API 来获取用户的数据。可以在页面加载时调用 API 来获取用户信息并展示在页面中。用户信息可以存储在服务器端，也可以存储在本地缓存中。 3. 交互功能在个人中心页面中，可以提供一些交互功能，比如用户可以点击头像更换头像，点击用户名编辑个人信息等。可以使用小程序提供的事件绑定和 API 来实现这些功能。以上是我对于微信小程序开发中个人中心的简单介绍，希望对你有所帮助。如有需要，我可以提供更详细的开发指导。