uni-app2

最新推荐文章于 2024-03-10 10:12:07 发布

weiweiweb888

最新推荐文章于 2024-03-10 10:12:07 发布

阅读量668

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weiweiweb888/article/details/122200889

版权

二、路由导航

组件导航：

<!-- 1.组件进行跳转   -->
<navigator url="../list/list" open-type="navigate">
    <button type="default">跳转到list页面</button>
</navigator>
<navigator url="../list/list" open-type="redirect">
    <button type="default">跳转到list页面</button>
</navigator>
<navigator url="../mine/mine" open-type="switchTab">
    <button type="default">跳转到my页面</button>
</navigator>

api

methods: {
    toPage(){
        // 1.保留当前页面
        uni.navigateTo({
            url:"../list/list"
        })
    }
}

接收参数

传递参数：
	使用url地址传递： ？ &
        
接受参数：
	1.使用onload生命周期函数
    2.使用this.$mp.query获取参数

三、运行环境判断

(1)uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。
(2)在HBuilderX 中，点击“运行”编译出来的代码是开发环境，点击“发行”编译出来的代码是生产环境

代码案例

// var  baseUrl = "http://localhost:3000";
// var  baseUrl = "https://api.aslegou.top";
// 生产环境  开发环境
var  baseUrl;
if(process.env.NODE_ENV === "development"){
	baseUrl = "http://localhost:3000"
}else{
	baseUrl = "https://api.aslegou.top"
}

export  default{
	baseUrl
}

四、平台判断

平台判断有2种场景，一种是在编译期判断，一种是在运行期判断。

能够很好的处理多平台兼容问题。

1编译期判断 (条件编译)

语法：

代码编写完成之后，编译器进行编译；编译期就是在编译的时候，将代码已经换分完毕；

1.只在当前平台运行的代码
注释#ifdef  平台  【H5，MP-weixin，app】
	代码块
注释#endif

2.除了当前平台都运行的代码
注释#ifndef 平台
	代码块
注释#endif

3.多个平台运行的代码
注释#ifdef  平台 || 平台
	代码块
注释#endif

代码：

模板中使用

<!-- #ifdef H5 -->
<button type="primary" @click="change" style="width: 70%;">{{ title }}</button>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<button type="warn" @click="change" style="width: 70%;">{{ title }}</button>
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<button type="default">除了小程序</button>
<!-- #endif -->
<!-- #ifdef  H5 || MP-ALIPAY -->
<button type="default">按钮</button>
<!-- #endif -->

js中使用

click(){
    // console.log('123')
    // #ifdef H5
    console.log("H5")
    // #endif
    // #ifdef MP-WEIXIN
    console.log("微信小程序")
    // #endif
},

json中使用

// #ifndef H5
{
    "text":"购物车",
    "pagePath":"pages/cart/cart"
},
// #endif

css中

.btn{
    /* #ifdef H5 */
    background-color: #4CD964;
    /* #endif */
    /* #ifdef MP-WEIXIN */
    background-color: #F0AD4E;
    /* #endif */
},

2运行期判断

判断运行环境（ios，android，windows，devtools）

代码：

// 运行期判断
click1(){
    // ios  打印我是ios
    // android  打印安卓
    // pc 
    // 小程序
    // console.log('1')
    var platform = uni.getSystemInfoSync().platform;
    // console.log(platform)
    switch(platform){
        case "ios":
            console.log("ios运行")
            break;
        case "android":
            console.log("android运行")
            break;
        case "windows":
            console.log("pc运行")
            break;
        case "devtools":
            console.log("小程序运行")
            break;
    }
},

五、网络请求

1数据请求

语法

uni.request({})

代码

getData(){
    uni.request({
        url:"http://localhost:3000/v1/goods",//服务器地址
        data:{},//参数
        method:"get",
        header:{
            "content-type":"application/json"
        },
        success(res){
            console.log(res)
        },
        fail(err){
            console.log(err)
        }
    })
}
login(){
    uni.request({
        url:"http://localhost:3000/v1/login",//服务器地址
        data:{
            user:"admin",
            pass:123456
        },//参数
        method:"post",
        header:{
            "content-type":"application/json"
        },
        success(res){
            console.log(res)
        },
        fail(err){
            console.log(err)
        }
    })
},

2模块封装promise

config.js

// var  baseUrl = "http://localhost:3000";
// var  baseUrl = "https://api.aslegou.top";
// 生产环境  开发环境
var  baseUrl;
if(process.env.NODE_ENV === "development"){
	baseUrl = "http://localhost:3000"
}else{
	baseUrl = "https://api.aslegou.top"
}
var  version = "/v1"
export  default{
	baseUrl,version
}

