咸咸瑜瑜的博客_uni-App

uniapp - 分包

1. 在pages.json中的 subPackages 写：其中 root 是分包包名，name 是分包的别名，pages是页面，页面可以定义页面路径和样式。 2. 然后创建指定文件夹： 3，验证，可以打开WX小程序里面看看详情：看看红框框，证明成功了. 如果真实开发，请记得一定要提前进行

分包

小程序

包名

原创 2022-05-31 20:14:36 278 阅读

uniApp 事件和一些编辑框事件

首先介绍一下表单的常用事件：看一下代码： <template> <view>  <input type="text" style="width: 750upx; height: 50upx; border-bottom: solid #555555" placeh

编辑框

小程序

表单

原创 2022-05-31 19:50:44 582 阅读

uniApp pages.json 详解

在pages 新建一个页面，然后，选择默然模板然后在里面写一个文本即可：然后我们打开在里面有个pages ，和微信小程序一样谁是最先那么就是启动页，这个自己弄。然后有个style 属性，这个style属性就是设置这个页面的一些样式，注意是页面的不是全局的，你尝试把 navigati

h5

微信小程序

小程序

原创 2022-05-31 19:50:06 827 阅读

uniApp 详解结构和功能

一般就是这样的模板了 pages 这个文件夹是放页面的右键然后直接新建页面即可 static 文件夹是放一些静态文件的例如图片什么什么的 unpackage这个文件夹是打包目录下面有个dist 下面有个dev，里面可以有各个环境的小程序打包，例如微信、支付宝等... App.vue 这个是全局

json

支付宝

安装插件

原创 2022-05-31 19:49:46 141 阅读

uniApp 生命周期【应用生命周期和页面生命周期】

应用生命周期 uni-app 支持如下应用生命周期函数：函数名说明 onLaunch 当uni-app 初始化完成时触发（全局只触发一次） onShow 当 uni-app 启动，或从后台进入前台显示 onHide 当 uni-app 从前台进入后台 onError 当 uni-app 报错时触发

h5

生命周期

小程序

原创 2022-05-31 19:49:38 2838 阅读

uniAPP flex 布局

第三次学flex 布局，学吧学无止境，没脾气。设置主轴这个我洗了很多遍了： <template> <view> <view class="container">  <view class="red text"> 红 </view> <view clas

f5

属性设置

竖向

原创 2022-05-31 19:49:30 303 阅读

uniAPP 固定像素px 和响应式像素 upx

uni-app 使用 upx 作为默认尺寸单位， upx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。就是说无论屏幕大多宽度都是750upx 和小程序的rpx 一样的。你尝试设置一个宽度为750upx 那么在哪里的手机和屏幕都是占满的。

uni-app

小程序

自适应

原创 2022-05-31 19:49:14 915 阅读

uniApp v-for 遍历渲染

