微信小程序基础

0-demo

demo.wxml

<!--pages/demo/demo.wxml-->
<text>{{10+20}}</text>
<view>{{10>20 ? 'aaaa':'bbbb'}}</view>

<view>{{myName}}</view>

<view id="my-{{ids[0]}}">aaaaaa</view>
<view id="my-{{ids[1]}}">bbbbbb</view>
<view id="my-{{ids[2]}}">cccccc</view>

<view wx:for="{{list}}" wx:key="index">
{{item}}-----{{index}}
</view>

<view wx:for="{{list}}" wx:for-item="myItem" wx:for-index="myIndex" wx:key="myIndex">
{{myItem}}-----{{myIndex}}
</view>

<view wx:if="{{isCreated}}">我是动态创建和删除1111111</view>
<view wx:else>我是动态创建和删除22222222</view>

<view hidden="{{isHidden}}">我是动态隐藏和显示</view>

<button type="primary" bindtap="handleTap">click1</button>
<button type="primary" catchtap="handleTap">click2</button>

demo.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    myName:"张三",
    ids:["AAA","BBB","CCC"],
    list:["唱","跳","Rap","打篮球"],
    isCreated:false,
    isHidden:false    
  },

  handleTap(){
    this.setData({
      myName:"李四",
      isCreated:!this.data.isCreated,
      isHidden:!this.data.isHidden
    })
  }
  ......其他  
})

1-todolist

todolist.wxml

<view class="box">
  <input type="text" bindinput="handleInput" value="{{mytext}}"/>
  <button size="mini" bindtap="handleAdd">添加</button>
</view>

<view wx:if="{{datalist.length>0}}">
  <view wx:for="{{datalist}}" wx:key="index" class="list">
    <text>{{item}}</text>
    <button size="mini" bindtap="handleDelete" data-myid="{{index}}">删除</button>
  </view>
</view>

<view wx:else>暂无待办事项</view>

todolist.wxss

input{
  border: 1px solid black;
  height: 50px;
  line-height: 50px;
  border-radius: 10px;
}

.box{
  display: flex;
  flex-direction: row;
}

.list{
  display: flex;
  flex-direction: row;
  justify-items: between;
}

.list text{
  width: 200px;
}

todolist.js

// pages/1-todolist/1-todolist.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    mytext:"",
    datalist:["111","222","333"]
  },

  handleInput(event){
    // console.log(event.detail.value)
    this.setData({
      mytext:event.detail.value
    })
  },

  handleAdd(){
    this.setData({
      datalist:[...this.data.datalist,this.data.mytext],
      mytext:""
    })
  },

  handleDelete(event){
    // console.log(event.target.dataset.myid)
    // console.log(this.data.datalist.splice(event.target.dataset.myid,1))
    this.data.datalist.splice(event.target.dataset.myid,1)
    this.setData({
      datalist:this.data.datalist
    })
  }

})

2-highlight

highlight.wxml

<view class="box">
  <view wx:for="{{datalist}}" wx:key="index" 
        bindtap="handleTap" data-myid="{{index}}" 
        class="item {{current === index?'active':''}}"
  > 
    <text>{{item}}</text>
  </view>
</view>

highlight.wxss

.box{
  display: flex;
  flex-direction: row;
}

.box .item{
  flex:1;
  text-align: center;
}

.active{
  color:red;
}

highlight.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    datalist:["衣服","裤子","电子"],
    current:0
  },

  handleTap(event){
    // console.log(event.target.dataset.myid)
      this.setData({
        current:event.currentTarget.dataset.myid
      })
  }
})

3-rpx

rpx.wxml

<view class="box"></view>

rpx.wxss

.box{
  width: 750rpx;
  height: 400rpx;
  background-color: yellow;
}

4-wxs

wxs.wxml

<wxs src="./date.wxs" module="handleDate"/>
<wxs src="./goodFilter.wxs" module="goodFilter"/>
<text>{{handleDate(startTime)}}</text>
 
<view>
  <input bindinput="handleInput"/>
  {{mytext}}
  <view wx:for="{{goodFilter(goodsList,mytext)}}" wx:key="index">
    {{item}}
  </view>
</view>

wxs.wxss

input {
  border:2px solid black;
}

date.wxs

function handleDate(time){
  var odate = getDate(time)
  // console.log(odate)
  return odate.getFullYear() + "-" + (odate.getMonth()+1) + "-" + odate.getDate()
}

module.exports = handleDate

goodFilter.wxs

function goodFilter(goodsList,mytext){
  return goodsList.filter(function(good) {
    return good.indexOf(mytext)>-1
  })
}