http.js

// const config = require("./config");
// config.baseUrl = "http://localhost:3000"
import  config  from "./config.js"
const http = (option = {}) => {
	// console.log(config.baseUrl + config.version + option.url);
	// return;
    // option = {url,data,method,header,timeout}
    return new Promise((resove, reject) => {
        wx.request({
            url: config.baseUrl + config.version + option.url, //服务器地址
            data: option.data ||  {},
            method:option.method  || "get", // get默认值
            header: option.header || {
                "content-type": "application/json"
            },
            timeout:  option.timeout || 60000,
            // success:resove,
            success: (res) => {
                resove(res)
            },
            fail:(err)=>{
                reject(err)
            }

        })
    })
}

module.exports = http;

main.js

import  http  from  "utils/http.js";
Vue.prototype.$http = http;

页面使用

async getDataByHttp(){
    // var  option = {
    // 	url:"/goods"
    // }
    // var res = await http(option);
    // console.log(res)
    // var  option = {
    // 	url:"/login",
    // 	data:{
    // 		user:"admin",
    // 		pass:"123456"
    // 	},
    // 	method:"post"
    // }
    // var res = await http(option);
    // console.log(res)
    var  option = {
        url:"/login",
        data:{
            user:"admin",
            pass:"123456"
        },
        method:"post"
    }
    var res = await this.$http(option);
    console.log(res)
},

注意事项：

(1)请求的 header 中 content-type 默认为 application/json。
(2)网络请求的超时时间可以统一在 manifest.json 中配置 networkTimeout。
(3)H5 端本地调试需注意跨域问题
方案1：最利索的，当然还是将前端代码和后端接口部署在同域的web服务器上
方案2：由后台服务器配置策略，设为允许跨域访问。
(4)localhost、127.0.0.1等服务器地址，只能在电脑端运行，手机端连接时不能访问。请使用标准IP并保证手机能连接电脑网络

六、uView组件库

uView UI，是uni-app生态最优秀的UI框架，全面的组件和便捷的工具。

1安装

(1)安装说明

由于uView使用easycom模式，让您无需引入组件即可直接使用，但是此功能需要Hbuilder X 2.5.5及以上版本才支持，详见配置easycom组件模式。 easycom打包的时候是按需引入的，您可以放心引入uView的整个组件库，发布打包时会自动剔除您没有使用的组件(注意：调试时仍然是全部引入的)
请确保您下载的Hbuilder X为APP开发版，而非标准版，并且在"工具-插件安装"中安装了"scss/sass编译"插件
在uni-app插件市场右上角选择使用HBuilder X 导入插件或者下载插件ZIP
如果您的项目是由HBuilder X创建的标准uni-app项目，将下载后的uview-ui文件夹，复制到项目根目录。
下载地址

https://ext.dcloud.net.cn/plugin?id=1593
将解压后的uview-ui文件夹直接复制到项目的根目录即可

2配置【下载安装方式配置】

根据路径，把整个的解压之后的文件夹，直接放入项目的根目录（注意名字问题）

（1）引入uView主JS库

在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

//导入ui库
import uView from "uview-ui";
Vue.use(uView);

（2）在引入uView的全局SCSS主题文件

在项目根目录的uni.scss中引入此文件。

/* uni.scss */
@import 'uview-ui/theme.scss';

（3）引入uView基础样式

在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

<style lang="scss">
	/*每个页面公共css */
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>

（4）配置easycom组件模式

此配置需要在项目根目录的pages.json中进行。

注意事项：

uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。
请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。

代码案例

pages.json

{
    "easycom": {
		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	},
}

3快速使用

在pages.json中配置easycom模式，在页面的魔板中，可以直接使用组件

<u-icon name="search"></u-icon>
<u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>

七、工程初始化

1项目介绍

（1）界面介绍

（2）项目运行

（3）接口分析

2服务端初始化

（1）数据库初始化

1.创建数据库shop_db
2.导入数据库sql文件
3.进行接口参数的配置
	shop_api项目--config--global.js 填写数据库信息 名字、密码

（2）接口运行

1.进入shop-api项目
2.执行npm install
3.npm start

（3）后台系统运行

1.进入shop-admin项目
2.执行npm install
3.npm start

3工程创建

4导入工程模板（静态页面）

5工程运行

6网络请求Promise封装

(1)配置文件config.js

(2)网络封装

(3)挂载

tips4

八、首页数据

1骨架屏

