当前位置：首页 > news >正文

微信小程序-数据模型与动态赋值

news 来源：原创 2024/9/30 19:06:44

首先新建一个小程序项目.

这边有创建基础项目的流程:从0新建一个微信小程序实现一个简单跳转_小白开发小程序源代码-CSDN博客

一共两步:

1.建立页面的数据模型和默认赋值:

默认赋值:

2.接收输入框的新文案,动态替换上面的文案展示

//文件 testUI.js增加方法:onInputChange(e) {    //接收输入数据if(e.detail.value.length > 0){this.setData({    //动态赋值     text : e.detail.value})}},

___________________________________________________________

主要代码内容公布:

// pages/index/testUI.json:

{"usingComponents": {}}

// pages/index/testUI.js
Page({/*** 页面的初始数据*/data: {text: '默认数据哦'},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {},clickHome: function() {wx.navigateBack()},onInputChange(e) {if(e.detail.value.length > 0){this.setData({text : e.detail.value})}},})

<!--pages/index/testUI.wxml-->
<view class="layout"><view class="testlayout" ><text class="testtext" >{{text}}</text></view><view class="text-wrapper"><text class="text-label">Text: </text><input type="text" class="text-input" placeholder="请输入新数据" bind:change="onInputChange"/></view><button class="testbackbutton" bindtap="clickHome">点击返回</button>      
</view>

/* pages/index/testUI.wxss */
.testlayout{margin: 50px;padding: 20px;width: 240px;border-radius: 8px;color: rgb(15, 1, 5);background-color: rgb(203, 235, 202);
}.text-wrapper {padding: 10px;width: 260px;height: 100px;border-radius: 8px;margin-left: 50px;color: rgb(21, 6, 29);background-color: rgb(170, 208, 219);
}.testbackbutton {padding: 10px;width: 80px;border-radius: 8px;margin-top: 80px;color: rgb(85, 4, 4);background-color: rgb(231, 166, 223);margin-bottom: 40px;
}