草庐IT

uni-captcha

全部标签

在uni-app使用vue3进行store全局数据共享

文章目录前言一、工程准备二、使用步骤1.在项目目录中新建一个store目录,并且新建一个index.js文件2.配置main.js文件3.在自定义组件中引用4、效果前言在uni-app中使用vue3进行store的全局数据共享,网上文章太杂了,记录一下自己写的一个最简单易懂的例子,以供自己后面需要用到时候可以最直观的知道到底怎么实现一、工程准备二、使用步骤1.在项目目录中新建一个store目录,并且新建一个index.js文件在index.js中写入代码如下(示例):uni-app好像内置vuex,不需要额外下载,如果记错了的话就得先去下载好import{createStore}from'vu

图文详解uni-app PC端宽屏适配方案

图文详解uni-appPC端宽屏适配方案随着互联网的发展,iOS、Android、H5以及各种小程序快应用层出不穷,随之而来的问题就是如何用一套代码,适配多个平台,其中uni-app表现优异,已经实现了手机端全覆盖,支持iOS、Android、H5、微信小程序、阿里小程序、百度小程序、字节跳动小程序、QQ小程序、快应用、360小程序,并且在各端均有优异的运行性能。并且从2.9版本起,uni-app进一步提供了PC等宽屏的适配方案,完成了大统一。具体怎么用,我们下面用一个简单的案列让大家直观感受:比如现在的需求是,一个列表卡片,点击卡片进入卡片详情页,在小程序,ios,Android,以及h5上

uni-App

uni-app入门学习以下内容仅作为个人的学习总结uni-app介绍uni-app是一个开发前端应用的框架,写一套代码,可发布到多种平台。运行uni-app项目需要安装hbuliderX前端开发工具。下载地址HBuilderX工具下载地址下载完HBuilder后,解压压缩包,找到HBuilder.exe,右键-点击发送到桌面即可创建桌面快捷方式。HBuilder注册账户、获取APPid这一步是为了让uniapp运行到微信小程序。点击上图红色箭头,在如下界面注册一个账户,登录。创建Project在HBuilder界面,点击file-new-project,见下图。上述操作后,在左侧栏选择unia

uni-app的常用 使用指南

uni-app中常用功能记录1、加载动画显示消息提示框自带api功能https://uniapp.dcloud.io/api/ui/prompt?id=showloadinguni.showLoading({//开启动画title:'加载中'//动画提示文字});setTimeout(()=>{uni.hideLoading();//动画关闭},2000);//显示消息提示框。uni.showToast({ title:'标题', duration:2000});2、宫格布局组件宫格布局https://uniapp.dcloud.io/component/uniui/uni-grid修改sha

Uni-app组件使用

一、组件的介绍:组件是视图层的基本组成单元。是一个单独且可复用的功能模块的封装。组件名称是由尖括号包裹的,可以看成一个语义化标签,是有开始标签和结束标签的。如下举个简单的例子:uni-card> //这是开始标签text>这是一个基础卡片示例,内容较少,此示例展示了一个没有任何属性不带阴影的卡片。text>uni-card>//这是结束标签官网文档权威解释:基础知识的文档跳转到:组件使用的入门教程|uni-app官网uni-app的组件,分为基础组件和扩展组件。基础组件可以直接使用,不需要再注册内置组件。基础组件主要分为以下几大类 详情可以到官方文档根据需求进行了解和使用。扩展组件,则需要进行

uniapp路由—— uni-simple-router

要在uniapp中使用路由守卫,uniapp原生的api是比较欠缺的,所以要用‘uni-simple-router’插件包安装//项目根目录执行命令行下载稳定版本npminstalluni-simple-router@2.0.7//根据pages.json总的页面,自动构建路由表npminstalluni-read-pages配置vue.config.js注:如果根目录没有vue.config.js文件,要手动创建//vue.config.jsconstTransformPages=require('uni-read-pages')const{webpack}=newTransformPage

uni-app 根据用户不同身份显示不同的tabBar

最近在一个uni-app项目中遇到一个需求,在登录页面成功登录以后需要判断身份,不同的身份的进入不同的tabBar页面,但是在uni-app项目中pages.json中的tabBar的list数组只有一个,且不能写成动态的,那如何实现这个需求呢?答案是需要我们自定义tabBar。1、我们确定在pages.json文件中的pages数组中的第一个页面就是进入程序时展示的第一个页面,那这个页面肯定就是我们的登录页面了。2、将pages.json中的tabBar的list设置为空数组,即不再使用默认系统自带的tabBar组件。3、创建tabBar.vue组件,组件内的代码内容如下。{{item.te

【uniapp&微信小程序】封装uni.request()

前言    在项目开发过程中,往往需要对请求进行二次封装,这篇文章将对uni.request()进行二次封装,并实现多个环境的请求配置,对请求方式,数据格式等进行封装,将请求做到最简化。一.封装uni.request()第一步基于uni.request()进行二次封装,集成项目开发中需要的参数及方法。新建src/request/index.ts文件内容如下: /***创建request请求*@returns*/constrequest=(url:string,//接口地址type:'OPTIONS'|'GET'|'HEAD'|'POST'|'PUT'|'DELETE'|'TRACE'|'CON

关于uni-swipe-action-item 点击时,在小程序开发工具中报错ReferenceError: isPC is not defined

示例代码 错误描述当滑动后点击取消或者删除时在微信小程序报错(h5没问题),如下 问题分析个人感觉是官方写组件的时候,源码逻辑只在h5平台才去加载isPC函数,但是在调用的时候不区分平台,所以才会其他平台全部报错。解决办法把“你自己项目路径/uni_modules/uni-swipe-action/components/uni-swipe-action-item/mpwxs.js”//#ifdefH5import{isPC}from"./isPC"//#endif改成:letisPC=function(){returnfal

uni-app日历组件(calendar),兼容安卓、ios、微信、百度、抖音小程序

uni-app日历组件,兼容安卓、ios、微信、百度、抖音小程序效果图插件连接如何使用参数说明事件效果图插件连接插件链接:https://ext.dcloud.net.cn/plugin?id=7839/如何使用template> tmt-calendardefaultDate="2021-11-03":point-list="['2022-03-20','2022-04-01','2022-04-02','2022-04-05']":show="true"@changeDate="changeDate">tmt-calendar>template>参数说明参数说明类型可选值默认值pointL