devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

你还不会零基础的uniapp吗-uniapp一周实战——第一、二天_uniapp能一周学完并上线

作者：小小林熬夜学编程 | 2024-03-22 01:14:37

赞

踩

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>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

2.在pages.json里面添加

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

在这里插入图片描述

配置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"
		}
	]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

  • 配置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"
  		}
  	]

  }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

完整代码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"
			}
		]

	}
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69

在这里插入图片描述
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
看看是否出现版本号


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

在这里插入图片描述

做到这些步骤就是安装成功了，注意改成你自己的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

  • 1

在这里插入图片描述

node ./src/app.js

  • 1

8082成功运行才能下一步
在这里插入图片描述
注意：按这个路径来，一定要对应啊（主要是端口号，比如我的从3306改成了2206，）
在这里插入图片描述
测试8082数据

http://localhost:8082/api/getlunbo

  • 1

在这里插入图片描述

  • 封装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)
			}
		})
	})
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

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

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

    • 1
    • 2
    • 3

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()


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

  • 获取轮播图的数据

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

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

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12

    • 在onLoad中调用该方法

      this.getSwipers()

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

  • 定义轮播图的基本结构

    <template>
<view class="home">
    • 1
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/284179
推荐阅读