uniapp

UniApp是一款基于Vue.js开发框架的多端应用开发工具，它的目标是使开发者能在一次编写的代码基础上同时在多个平台上运行，包括iOS、Android、H5、小程序等。UniApp的出现极大地提升了开发效率和用户体验，下面通过一个具体的案例来介绍UniApp的强大功能。 以某家锁具品牌“”为例，月 ......

导语：在日常 APP 开发过程中，经常要用到数据的存储、获取和删除等操作以及页面导航之间的跳转，为此，封装了一个两个简单的方法来统一调用。 目录 原理分析 方法实现 实战演练 案例展示 原理分析 主要是以下 API。 uni.setStorage：保存数据到本地缓存中； uni.getStorage ......

Pinia 是一个用于 Vue.js 的状态管理库，是 Vue 的存储库，它允许您跨组件提供了更简单、直观的 API，适用于管理和共享应用程序的状态, Pinia 和 Vuex 都是流行的 Vue.js 状态管理库，它们都有自己的优点和适用场景。下面是对 Pinia 和 Vuex 的简要比较： 方便 ......

前言：uni_modules里面的插件会全部打包在主包里，分包如果都是引用了uni_modules的插件，那么会导致包体积越来越大。 我的项目主要用到一些组件库，如uview，对这个库的依赖太严重了，加上是把2个小程序融合到一起，所以对这个库的依赖就会变得更多。 解决方案：你的小程序是用uniapp ......

主要属性： handleScrollToLower <template> <view class="menu"> <scroll-view id="scrollContainer" class="scroll" scroll-y @scrolltolower="handleScrollToLower ......

> 导语：在日常 APP 开发过程中，经常要进行文件的保存、读取列表以及查看和删除文件等操作，接下来就看一下具体的方法。 ## 目录 - 原理分析 - 方法实现 - 实战演练 - 案例展示 ## 原理分析 主要是以下 API。 - `uni.saveFile`：保存文件到本地缓存列表； - `uni ......

> 导语：在日常开发过程中，前端经常要和后端进行接口联调，获取并且渲染数据到页面中，接下来就总结一下 uniapp 中获取请求、文件下载和上传的一些方法。 ## 目录 - 原理分析 - 方法实现 - 实战演练 - 案例展示 ## 原理分析 主要是使用`uni.request`方法来发送请求，`uni ......

# Uniapp 页面&组件生命周期 ## 页面的生命周期 uni-app 支持如下生命周期函数： onLoad 监听页面加载，其参数为上个页面传递的数据，参数类型为object（用于页面传参） onShow 监听页面显示 onReady 监听页面初次渲染完成 onHide 监听页面隐藏 onUnl ......

uniapp的开发发初期，我都是模拟相应的模板进行处理的，自己写样式基本上都会变形，在这里再说一下，css我是真的弱啊 做了一个登陆之后，发现还不错，不得不承认真的很简单 然后就是今天客户那国忽然说是项目不做了，晕~~老客户了，去拜访一下看看为啥，是不是时间还是太长了 不过就算不做，我也进步了很多， ......

利用5+app native.js io文件管理模块 ``` 1.新建js文件 // 文件写入 export const writeFileIos = function(filename, data) { plus.io.requestFileSystem( plus.io.PUBLIC_DOCUM ......

export function toMapAPP(latitude,longitude,name) { let url = ""; if (plus.os.name == "Android") { //判断是安卓端 plus.nativeUI.actionSheet({ //选择菜单 title: ......

> 导语：很多时候手机设备会突然没网,这时候就需要一个网络检测组件,在没网的时候显示提示用户,提供用户体验。 ## 目录 - 准备工作 - 原理分析 - 组件实现 - 实战演练 - 案例展示 ## 准备工作 - 在`components`新建一个`q-online`文件夹，并新建一个`q-onlin ......

` ` ts的代码： `` 相当于 v-model ` ` 主要是因为 uniapp 的v-model 编译之后无法支持 微信小程序，所以要麻烦很多 转成 :value + @change 来实现 ......

微信隐私保护协议指南 一天天没事闲的 01 在manifest.json 中添加一行 "__usePrivacyCheck__" : false 02 自定义一个弹窗组件 这个弹窗样式随便 主要得包含三个功能组件 1、用于调用wx.openPrivacyContract() Api wx.openP ......

