12-02-小程序weui

事件

绑定传参冒泡

<view>
 <!-- bind+事件名  -->
 <view bindtap="clickhandler">点击</view>
 <!-- 事件的冒泡-->
 <view style="width:300rpx;height:300rpx;background:red" bindtap="clickhandlerone">
    <view style="width:200rpx;height:200rpx;background:blue" bindtap="clickhandlertwo"></view>
 </view>

 <!-- 阻止事件的冒泡 catch -->
  <view style="width:300rpx;height:300rpx;background:red" bindtap="clickhandlerone">
    <view style="width:200rpx;height:200rpx;background:blue" catchtap="clickhandlertwo"></view>
 </view>

 <!-- 事件传参  -->
 <view bindtap="clickhandlerthree" data-id="15" data-username="zhangsan" >点击333333</view>

</view>

clickhandler:function(){
      console.log("clickhandler")
  },

  clickhandlerone(){
    console.log("clickhandlerone")
  },
  clickhandlertwo(){
    console.log("clickhandlertwo")
  },
  clickhandlerthree(e){
    console.log(e)
    console.log(e.target.dataset)
    console.log("clickhandlerthree")
  }

input

<view>
<input value="{{message}}" class="input"  bindinput="handlerinput" />
{{message}}
<!-- 双向绑定 -->
<input model:value="{{messageone}}"  class="input" />
{{messageone}}
</view>

  data: {
    message:"今天天气不错挺好的",
    num:33,
    messageone:"今天还好马上就要过周末了"
  },
  handlerinput(e){
     console.log(e.detail.value)
     console.log(this.data)
     //this.data.message=e.detail.value //界面模板数据渲染不动
     //使用value双向绑定需要加下面的代码，使用model:value不需要
     this.setData({
       message:e.detail.value
     })
  },

表单

<!-- 第一层 -->
<!-- 
<view class="container">
    <view class="inputs">
        <input  value="{{username}}" bindinput="validateusername"   placeholder="请输入用户名！"    />
    </view>
    <view class="inputs">
        <input  value="{{password}}" bindinput="validatepassword"  placeholder="请输入密码!"    />
    </view>
    
    <view class="buttons">
       <button type="primary"  bindtap="dologin" >登录</button>
       <button type="default" >注册</button>
    </view>
</view>
-->
<!--  第二层  
<view class="container">
    <view class="inputs">
        <input  value="{{username}}" bindinput="validateinput" data-prop="username"  placeholder="请输入用户名！"    />
    </view>
    <view class="inputs">
        <input  value="{{password}}" bindinput="validateinput" data-prop="password"  placeholder="请输入密码!"    />
    </view>
    
    <view class="buttons">
       <button type="primary"  bindtap="dologin" >登录</button>
       <button type="default" >注册</button>
    </view>
</view>
 -->
<view class="container">
   <form catchsubmit="formSubmit" >
    <view class="inputs">
        <input name="username"  value="{{username}}"  placeholder="请输入用户名！"    />
    </view>
    <view class="inputs">
        <input name="password" value="{{password}}"  data-prop="password"  placeholder="请输入密码!"    />
    </view>
    
    <view class="buttons">
       <button type="primary" formType="submit" >登录</button>
       <button type="default" >注册</button>
    </view>
    </form>
</view>

data: {
    username:"",
    password:""
  },

  validateinput(e){
    //e.detail.value
    //e.target.dataset.prop
    console.log(e.detail.value)
    console.log(e.target.dataset.prop)
    var prop = e.target.dataset.prop  //获取传参
    var value= e.detail.value     //获取值
    var changed={}
    changed[prop]=value
    this.setData(changed)
  },
  
  validateusername(e){
    this.setData({
      username:e.detail.value
    })
   
  },

  validatepassword(e){
    this.setData({
      password:e.detail.value
    })
  },

  dologin(){
    console.log(this.data)
     //01 获取用户名和密码
     //02 前端验证
     //03 向接口发送请求
  },

  formSubmit(e){
     console.log(e)
     console.log(e.detail.value)
  }

page{
   width:100%
}
.container{
  display:flex;
  flex-direction: column;
  align-items: center;
}

.inputs{
  margin:50rpx;
}

.inputs input{
  padding:10rpx 15rpx;
  border:1px solid #0e0e0e
}

基础内容

  <!-- 基础内容 图标 -->
  <icon  type="success" size="60" ></icon>
  <icon  type="success_no_circle" ></icon>
  <icon  type="warn" ></icon>
  <!-- 进度条 -->
  <progress percent="20" show-info stroke-width="3"/>
  
  <!-- 这是富文本能够解析html静态 -->
  <rich-text nodes="{{htmlstr}}"></rich-text>
  <text>这是text文本</text>

  data: {
     htmlstr:"<div style='color:red'>文字</div>"
  },

弹窗地图

 <view bindtap="clickhandler" >点击</view> 
 <view bindtap="clickhandlerone">点击2</view>
 <view bindtap="clickhandlertwo">点击3</view>

 <map longitude="113.555313"  latitude="34.829905"></map>

  clickhandler(){
    wx.showActionSheet({
       itemList:["鸣人","佐助","小樱"],
       success:function(res){
         console.log(res)
       }
    })
  },

  clickhandlerone(){
    wx.showModal({
      title: '提示',
      content: '这是一个模态弹窗',
      success (res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  },

  clickhandlertwo(){
    wx.showToast({
      title: '成功',
      icon: 'success',
      duration: 2000
    })
  },

页面跳转

navigator 文件

  <!-- 等价a标签 -->
  <navigator url="../01function/01function">跳转</navigator>
  
  <!-- 跳转的目标页面怎么去接收传参 接收传参的时候一定是在第二个页面onLoad(options)  -->
  <navigator url="../05API/05API?id=11&username=admin">跳转2</navigator>
  
  <!--
    navigatorTo    navigatorBack
   -->
  <view bindtap="clickhandler" >跳转3</view>

  <!--  wx.relauth 相当于清除以往所有的记忆 谨慎的去用 -->
  <view bindtap="clickhandlerone" >跳转4</view>

  <!-- wx.redirect 直接跳转  -->
  <view bindtap="clickhandlertwo" >跳转5</view>

 clickhandler(){
     wx.navigateTo({
       url: './demo/demo',
     })
     
     //reLaunch  重启
     /*
     wx.reLaunch({
       url: 'url',
     })
     */
  },

  clickhandlerone(){
      //清除掉所有的浏览记忆
      wx.reLaunch({
        url: './demo/demo',
      })
  },

  clickhandlertwo(){
      wx.redirectTo({
        url: './demo/demo',
      })
  },

demo文件

  <view bindtap="clickhandler" >返回上一页</view>
  <navigator url="./demoone/demoone">接着跳转</navigator>

  clickhandler(){
    wx.navigateBack({
      delta:1
    })
  },

demoone文件

  <view bindtap="clickhandler" >返回上两页</view>

  clickhandler(){
    wx.navigateBack({
      delta:2
    })
  },