uni-app项目实战

接口描述

接口文档
推荐: http://service.picasso.adesk.com/v3/homepage/vertical
专辑 http://service.picasso.adesk.com/v1/wallpaper/album
分类: http://service.picasso.adesk.com/v1/vertical/category
分类-最新-热门 http://service.picasso.adesk.com/v1/vertical/category/$id/vertical专辑http://service.picasso.adesk.com/v1/wallpaper/album专辑-详情http://service.picasso.adesk.com/v1/wallpaper/album/${id}/wallpaper
图片评论 http://service.picasso.adesk.com/v2/wallpaper/wallpaper/${id}/comment

1. 首页 home/index.vue
2. 横屏 horizontal/index.vue
3. 精美视频 video/index.vue
4. 搜索 serch/index.vue
5. 我的 mine/index.vue

新增tabbar页面

1. 将图片的icon文件夹复制到src-static目录的下面
2. 在pages.json页面配置tabar的代码

"tabBar": {
    "color": "#999",
    "selectedColor":"#ea4136",
    "backgroundColor": "#fff",
    "list": [{
      "pagePath": "pages/index/index",   
      "text": "首页",
      "iconPath": "./images/index.png",
      "selectedIconPath": "./images/indexred.png"
    },{
      "pagePath": "pages/classbook/classbook",
      "text": "分类",
      "iconPath": "./images/class.png",
      "selectedIconPath": "./images/classred.png"
    },{
      "pagePath": "pages/bookshelf/bookshelf",
      "text": "书架",
      "iconPath": "./images/books.png",
      "selectedIconPath": "./images/booksred.png"
    },{
      "pagePath": "pages/user/user",
      "text": "我的",
      "iconPath": "./images/user.png",
      "selectedIconPath": "./images/usered.png"
    }]
  }

字体图片的引入

1. styles存放着字体文件base.wxss(默认的样式)和iconfont.wxss
2. 将styles文件复制到src文件夹下面
3. 在App.vue页面中的style标签中引入

@import "./styles/base.wxss"
@import "./styles/iconfont.wxss"

uni-ui使用

uni-ui安装地址

1. 安装uni-ui

npm install @dcloudio/uni-ui

2. 局部引入组件(在index.vue页面)

import {uniBadge} from '@dcloudio/uni-ui'

3. 注册组件(在index.vue页面中compoments)

components:{
	uniBadge
}

7. 使用组件(在index.vue页面中template)

<uni-badge text="1"></uni-badge>
<uni-badge text="2" type="success" @click="bindClick"></uni-badge>
<uni-badge text="3" type="primary" :inverted="true"></uni-badge>

uni-api的使用

uni.request({
	url:'http的地址
}).then(res=>{
	console.log(res)；
})

搭建首页模块的子页面

1. home-recommend
2. home-category
3. home-new
4. home-album

1.引入

import homeAlbum from './home-album'
import homeCategory from './home-category'
import homeNew from './home-new'
import homeRecommend from './home-recommend'

2.注册

  components:{
    homeAlbum,
    homeCategory,
    homeNew,
    homeRecommend
  }

3.使用

  <view>
      <home-album></home-album>
      <home-category></home-category>
      <home-new></home-new>
      <home-recommend></home-recommend>
  </view>

分段器的使用（标签页，tab栏）

1. 引入组件

import {uniSegmentedControl} from '@dcloudio/uni-ui'

2. 在components里面注册

  components:{
    homeAlbum,
    homeCategory,
    homeNew,
    homeRecommend,
    uniSegmentedControl
  }

3. 将依赖的data数据和事件注册（为后期使用，建议将data数据改为数组对象形式）

 data() {
       return {
           items: ['选项卡1','选项卡2','选项卡3'],
           current: 0
       }
   },
   methods: {
        onClickItem(e) {
            if (this.current !== e.currentIndex) {
                this.current = e.currentIndex;
            }
        }
    }

4. 使用

<view class="content">
            <view v-if="current === 0">
                选项卡1的内容
            </view>
            <view v-if="current === 1">
                选项卡2的内容
            </view>
            <view v-if="current === 2">
                选项卡3的内容
            </view>
</view>

封装自己的异步请求

1. 为什么要封装

原生的请求不支持promise
uni-app的请求不能够方便的添加到请求中
uni-app的请求返回值是个数组，不方便

2. 封装的思路

基于原生的promise封装
挂载在vue的原型上
通过this.request的方式来使用

• 在src目录下新建utils，在utils下新建request.js页面

export default(params)=>{
     //加载中
     uni.showLoading({
        title:'加载中'
    })
    return new Promise((resolve,reject)=>{          
        wx.request({
            ...params,
            success(res){
                resolve(res);
            },
            fail(err){
                reject(err);
            },
            complete(){
                uni.hideLoading();
                  
            }
        })
    })
}

• 在main.js中挂载

import request from './utils/request'
Vue.prototype.request=request

• 测试使用（在index.vue页面）

  onLoad(){
    this.request({
      url:'http://service.picasso.adesk.com/v3/homepage/vertical'
    })
    .then(res=>{
      console.log(res);
    })
  }