uniapp基本知识-零碎

刘海583

已于 2023-09-22 13:18:00 修改

阅读量175

点赞数

分类专栏： uniapp 文章标签： uni-app

于 2023-07-20 14:27:12 首次发布

本文链接：https://blog.csdn.net/weixin_72271537/article/details/131760659

版权

uniapp 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

watch 监听

import { ref, reactive, onMounted, watch,getCurrentInstance, computed } from 'vue'

watch: {
       value(val) {
           if (val !== this.code) {
               this.code = val;
           }
       }
   },

watch(dateModel, (newV, oldV) => {
console.log(newV,'1111')
})

watch(
       () => props.id,
       val => {
console.log(val)
       }
   );

深度侦听

引用 Vue3中的watch监听

const formData = reactive({
   pay_type: '', //支付类型 1-微信 2-支付宝
   id: '', //出租电脑商品ID
   type: 1, //规格类型(sku类型) 1-时 2-天 3-月(30天)
   num: 1 //数量
})
watch(() => formData, (val) => {
   console.log(val)
}, {
   immediate: true,
   deep: true
})

登录模块

h5登录

qq登录-----uni开发的H5接入QQ登录

index.html


<script src="http://connect.qq.com/qc_jssdk.js" data-appid="101xxx069" data-redirecturi=" 'https://web.xxxxxx.com/#/pages/login/login'" charset="utf-8"></script>

注意在引入qq登录sdk必须要重启不然会报错

login.vue



<buttom @click='qqlogins'>QQ登录</buttom>

/** qq登录 */

const qqlogins=()=>{
       console.log(QC)
       QC.Login.showPopup({
           appid:101xxx069,
           redirectURI:'https://web.xxxxxx.com/#/pages/login/login'//您的回调连接
       })
   }

//获取值 {openid，access_token}

//至于用户信息可以通过后台获取get_user_info — QQ互联WIKI

微信登录

<view @click='wxLogin'>微信登录</view>

import {wxLogin} from './login.js'

import { onLoad } from "@dcloudio/uni-app";

onLoad((options)=> {//微信登录成功获取code
//console.log(options.code)

if(options?.code) const { code } = options
})

//login.js

export const wxLogin=()=>{
       const appId = 'wx5xxx6b84'APPid
   if(is_weixn()){
       doAuth(appId)
   }else{
       uni.showToast({
            icon:'none',//none success
            title: `请在微信中打开`
       })
   }
}

/* 授权 */
const doAuth=(appid)=> {
const url = encodeURIComponent('https://web.xxx.com/#/pages/login/login')//你的回调地址
const authURL =`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${url}&response_type=code&scope=snsapi_userinfo&connect_redirect=1#wechat_redirect`
   window.location.href = authURL
}

const is_weixn=()=>{ //判断是否在微信浏览器
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}

vue3 setup获取路由参数的方法

1.getCurrentInstance 方法

import { getCurrentInstance } from 'vue' //获取方法

const { proxy } = getCurrentInstance() //获取值

onMounted(()=>{
console.log(proxy.$page.options) //打印
})

2.onLoad 方法

import { onLoad } from "@dcloudio/uni-app";

onLoad((options)=> {
console.log(options) //获取参数
})

text组件

显示连续空格

<text space='ensp'> 111</text>

image组件

图片加载404或不存在图片

<image :src='list_img' @error='imageErr'></image>

        let list_img='http:xxx.png'

const imageErr=()=>{

                list_img='xxx'//本地图片路径

        }

<image :src='item.list_img' @error='imageErr(item,index)' v-for="(item,index) in list"></image>

        import { imageError } from '/utils/other.js'

const list=reactive([

{

list_img='http:xxx.png'

                }

        ])

const imageErr=(item,index)=>{

                item.list_img=''//本地文件

                item.list_img='imageError()//或者配置全局错误的方法获得同一个本地图片路径

        }

//other.js

   /* 图片显示错误返回本地默认图片 */
export   const imageError=(item,index)=>{
       return '/static/game/img.test.png'
   }

圆角

uni-popup圆角设置