module.exports = goodFilter

wxs.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    mytext:"",
    startTime: 1624676059976,
    goodsList:["aaa","abc","ddd","acc","bcc","abd","bcd","acd"]
  },

  handleInput(event){
    this.setData({
      mytext:event.detail.value
    })
  }
})

5-request

request.wxml

<button type="primary" bindtap="handleAjax">ajax</button>

<view wx:for="{{datalist}}" wx:key="index" class="item">
  <image src="{{item.img}}" mode="widthFix"/>
  <view>{{item.nm}}</view>
</view>

request.wxss

.item{
  overflow: hidden;
  padding:10rpx;
}
.item image{
  width: 200rpx;
  float: left;
}

request.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    datalist:[]
  },

  handleAjax(){
    wx.request({
      url:'https://i.maoyan.com/api/mmdb/movie/v3/list/hot.json?ct=%E7%99%BD%E9%93%B6&ci=363&channelId=4',
      method:"get",
      data:{
        
      },
      success:(res)=>{
        // console.log(res.data.data.hot)
        this.setData({
          datalist:res.data.data.hot
        })
      },
      fail:()=>{

      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.handleAjax()
  }
})

6-image

image.wxml

<image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" mode="widthFix"></image>

image.wxss

image{
  width: 300px;
  height: 200px;
}

7-swiper

swiper.wxml

<!--pages/7-swiper/7-swiper.wxml-->
<button bindtap="handleAjax" type="primary">ajax-swiper</button>

<swiper indicator-dots="{{true}}" circular="{{true}}" autoplay="{{true}}" interval="{{3000}}">
  <swiper-item wx:for="{{datalist}}" wx:key="index">
    <image src="{{item.image_url}}" mode="widthFix" style="width: 100%;"/>
  </swiper-item>
</swiper>

swiper.wxss

swiper{
  height: 314rpx;
}

swiper.js

// pages/7-swiper/7-swiper.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    datalist:[]
  },

  handleAjax(){
    wx.request({
      url: 'https://api.juooo.com/home/index/getClassifyHome?city_id=0&abbreviation=&version=6.1.40&referer=2',
      success:(res)=>{
        //  console.log(res.data.data.slide_list) 
         this.setData({
          datalist:res.data.data.slide_list
         })
      }
    })
  }
})

8-scrollview

scrollview.wxml

<!--pages/8-scrollview/8-scrollview.wxml-->
<!-- <view style="height: 200px;background-color: yellow;">
  轮播
</view> -->
<view>水平方向</view>
<scroll-view class="box_horizontal" scroll-x="{{true}}" enable-flex="{{true}}"
bindscrolltolower="handleRight">
  <view class="item_horizontal">aaaaaa</view>
  <view class="item_horizontal">bbbbbb</view>
  <view class="item_horizontal">cccccc</view>
  <view class="item_horizontal">dddddd</view>
</scroll-view>

<view>垂直方向</view>
<scroll-view class="box" scroll-y="{{true}}"  
bindscrolltolower="handlescrolltolower" refresher-enabled="{{true}}" 
bindrefresherrefresh="handleRefresh" refresher-triggered="{{isRefresh}}">
  <view>111111111111111</view>
  <view>222222222222222</view>
  <view>333333333333333</view>
</scroll-view>

scrollview.wxss

/* pages/8-scrollview/8-scrollview.wxss */
.box{
  height: 300px;
}

.item{
  height: 300px;
}

.box_horizontal{
  height: 300px;
  display: flex;
  flex-direction: row;
  width: 100vw;
}

.item_horizontal{
  width: 200px;
  flex-shrink: 0;
}

scrollview.js

// pages/8-scrollview/8-scrollview.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isRefresh:true
  },

  handlescrolltolower(){
    console.log("到底了")
  },

  handleRefresh(){
    console.log("下拉了")
    setTimeout(()=>{
      this.setData({
        isRefresh:false
      })
    },2000)
  },

  handleRight(){
    console.log("到右边了")
  }
})

9-othercomponent

othercomponent.wxml

<!--pages/9-othercomponent/9-othercomponent.wxml-->
<wxs src="./sum.wxs" module="sum"/>
<icon class="icon-box-img" type="warn" size="93"></icon>

<view wx:for="{{checkList}}" wx:key="index" style="display: flex;justify-content: space-around;padding: 10px;">
  <checkbox checked="{{item.isChecked}}" bindtap="handeTap" data-index="{{index}}"/>
  <view>
    <view>{{item.name}}</view>
    <view>价格:￥{{item.price}}</view>
  </view>
  <view>{{item.number}}</view>  
