首先新建一个小程序项目.
这边有创建基础项目的流程:从0新建一个微信小程序实现一个简单跳转_小白开发小程序源代码
一共两步:
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;
}
