你还不会零基础的uniapp吗-uniapp一周实战——第一、二天

相关素材包已经省略…请关注小编（免费给你哦）
微信小程序工具安装与调试教程
点我

第一天

知识清单（附上视频）
29-创建项目和清理结构及配置基本外观
30-完成底部tabbar的配置
31-获取轮播图的数据
32-封装$myRequest方法并挂载到全局
33-完成首页轮播图的渲染

项目搭建

• 利用HBuilder X创建基本项目结构

• 运行项目

• 整理基本项目结构，并修改窗口外观——

需要引入的其他文件

全局变量颜色

1.page\index\index.vue

<template>
	<view class="home">
		哈喽商城-首页
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '哈喽商城'
			}
		},
		onLoad() {
		},
		methods: {
		}
	}
</script>

<style>
	
	
	
</style>

2.在pages.json里面添加

"globalStyle": {
   
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "xxx商城",
  "navigationBarBackgroundColor": "#1989fa",
  "backgroundColor": "#F8F8F8"
}

配置tabbar

• 创建tabbar对应的四个页面和图标准备好
  

• 将页面路径配置到pages.json中的pages数组中

  "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
  		{
       
  			"path": "pages/index/index"
  		},
  		{
       
  			"path": "pages/member/member"
  		},
  		{
       
  			"path": "pages/cart/cart"
  		},
  		{
       
      	"path": "pages/new/new"
  		}
  	]
  

• 配置tabbar ________pages.json

  "tabBar": {
       
    	"list": [{
       
    			"pagePath": "pages/index/index",
    			"text": "首页",
    			"iconPath": "static/icon/home.png",
    			"selectedIconPath": "static/icon/home-active.png"
    		},
    		{
       
    			"pagePath": "pages/member/member",
    			"text": "会员",
    			"iconPath": "static/icon/member.png",
    			"selectedIconPath": "static/icon/member-active.png"
    		},
    		{
       
    			"pagePath": "pages/cart/cart",
    			"text": "购物车",
    			"iconPath": "static/icon/cart.png",
    			"selectedIconPath": "static/icon/cart-active.png"
    		},
    		{
       
    			"pagePath": "pages/news/news",
    			"text": "资讯",
    			"iconPath": "static/icon/news.png",
    			"selectedIconPath": "static/icon/search-active.png"
    		}
    	]
  
    }
  

完整代码pages.json

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index"
		}
	    ,{
            "path" : "pages/member/member",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/cart/cart",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/new/new",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "xxx商城",
		"navigationBarBackgroundColor": "#aa0000",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"list": [{
				"pagePath": "pages/index/index",
				"text": "首页",
				"iconPath": "static/icon/home.png",
				"selectedIconPath": "static/icon/home-active.png"
			},
			{
				"pagePath": "pages/member/member",
				"text": "会员",
				"iconPath": "static/icon/member.png",
				"selectedIconPath": "static/icon/member-active.png"
			},
			{
				"pagePath": "pages/cart/cart",
				"text": "购物车",
				"iconPath": "static/icon/cart.png",
				"selectedIconPath": "static/icon/cart-active.png"
			},
			{
				"pagePath": "pages/new/new",
				"text": "资讯",
				"iconPath": "static/icon/new.png",
				"selectedIconPath": "static/icon/search-active.png"
			}
		]

	}
}

wechat调试工具

注意：

场景:在按照uni-app官网介绍,hbuildx创建了hello-uniapp项目,运行至浏览器或手机上都报错:依赖插件还未加载,请稍后重试 14:55:47.717 项目 ‘hello-uniapp’ 编译失败

解决办法:

HBuildX开发工具菜单工具栏,依次点击 工具–>插件安装–>安装相关插件:App真机运行\uni-app编译\uni-app调试插件,等插

---

获取轮播图数据

封装之前确保8082能运行

8082是由nodejs搭建好的服务器（资料请联系我！！！！！！！！！！！！！！）

第一步：mysql数据库创建且运行sql

下载node环境

首先：下载并且安装node环境
https://blog.csdn.net/weixin_44106334/article/details/101054431


测试node环境是否安装
node -v
npm -v
看看是否出现版本号

做到这些步骤就是安装成功了，注意改成你自己的node解压后的路径

npm config set cache “D:\Java\node\node_cache” 设置缓存
npm config set prefix “D:\Java\node\node_global” 设置成全局变量
npm config set registry https://registry.npm.taobao.org/
npm install -g cnpm --registry=https://registry.npm.taobao.org 下载cnpm

第二步：打开cmd下载npm环境并且部署8082

cnpm i

node ./src/app.js

8082成功运行才能下一步

注意：按这个路径来，一定要对应啊（主要是端口号，比如我的从3306改成了2206，）

测试8082数据

http://localhost:8082/api/getlunbo

• 封装uni.request请求，并挂在到全局

  • 创建util》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)
			}
		})
	})
}

• 在main.js中导入并挂载到全局

  import {
        myRequest } from './util/api.js'
  Vue.prototype.$myRuquest = myRequest
  

main.js

import Vue from 'vue'
import App from './App'
import {
	myRequest
} from './util/api.js'
Vue.prototype.$myRuquest = myRequest
Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
	...App
})
app.$mount()

• 获取轮播图的数据

  • 定义获取轮播图的方法——index.vue

    methods: {
           
      async getSwipers () {
           
        const res = await this.$myRequest({
           
          method: 'GET',
          url: '/api/getlunbo'
        })
        this.swipers = res.data.message
      }
    }
    

  • 在onLoad中调用该方法

    this.getSwipers()
    

实现轮播图的结构和数据渲染

• 定义轮播图的基本结构

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