Uni-app的学习

uni-app基础配置

pages

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
      "path": "pages/message/message"
    },
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "uni-app",
        "navigationBarTitleText":"信息页面",
        "h5":{
          "pullToRefresh":{
            "color":"#007AFF"
          }
        }
      }
    },
    {
      "path": "pages/contact/contact"
    }
    
  ],

tabBar模板

"tabBar":{
    "color":"#4CD964",
    "selectedColor":"#DD524D",
    "backgroundColor":"#FFFFFF",
    "list":[
      {
        "text":"首页",
        "pagePath":"pages/index/index",
        "iconPath":"static/tabs/home.png",
        "selectedIconPath":"static/tabs/home-active.png"
      },
      {
        "text":"信息",
        "pagePath":"pages/message/message",
        "iconPath":"static/tabs/message.png",
        "selectedIconPath":"static/tabs/message-active.png"
      },
      {
        "text":"我们",
        "pagePath":"pages/contact/contact",
        "iconPath":"static/tabs/contact.png",
        "selectedIconPath":"static/tabs/contact-active.png"
      }
    ]
  }

condition

作用是可以使得微信开发者工具通过下图方式进入“详情页”

"condition":{
    "current":0,
    "list":[
      {
        "name":"详情页",
        "path":"pages/detail/detail",
        "query":"id=80"
      }
    ]
  }

view

1.hover-class (点击时的状态)

<template>
  <view>
    <view class="box" hover-class="box-active">我是一个大盒子</view>
  </view>
</template>

<script>
</script>

<style>
  .box{
    width: 100px;
    height: 100px;
    background-color: #007AFF;
  }
  .box-active{
    width: 100px;
    height: 100px;
    background-color: #2C405A;
  }
</style>

2.防止冒泡：hover-stop-propagation

<template>
  <view class="box2" hover-class="box2-active">
    <view class="box" hover-class="box-active" hover-stop-propagation>我是一个大盒子</view>
  </view>
</template>

<script>
</script>

<style>
  .box{
    width: 100px;
    height: 100px;
    background-color: #007AFF;
  }
  .box-active{
    width: 100px;
    height: 100px;
    background-color: #2C405A;
  }
  .box2{
    width: 200px;
    height: 200px;
    background-color: #4CD964;
  }
  .box2-active{
    width: 200px;
    height: 200px;
    background-color: #DD524D;
  }
</style>

3.hover-start-time和hover-stay-time

<template>
  <view class="box2" hover-class="box2-active">
    <view class="box" hover-class="box-active" hover-stop-propagation :hover-start-time="2000" :hover-stay-time="3000">我是一个大盒子</view>
  </view>
</template>

引入CSS文件

@import url("./a.css");

数据绑定

基础绑定

<template>
  <view>
    <view>数据绑定的学习</view>
    <view>{{msg}}</view>
    <view>{{'3'+'你好'}}</view>
    <view>{{1+1}}</view>
    <view>{{flag?'zhen':'jia'}}</view>
  </view>
</template>

<script>
  export default{
    data(){
      return{
        msg:'hello',
        flag:true
      }
    }
  }
</script>

<style>
</style>

v-bind

<template>
  <view>
    <image v-bind:src="imgUrl"></image>
    <image :src="imgUrl"></image>
  </view>
</template>

<script>
  export default{
    data(){
      return{
        imgUrl:'https://tu1.whhost.net/uploads/20181105/11/1541389005-SInZHlOPep.jpg'
      }
    }
  }
</script>

<style>
</style>

v-for

<template>
  <view>
    <view v-for="(item,index) in arr" :key="item.id">
      序号：{{index}},
      名字：{{item.name}},
      年龄：{{item.age}}
    </view>
  </view>
</template>

<script>
  export default{
    data(){
      return{
        arr:[
          {
            name:'小猪',
            age:20,
            id:1
          },
          {
            name:'小桃子',
            age:20,
            id:2
          },
          {
            name:'小苹果',
            age:20,
            id:3
          },
          
        ]
      }
    }
  }
</script>

<style>
</style>

绑定事件

基础绑定

<template>
  <view>
    <button type="primary" v-on:click="clickHandle">按钮</button>
  </view>
</template>

<script>
  export default{
    data(){
      return{
      }
    },
    methods:{
      clickHandle(){
        console.log("点击我了")
      }
    }
  }
</script>

传递参数以及获取事件

<template>
  <view>
    <button type="primary" v-on:click="clickHandle(20,$event)">按钮</button>
  </view>
</template>

<script>
  export default{
    data(){
      return{
      }
    },
    methods:{
      clickHandle(num,e){
        console.log("点击我了",num,e)
      }
    }
  }
</script>

<style>
</style>

绑定事件的简写

<button type="primary" @click="clickHandle(20,$event)">按钮</button>

生命周期函数

应用生命周期

页面生命周期

设置下拉刷新

下拉刷新

现在 pages.json中开启

在list.vue中写

<template>
  <view>
    <view>这是列表页</view>
    <view v-for="(item) in list">
      {{item}}
    </view>
  </view>
</template>

