Uniapp Note

B1293773843

已于 2022-04-11 17:01:23 修改

阅读量1k

点赞数 1

分类专栏： JavaScript uniapp 文章标签： vue.js 前端

于 2022-04-09 12:29:49 首次发布

本文链接：https://blog.csdn.net/weixin_58562753/article/details/124051237

版权

JavaScript 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

uniapp

1 篇文章 0 订阅

订阅专栏

实现路由跳转，需要在page.json中配置页面路径(路由),和页面的样式、导航栏。

page.json中的组件就是页面组件。

若不在page.json中配置，无法跳转页面。相当于router下的index.js。

{
	"easycom": {
			"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			//样式
			"style": {
				//顶部导航栏
				"navigationBarTitleText": "首页",
				"navigationBarBackgroundColor":"#4CD964",
				"navigationBarTextStyle":"white",
				"navigationStyle":"custom",
				//下拉刷新
				"enablePullDownRefresh":false
			}
		}
	    ,{
            "path" : "pages/home/home",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "欢迎页",
                "enablePullDownRefresh": false
            }   
        }
        ,{
            "path" : "pages/classify/classify",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
        },
		{
			"path" : "pages/my/my",
			"style" :                                                                                    
			{
			    "navigationBarTitleText": "title",
			    "enablePullDownRefresh": false
			}
		}
        ,{
            "path" : "pages/detail/detail",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/detail/detail",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	//全局样式
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "mcake",
		"navigationBarBackgroundColor": "#F1F1F1",
		"backgroundColor": "#F8F8F8"
	},
	//底部导航
	"tabBar":{
		"color":"#d8d8d8",
		"selectedColor":"#444",
		//数组
		"list":[
			{
				"text":"首页",
				"pagePath":"pages/index/index",
				"iconPath":"static/logo.png",
				"selectedIconPath":"static/logo.png"
			},
			{
				"text":"欢迎",
				"pagePath":"pages/home/home",
				"iconPath":"static/logo.png",
				"selectedIconPath":"static/logo.png"
			},
			{
				"text":"分类",
				"pagePath":"pages/classify/classify",
				"iconPath":"static/logo.png",
				"selectedIconPath":"static/logo.png"
			}
		]
	}
}

路由跳转

在页面中的组件中跳转时，要以页面为相对路径。

可通过在url后面追加参数传值。

uni.navigateTo({url:'../home/home'})不能跳转底部菜单页

uni.switchTab({url:'../home/home'})用来跳转底部菜单页

uni.redirectTo 相当于router-link 的 replace 属性、$router.replace()

<template>
	<view class="cont">
		<view class="padding bg-fff">
			<view class="flex">
				<view class="grid">
					<text class="iconfont icon-danju" @click="handleDetail('msg')">1234</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			handleDetail(msg){
				uni.navigateTo({
					url:'../detail/detail?msg='+msg,
					animationType: 'pop-in',
					animationDuration: 200
				})
				/*
				uni.redirectTo({
					url:'../detail/detail?msg='+msg
				})*/
			}
		}
	}
</script>

<style lang="scss">
page{
	//background-color: #F9D7EA;
}
</style>

<template>
	<view>
		这是细节页面
		<button type="primary" @click="handleBack">
			返回上一页
		</button>
		<button type="default" @click="handleHome">
			访问Home页面
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			handleBack(){
				uni.navigateBack({
					delta:1,
					animationType: 'pop-out',
					animationDuration: 200
				})
			},
			handleHome(){
				//不能跳转底部菜单页
				/*uni.navigateTo({
					url:'../home/home'
				})*/
				//跳转底部菜单页
				uni.switchTab({
					url:'../home/home'
				})
			}
		},
		onLoad(options){
			console.log(options);
		}
	}
</script>

<style lang="scss">

</style>

组件

页面组件和公共组件(pages和components)

页面组件路由跳转。公共组件与vue相同，引入、注册、创建实例。

页面组件生命周期onload，created。公共组件created，没有onload。

computed,watch,methods通用。

页面组件的生命周期

Uniapp维护一个页面栈，缓存用户访问过的一些页面。

onLoad调用一次，一般用于页面初始化加载数据

onShow每次打开当前页面都会调用。没登录进入个人中心---->登录----->返回个人中心

此时需要把渲染用户信息的代码放在个人中心的onShow里面。

应用生命周期

App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。

但App.vue本身不是页面，这里不能编写视图元素。

这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData

应用生命周期仅可在App.vue中监听，在页面监听无效。

公共组件的全局注册和局部注册

与vue相同。在main.js中：

//挂载全局组件
import homeTitle from "./components/home-title.vue"
Vue.component("home-title",homeTitle)

uniapp中组件通信

components公共组件:props。

vuex，(小程序不支持)

在父组件中给子组件绑定自定义事件，事件回调在父组件，子组件触发事件(this.$emit('method'))，父组件触发事件回调。

全局事件总线...

页面传值

发送请求

let baseURL = ""
export const $http = function(url,method='GET',data={}){
	//返回一个promise对象
	return new Promise((res,rej)=>{
		uni.request({
			url:baseURL + url,
			method,
			data,
			success:(res)=>{
				//返回成功的promise,传递参数
				resolve(res.data)
			},
			fail:(err)=>{
				//返回失败的promise
				reject(err)
			}
		})
	})
}

export const $get = function(url,data={}){
	return $http(url,'GET',data)
}

export const $post = function(url,data={}){
	return $http(url,'POST',data)
}

export const $put = function(url,data={}){
	return $http(url,'PUT',data)
}

export const $delete = function(url,data={}){
	return $http(url,'DELETE',data)
}


// 方法3:
this.$get('/1.1/classes/classify').then(res=>{
    console.log(res);
})
this.$get('/1.1/classes/banner').then(res=>{
    console.log(res);
    this.banner = res.results
})

用户登录信息持久储存

异步存储：

有回调函数

import {$post} from '../utils/request.js'
export default {
	namespaced:true, //开启命名空间后，访问所有属性都需要带模块名
	state(){
		return {
			userInfo:null,
			info:null
		}
	},
	mutations:{
		initInfo(state,info){
			state.userInfo = info
		},
		setStorageInfo(state,info){
			state.info = info;
			//异步
			uni.setStorage({
				key:'userInfo',
				data:info
			})
		},
		setInfo(state,info){
			state.info = info;
		}
	},
	actions:{
		
	}
}

同步存储：

异步获取:

有回调函数

同步获取:

刷新后使用户信息依然存在:

在应用生命周期中尝试提取本地储存

<script>
	export default {
		//当uni-app 初始化完成时触发（全局只触发一次）
		//刷新时触发
		onLaunch: function() {
			console.log('App Launch')
			try{
				const value = uni.getStorageSync('userInfo');
				if(value){
					console.log(value)
					this.$store.commit("user/setInfo",value)
				}
			}catch(e){
				console.log(e);
			}
		},
		//当 uni-app 启动，或从后台进入前台显示
		onShow: function() {
			console.log('App Show')
		},
		//当 uni-app 从前台进入后台
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	@import "uview-ui/index.scss";
</style>

清除本地缓存