小程序开发总结二 监听input数据 跳转 组件

js文件

以下是小程序自动生成的结构  data里面用于存放数据变量  和一些生命周期函数

Page({
  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})
},

实现同步监听input 用户输入的数据

给元素上绑定bindinput事件  用this.setData修改绑定的数据

<view class="section">
  <view class="section__title">你输入的是：{{inputValue}}</view>
  <input  bindinput="bindKeyInput" placeholder="输入同步到view中"/>
</view>

 bindKeyInput: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
  },

实现页面跳转  

给元素绑定bindtap点击事件

 <text class='meet' bindtap='goarc'>遇见</text>

js文件内  跳转方法有很多种  我例子是navigateTo这种 

goarc: function (event) {
    wx.navigateTo({
      url: '../archives/archives',
    })
  },

组件化

将下图  图片和按钮 抽为组件

 test1tem2 为上面第一个soulmate模块  

test1tem为下面“遇见”button

<view class="index-header">
<!-- 两个组件 -->
   <template is="test1tem2">
 </template>
 <template is="test1tem">
 </template>
 
</view>

在父文件夹内新建wxml文件 用于存放子组件 

结构  用name区分组件

<template name="test1tem">
   <text class='meet' bindtap='goarc'>遇见</text>
</template>
<template name="test1tem2">
   <image src='soulmate.png' class='logos'></image>
</template>