可信赖的广州做网站一个网站 多个域名
首先新建一个小程序项目.
这边有创建基础项目的流程:从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;
}