微信小程序开发第二课

一 尺寸单位 和样式

1.1 rpx

# rpx 可以根据不同的手机屏幕进行自动调整，自适应缩放
	-无论什么手机--》屏幕宽度都是 750rpx
    
# xx.wxml
<view class="box">Justin</view>

# xx.wxss
.box {
  width: 375rpx;
  height: 500rpx;
  background-color: pink;
}

1.2 局部样式app.wxss

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

1.3 全局样式 xxx.wxss

# 局部覆盖全局
.box {
  width: 375rpx;
  height: 600rpx;
  background-color: pink;
}

二 首页案例

# text  view  image  icon

2.1 button 使用

#1  button 
<button type="primary">页面主操作 Normal</button>
<button type="primary" loading="true">页面主操作 Loading</button>
<button type="primary" disabled="true">页面主操作 Disabled</button>

<button type="default">页面次要操作 Normal</button>
<button type="default" disabled="true">页面次要操作 Disabled</button>

<button type="warn">警告类操作 Normal</button>
<button type="warn" disabled="true">警告类操作 Disabled</button>

<button type="primary" plain="true">按钮</button>
<button type="primary" disabled="true" plain="true">不可点击的按钮</button>

<button type="default" plain="true">按钮</button>
<button type="default" disabled="true" plain="true">按钮</button>

<button class="mini-btn" type="primary" size="mini">按钮</button>
<button class="mini-btn" type="default" size="mini">按钮</button>
<button class="mini-btn" type="warn" size="mini">按钮</button>

2.2 swiper+swiper-item 实现轮播图

<swiper 
autoplay 
interval="2000" 
indicator-dots 
indicator-color="#00FF00"
indicator-active-color="#70DB93"
circular
>
  <swiper-item>
    <image src="/images/banner1.jpg" mode="widthFix"/>
  </swiper-item>
  <swiper-item>
    <image src="/images/banner2.png" mode="widthFix"/>
  </swiper-item>
  <swiper-item>
    <image src="/images/banner3.jpg" mode="widthFix"/>
  </swiper-item>
</swiper>

2.3 提示

.tips {
  margin: 30rpx 10rpx 30rpx 10rpx;
	background-color: #f5eedf;
	color: #e9ab4e;
	padding: 18rpx;
  border-radius: 50rpx;
  font-size: 18rpx;
}

<view class="tips"><text class="iconfont icon-tongzhi2">欢迎使用物业平台,消息提示~~</text></view>

2.4 flex布局

.menu{
  display: flex;
  justify-content: space-between;
  padding: 16rpx;
  border-radius: 10rpx;
  flex-wrap:wrap;
  background-color: powderblue;

}
.item{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 150rpx;
  height: 200rpx;
  border: rgb(192, 251, 255) solid 1rpx ;
  margin: 1rpx;
  background-color: powderblue;

}
.title{
  margin-top: 12rpx;
  font-size: 24rpx;
}
.img{
  width: 88rpx;
  height: 88rpx;
  border-radius: 10rpx;
  
}

<view class="menu">
		<view class="item">
			<image src="/images/menu/ht.png" class="img"/>
			<text class="title">物业合同</text>
		</view>
    <view class="item">
			<image src="/images/menu/wyf.png" class="img"/>
			<text class="title">物业费</text>
		</view>
    <view class="item">
			<image src="/images/menu/wygl.png" class="img"/>
			<text class="title">物业管理</text>
		</view>
    <view class="item">
			<image src="/images/menu/wylx.png" class="img"/>
			<text class="title">物业维修</text>
		</view>
    <view class="item">
			<image src="/images/menu/ht.png" class="img"/>
			<text class="title">物业合同</text>
		</view>
    <view class="item">
			<image src="/images/menu/wyf.png" class="img"/>
			<text class="title">物业费</text>
		</view>
    <view class="item">
			<image src="/images/menu/wygl.png" class="img"/>
			<text class="title">物业管理</text>
		</view>
    <view class="item">
			<image src="/images/menu/wylx.png" class="img"/>
			<text class="title">物业维修</text>
		</view>

			
</view>

2.5 通知布局

.notice{
  display: flex;
  justify-content: flex-start;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}
.notice text{
  flex-grow:1
  
}

<view class="notice">
<image src="/images/home/board.png" mode="aspectFit" style="width: 200rpx; height: 100rpx;"/>
<text>通知公告</text>
</view>

2.6 底部布局