代码： ​```` /** * 读取文件 * @param {string} path - 文件的绝对路径 */ function readFile(path) { const filePath = plus.io.convertLocalFileSystemURL(path); const fil ......

> 在 APP 的日常开放过程中，我们经常可以看到上拉刷新、下拉刷新、左滑、右滑、触底加载等效果，那其中的原理是如何呢，又是如何实现的呢，下面就一探究竟。这篇文章主要是讲述自定义滑动触摸组件的方放，兼容网页 H5 端、微信小程序端和 App 端。 ## 目录 * 准备工作 * 原理分析 * 组件实现 ......

场景：如何将获取到的内网服务器的文件，传给我们的后台，把文件保存下来？ 1.使用uni.downloadFile() 获取到文件的临时路径 2.uniapp导入安装的的插件“image-tools”，把临时路径转化成base64传给后台。 注意点：如果同时解析多个xml文件，后台可能会接收到乱码的情 ......

在unipp小程序开放平台上申请，不申请无法使用 申请成功后，点击详情，appID很重要，微信小程序是写在app.json里，uniapp是写在源码视图里 文档介绍(https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/u ......

**avue表单组件后台拖拉拽框架avue-form-design：https://github.com/sscfaith/avue-form-design** **avue表单组件后台拖拉拽框架avue-form-design在移动端vant框架与uniapp框架下的动态渲染转换适配** 待补充 ......

## 1、App.vue文件 ``` ``` ## 2、appUpdate.js文件 ``` //APP更新 import { http } from '@/common/service/service.js' export default function appUpdate() { uni.re ......

需求：在现有已经做好的后台管理系统添加一个切换主题颜色的功能 分析：该项目用了很多uniapp的组件，css样式没有统一，类名也没有统一 使用混合mixin.scss,并使用vuex 效果图 功能：按钮背景颜色、部分样式、字体图标、分页跟随主题颜色变化也变化 每一个用户喜欢的主题颜色都不一样，后端已 ......

<u-button size="mini"style="background-color: #3ac908;color: #ffffff;font-size: 16rpx;width: 110rpx;height: 50rpx;" @tap="onUpload">上传</u-button> // 以 ......

上代码 隐私组件代码 直接复制 就能用 <template> <view class="zero-privacy" :class="[{'zero-bottom':position=='bottom'}]" v-if="showPrivacy"> <view class="zero-privacy- ......

> 有时候一个页面请求接口需要加载很长时间，这时候就需要一个加载页面来告知用户内容正在请求加载中，下面就写一个简单的自定义加载组件。 ## 目录 - 准备工作 - 逻辑思路 - 实战演练 - 效果预览 ## 准备工作 在之前的全局组件目录`components`下新建一个组件文件夹，命名为`q-lo ......

uni-ui 官网地址https://uniapp.dcloud.net.cn/component/uniui/quickstart.html 1.安装sass、sass-loader npm install sass -D npm install sass-loader -D 2.安装uni-ui ......

1.打开项目，打开pages.json ，设置底部导航栏。注意pages中的path和tabBar中list中的path要一致 { "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" ......

1.创建vue3+vite ``` # 创建以 javascript 开发的工程 npx degit dcloudio/uni-preset-vue#vite my-vue3-project # 创建以 typescript 开发的工程 npx degit dcloudio/uni-preset-v ......

> 之前自定义了顶部和底部导航栏，那接下来就写一个简单的二级页面，这个是出了导航页面之外经常用到的。 ## 目录 - 结构 - 模板 - 样式 - 方法 - 示例 ## 结构 一个普通页面的结构应该是如下所示： ```html 列表内容 ``` ## 模板 uniapp 内置了常用的组件，可以直接使 ......

> 本篇主要讲述如何自定义顶部导航栏，有时候默认导航栏不足以满足我们的需求，这时候就需要自定义导航栏来解决这个问题。 ## 目录 - 默认导航 - 修改配置 - 自定义顶部 ## 默认导航 自带的默认顶部导航设置的内容有限，不容易扩展修改，因此如果有更加个性化的需求，则需要自定义顶部导航。 配置如下 ......

//生成从minNum到maxNum的随机数 randomNum(minNum, maxNum) { switch (arguments.length) { case 1: return parseInt(Math.random() * minNum + 1, 10); case 2: return ......