开始

<template>
    <view class="page">
        <image class="logo" src="/static/logo.png"></image>     
    </view>
</template>

<script>
</script>

<style lang="less">
.page {
    width: 100%;
    height: 100%;
    background-color: #fdfdfd;
    position: absolute;
}
</style>

tips: 一个视图(页面)本身就被包裹在 uni-app 框架定义的容器内,所以布局时不需要使用 100vh

uni-app 为我们封装了很多组件,同时封装了了不同于 h5 元素本身的属性,如 view(使用 div 也会被转为 view) hover-class : 指定按下去的样式类。详见

问题

image

image 图片容器生成的图片元素并非是 img, 而是 uni-image>div~img 同时直接对图片本生设置的样式不会生效 如image>img{ height: 30px}.

// h5页面中生成 :
img[data-v-57280228] {
  height: 30px;
}

// 同时 页面本身的 img元素因为由 ?? 渲染而来,没有data-v...属性,所以无法生效

同时官方提供了一些元素的属性,用来进行操作图片。这里

更多

app-plus

配置编译到 App平台时的特定样式,部分常用配置 H5 平台也支持。链接

禁用导航栏示例,

// style 用于设置每个页面的状态栏、导航条、标题、窗口背景色等。
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "app-plus": {
          "titleNView": false //禁用原生导航栏
        },
        "h5": {
          "titleNView": {
            "titleText": "index",
            "titleColor": "#F0AD4E",
            "buttons": [{
                "type": "close"
              },
              {
                "text": "分享",
                "fontSize": "1em"
              }
            ]
          }
        }
      }
    }

tips:

  • 如果 h5 节点没有配置,默认会使用 app-plus 下的配置。
  • 配置了 h5 节点,则会覆盖 app-plus 下的配置。

下拉刷新 onPullDownRefresh

它的开启也是需要在 page.json 中对应页面开启。同时需要在页面 js 中定义处理函数 onPullDownRefresh 并关闭动画uni.stopPullDownRefresh()

这并非是直接刷新页面,只是提供了一个动画及接口

"pages": [
    {
      "path": "pages/index/index",
      "style": {
         "navigationBarTitleText": "首页",        
         "enablePullDownRefresh":true
      }      
    },
   // ...
   ]

网络请求封装

uni.request(OBJECT) 发起网络请求。

在各个小程序平台运行时,网络相关的 API 在使用前需要配置域名白名单。

export const request(options) => {
  // 此处应该判断是否为绝对路径
  options.url = host + options.url
  // 此处可以选择获取传递参数,是否包含关闭动画选项
  uni.showLoading({
    title:'加载中!',
  })

  return new Promise((reslove, reject) => {
    uni.request({
      ...options,
      success(res) {
        if (res.statusCode == 200) {
          reslove(res.data)
        } else {
          reject('not 200')
        }
      },
      fail(err) {
        reject(err)
      },
      complete() {
        uni.hideLoading()
      }
    })
  })
}
// or
export const request(options) => {
  options.url = host + options.url
  return uni.request({...options})
}

method 有效值 必须大写,有效值在不同平台差异说明不同。(options.method="GET" 默认值)

封装是为了不过于依赖官方,但这是 uin-app。也就无所谓了

不封装

由于uni.request本身也是返回的 Promise 对象,所以不进行封装,也可以以异步的方式进行网络请求。

!建议封装,以自定义全局效果,拦截器,指定外部接收参数(原为数组)等等。

直接使用

// 1. 如上文直接在 uni.request接收的对象传入 success方法

// 2. Promise
function a(){
    uni.request({url: 'test'}).then(data => {
        // data为一个数组,第一线为错误信息,二为返回数据
        let [error, res] = data
        console.log(data)
    })
}

// 3. async await
async function b(){
    let [error, res] = await uni.request({url: 'test'})
    console.log(res)
}

data 数据说明

最终发送给服务器的数据是 String 类型,如果传入的 data 不是 String 类型,会被转换成 String。转换规则如下:

  • 对于 GET 方法,会将数据转换为 query string。例如 { name: 'name', age: 18 } 转换后的结果是 name=name&age=18
  • 对于 POST 方法且 header['content-type']application/json 的数据,会进行 JSON 序列化。
  • 对于 POST 方法且 header['content-type']application/x-www-form-urlencoded 的数据,会将数据转换为 query string。

官方组件

scroll-view 滚动

可滚动视图区域。用于区域滚动。

需注意在 webview 渲染的页面中,区域滚动的性能不及页面滚动

<template>
  <scroll-view class="scroll-view" scroll-y @scrolltolower="handleToLower">
    <view v-for="item in arr">item</view>      
  </scroll-view>
</template>
<script>
 export default {
  data() {
    return {
      // 假设这是一个很长的数组
      recommends: [],
    }
  },
   methods: {
    handleToLower(){
      // 滚动条触底
      console.log('滚动条触底!')
    }
  }
 }
</script>
<style>
    .scroll-view {
        // 必须给其一个确定的高度。100vh 的高度是不包含自带的 tabBar 及导航栏高度的
        height: calc(100vh);
    }
</style>

swiper 轮播图

滑块视图容器。

一般用于左右滑动或上下滑动,比如 banner 轮播图。

注意滑动切换和滚动的区别,滑动切换是一屏一屏的切换。swiper 下的每个 swiper-item 是一个滑动切换区域,不能停留在 2 个滑动区域之间。

<template>
  <view>
    <view class="swiper">
      <swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <!-- 常用属性按上文顺序:

        1. 是否显示小圆点,
        2. 是否自带播放
        3. 自动播放间隔
        4. 自动播放过渡时间
        5. 头尾衔接
       -->
        <swiper-item v-for="item in banner" :key="item.id">
          <image :src="item.thumb" mode=""></image>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<style lang="scss">
.swiper {
  swiper {
    height: calc(750rpx / (375 / 166));
    image {
      height: 100%;
    }
  }
}
</style>

swiper-item 仅可放置在 <swiper> 组件中,宽高自动设置为 100%。注意:宽高 100%是相对于其父组件,不是相对于子组件,不能被子组件自动撑开。

注意: swiper 组件默认固定高度 150px, 而 iamge默认高度 240px. 一般的解决方案是将 swiper 的高度等比例的设置为 image的高度


相关推荐:

来自系列:uni-app 开始

分类 前端下文章:

微信小程序开发 days1 关注点:文件结构,json配置文件, 模板语法

小程序开发学习笔记 days2。 关注点:view, text, rich-text, button, image, navigator, icon, swiper, radio, checkbox

小程序学习笔记 days3。 关注点:生命周期,自定义组件

小程序学习笔记 days4。 关注点:scroll-view, Promise

css3 选择器,背景定义(定位), 盒子定位,弹性布局,栅格系统。还有一些常用的 css 属性。

更多...

aid 加一试试->

评论([[comments.sum]])

发表

加载更多([[item.son.length - 2]])...

发表

2020-11 By Hchuan.

flask & bootstrap-flask

© 2021 HChuan. All rights reserved.

随机占位图来自:fghrsh

互联网ICP备案号:蜀ICP备2020031846号