目錄

• • 1. 項(xiàng)目搭建
  • • 1.1 新建項(xiàng)目
    • • 1 新增 tabbar 頁(yè)面
    • 1.2 引入字體圖標(biāo)
    • 1.3 uni-ui
    • • 1 uni-ui 介紹
      • 2 uni-ui 使用
    • 1.4 uni-api 介紹
  • 2. 首頁(yè)模塊
  • • 2.1 功能分析
    • 2.2 搭建子頁(yè)面
    • • 1. 子頁(yè)面
      • 2. 分段器介紹
      • 3.分段器樣式優(yōu)化
    • 2.3 封裝自己的異步請(qǐng)求
    • • 1.為什么要封裝
      • 2.封裝的思路
      • 3.封裝
  • 3. 編寫(xiě) 首頁(yè)-推薦 頁(yè)面
  • • 3.1 功能介紹
    • 3.2 解決一閃而過(guò)的問(wèn)題
    • 3.3 分頁(yè)功能分析
  • 4.首頁(yè)模塊-專(zhuān)輯模塊
  • • 4.1 專(zhuān)輯列表
    • • 1. 功能分析
    • 4.2 專(zhuān)輯詳情

1. 項(xiàng)目搭建

1.1 新建項(xiàng)目

• 創(chuàng)建項(xiàng)目 vue create -p dcloudio/uni-preset-vue dnpicture
• 安裝 sass依賴(lài) npm install sass-loader node-sass

1 新增 tabbar 頁(yè)面

1.2 引入字體圖標(biāo)

• 字體圖標(biāo)使用的是 iconfont
• 在 App.vue中 全局引入

Iconfont-阿里巴巴矢量圖標(biāo)庫(kù)：https://www.iconfont.cn

這里有個(gè)坑就是：微信不支持本地字體圖標(biāo)

從 阿里巴巴矢量圖標(biāo)庫(kù) 下載到本地的，但是uni-app不支持本地iconfont.css，報(bào)錯(cuò)

00:42:22.580 Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './iconfont.eot?t=1521557349802' in 'D:\workspace\appProjects\uniQingchi\pages\index' 00:42:22.592 at factoryCallback (D:\app\HBuilderX\plugins\uniapp\node_modules\webpack\lib\Compilation.js:264:39) 00:42:22.592 at factory (D:\app\HBuilderX\plugins\uniapp\node_modules\webpack\lib\NormalModuleFactory.js:247:20) 00:42:22.603 at resolver (D:\app\HBuilderX\plugins\uniapp\node_modules\webpack\lib\NormalModuleFactory.js:65:21) 00:42:22.613 at asyncLib.parallel (D:\app\HBuilderX\plugins\uniapp\node_modules\webpack\lib\NormalModuleFactory.js:138:21)

解決方案：從阿里巴巴矢量圖標(biāo)庫(kù) 獲取在線(xiàn)連接

@import "./styles/iconfont.wxss"; <text class="iconfont">&#xe75d;</text>

1.3 uni-ui

1 uni-ui 介紹

• https://uniapp.dcloud.io/component/README?id=uniui

• uni-ui 是 DCloud 提供的一個(gè)跨端 ui 庫(kù)，它是基于vue組件的，flex布局的，無(wú)dom 的跨全端 ui 框架

• uni-ui 不包括基礎(chǔ)組件，它是基礎(chǔ)組件的補(bǔ)充

• 數(shù)字角標(biāo)，日歷，卡片，折疊面板，倒計(jì)時(shí)，抽屜，懸浮按鈕，收藏按鈕，底部購(gòu)物導(dǎo)航，宮格，圖標(biāo)，索引列表，加載更多，自定義導(dǎo)航欄，通告欄，數(shù)字輸入框，分頁(yè)器，彈出層，評(píng)分，搜索欄，分段器，步驟條，滑動(dòng)操作，輪播圖指示點(diǎn)，標(biāo)簽

2 uni-ui 使用

• 安裝 uni-ui

npm install @dcloudio/uni-ui

• 局部引入組件
• 注冊(cè)組件
• 使用組件

在 script 中引用組件：

import {uniBadge} from '@dcloudio/uni-ui' //import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue' //也可使用此方式引入組件 export default {components: {uniBadge} }

在 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>

更多

1.4 uni-api 介紹

• https://uniapp.dcloud.io/api/README
• 原生的微信小程序的 api 都是不支持 promise（承諾）
• uni-app 對(duì)大部分的小程序的原生 api 做了封裝。使之支持 promise
• 使用方法
  • 原生微信小程序 wx.request
  • uni-api 的方式 uni.request
  • 其他 api 的使用方式也類(lèi)似