<script>
  export default{
    data(){
      return{
        list:['前端','Java','UI','大数据']
      }
    },
    onPullDownRefresh (){
      console.log('触发了下拉刷新')
      this.list=['UI','Java','前端','大数据']
      // 设置延迟+关闭下拉刷新
      setTimeout(function () {
        uni.stopPullDownRefresh();
      }, 2000);
    }
  }
</script>

<style>
</style>

按钮点击刷新

<template>
  <view>
    <view>这是列表页</view>
    <view v-for="(item) in list">
      {{item}}
    </view>
    <button @click="pullDown">按钮</button>
  </view>
</template>

<script>
  export default{
    data(){
      return{
        list:['前端','Java','UI','大数据']
      }
    },
    methods:{
      pullDown(){
        uni.startPullDownRefresh()
                uni.stopPullDownRefresh()
      }
    }
  }
</script>

<style>
</style>

上拉加载

2. 设置页面触底距离



3. onReachBottom方法

数据缓存

1. ​​uni.setStorage​​

<button type="primary" @click="setStorage">存储数据</button>

<script>
  export default{
    methods:{
      setStorage(){
        uni.setStorage({
        key:'id',
        data:80,
        success(){
          console.log("存储成功")
          }
        })
      }
    }
  }
</script>

2.​​uni.setStorageSync​​

<button type="primary" @click="setStorage">存储数据</button>

<script>
  export default{
    methods:{
      setStorage(){
        uni.setStorageSync('id', '10');
      }
    }
  }
</script>

3.​​uni.getStorage​​​与​​uni.getStorageSync​​

getStorage(){
// uni.getStorage({
//  key:'id',
//  success(res){
//    console.log("获取成功",res)
//  }
// })
const res = uni.getStorageSync('id')
console.log(res)

},

4.​​uni.removeStorage​​​与​​uni.removeStorageSync​​

removeStorage(){
// uni.removeStorage({
//  key:'id',
//  success(){
//    console.log("移出成功")
//  }
// })
uni.removeStorageSync('id')
}

图片的上传和预览

<template>
  <view>
    <button type="primary" @click="chooseImg">上传图片</button>
    <image v-for="item in imgArr" :src="item" @click="previewImg(item)"></image>
  </view>
</template>

<script>
  export default{
    data(){
      return {
        imgArr:[]
      }
    },
    methods:{
      chooseImg(){
        uni.chooseImage({
          const:5,
          success :res=>{
            this.imgArr = res.tempFilePaths
          }
        })
      },
            //预览
      previewImg(current){
        uni.previewImage({
                    //current是当前索引，current打印出来是地址，直接赋值给current变量
          current:current,
                    //
          urls:this.imgArr,
          //循环 app中才能体现
          loop:true,
          indicator:"number"
        })
      }
    }
  }
</script>

<style>
</style>

条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

<!-- #ifdef H5 -->
<view class="">h5zhong xinashi</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="">微信小程序zhong xinashi</view>
<!-- #endif -->

onLoad() {
// #ifdef H5
console.log("haaaaaa5")
// #endif
// #ifdef MP-WEIXIN
console.log("wixin")
// #endif
}

/* #ifdef H5 */
view{

}
/* #endif */

两种导航跳转和传参

1.声明式导航–navigator

跳转到普通页面

<navigator url="../detail/detail">跳转至详情页</navigator>

跳转到tabbar页面

<navigator url="../message/message" open-type="switchTab">跳转至信息也</navigator>

跳转到新的页面并且关闭之前的页面

<navigator url="../detail/detail" open-type="redirect">跳转至详情页</navigator>

2.编程式导航跳转–button

分别对应上面的三种情况

<button type="default" @click="goDetail">跳转至详情页</button>
    <button type="default" @click="goTabbar">跳转至Tabrbar的信息页面</button>
    <button type="default" @click="goRedictDetail">跳转至详情页</button>




<script>
  export default{
    methods:{
      goDetail(){
         uni.navigateTo({
           url:'../detail/detail'
         })
      },
      goTabbar(){
        uni.switchTab({
          url:'../message/message'
        })
      },
      goRedictDetail(){
        uni.redirectTo({
          url:'../detail/detail'
        })
      }
    }
  }
</script>

3.参数传递

前台

<navigator url="../detail/detail?id=1&age=18">跳转至详情页</navigator>

跳转页–接收数据并打印

<script>
  export default{
    onLoad(options){
      console.log(options)
    }
  }
</script>

组件的创建使用

1. 新建组件

2. 调用
   import导入，componnets组件

组件生命周期

beforeCreate() {
      console.log('实例已经开始初始化了')
    },
    created() {
      console.log('created',this.num)
      this.intId = setInterval(()=>{
        console.log('执行定时器')
      },1000)
    },
    beforeMount() {
      console.log('beforemount',document.getElementById('myView'))
    },
    mounted() {
      console.log('mount',document.getElementById('myView'))
    },
    destroyed(){
      console.log('组件销毁了')
      clearImmediate(this.intId)
    }

组件的通讯

1.父向子传值

2.子向父传值

3. 兄弟组件修改值

uni组件库的基本介绍

例子

点击 Calendar–>在登陆的前提下点击红色框柱的