<template>
   <view>
       <uni-popup ref="popup" background-color="rgba(0,0,0,0)" type="bottom">
           <view class="popups">
               底部弹出 Popup
           </view>
       </uni-popup>
   </view>
</template>

<script setup>
   import { ref, reactive, onMounted, watch, getCurrentInstance } from 'vue'
   const popup =ref(null)
   const open=(type)=>{
       popup.value.open(type)
   }
   defineExpose({open})//组件方法暴露
</script>

<style lang="scss" scoped>
   .popups{
       background-color: #fff;
       border-top-left-radius: 30rpx;
       border-top-right-radius: 30rpx;
   }
</style>

index.vue ,组件内去除滚动条

::-webkit-scrollbar{
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
}

app.vue 全局去除滚动条

::-webkit-scrollbar{
   display: none;
   width: 0 !important;
   height: 0 !important;
   -webkit-appearance: none;
   background: transparent;
   }

api

get--后缀添加参数

/**
* xxxxx
* @param String id
*/
export const ClustersDetail = (id) => request({
url: ApiUrl.YUN_CLUSTERS_DETAIL,
params: {id}
})

uni提示

uni.showLoading({
   title: "加载中",
   mask: true, // 显示透明蒙层，防止触摸穿透
   });

uni.hideLoading() // 关闭loading

uni.showToast({
icon:'error',//none success
title: `${err?err:'提交失败'}`
})

路由-页面通信

uni.$emit('update',true)//子页面发送页面更新信息

import { onShow } from "@dcloudio/uni-app";

onShow(()=>{//父页面接受数据
       // console.log(e)
       uni.$on('update',(data)=>{
       // TODO 下面执行刷新的方法
           if(data){//传递值


           }
       })
   })

数据存储与读取

1.存储

uni.setStorage({//异步
	key: 'storage_key',
	data: 'hello',
	success: function () {
		console.log('success');
	}
});

uni.setStorageSync(KEY,DATA) //同步

2.获取

获取指定 key 对应的内容

uni.getStorage({//异步
	key: 'storage_key',
	success: function (res) {
		console.log(res.data);
	}
});

uni.getStorageSync(KEY) //同步

获取storage 的相关信息

uni.getStorageInfo({//异步
	success: function (res) {
		console.log(res.keys);
		console.log(res.currentSize);
		console.log(res.limitSize);
	}
});

try { //同步
   const res = uni.getStorageInfoSync();
   console.log(res.keys);
   console.log(res.currentSize);
   console.log(res.limitSize);
} catch (e) {
   // error
}

3.清除数据

移除指定 key

uni.removeStorage({//异步
	key: 'storage_key',
	success: function (res) {
		console.log('success');
	}
});

uni.removeStorageSync('storage_key');//同步

清理本地数据缓存

uni.clearStorage() //异步

uni.clearStorageSync();//同步

网络状态

1.获取网络类型。

uni.getNetworkType({
	success: function (res) {
		console.log(res.networkType);
	}
});

2.监听网络状态变化

uni.onNetworkStatusChange(function (res) {
	console.log(res.isConnected);
	console.log(res.networkType);
});

3.取消监听网络状态变化。

CALLBACK必须为调用uni.onNetworkStatusChange时传入的CALLBACK

var CALLBACK = function(res) {
    // ...这里写你的业务逻辑
}
uni.offNetworkStatusChange(CALLBACK)
uni.onNetworkStatusChange(CALLBACK);

uni的方法

防抖--只执行最后一次

let timeout = null

const onChange=(e)=>{
   if(timeout !== null) clearTimeout(timeout)
   timeout = setTimeout(()=>{//执行防抖方法
       userStore.updatelocation(e.detail.x,e.detail.y)
   }, 200)
}

节流 --1000ms执行一次

let timeout = false

const buttonTap=()=>{
   if(timeout){// 利用 return 终止函数继续运行
       return false;
   }
   console.log('按钮点击函数执行');
   // 执行函数
   timeout = true;
   setTimeout(()=>{
       // 模拟执行完毕
       // 改变 timeout
       timeout = false;
   }, 1000);
}