</view>

<view>
  金额计算：{{sum(checkList)}}
</view>

sum.wxs

function sum(checkList) {
  var total = 0
  for (var index = 0; index < checkList.length; index++) {
    if(checkList[index].isChecked){
      total += checkList[index].number * checkList[index].price
    }
  }
  return total
}

module.exports = sum

othercomponent.js

// pages/9-othercomponent/9-othercomponent.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    checkList:[
      {
        id:1,
        name:"aaa",
        price:100,
        number:1,
        isChecked:false
      },
      {
        id:2,
        name:"bbb",
        price:200,
        number:2,
        isChecked:false
      },
      {
        id:3,
        name:"ccc",
        price:300,
        number:3,
        isChecked:false
      }
    ]
  },

  handeTap(event){
    var index = event.target.dataset.index
    // console.log(index)
    this.data.checkList[index].isChecked = !this.data.checkList[index].isChecked
    // console.log(this.data.checkList)
    this.setData({
      checkList:[...this.data.checkList]
    })
  }
})

10-selfComponent

selfComponent.wxml

<!--pages/10-selfComponent/10-selfComponent.wxml-->
<view>自定义组件</view>
<navbar></navbar>

<!-- 父传子 -->
<!-- <navbar list="{{['aaa','bbb']}}"></navbar> -->  

navbar.wxml

<!--components/navbar/navbar.wxml-->
<view class="box">
  <view wx:for="{{list}}" wx:key="index" class="item {{current===index?'active':''}}"
  bindtap="handleClick" data-index="{{index}}">
    {{item}}
  </view>
</view>

navbar.wxss

/* components/navbar/navbar.wxss */
.box{
  display: flex;
  flex-direction: row;
}

.item{
  flex:1;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.active{
  color:red;
}

navbar.js

// components/navbar/navbar.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    list:{
      type:Array,
      value:["正在热映","即将上映"],
    },
    current:{
      type:Number,
      value:0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    // datalist:["正在热映","即将上映"],
    // current:0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleClick(event){
      // this.setData({
      //   current:event.target.dataset.index
      // })
      this.triggerEvent("ParentEvent",event.target.dataset.index)
    }
  }
})

11-slot

slot.wxml

<!--pages/11-slot/11-slot.wxml-->
<top-header>
  <button slot="left" bindtap="handleTap">返回</button>
  <button slot="right">首页</button>
</top-header>

<footer wx:if="{{isShow}}"></footer>

slot.js

// pages/11-slot/11-slot.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isShow:false
  },

  handleTap(event){
    // console.log(event)
    this.setData({
      isShow:!this.data.isShow
    })
  }
})

slot.json

{
  "usingComponents": {
    "top-header":"../../components/topheader/TopHeader",
    "footer":"../../components/footer/Footer"
  }
}

TopHeader.wxml

<!--components/topheader/TopHeader.wxml-->
<view class="box">
  <slot name="left"></slot>
  <text>topheader</text>
  <slot name="right"></slot>
</view>

TopHeader.wxss

/* components/topheader/TopHeader.wxss */
.box{
  display: flex;
  flex-direction: row;
}

TopHeader.js

// components/topheader/TopHeader.js
Component({
  // 支持多个插槽
  options:{
    multipleSlots:true
  },

  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

Footer.wxml

<!--components/footer/Footer.wxml-->
<view class="box"></view>

Footer.wxss

/* components/footer/Footer.wxss */
.box{
  width: 100%;
  height: 200px;
  position: fixed;
  bottom: 0;
  left:0;
  background-color: red;
}

12-lifecycle

lifecycle.wxml

<!--pages/12-lifecycle/12-lifecycle.wxml-->
<view>抢购倒计时</view>
<count wx:if="{{isCreated}}" bindevent="handleEvent"></count>

lifecycle.json

{
  "usingComponents": {
    "count":"../../components/count/Count"
  }
}

lifecycle.js

// pages/12-lifecycle/12-lifecycle.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isCreated:true
  },

  handleEvent(){
    this.setData({
      isCreated:false
    })
  }
})

Count.wxml

<!--components/count/Count.wxml-->
{{count}}

Count.js

// components/count/Count.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  lifetimes:{
    attached:function () {
      this.intervalId = setInterval(()=>{
        if(this.data.count==0){
          this.triggerEvent("event")
          return
        }
        this.setData({
          count:this.data.count-1
        })
      },1000)
    },
    detached:function () {
      clearInterval(this.intervalId)
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    count:10
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})