入门实战练习：控件和布局，数据绑定

学习目标

1.使用内置的控件搭建界面
2.会布局代码的书写

先去其他网站学点html,css,js的东西,再来玩微信小程序。

• 第一步 创建工程 不说了 上篇文章演示过了

• 第二步 创建一个文件夹 在创建必备的四个文件xx.js/xx.wxml/xx.wxss/xx.json,如下图

• 第三步 先进入app.json 文件把启动后进入的页面设置成我们创建的页面

这个时候运行一些 应该会报错,因为在myPage.js 里面没有写任何东西,程序找不到执行的函数

• 第四步 进入myPage.js 文件 输入page 会有自动补全,回车一下
  我们只留下下面的代码就行,我们把其他的

  Page({
  // 在data 里面定义变量,系统会自动找到
  data:{
   // 定义一个变量,把这个值显示在页面上去
   name:"这里会显示你输入的名字" 
  },
   // 生命周期函数--监听页面加载
  onLoad:function(options){
  }
  })

• 第五步 进入myPage.wxml 文件中 放几个控件

<view >
    <view >
        // 把刚才定义的变量直接写在这个地方,会自动和标签进行绑定
        <text > {{name}}</text>
    </view>
    <view >
         <input placeholder="请输入你的姓名" />
    </view>
    <view>
        <button >提交</button>
    </view>
</view>

运行一下

• 第六步 先定义几个样式类

  <view class = "container">
    <view  class = "text-section">
      <text > {{name}}</text>
    </view>
  <view class ="input-section">
     <input placeholder="请输入您的姓名" />
  </view>
    <view class = "submit_section">
      <button class = "submit">提交</button>
    </view>
  </view>

• 第七步 在myPage.wxss文件写样式,美化一下页面

.container{
  margin-top: 30px;
  width: 100%;
  height: 200px;
  background-color: #fff;
  padding: 0 0;
}

.text-section{
    margin-top: 20px;
    height: 30px;
    text-align: center;
    font: 16px;
     border-bottom-width: 1px;
    border-bottom-color: black;
    border-bottom-style: solid;
    color: #000;
}

.input-section{
    margin-top: 10px;
    border-bottom-width: 1px;
    border-bottom-color: black;
    border-bottom-style: solid;
    text-align: center;
}
.submit_section{
    margin-top: 10px;
    color: black;
    margin-bottom: 20px;
}
.submit{
    background: black;
    color: white;
}

此时运行一下

本节内容

理解微信小程序的数据交互

在上一篇文章(控件与布局)主要介绍的页面的控件的展示和布局,如下图

本篇就来演示一下数据是怎么交互的

我们的需求是在输入框输入内容后,点击提交按钮,在上面的标签上进行显示

• 第一步 在xxx.wxml 绑定两个事件 一个是监听输入框的值,一个是提交按钮的点击事件,代码如下

  <view class = "container">
    <view  class = "text-section">
        <text > {{name}}</text>
    </view>
    <view class ="input-section" >
          // 输入事件 bindinput  绑定到函数inputName 上
         <input placeholder="请输入您的姓名" bindinput="inputName"/>
    </view>
    <view class = "submit_section">
        //  bindtap 代表单击事件  绑定到方法tapSubmit 上
        <button class = "submit" bindtap="tapSubmit">提交</button>
    </view>
  </view>

• 第二步 在js 文件中这两个方法

Page({
  data:{
    name:"这里会显示你输入的名字",
    input_text:'' // 存放用户输入的值
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },

  // 用户通过键盘输入值时，就会触发这个函数
  inputNamefunction(input){
    var that = this;
    console.log(input);
    // 缓存用户输入的值,注意这里一次只能修改一个值
    that.setData({
     input_text:input.detail.value
    });
  }
   // 当用户点击提交按钮 会 触发这个函数
   bindButtonTap:function(){
   var that = this;
   // 我们将输入框的值 直接赋值给name 因为name 和text 标签进行了绑定所以直接会显示出来 不需要刷新
   that.setData({
     name:that.data.input_text
   })
  },
  })