微信小程序开发概念与总结02

单项数据流

        setData
逻辑JS----------》界面WXML
     《---------------
        事件方式

index.js

//获取应用实例
const app = getApp()

Page({
  data: {
	message: 'initial'
  },
  inputHandler: function(e){
	// console.log('input click...');
	// console.dir(e);
	// console.dir(e.detail);
	// console.dir(e.detail.value);
	//this.data.message = e.detail.value;
	// 发现数据改变了，但是刷新不到页面上
	//console.log(this.data.message);
	// setData用来改变data数据的，与直接赋值的区别是可以刷新到页面
	this.setData({
	  message: e.detail.value
	})
  }
})

index.html

<view class="container">
  <input value="{{ message }}" bindinput="inputHandler" />
  <text>{{ message }}</text>
</view>

登录案例代码

index.html

<!-- 登录案例演示 -->
<!-- 
<view class="container">
  <view>
	<input placeholder="请输入用户名" value="{{ username }}" 
	  bindinput="inputChange" data-prop="username" />
	<input placeholder="请输入密码" value="{{ password }}" 
	  bindinput="inputChange" data-prop="password" />
  </view>
  <view>
	<button type="primary" bindtap="loginHandler">登录</button>
	<button type="default" bindtap="">注册</button>
  </view>
</view> 
-->

<!-- 表单方式实现提交 -->
<view class="container">
  <form bindsubmit="loginHandler">
	<view>
	  <input placeholder="请输入用户名" value="{{ username }}" 
		data-prop="username" name="username" />
	  <input placeholder="请输入密码" value="{{ password }}" 
		data-prop="password" name="password" />
	</view>
	<view>
	  <button type="primary" form-type="submit">登录</button>
	  <button type="default">注册</button>
	</view>
  </form>
</view>

index.js

//获取应用实例
const app = getApp()

// 1.设计数据结构
// 2.登录按钮的点击的事件
// Page({
//   data: {
//     username: 'admin',
//     password: '123456'
//   },
//   // 用于处理登录的点击事件
//   loginHandler: function(){
//     // console.log('login');
//     // TODO:完成了登录功能逻辑实现
//     // 1.需要知道用户输入了什么  √
//     // 2.根据用户的输入进行匹配
//     // 3.根据判断结果做出响应
//   },
//   inputUsernameChange: function(e){
//     //实时获取页面的用户输入
//     this.setData({
//       username: e.detail.value,
//     });
//   },
//   inputPasswordChange: function(){
//     //实时获取页面的用户输入
//     this.setData({
//       password: e.detail.value
//     });
//   }
// })

// version 2
// Page({
//   data: {
//     username: 'admin',
//     password: '123456'
//   },
//   // 用于处理登录的点击事件
//   loginHandler: function () {
	
//   },
//   // 将上面的代码进行优化
//   // 抽象成一个处理函数
//   inputChange: function(){
//     // var prop = "username"; //可以变的
//     var prop = e.target.dataset["prop"];
//     var changed = {};
//     changed[prop] = e.detail.value;
//     this.setData(changed);
//   }
// })

// version 3
// 表单方式实现提交
Page({
  data: {
	username: 'admin',
	password: '123456'
  },
  // 用于处理登录的点击事件
  loginHandler: function (e) {
	//这里可以获取到对应的表单里面提交的数据
	console.log(e);
  }
})

条件渲染

wx:if
wx:elif
block wx:if    用来控制多个属性或者标签，渲染过程中没有实际意义
hidden和wx:if 区别，看下面的代码

index.html

<!--index.wxml-->
<view class="container">
  <view>
	<view bindtap="toggle">
	  <text>切换页面展示</text>
	</view>
	<!-- 这里是wx:if的基本使用 -->
	<!-- <view class="content" wx:if="{{ show }}">
	  <text>
		这里是内容。。。
		这里是内容。。。
		这里是内容。。。
	  </text>
	</view> -->
	<!-- 通过block wx:if实现多个的控制 -->
	<!-- <block wx:if="{{ show }}">
	  <text>
		这里是内容。。。
		这里是内容。。。
		这里是内容。。。
	  </text>
	  <text>
		这里是内容。。。
		这里是内容。。。
		这里是内容。。。
	  </text>
	</block> -->
	<!-- hidden来控制 -->
	<!-- 区别是重新编译后，发现hidden存在于页面，通过display、进行控制的 -->
	<!-- wx:if当条件为假，标签不被渲染 -->
	<view class="content" hidden="{{ !show }}">
	  <text>
		这里是内容。。。
		这里是内容。。。
		这里是内容。。。
	  </text>
	</view>
  </view>
</view>

index.js

const app = getApp()

Page({
  data:{
	show: false
  },
  toggle: function(){
	this.setData({
	  show: !this.data.show
	});
  }
})

wxss和css之间的区别:
    尺寸单位
        css： px
        wxss：rpx(整个宽度750rpx) rem(20rem总宽度) 
            750rpx 响应式像素的设计
            在不同的设备之间完成适配
            高度一般允许有滚动条
    样式导入
        执行的时候，样式合并了

以上是此次代码和相关知识点的总结。