小程序JS的运用

js的运用

在js中的page.data中写入样式。在wxml中使用view{{}}view使用
调用js时必须使用{{}}包裹起来，不用加''

Page({
  data: {
    Name:'风耳',
    age:'18'
  }

//js中对象的使用
<view>{{age}}</view>
<view>{{Name}}</view>

点击事件

点击按钮，将对象中的某一项进行改变（在此为改变名字）
点击事件使用bindtap
在页面中进行展示使用this.setData

Page({
  data: {
    Name:'风耳',
    age:'18'
  },
  change(){      //在点击事件中自带一个事件event，可直接调用event。enent在change(){}中的()里
   this.setData({
    Name:'张三'
   })
  }
})

<button bindtap="change">按钮</button>

条件渲染

单击按钮进行隐藏（if事件）if事件就是当结果为true时显示一种结果，当结果为else时显示另一种结果。及只会在两者中显示一种，隐藏一种。if事件的使用在内容里输入wx:
<view wx:if="{{sigout}}">
<text>12344</text>
<text bindtap="back">退出登录</text>
</view>

<view wx:else>    //wx:else为否则，及if的另一种结果
<input type="text" placeholder="请输入手机号码"/>
<button bindtap="login">登录</button>
</view>

此为内容

Page({
  data: {
    sigout:false
  },
  login(){
    this.setData({
      sigout:true
    })
  },
  back(){
    this.setData({
      sigout:false
    })
  }
  }
)

此为js

点击隐藏和再次点击显示

<button bindtap="none">点击按钮</button>
<view wx:if="{{list}}" class="flex fdc">
<text>调试调试调试</text>
<text>调试调试调试</text>
<text>调试调试调试</text>
<text>调试调试调试</text>
<text>调试调试调试</text>
<text>调试调试调试</text>
<text>调试调试调试</text>
<text>调试调试调试</text>
</view>

Page({
  data: {
    list:true
  },
  none(){
    this.setData({
        list: !this.data.list    //!表示与原来相反（this.data.list第一次的状态为ture，点击一次之后状态为false，再点击又变成了true）
      })
    }
  }
)

列表条件渲染

在js中输入了一定循环次数，当调用时即可将内容进行循环展示

<text class="flex fdc" wx:for="{{list1}}">1111</text>
//对1111进行循环4次

Page({
  data: {
    list1:['aa','bb','cc','dd']
  }
  }
)

当data里数组中为对象时

<view wx:for="{{list1}}">
<text>{{item .name}}</text>---
<text>{{item.age}}</text>
</view>

Page({
  data: {
    list1:[
      {
      name:'风耳',
        age:18
    },
    {
      name:'张三',
        age:18
    }
  ]
    }
  }
)

获取后台数据

在js中 onLoad中进行。onLoad是在加载该页面时自动进行更新

Page({
  data: {
    list:[]
   },
  //  当页面刷新时自动执行onLoad
   onLoad(){     
    // 发送请求得到后台数据,在这最好是对下面的内容进行一个命名，以方便之后的调用。及将wx.request到结束的代码使用一个数组进行包裹，之后在再onLoad中进行调用
    wx.request({
      // 数据地址
      url:'http://81.71.65.4:3006/destination/list',
      // 获取工具（必须使用箭头函数）
      success:(rel)=> {
        // 在控制台展示数据
        console.log(rel.data.result)
        // 在页面中显示
        this.setData({
          list:(rel.data.result)
        })
      }
    })
    }
   }
)

之后在wxml中进行运用

<text>目的地推荐</text>
  <navigator url="/pages/shouye/mudidi/mudidi" hover-class="navigator-hover">
<view wx:for="{{list}}">
  <image class="rul" src="{{item.imageUrl}}"></image>
<view class="flex fdc jc-c ml-15 f12">
  <text class="word">{{item.name}}</text>
<text class="mt-5">{{item.desc}}</text>
<text class="bor mt-5">{{item.address}}</text>
</view>
</view>
</navigator>
例二：将请求后台数据使用一个对象进行包裹
Page({
  data: {
    list:[]
    },
    onLoad(){
      this._list();
    },
    _list(){
      wx.request({
        url:'http://81.71.65.4:3006/discover/list?kind=01&currPage=1&pageSize=7',
        success:(res)=>{
          console.log(res.data.result);
          this.setData({
            list:res.data.result
          })
        }
      })
    }
    }
)

三目运算符

及可以将if事件进行简写，可在小程序中直接调用

<body>
    <script>
        var isLogin = false;
        var _bb = true
        var aa = ''
        if(isLogin){
            aa = '已经出现'
        }else{
            aa = '未出现'
        }
        console.log(aa)

        var aa2 = _bb?'已经出现':'未出现'  //aa2 = 表明声明一个名称等于aa2的容器判断条件为_bb，?'已经出现'表明当条件符合时会是已经出现，:'未出现'表明当条件不符合时出现未出现
        console.log(aa2)
    </script>
</body>

自定义属性(可用来做点击哪里哪里高亮)

自定义属性中所用数值必须时两位数
因为小程序点击事件没储蓄栏及html里onclick="but()"的()。所有需要运用到自定义属性来进行。

  1. 首先确定点击事件及bindtap=""
  2. 对需要的标签进行自定义属性
  3. 在js中找到自定义属性里需要的属性进行提取
  4. 将提取出来的属性用来帮助判断是否符合条件，及class=（此时就用到了三目运算符）
    5.将判断结果进行展示
<view class="flex jc-sa">
<text data-num="01" bindtap="aa" class="{{num==1?'active':'aa'}}">第一个</text>
<text data-num=02" bindtap="aa" class="{{num==2?'active':'aa'}}">第二个</text>
<text data-num="03" bindtap="aa" class="{{num==3?'active':'aa'}}">第三个</text>
</view>

aa(event){
      console.log(event)

aa(event){
      console.log(event.target.dataset.num)

Page({
  data: {
    num:1,
    },
    aa(event){
      // console.log(event.target.dataset.num)
      var newNum = event.target.dataset.num;
      this.setData({
        num : newNum
      })
    }
    
   }
)

当调取的数据需要根据不同的选项进行调取时（及数据根据高亮部分进行变换）

// pages/faxian/faxian.js
Page({
  data: {
    kind:1,
    list:[]
  },
  di(event){
    console.log(event.target.dataset.kind)
    // var newKind = event.target.dataset.num;
    this.setData({
      kind:event.target.dataset.kind
    })
    this.getList();   //想要调取到对应的数据，必须在高亮部分也进行展示

  },
  onLoad(){
    this.getList();
  },
  getList(){
    wx.request({
      url:'http://81.71.65.4:3006/discover/list?kind='+this.data.kind,  //?kind后面为后台数据的定义，将之删除，在单引号后面添加连接符+，再加上this.data.kind(及就是根据kind值进行调换)
      success:(res)=>{
        console.log(res.data);
        this.setData({
          list:res.data.result
        })
      }
    })
  }
})

<!--pages/faxian/faxian.wxml-->
<view class="hearder flex jc-sa tac">
<text data-kind="01" bindtap="di" class="{{kind==01?'aaa':'bbb'}}">路线</text>
<text data-kind="02" bindtap="di" class="{{kind==02?'aaa':'bbb'}}">美食</text>
<text data-kind="03" bindtap="di" class="{{kind==03?'aaa':'bbb'}}">活动</text>
</view>
<!-- 列表 -->
<view wx:for="{{list}}" class="box flex mt-5 f12 jc-sa aic" >
<image class="rul" mode="scaleToFill" src="{{item.imageUrl}}"></image>
  <text class="word fg1 ml-10">{{item.title}}</text>
</view>
<view class="aa">没有更多了</view>

登录练习（能够从后端调取数据）

<view class="box w100p flex aic bg-fff"> 
<text class="ml-20">手机号码：</text>
<input bindinput="getNum" type="text" maxlength="{{11}}"  //duplaceholder="请输入手机号码"  value="{{phone}}"/>
  //  对输入框进行一个点击事件，使用bandinput，当输入框中输入数据时即可运行
</view>

  data: {
    phone:'',
    
  },
  // 第一步，获取输入框中的手机号码。
  getNum(enevt){
    console.log(enevt.detail.value)
    this.setData({
      phone:enevt.detail.value
    })
  },

<view class="box1 w100p flex aic jc-sb bg-fff">
<text class="ml-20">验证码：</text>
<input  type="text" placeholder="请输入验证码" value="{{smsCode}}"/>
<button class="mr-20 flex aic jc-c" bindtap="getNum1" size="mini">获取验证码</button>
</view>

getNum1(enevt){
console.log(enevt)
wx.request({
  url:'http://81.71.65.4:3006/user/getSmsCode',
  data:{
    phone:this.data.phone
  },  //此为请求后端数据时的附加条件，及我要拿去关于这个手机号码的数据
  success:(res)=>{
    console.log(res.data.result.smsCode)
    this.setData({
      smsCode:res.data.result.smsCode
    })
  }
})
  },

同理，当点击登录时要同时运用到手机号码和验证码

<view class="box1 w100p flex aic jc-sa bg-fff">
<button class="ml-20 flex aic jc-c" size="mini">注册</button>
<button class="mr-20 flex aic jc-c" size="mini" bindtap="sigin">登录</button>
</view>

sigin(enevt){
    wx.request({
      url:'http://81.71.65.4:3006/user/loginBySmsCode',
      data:{
        phone:this.data.phone,
        smsCode:this.data.smsCode
      },
      success:(res)=>{
        console.log(res.data)
        wx.switchTab({
          url: '/pages/me/me',  //wx.switchTab({})即跳转到tab栏里面的页面
        })
      }
    })
  },

数据的储存和调用

  1. 先对需要的数据进行储存(在例子中是对成功运行的数据进行储存，因此在success中进行储存{要存储数据必须获取到数据}
  sigin(enevt){
    wx.request({
      url:'http://81.71.65.4:3006/user/loginBySmsCode',
      data:{
        phone:this.data.phone,
        smsCode:this.data.smsCode
      },
      success:(res)=>{
        wx.setStorageSync('phone',this.data.phone)   //此为存储数据
        console.log(res.data)
        wx.switchTab({
          url: '/pages/me/me',
        })
      }
    })
  },
  1. 调用数据.在js中调用数据，并将调用出来的数据在html中展示
  <view class="hearder">
<image class="rel rel" src="../../icon/me-img/avtBg.jpg"></image>
<image class="rel-header abs" src="../../icon/me-img/下载.png"></image>
<view class="flex ">
<text class="sign fff abs">{{phone}}</text>  //在此展示调用出来的数据
<navigator wx:else class="sign fff abs" url="/pages/me/sigin/sigin" hover-class="navightor-hover">立即登录</navigator>
</view>
</view>

onShow(options) {
    var phone = wx.getStorageSync('phone')   //在此进行数据调取
    this.setData({
      phone:phone
    })
  },
  1. 在html中进行if判断，让其只展示一个
  2. 点击退出登录时，让其存储的数据清空。在这是页面刷新onLoad应该使用onShow。
  3. onLoad为进入页面时刷新一次，之后不再进行刷新，第一次刷新为什么样子就是什么样子。onShow为当页面进行展示时就进行刷新。
  4. 完整的代码
  • .点击登录存储数据并进行跳转
// 点击登录进行页面的跳转
  sigin(enevt){
    wx.request({
      url:'http://81.71.65.4:3006/user/loginBySmsCode',
      data:{
        phone:this.data.phone,
        smsCode:this.data.smsCode
      },
      success:(res)=>{
        wx.setStorageSync('phone',this.data.phone)
        console.log(res.data)
        wx.switchTab({
          url: '/pages/me/me',
        })
      }
    })
  },
  • 调取数据和点击退出时清除数据
Page({

/**
 * 页面的初始数据
 */
data: {
  phone:''
},

/**
 * 生命周期函数--监听页面加载
 */
onShow(options) {
  var phone = wx.getStorageSync('phone')
  this.setData({
    phone:phone
  })
},
logout(){
  wx.removeStorageSync('phone');
  this.setData({
    phone:''
  })
},
})

*我的页面展示html

<!--pages/me/me.wxml-->
<!-- 头部 -->
  <view class="hearder">
<image class="rel rel" src="../../icon/me-img/avtBg.jpg"></image>
<image class="rel-header abs" src="../../icon/me-img/下载.png"></image>
<view class="flex ">
<text wx:if="{{phone}}" class="sign fff abs">{{phone}}</text>
<navigator wx:else class="sign fff abs" url="/pages/me/sigin/sigin" hover-class="navightor-hover">立即登录</navigator>
</view>
</view>
<!-- 列表 -->
<view class="list flex fdc mt-10">
<navigator url="/pages/shouye/liebiao/liebiao" hover-class="navightor-hover">
  <view class="item flex jc-sb aic">
  <text>我的订单</text>
  <text class="iconfont icon-yuanquanyoujiantou"></text>
  </view></navigator>
  
  <view class="item flex jc-sb aic">
  <text>我的共享卡</text>
  <text class="iconfont icon-yuanquanyoujiantou"></text>
  </view>
  <view class="item flex jc-sb aic">
  <text>我的优惠券</text>
  <text class="iconfont icon-yuanquanyoujiantou"></text>
  </view>
  <navigator url="/pages/me/shoucang/shoucang" hover-class="navigator-hover">
    <view class="item flex jc-sb aic">
  <text>我想去</text>
  <text class="iconfont icon-yuanquanyoujiantou"></text>
  </view>
  </navigator>
  <navigator url="/pages/me/zuji/zuji" hover-class="navigator-hover">
    <view class="item flex jc-sb aic">
  <text>我的足迹</text>
  <text class="iconfont icon-yuanquanyoujiantou"></text>
  </view></navigator>
  <view bindtap="logout" class="item flex jc-sb aic">
  <text>退出登录</text>
  <text class="iconfont icon-yuanquanyoujiantou"></text>
  </view>
</view>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容