https://www.uviewui.com/components/skeleton.html 骨架屏位置

骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。

该组件原理是通过uni的uni.createSelectorQuery接口，查询页面带有指定类名的元素的位置和尺寸，通过绝对定位的方式，用同样尺寸的灰色块定位到相同的位置。所以要求在请求数据尚未完成时，填写一些模拟数据，才能让对应的元素有对应的尺寸和位置.

组件名称：

u-skeleton

类名要求：

u-skeleton(必须)，该类名用于页面的最外层元素，供骨架屏组件查询和定位出绘制骨架的位置和尺寸
u-skeleton-circle(可选)，该类名用于页面的圆形元素，供骨架组件描绘出圆形的骨架块
u-skeleton-rect(可选)，该类名用于页面的矩形元素，供骨架组件描绘出矩形的骨架块
u-skeleton-fillet(可选)，该类名用于页面的矩形带圆角元素，供骨架组件描绘出矩形带圆角的骨架块

组件API：

Props

参数	说明	类型	默认值	可选值
el-color	骨架块状元素的背景颜色	String	#e5e5e5	-
bg-color	骨架组件背景颜色	String	#ffffff	-
animation	骨架块是否显示动画效果	Boolean	false	true
border-radius	`u-skeleton-fillet`类名元素，对应的骨架块的圆角大小，单位rpx	String \| Number	10	-
loading	是否显示骨架组件，请求完成后，将此值设置为`false`	Boolean	true	false

2商品分类快速导航

组件：u-tabs

接口

  http://localhost:3000/api/getcate

获取数据


// 1.获取一级分类信息
async  getFirstCates(){

    var option = {
        url:"/getcate",
    }
    var res = await  this.$http(option)
    // console.log(res)
    this.firstCates = res.data.list;
}

导航切换

// 2.点击一级分类，进入商品列表页面
toGoodListPage(index){
    // console.log(index)
    this.firstCateIndex = index;
    uni.navigateTo({
        url:"../goodlist/goodlist"
    })
},

3商品活动banner

https://www.uviewui.com/components/swiper.html 组件地址

组件： u-swiper

接口

http://localhost:3000/api/getbanner

获取数据、图片路径

// 3.获取轮播图信息
async getBanners(){
    var option = {
        url:"/getbanner",
    }
    var res = await  this.$http(option)
    // console.log(res)
    // 处理图片路径问题
    res.data.list.map((item,index)=>{
        res.data.list[index].img =  this.$config.baseUrl +item.img
    })
    this.bannerlist = res.data.list
},

点击活动图片，进行活动页面

// 4.点击轮播图，跳转到活动界面
toActivePage(){
    uni.navigateTo({
        url:"../active/active"
    })
},

4商品秒杀活动

https://www.uviewui.com/components/countDown.html 组件地址

组件： u-count-down

通过timestamp参数设置倒计时间，单位为秒

接口

  http://localhost:3000/api/getseckill

获取数据/实现倒计时

// 5.获取秒杀活动信息
async  getSeckill(){
    var option = {
        url:"/getseckill"
    }
    var res = await  this.$http(option)
    this.obj = res.data.list[0];
    // console.log(res)
    this.actionTime(this.obj)
},

封装方法

// 7.处理时间
actionTime(obj){
    var ntime = new  Date().getTime() / 1000; //秒
    var btime = obj.begintime / 1000// 秒
    var etime = obj.endtime / 1000;
    // 1.如果当前时间 < 活动开始的时间
    // btime - ntime     活动开始
    if(ntime < btime){
        this.timestamp = btime - ntime;
        this.activeName ="距离活动开始"
    }else if(ntime >= btime && ntime < etime ){
        // 2.如果当前时间 >= 活动开始时间 &&  当前时间 < 活动结束时间
        // etime - ntime     活动进行中
        this.timestamp = etime - ntime;
        this.activeName ="活动进行中"
    }else{
        // 3 如果当前时间 >= 活动结束时间
        //  活动结束
        this.activeName ="活动结束"
    }	
},

倒计时完成

当前组件自带的end方法触发的函数 @end=“countDownEnd”

// 6.倒计时为0的时候触发
countDownEnd(){
    // console.log('0')
    this.actionTime(this.obj)
},

weiweiweb888

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
uni-app2

/**@ course 导航、环境判断、平台判断、网络请求、uView组件库、项目初始化、首页数据、商品分类列表*@ author 赵维东*@ time 2021/12/17**/一、作业讲解二、路由导航组件导航：<navigator url="../list/list" open-type="navigate"> <button type="default">跳转到list页面</button
复制链接

扫一扫