onLoad() {//http://157.122.54.189:9088/image/v3/homepage/vertical// 1 原生的微信小程序的 apiwx.request({url:"http://157.122.54.189:9088/image/v3/homepage/vertical",success:(res) =>{console.log(res)}})//2. uni-apiuni.request({url:"http://157.122.54.189:9088/image/v3/homepage/vertical",}).then(res => {console.log(res)})},

2. 首頁(yè)模塊

2.1 功能分析

• 修改 導(dǎo)航欄的外觀(guān)
• 使用 分段器組件 搭建子頁(yè)面
• 封裝自己的異步請(qǐng)求

2.2 搭建子頁(yè)面

1. 子頁(yè)面

• 首頁(yè)模塊分為 4個(gè)部分，分別是 推薦，分類(lèi)，最新，專(zhuān)輯
• 新建自定義組件來(lái)代替 上述的4個(gè)頁(yè)面
  • home-recommend（推薦）
  • home-category（分類(lèi)）
  • home-new（最新）
  • home-album（專(zhuān)輯）

2. 分段器介紹

分段器·指的是 uni-ui 中的一個(gè)組件，其實(shí)就是我們俗稱(chēng)的 標(biāo)簽頁(yè)，tab頁(yè)

https://ext.dcloud.net.cn/plugin?id=54

<!-- 首頁(yè) --> <template><view class="content"><view><uni-segmented-control :current="current" :values="items.map(a=>a.title)" @clickItem="onClickItem" style-type="text" active-color="#d4237a"></uni-segmented-control><view class="content"><view v-if="current === 0"><home-recommend></home-recommend></view><view v-if="current === 1"><home-category></home-category></view><view v-if="current === 2"><home-new></home-new></view><view v-if="current === 3"><home-album></home-album></view></view></view></view> </template><script>import homeRecommend from './home-recommend';import homeCategory from './home-category';import homeNew from './home-new';import homeAlbum from './home-album';import { uniSegmentedControl } from "@dcloudio/uni-ui";export default {data (){return {items: [{title:'推薦'},{title:'分類(lèi)'},{title:'最新'},{title:'專(zhuān)輯'}],current: 0}},components: {homeRecommend,homeCategory,homeNew,homeAlbum,uniSegmentedControl},methods: {onClickItem(index) {if (this.current !== index.currentIndex) {this.current = index.currentIndex;}}}} </script><style></style>

3.分段器樣式優(yōu)化

有四個(gè)區(qū)域
所以大概結(jié)構(gòu)是：

<view><view class="上 home_tab"><view >1（這個(gè)一般不寫(xiě)）</view><view class="home_tab_title">2（分段器）</view><view class="search_icon">3（搜索按鈕）<text class="iconfont">&#xe74b;</text></view></view><view class="下 content">4（內(nèi)容）</view> </view><style lang="scss">.home_tab{position: relative;.home_tab_title{width: 60%;margin: 0 auto;}.search_icon{position: absolute;top: 50%;transform: translateY(-50%);right: 5%;}}</style>

2.3 封裝自己的異步請(qǐng)求

1.為什么要封裝

• 原生的請(qǐng)求不支持 promise
• uni-api 的請(qǐng)求不夠方便的添加 請(qǐng)求中 效果
• uni-api 的請(qǐng)求返回值是個(gè)數(shù)組，不方便

2.封裝的思路

• 基于原生的 promise 來(lái)封裝
• 掛載到 Vue 的原型上
• 通過(guò) this.request 的方式來(lái)使用

3.封裝

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

在 main.js 中

import request from "./utils/request.js" Vue.prototype.request=request; onLoad(){this.request({url:"http://157.122.54.189:9088/image/v3/homepage/vertical"}).then(res=>{console.log(res);}) }

3. 編寫(xiě) 首頁(yè)-推薦 頁(yè)面

3.1 功能介紹

• 接口文檔
  https://www.showdoc.cc/414855720281749?page_id=3618621017219602

• 數(shù)據(jù)動(dòng)態(tài)渲染

• moment.js 的使用（時(shí)間格式）
  momentjs.cn

npm install moment --save # npm yarn add moment # Yarn Install-Package Moment.js # NuGet spm install moment --save # spm meteor add momentjs:moment # meteor bower install moment --save # bower (廢棄) <script>import moment from "moment";this.monthes.MM = moment(this.monthes.stime).format("MM");this.monthes.DD = moment(this.monthes.stime).format("DD");</script>

• “熱門(mén)” 列表的基于 scroll-view 的分頁(yè)加載

3.2 解決一閃而過(guò)的問(wèn)題

解決辦法：
加個(gè)判斷

<template><view v-if="recommends.length>0">

3.3 分頁(yè)功能分析

• 使用 scroll-view 標(biāo)簽充當(dāng)分頁(yè)的容器
• 綁定滾動(dòng)條觸底事件 scrolltolower
• 實(shí)現(xiàn)分頁(yè)邏輯

<template><scroll-view class="recommend_view" @scrolltolower="handerToLower" scroll-y v-if="recommends.length>0"><script> methods:{//滾動(dòng)條觸底事件handerToLower(){console.log("遲到大王大大");}}<style lang="scss"> .recommend_view{//height: 屏幕的高度 - 頭部標(biāo)題的高度height: calc( 100vh - 36px);

首頁(yè)-推薦 頁(yè)面：

<template><scroll-view class="recommend_view" @scrolltolower="handerToLower"scroll-y v-if="recommends.length>0"><!-- 推薦 開(kāi)始 --><view class="recommend_warp"><view class="recommend_item" v-for="item in recommends" :key="item.id"><image mode="widthFix" :src="item.thumb"></image></view></view><!-- 推薦 結(jié)束 --><!-- 月份 開(kāi)始 --><view class="monthes_warp"><view class="monthes_title"><view class="monthes_title_info"><view class="monthes_info"><text> {{monthes.DD}} /</text>{{monthes.MM}} 月</view><view class="monthes_text">{{monthes.title}}</view></view><view class="monthes_title_more">更多 ></view></view><view class="monthes_content"><view class="monthes_item" v-for="item in monthes.items" :key="item.id"><!-- mode="widthFix" --><image mode="widthFix":src="item.thumb+item.rule.replace('$<Height>',360)"></image></view></view></view><!-- 月份 結(jié)束 --><!-- 熱門(mén) 開(kāi)始 --><view class="hots_wrap"><view class="hots_title"><text>熱門(mén)</text></view><view class="hots_content"><view class="hots_item" v-for="item in hots" :key="item.id"><image mode="widthFix" :src="item.thumb"></image></view></view></view><!-- 熱門(mén) 結(jié)束 --></scroll-view> </template><script>import moment from "moment";export default {data(){return{//推薦列表recommends:[],//月份monthes:{},//熱門(mén)hots:[],//請(qǐng)求的參數(shù)params:{//要獲取幾條limit: 30,//關(guān)鍵字order: 'hot',//要跳過(guò)幾條skip: 0},//是否還有下一頁(yè)hasMore:true}},mounted() {this.getList();},methods:{//獲取接口的數(shù)據(jù)getList(){this.request({url: 'http://157.122.54.189:9088/image/v3/homepage/vertical',data: this.params}).then(result =>{// 判斷有沒(méi)有下一頁(yè)數(shù)據(jù)if(result.res.vertical.length===0){this.hasMore=false;return;}if(this.recommends.length===0){//第一次發(fā)送的請(qǐng)求//推薦模塊this.recommends = result.res.homepage[1].items;//月份模塊this.monthes = result.res.homepage[2];//將時(shí)間戳 改成 18號(hào)/月 moment.jsthis.monthes.MM = moment(this.monthes.stime).format("MM");this.monthes.DD = moment(this.monthes.stime).format("DD");}//獲取熱門(mén)數(shù)據(jù)的列表// 數(shù)組拼接 es6//this.hots = result.res.vertical;this.hots = [...this.hots, ...result.res.vertical];})},//滾動(dòng)條觸底事件handerToLower(){/*** 1. 修改參數(shù) skip+=limit；* 2. 重新發(fā)送請(qǐng)求 getList()* 3. 請(qǐng)求回來(lái)成功 hots 數(shù)據(jù)的疊加*/if(this.hasMore){this.params.skip += this.params.limit;this.getList();}else{// 彈窗提示用戶(hù)uni.showToast({title:"沒(méi)有了喲",icon:"none"})}}}} </script><style lang="scss">.recommend_view{//height: 屏幕的高度 - 頭部標(biāo)題的高度height: calc( 100vh - 36px); }.recommend_warp{display: flex;flex-wrap: wrap;.recommend_item{width: 50%;border: 5rpx solid #000;}}.monthes_warp{.monthes_title{display: flex;justify-content: space-between;padding: 20rpx;.monthes_title_info{color: $color;font-size: 30rpx;font-weight: 600;display: flex;.monthes_info{text{font-size: 36rpx;}}.monthes_text{font-size: 34rpx;color: #666;margin-left: 30rpx;}}.monthes_title_more{font-size: 24rpx;color: $color;}}.monthes_content{display: flex;flex-wrap: wrap;.monthes_item{width: 33.3%;border: 5rpx solid #fff;}}}.hots_wrap{.hots_title{padding: 20rpx;text{border-left: 20rpx solid $color;padding-left: 20;font-size: 34rpx;font-weight: 600;}}.hots_content{display: flex;flex-wrap: wrap;.hots_item{width: 33.3%;border: 5rpx solid #fff;image{}}}}</style>

4.首頁(yè)模塊-專(zhuān)輯模塊

4.1 專(zhuān)輯列表

1. 功能分析

• 使用 setNavigationBarTitle 修改 頁(yè)面標(biāo)題
• 發(fā)送請(qǐng)求獲取數(shù)據(jù)
• 使用 swiper 輪播圖組件
• 使用 scroll-view 組件實(shí)現(xiàn)分頁(yè)
• 點(diǎn)擊跳轉(zhuǎn)到 專(zhuān)輯詳情頁(yè)

4.2 專(zhuān)輯詳情

總結(jié)

以上是生活随笔為你收集整理的【uni-app】uni-app-微信小程序项目笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。