<template> <view> <view v-for="item in hero"> 英雄：<b>{{item.Name}}</b> <br> 年龄：{{item.age}} <br> 语言：<text v-for="langItem in item.language">{{langItem}

javascript

c++

git

原创 2022-05-31 19:48:43 900 阅读

uniApp v-key 数据绑定表示

<template> <view>  <block v-for="(item,idnex) in studentArray" :key = "item.id"> <checkbox> {{item.name}} </c

数据

自增长

javascript

原创 2022-05-31 19:48:33 70 阅读

uniApp 条件编译

参考C语言的，详细如下：大量写 if else，会造成代码执行性能低下和管理混乱。编译到不同的工程后二次修改，会让后续升级变的很麻烦。在 C 语言中，通过 #ifdef、#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码。 uni-app 参考这个思路，为 uni

小程序

h5

#endif

原创 2022-05-31 19:48:25 619 阅读

uniAPP view 和 swiper

view 看做一个div 即可属性说明属性名类型默认值说明 hover-class String none 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现

小程序

支付宝小程序

滑块

原创 2022-05-31 19:48:19 696 阅读

uniAPP tabBar 设置

很简单 TabBar是一个对象，然后项存在list中，list是和对象，最少2个项最多5个： /*tabBar是一个对象*/ "tabBar":{ "color":"#ff55ff", //tabBar 字体颜色 "selectedColor":"#007AFF", //tabBar 被选择选择

ico

h5

数组

原创 2022-05-31 19:48:06 2488 阅读

uniAPP 禁用原生导航栏和获取状态栏高度和使用（间距掉）

小程序的原生导航栏是禁用不了的因为他会用有一些东西，H5 和安卓、IOS 是可以禁用的：官网找到 appplus 配置编译到 App 平台时的特定样式，部分常用配置 H5 平台也支持。以下仅列出常用，更多配置项参考 WebviewStyles。属性类型默认值描述平台兼容 background

h5

导航栏

小程序

原创 2022-05-31 19:38:25 2084 阅读

uniAPP 网络连接实现轮播图

uni.request(OBJECT) 发起网络请求。在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单。 OBJECT 参数说明参数名类型必填默认值说明平台差异说明 url String 是开发者服务器接口地址 data Object/String/ArrayBuffer

h5

服务器

json

原创 2022-05-31 19:38:08 384 阅读

uniapp 使用官方CSS 和引入 Iconf阿里巴巴矢量库的Css

其实就是偷来用一下在Hbuider中新建 He.lloWorld 的模板把它里面的 uni.css 偷来然后我们呢在自己项目的 App.vue 换上去，然后我们就报错了此时我们看错误说找不到 static的 uni.ttf 所以我们再去偷然后放自己的项目里然后你就成功了：矢量库的话

文件查找

ico

文件复制

原创 2022-05-31 19:37:33 1100 阅读

uniapp 引入 Animate.css动画库

其实很简单下载引入使用即可。下载： https://animate.style/ 引入：使用：非常简单！

javascript

html

原创 2022-05-31 19:37:22 683 阅读

uniapp 关闭微信小程序的索引警告

打开然后加上语句即可

javascript

html

原创 2022-05-31 19:37:05 665 阅读

uniAPP 自定义页面导航烂 - 搜索 APP有效

这里自定义的是页面的一个导航栏啊，所以会覆盖掉全局的一个导航栏： pages.json 里面设置 pages 中的页面，， stayle 中的页面属性 app-plus： appplus里面有一个titleNView ，就是自定义导航，我们可以看下面有详细参数： https://unia

自定义

标题栏

导航栏

原创 2022-05-31 19:37:00 647 阅读

uniapp 封装网络请求

首先创建utils 然后新建 request.js /** * 封装请求对象 */ const BASE_URL = "https://xxxxx/xxxx/xxxxx/xxxx/api"; /** * */ function request({url, data, method}) { retur

封装

网络请求

微信小程序

原创 2022-05-31 19:36:44 2007 阅读

uniapp 的组件定义了直接使用即可。

如题：限于隔壁目录的components

javascript

html

原创 2022-05-31 19:36:34 68 阅读

uniapp “吸顶” CSS

emmm 貌似是CSS3新增的样式，代码如下：我在uniapp试了，安卓有效 WX/小程序有效 WEB无效效果:

小程序

javascript

html

原创 2022-05-31 19:35:57 676 阅读

uniapp 双向值绑定注意点

如果你想在微信小程序也双向值绑定的话，那么你就别用 :value 直接用 v-model="xx"

html

javascript

微信小程序

原创 2022-05-31 19:34:11 759 阅读

uniapp 编译运行小程序，真机调试预览不显示？

因为我引入了阿里巴巴矢量库的文件（全部），，，吧jS删除即可：报错： MiniProgramErrorTypeError: Cannot read property 'getElementsByTagName' of undefinedTypeError: Cannot read property

ico

javascript

html

原创 2022-05-31 19:34:06 1274 阅读

uniapp 使用 day.js 实现相对时间计算

首先初始化node.js ，打开终端输入npm init y 创建包项目管理工具: 会发现你项目多出一个叫的文件，那么证明初始化node成功了。安装day.js 1.自己百度进入官网 2.输入安装npm指令 npm install dayjs --save 指定版本自己指定即可。我这里安装1

初始化

node.js

官网

原创 2022-05-31 19:33:48 3187 阅读

uniapp 搜索关键字高亮显示实现

其实是就是个正则表达式啊，主要还是得看后端返回的是什么数据，你才可以根据后端去更改即可。显示：

html

数据

javascript

原创 2022-05-31 19:33:24 844 阅读

uniapp 定义过滤器使用过滤器

我记得写过笔记想复习找不到了，是给我删除了吗？？？无语了重新写一遍：我个人推荐先定义一个 filters过滤器文件夹，新建index.js 专门存放过滤器，即：然后我们直接在里面定义过滤器：如果有有导入的JS依赖直接导入也即可。然后我们在main.js 全部注册一下即可：（for

公众号

javascript

html

原创 2022-05-31 19:33:16 1652 阅读

uniapp 使用全局状态管理 Vuex

PS：现在的版本Vuex 都内置了，不用下载，直接导入挂载启动赢取白富美！ 1.导入 1.1 根目录新建 s

数据

传参数

根目录

原创 2022-05-31 17:20:04 1325 阅读

uniapp 使用全局状态管理 Vuex 实现 “搜索历史-数据持久化”

前言：之前介绍过如何使用vuex，现在就是写个笔记记一下如何用vuex 实现数据持久化：数据持久化其实就是为了吧数据[搜索历史]放在本地缓存中即：setStorage，，，，本来数据就是放在vue search模块下的 state中的，但是怕丢失什么的。。。这里直接讲解第二步： 1.在模块中

搜索

数据

数据持久化

原创 2022-05-31 17:19:46 1867 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

咸瑜的博客

uniapp - 分包

uniApp 事件和一些编辑框事件

uniApp pages.json 详解

uniApp 详解结构和功能

uniApp 生命周期【应用生命周期和页面生命周期】

uniAPP flex 布局

uniAPP 固定像素px 和响应式像素 upx

uniApp v-for 遍历渲染

uniApp v-key 数据绑定表示

uniApp 条件编译

uniAPP view 和 swiper

uniAPP tabBar 设置

uniAPP 禁用原生导航栏和获取状态栏高度和使用（间距掉）

uniAPP 网络连接实现轮播图

uniapp 使用官方CSS 和引入 Iconf阿里巴巴矢量库的Css

uniapp 引入 Animate.css动画库

uniapp 关闭微信小程序的索引警告

uniAPP 自定义页面导航烂 - 搜索 APP有效

uniapp 封装网络请求

uniapp 的组件定义了直接使用即可。

uniapp “吸顶” CSS

uniapp 双向值绑定注意点

uniapp 编译运行小程序，真机调试预览不显示？

uniapp 使用 day.js 实现相对时间计算

uniapp 搜索关键字高亮显示实现

uniapp 定义过滤器使用过滤器

uniapp 使用全局状态管理 Vuex

uniapp 使用全局状态管理 Vuex 实现 “搜索历史-数据持久化”