微信小程序语法与Vue对比学习(第二课)（一）-阿里云开发者社区

微信小程序语法与Vue对比学习(第二课)（一）

2023-07-16 109

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 微信小程序语法与Vue对比学习(第二课)（一）

第一部分解析day01文件中的代码

day01.ts文件中有默认的函数

// pages/day01/day01.ts
Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  }
})

day01.wxss

/* pages/day01/day01.wxss */
.big view{
  width: 100px;
  height: 100px;
  line-height: 100px;
  /* background-color: seashell; */
  text-align: center;
}
.big view:nth-child(1){
  background-color: seashell;
}
.big view:nth-child(2){
  background-color: rgb(238, 123, 41);
}
.big view:nth-child(3){
  background-color: rgb(31, 199, 53);
}
.big{
 border: 1px solid red;
 width: 100px;
 height: 120px;
  /* display: flex;
  justify-content:space-around ; */
}
.swiper-contanier{
  height: 150px;
  /* border: 1px solid red; */
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) .item{
  background-color: rgb(157, 255, 0);
}
swiper-item:nth-child(2) .item{
  background-color: rgb(227, 253, 231);
}
swiper-item:nth-child(3) .item{
  background-color: rgb(140, 192, 212);
}
swiper-item:nth-child(4) .item{
  background-color: rgb(247, 143, 221);
}
swiper-item:nth-child(5) .item{
  background-color: rgb(247, 255, 177);
}
swiper-item:nth-child(6) .item{
  background-color: rgb(218, 255, 150);
}
swiper-item:nth-child(7) .item{
  background-color: rgb(85, 196, 224);
}

下面是底部的导航栏效果

1 数据绑定

在vue中实现数据绑定

在微信小程序中是下面这样的写法

在微信小程序中 Mustache 语法的应用场景

Mustache 语法的主要应用场景如下：
绑定内容
绑定属性
运算（三元运算、算术运算等）

2 在微信小程序中绑定的事件

在事件处理函数中，通过 event.target.dataset.参数名即可获取到具体参数的值，示例代码如上：

3 条件渲染

在Vue中

在微信小程序中

data2.ts文件

// page/day02/day02.ts
Page({
  /**
   * 页面的初始数据
   */
  data: {
    info: "Hellow word 欢迎来到微信小程序的页面信息 我是小程序的写福特",
    randomNum: Math.random() * 100,
    randomNum1: Math.random().toFixed(2),
    count:0,
    // 定义数据的消息
    msg:"你好",
    type:1,
    flag:false,
    arr:['张三','李四','王五','赵六','和气'],
    arr1:['张三A','李四S','王五D','赵六F','和气G'],
    arr2:['张三A','李四S','王五D','赵六F','和气G'],
    // 数组中套用对象
    userlist:[
      {id:10011,name:"张三丰"},
      {id:10012,name:"王晓红"},
      {id:10013,name:"赵本山"},
      {id:10014,name:"早利用"},
      {id:10015,name:"UI"},
      {id:10016,name:"helloq"},
    ]
  },
  // 发送请求的方式Get请求
  getInfo(){
    wx.request({
      url:"https://www.escook.cn/api/get",
      method:"GET",
      data:{
        name:"李四",
        age:67
      },
      success:(res)=>{
        console.log(res.data)
      }
    })
  },
  // 发送请求的方式为POST请求方式
  Infopost(){
    wx.request({
      url:"https://www.escook.cn/api/post",
      method:"POST",
      data:{
        name:"张三李四",
        age:23
      },
      success:(res)=>{
        console.log(res.data)
      }
    })
  },
  btn2(e:any){
    console.log(e)
    console.log(e.target.dataset)
  },
  // btninput按钮的基本信息
  btninput(e:any){
    // console.log(e.detail.value)
    this.setData({
      msg:e.detail.value
    })
  },
  // 自动加一的函数
  CountChange(){
    this.setData({
      count:this.data.count+1
    })
  },
  big(e: any) {
    console.log(e)
  },
  /**
   * 生命周期函数--监听页面加载
   * 加载事件
   * 在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的 onLoad 事件
   */
  onLoad() {
    this.getInfo()
    this.Infopost()
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  }
})