（五）小程序js+前端配合使用

bindtap

给标签添加–>bindtap=‘test’——>js中跳转
但是如果一个view中有多个bindtap会发生事件冒泡
这种情况可以用catchtap=‘test’——>来执行跳转
js中写法：

test:function(e){

}

form标签

 <form bindsubmit="login">
<input bindinput='loginFormData' value="{{userLoginName}}" data-key="userLoginName" type='text' placeholder='请输入账号'></input>
 </form>

bindinput 在输入的时候触发的事件

loginFormData:function(e){
    let ob = this.data.formLoginData;  //获取页面变量formLoginData的值
    ob[e.currentTarget.dataset.key] = e.detail.value; //根据 data-key的键 然后 赋值
    this.setData({  //setData 赋值页面变量
      formLoginData: ob
    })
  },

使用form标签时对应的button标签–>form-type=“submit”

wx:if

在标签内部使用

 <text wx:if="{{hidden}}" style="width:50px" bindtap="sendMsg">发送</text>

如果js中data中的页面变量hidden是true的话就显示false的话就隐藏

wx:for

<view wx:for="{{noPay}}" wx:key="key">
            <text class="m30">共计：￥{{item.actualPrice}}</text>
            <view class="pay_btn" bindtap="payBtn" data-key="{{index}}">立即支付</view>
          </view>
    </view>

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
data-key中写index是为了点击立即支付的时候能够获取到当前索引下标

使用 wx:for-item 可以指定数组当前元素的变量名，
使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{noPay}}" wx:for-index="ids" wx:for-item="itemName">
  {{ids}}: {{itemName.orderNo}}
</view>

两种方式一样

页面跳转

wx.navigateTo()用于保留当前页面，跳转到应用内的某个页面
wx.redirectTo()用于关闭当前页面，跳转到应用内的某个页面
wx.reLaunch() 先关闭内存中所有保留的页面，再跳转到目标页面
wx.switchTab() 对于跳转到 tab bar 的页面
wx.navigateBack() 用于关闭当前页面，并返回上一页面或多级页面

弹出框

弹出提示框，可以选择确定或者取消

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

不带确定和取消 提示成功

wx.showToast({
     title: '成功',
     icon: 'success',
     duration: 2000//持续的时间
   })

提示等待中

wx.showToast({
     title: '等待...',
     icon: 'loading',
     duration: 2000//持续的时间
   })

提示文字，没有任何图标效果

wx.showToast({
     title: '这里面可以写很多的文字，比其他的弹窗都要多！',
     icon: 'none',
     duration: 2000//持续的时间
   })

弹窗提示选择

wx.showActionSheet({
     itemList: ['A', 'B', 'C'],
     success: function (res) {
       if (!res.cancel) {
         console.log(res.tapIndex)//这里是点击了那个按钮的下标
       }
     }
   })

页面提示加载中

<loading hidden="{{hidden}}">
       加载中...
</loading>
hidden有两个值：false和true

picker

 <picker bindchange="bindMethodChange" value="{{methodindex}}" range="{{method}}" range-key="carriersName">
                    <text class="country">{{method[methodindex].carriersName}}</text>
       </picker>

bindchange：value 改变时触发 change 事件，e.detail.value
value：表示选择了 range 中的第几个（下标从 0 开始）
range：属性名 array/object array
range-key：
当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
js：

data: {
methodindex: null,
    method:[
      {
        id:null,
        carriersName:null
      }
    ],
}
bindMethodChange: function (e) {
var that = this   //创建一个副本
var i = e.detail.value  //获取当前索引
that.setData({   //赋值变量索引值
  methodindex:i
})

data中是数组的话函数中赋值方法

data：{
    userData:[ 
        {id:'',name:''}，
     ]
}
test(){
    var id = "userData["+下标(i)+"].id"
    var name = "userData["+下标(i)+"].name "
    this.setData({
       [id]:'1',
       [name]:'2'
})
}

checkbox

<checkbox-group bindchange="BaoXian">
    <checkbox wx:if="{{isBaoXian}}">是否需要保险</checkbox>
  </checkbox-group>
BaoXian: function (e) {
 e.detail.value.length == 1的话就是选中 如果不等于1就是未选中
}

swiper 轮播

<swiper
  indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}"
  interval="{{interval}}"
  duration="{{duration}}"
  interval="{{interval}}"
  circular="{{circular}}"
>
  <block wx:for="{{imgUrls}}" wx:key="key">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150" />
    </swiper-item>
  </block>
</swiper>

js:

 data: {
    imgUrls: [
      'cloud://kytx-6.6b79-kytx-6-1259665066/image/lunbo1.png',
      'cloud://kytx-6.6b79-kytx-6-1259665066/image/lunbo2.png',
      'cloud://kytx-6.6b79-kytx-6-1259665066/image/lunbo3.jpg'
    ],
    indicatorDots: true,//轮播图上的圆点
    autoplay: true,//自动播放
    interval: 3000,   //自动切换时间间隔
    duration: 600,   //滑动动画时长
    circular: true, //是否采用衔接滑动

js中页面加载函数顺序及详解

onLoad 页面加载事件 只会执行一次
onShow 监听页面显示 经常用来做数据更新操作
onReady 监听页面初次渲染完成
onHide 监听页面隐藏
onUnload 监听页面卸载

js A页面跳转到B页面 并在B页面赋A页面的值

在B页面onLoad中获取传过来的参数

onLoad: function (options) {
    var addressId = options.addressId;
    this.setData({
      addressId: addressId  //将参数绑定到本页面变量上
    })
  },

var pages = getCurrentPages();
var currPage = pages[pages.length - 1]; //当前页面
var prevPage = pages[pages.length - 2]; //上一个页面
prevPage.setData({
      这里就可以设置上一页面的变量值
   })
wx.navigateBack({
       delta:1   //回退到上一页面
     })