.bottom{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;


}
.bottom>view>image{
  width: 345rpx;
  padding: 10rpx;
  height: 200rpx;
}

<view class="bottom">
			<view>
				<image  src="/images/home/cute_1.jpg" mode="scaleToFill" />
			</view>
			<view >
				<image  src="/images/home/cute_2.jpg" mode="scaleToFill" />
			</view>
			<view>
				<image  src="/images/home/cute_3.jpg" mode="scaleToFill" />
			</view>
      <view >
				<image  src="/images/home/cute_4.jpg" mode="scaleToFill" />
		</view>
</view>

三 引入矢量图标库

# 1 打开 https://www.iconfont.cn/
	-注册成功
    
# 2 搜索想要的图标
	-加入购物车
    -在购物车中添加至项目
    
# 3 我的项目--项目设置--》打开base64

# 4 选择font class --》生成代码--》点击链接地址打开

# 5 把打开的链接地址内容复制到项目中
	-static/css/iconfont.wxss
    
    
# 6 在app.wxss中引入
@import "/static/css/iconfont.wxss";
  
    
    
# 7 在想用图标的位置，加入text组件
<text class="iconfont icon-anquan">

四 事件绑定

4.1 基本使用

# 1 方式一
<view bind:tab="js中写方法"></view>
# 2 方式二
<view bindtab="js中写方法"></view>

# 3 js中写方法
  showLog(){
    console.log("我被点了")
  }

4.2 阻止事件冒泡

<view style="height:300rpx;display: flex;justify-content: center;align-items: center; background-color: pink;" bind:tap="handleView1">
<button type="warn" plain bind:tap="handleButton1">冒泡案例</button>

</view>

<view style="height:300rpx;display: flex;justify-content: center;align-items: center; background-color: orange;" bind:tap="handleView2">
<button type="primary" plain catch:tap="handleButton2">阻止事件冒泡</button>
</view>

  handleView1() {
    console.log("view1被点了")

  },
  handleButton1() {
    console.log("button1被点了")
  },
  handleView2() {
    console.log("view2被点了")
  },
  handleButton2() {
    console.log("button2被点了")
  },

4.3 事件对象和传参

data-*方案
mark:自定义属性

  handleButton(event) {
    //currentTarget:事件绑定者---》button
    //target: 事件触发者--》button
    console.log(event)
    console.log(event.target.dataset.name)
    console.log(event.mark.name)

  },

<view style="height:300rpx;display: flex;justify-content: center;align-items: center; background-color: orange;">
<button type="primary" plain bind:tap="handleButton" data-name="justin" data-xx="xx" mark:name="lqz">事件传参</button>
</view>

五 页面跳转

5.1 组件跳转(声明式导航)

# 1 使用 navigator 组件实现跳转
	-url ：当前小程序内的跳转链接
	-open-type ：跳转方式
        navigate：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
        redirect： 关闭当前页面，跳转到应用内的某个页面。但不能跳转到 tabbar 页面
        switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
        reLaunch：关闭所有页面，打开到应用内的某个页面
        navigateBack：关闭当前页面，返回上一页面或多级页面
   


# 2 普通跳转 --注意带 / 
<view><navigator url="/pages/login/login"><button type="primary">登录</button></navigator></view>

# 3 open-type 属性

## 3.1 navigate：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
<view>
<navigator url="/pages/my/my" open-type="navigate">不能跳转到我的</navigator>
</view>

<view>
<navigator url="/pages/login/login" open-type="navigate">跳转到登录</navigator>
</view>

## 3.2 redirect： 关闭当前页面，跳转到应用内的某个页面。但不能跳转到 tabbar 页面
<view>
<navigator url="/pages/login/login" open-type="redirect">跳转到登录关闭上一个页面</navigator>
</view>

## 3.3 switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
<view>
<navigator url="/pages/my/my" open-type="switchTab">跳转到my-tab页</navigator>
</view>

## 3.4 reLaunch：关闭所有页面，打开到应用内的某个页面
<view>
<navigator url="/pages/my/my" open-type="reLaunch">跳转到my-tab页</navigator>
<navigator url="/pages/login/login" open-type="reLaunch">跳转到login页</navigator>
</view>

## 3.5 navigateBack：关闭当前页面，返回上一页面或多级页面
<view>
<navigator url="/pages/login/login" open-type="navigate">跳转到login页</navigator>
</view>

# 默认只能返回一页，通过delta 控制返回层级  delta="2"
<navigator open-type="navigateBack">跳转到login页</navigator>


