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>