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

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

这边有创建基础项目的流程:从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;
}