# 4 携带参数
## 4.1 跳转
<view>
<navigator url="/pages/login/login?name=justin&age=19" open-type="navigate">跳转到login页</navigator>
</view>

## 4.2 在 onLoad的options中获取参数
  onLoad(options) {
      console.log(options)
  },
    
## 4.3 注意跳转tabbar不能携带参数

5.2 js跳转(编程式导航)

# 1 5 个方法
wx.navigateTo({
    url: 'url',
})

wx.redirectTo({
    url: 'url',
})

wx.switchTab({
    url: 'url',
})

wx.reLaunch({
    url: 'url',
})

wx.navigateBack()

# 2 页面
<button type="default"  bind:tap="handlenavigateTo">navigateTo</button>
<button type="warn" bind:tap="handleredirectTo">redirectTo</button>
<button type="primary" bind:tap="handleswitchTab">switchTab</button>
<button type="default" bind:tap="handlereLaunch">reLaunch</button>
<button type="warn" bind:tap="handlenavigateBack">navigateBack</button>
    
    
# 3 js
  handlenavigateTo(){
    wx.navigateTo({
      url: '/pages/login/login',
    })
  },
  handleredirectTo(){
    wx.redirectTo({
      url: '/pages/login/login',
    })
  },
  handleswitchTab(){
    wx.switchTab({
      url: '/pages/my/my',
    })
  },
  handlereLaunch(){
    wx.reLaunch({
      url: '/pages/login/login',
    })

  },
  handlenavigateBack(){
    // 关闭当前页面，返回上一页或上某一页，传入数字
    wx.navigateBack()
      
     wx.navigateBack({
      delta:2
    })
  },

六 wxml语法

6.1 模版语法

#  1 在页面 xx.js 的 Page() 方法的 data 对象中进行声明定义
#  2 在xx.wxml 中使用 {{}} 包裹，显示数据
#  3 可以显示如下，不能编写js语句或js方法
	-变量
	-算数运算
	-三元运算
	-逻辑判断
    
# 4 只是单纯通过赋值，js中变量会变化，但是wxml中的页面不会变化，没有联动效果，需要使用setData()方法修改
	- 更新数据
    - 页面更新
 
# 5 setData案例 修改数字
## 5.1 wxml
<view>
<view>姓名是：{{name}}</view>
<view>年龄是：{{age}}</view>
<button bind:tap="handleAddAge" plain="true" type="primary" size="mini">点击增加年龄</button>
</view>
##5.2 js
  handleAddAge(){
    //this.data.age++
    console.log(this.data.age)
    this.setData({
      age:this.data.age+1
    })
  },

    
# 6 setData案例 修改对象
## 6.1 wxml<view>
<view>姓名是：{{userinfo.name}}</view>
<view>年龄是：{{userinfo.age}}</view>
<view>爱好是：{{userinfo.hobby}}</view>
<button bind:tap="handleChangeName" plain="true" type="primary" size="mini">点击修改对象-姓名</button>
</view>

## 6.2 js
    data: {
        name: 'justin',
        age: 19,
        userinfo: {
          name: 'lqz',
          age: 99
        }
      },

  handleChangeName() {
    // 增加数据
    this.setData({
      'userinfo.hobby': '篮球'
    })
    // 修改数据
    this.setData({
      'userinfo.name': '彭于晏'
    })

    // 修改多个数据--》简便方案--》展开运算符
    // const userinfo = {
    //   ...this.data.userinfo,
    //   name: '新名字',
    //   hobby: '乒乓球'
    // }
    // this.setData({
    //   // userinfo:userinfo
    //   userinfo //简写形式
    // })
    // 修改多个数据--》简便方案-->assign
    const userinfo = Object.assign(this.data.userinfo, {
      name: 'xxzz',
      hobby: '烫头'
    })
    this.setData({
      // userinfo:userinfo
      userinfo //简写形式
    })

    //删除数据-->单个
    delete this.data.userinfo.name // 页面删除不了，需要用setData更新
    this.setData({
      userinfo:this.data.userinfo
    })

    //删除数据-->多个--解构赋值
    const {name,age,...res}=this.data.userinfo
    this.setData({
      userinfo:res
    })

  },

    