复制相应的代码到对应的页面

出现下图情况，说明成功！

获取轮播图数据

前提：连接了PHP后台的数据。

<view class="home">
    <swiper indicator-dots circular>
      <swiper-item v-for="item in swipers" :key="item.id">
        <image :src="item.img"></image>
        </swiper-item>
    </swiper>
  </view>

methods: {
      //获取轮播图的数据
      getSwipers(){
        console.log('获取轮播图的数据')
        uni.request({
          url:'http://localhost:8082/api/getlunbo',
          success:res=>{
            console.log(res)
            if(res.data.status !== 0){
              return uni.showToast({
                title:'获取数据失败'
              })
            }
            this.swipers=res.data.message
          }
        })
      }
    }

这是后台获取到的数据

封装￥myRequest方法并挂载到去全局

methods: {
      //获取轮播图的数据
      async getSwipers(){
        const res = await this.$myRequest({
          url:'/api/getlunbo'
        })
        this.swipers = res.data.message
      }
    }

api.js

const BASE_URL = 'http://localhost:8082'
export const myRequest =(options)=>{
  return new Promise((resolve,reject)=>{
    uni.request({
      url:BASE_URL+options.url,
      method:options.method||'GET',
      data:options.data||{},
      success:(res)=>{
        if(res.data.status !== 0){
          return uni.showToast({
            title:'获取数据失败'
          })
        }
        resolve(res)
      },
      fail:(err)=>{
        uni.showToast({
          title:'请求接口失败'
        })
        reject(err)
      }
    })
  })
}

z在main.js中配置

引用iconfont图标

1. 引入这5个文件
2. 点开这个网页
3. 对应相应的类型
4. 代码 class按照3中的格式写。

点击导航栏跳转到相应的页面

如图所示：

1. 前端

<!-- 导航区域 -->
<view class="nav">
    <view class="nav_item" v-for="(item,index) in navs" :key="index" @click="navItemClick(item.path)">
        <view :class="item.icon"></view>
        <text>{{item.title}}</text>
    </view>
</view>
<!-- end导航区 -->

2.对应数组

data() {
    return {
        swipers:[],
        goods:[],
        navs:[
            {
                icon:'icon-ziyuan',
                title:'桃子超市',
                path:'/pages/goods/goods'
            },
            {
                icon:'icon-guanyuwomen',
                title:'联系我们',
                path:'/pages/contact/contact'
            },
            {
                icon:'icon-tupian',
                title:'社区图片',
                path:'/pages/pics/pics'
            },
            {
                icon:'icon-shipin',
                title:'学习视频',
                path:'/pages/videos/videos'
            }
        ]
    }
},

3. 跳转方法：

navItemClick(url){
    uni.navigateTo({
        url:url
    })
}

复习组件调用的思想

Map应用

<map class="map" :scale="scale" :longitude="longitude" :latitude="latitude" :markers="markers"></map>

data() {
      return {
        longitude:120.363172,
        latitude:30.312212,
        scale:10,
        markers:[
          {
            longitude:120.363172,
            latitude:30.312212,
            iconPath:'../../static/hmlogo.png',
            width:30,
            height:30
          }
        ]
      }
    },

理解：

左侧滚动区域

样式

<view class="pics">
    <scroll-view class="left" scroll-y>
      <view class="active">家居生活</view>
      <view>家居生活</view>
      <view>家居生活</view>
      <view>家居生活</view>
      <view>家居生活</view>
      <view>家居生活</view>
      <view>家居生活</view>
      <view>家居生活</view>
      <view>家居生活</view>
      <view>家居生活</view>
      <view>家居生活</view>
    </scroll-view>
  </view>

<style lang="scss">
page{
  height: 100%;
}
.pics{
  height: 100%;
  .left{
    width: 200rpx;
    height:100%;
    border-right: 1px solid #eee;
    view{
      height: 60px;
      line-height: 60px;
      color: #333;
      text-align: center;
      font-size: 30rpx;
      border-top: 1px solid #eee;
    }
    .active{
      background: $shop-color;
      color: #fff;
    }
  }
}
</style>

点击谁 谁高亮

<scroll-view class="left" scroll-y>
      <view 
      @click="leftClickHandle(index)"
            //active的值对应哪个index 哪个是active的class然后高亮。
      :class="active===index?'active':''"
       v-for="(item,index) in cates" :key="item.id">
        {{item.title}}
      </view>
    
    </scroll-view>

methods: {
    async getPicsCate(){
        const res = await this.$myRequest({
            url:'/api/getimgcategory'
        })
        this.cates = res.data.message
    },
        leftClickHandle(index){
            this.active = index;
        }
},
    onLoad() {
        this.getPicsCate()
    }

年月日时间转换

<text>发表时间:{{item.add_time|formatDate}}</text>

export default {
    filters:{
        formatDate(date){
            const nDate = new Date(date)
            const year = nDate.getFullYear()
            //不够两位，前面追加0
            const month = nDate.getMonth().toString().padStart(2,0)
            const day = nDate.getDay().toString().padStart(2,0)
            return year+'-'+month+'-'+day
        }
    }
}