微信小程序|绑定数据

2021/6/30 17:24:45

编程Tag： 程序数据微信 text Font 绑定 index size

本文主要是介绍微信小程序|绑定数据，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

问题描述

“数据绑定”是前端框架技术中的一个概念，比如微信小程序开发中的数据绑定。那么为什么要进行数据绑定？如何进行数据绑定呢？

解决方案

数据绑定的作用就是为了实现一种动态的效果，即后台数据更新时前端页面也自动更新；前端页面上的数据更新时后台的数据也自动更新。这无疑可以使前端的开发更加高效。

下面就用实例来演示如何进行数据绑定：

创建好项目后，清空index下wxml,js,wxss文件下所有内容，进入App.json，修改导航栏标题。再在index.wxml进行界面布局，代码如下：

</view>

进入index.js，在data提供数据，代码如下：

Page({

data:{

temp:"14",

low:"10℃",

high:"15℃",

type:"阴",

city:"成都",

week:"星期六",

weather:"东南风微风级"

}

})

进入index.wxml，将data提供的数据绑定到页面，代码如下：

<view class="weather">{{weather}}</view>

</view>

进入index.wxss，将index.wxml添加样式，代码如下：

.content{

font-family: 微软雅黑 , 宋体 ;

font-size: 14px;

background-size: cover;

height: 100%;

width: 100%;

color:#333333;

}

.today{

padding-top:70rpx;

height:50%;

}

.temp{

font-size:80px;

text-align:center;

}

.city{

font-size:20px;

text-align:center;

margin-top:20rpx;

margin-right:10rpx;

}

.lowhigh{

font-size:12px;

text-align:center;

margin-top:30rpx;

}

.type{

font-size:16px;

text-align:center;

margin-top:30rpx;

}

.week{

font-size:12px;

text-align:center;

margin-top:30rpx;

}

.weather{

font-size:12px;

text-align:center;

margin-top:20rpx;

}

最终效果图：

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

结语

要熟悉小程序的开发流程，在js里提供数据，在wxml里绑定数据，在wxss里添加样式。将js里的data通过数据绑定的方式就可以在wxml里通过双大括号的方式将数据值显示出来，动态地加载数据，以实现数据绑定的动态效果。

END

实习编辑 | 王文星

责编 | 赵微

where2go 团队

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

这篇关于微信小程序|绑定数据的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

微信小程序|绑定数据

相关编程文章