# 7 setData 修改数组
## 7.1 js
data: {
    names:['刘亦菲','迪丽热巴','古力娜扎','马尔扎哈']
  },
    
   handleChangeList(){
    //1 增加数组
    // 1.1 增加再设置值
    this.data.names.push('亚瑟王')
    this.setData({
      names:this.data.names
    })

    // 1.2 通过数组拼接
    // const newList=this.data.names.concat("甄姬")
    // this.setData({
    //   names:newList
    // })

    // 1.3 通过解构赋值
    const newList=[...this.data.names,"李白"]
    this.setData({
      names:newList
    })

    // 2 修改数组
    this.setData({
      'names[1]':'justin'
    })

    // 3 删除数组
    this.data.names.slice(1)
    this.setData({
      names:this.data.names.slice(1)
    })


  },
## 7.2 wxml
<view wx:for="{{names}}" wx:key="index">
{{item}}

</view>
<button bind:tap="handleChangeList" plain="true" type="primary" size="mini">修改数组</button>
    
    
# 8 双向数据绑定：input checkbox 
<view>
  <!-- 不支持数组和对象 -->
  <input type="text" model:value='{{name}}' style="border:orange solid 1rpx"/>
  <checkbox model:checked="{{isCheck}}"/>
  <text>{{isCheck}}</text>
</view>

6.2 列表渲染

# 1 基本使用
## 1.1 js
  data: {
    goodsList:[{id:1001,name:'钢笔',price:9},{id:1002,name:'铅笔',price:6},{id:1003,name:'脸盆',price:99}]
  },
##1.2 wxml

<view>
<!-- wx:key 提升性能，不写会警告  可以用 index或 *this：代指item本身  要唯一-->
<view wx:for="{{goodsList}}" wx:key="*this">
<!-- 默认每个对象是item，默认每个下标是index -->
<!-- <text>商品id:{{item.id}}--商品名字:{{item.name}}--商品价格:{{item.price}}</text> -->
</view>
</view>
# 2 修改wx:for-index  wx:for-item 
<view>
  <view wx:for="{{goodsList}}" wx:key="*this" wx:for-item="info">
<!-- 修改默认index和item--wx:for-index  wx:for-item    -->
<text>商品id:{{info.id}}--商品名字:{{info.name}}--商品价格:{{info.price}}</text>
</view>
</view>

# 3 block
<block>商品id:{{info.id}}--商品名字:{{info.name}}--商品价格:{{info.price}}</block>

6.3 条件渲染

# 1 wx:if   wx:elif   wx:else 
<view>
  <input type="text" model:value='{{score}}' style="border:orange solid 1rpx"/>


  <view wx:if="{{score>=90&&score<=100}}">优秀</view>
  <view wx:if="{{score>=80&&score<90}}">良好</view>
  <view wx:if="{{score>=60&&score<80}}">及格</view>
  <view wx:else="{{score>=90&&score<=100}}">不及格</view>
</view>


# 2 wx:if  和 hidden
## 2.1 js
showPhoto:true,
showPhotoHidden:true
    handleShowPhoto(){
        this.setData({
            showPhoto:!this.data.showPhoto
        })
        console.log(this.data.showPhoto)
    },
    handleShowPhotoHidden(){
        this.setData({
            showPhotoHidden:!this.data.showPhotoHidden
        })
    },
    
## 2.2 wxml
<view>
<image src="/images/b.jpg" mode="widthFix" wx:if="{{showPhoto}}"/>
<button bind:tap="handleShowPhoto" plain="true" type="primary" size="mini">显示隐藏图片(if)</button>
<view></view>
<image src="/images/b.jpg" mode="widthFix" hidden="{{showPhotoHidden}}"/>
<button bind:tap="handleShowPhotoHidden" plain="true" type="primary" size="mini">显示隐藏图片(hidden)</button>
</view>

七 发送网络请求

7.1 wx.request()

# 1 发送网络请求的域名，必须在微信公众平台配置
	-本地环境去除
# 2 发送请求
  handleLoadData(){
    wx.showLoading({
      title: '加载中，稍后',
      mask:true  // 显示透明蒙层
    })
    wx.request({
      url: 'http://192.168.71.100:5000',
      method:'GET',
      data:{},
      header:{},
      success:(res)=>{
        wx.hideLoading()
        console.log(res.data)
        this.setData({
          userinfo:res.data,
        })
        console.log(this.data.name)
      },
      fail:(err)=>{},
      complete:(res)=>{}

    })
  },

7.2 loading提示框

# 显示
 wx.showLoading({
      title: '加载中，稍后',
      mask:true  // 显示透明蒙层
    })
    
    
#关闭
 wx.hideLoading()