2022.10.20 updated

优先级

1）官方手册优先

uni-app官网uni-app：一个使用 Vue.js 开发跨平台应用的前端框架https://uniapp.dcloud.io/README2）面向效果找组件

内置组件 扩展组件https://hellouniapp.dcloud.net.cn/pages/component/view/view3）v-for等指令手册（vue手册，因为uni-app基于vue）

指令 | Vue.jsVue.js - The 渐进式 JavaScript 框架https://v3.cn.vuejs.org/api/directives.html

奇葩Bug

1. table里的uni-data-select下拉菜单被挡住，看不到
错误：

解决办法：

烂笔头

...乱序笔记...

  • 尺寸单位 屏幕宽度 750rpx宽为屏幕基准（设计图应为750px）

  • 安装uni-ui增强组件
    https://ext.dcloud.net.cn/plugin?id=55
    点击“使用 HBuilderX 导入插件”
    装完即可使用，无需引入和配置

  • 资源文件加载规范
    【注意】js文件路径不能以斜杠开头
    <image src="@/static/logo.png"></image>
    import add from '@/common/add.js'
    @import url('@/common/uni.css');

  • uni-app项目自动换行（项目显示效果）
    编辑/App.vue的style部分
    view { word-break: break-all; }

  • uni-app前端操作云数据库
    https://www.bilibili.com/video/BV17p4y1a71x?p=1
    25分钟入门

  • HBuilderX代码自动换行（编辑器代码自动换行）
    菜单“工具” > 设置 > 编辑器配置 > 自动换行

  • HBuilderX代码自动保存
    编辑后自动保存,自动刷新预览
    https://ext.dcloud.net.cn/plugin?id=5892
    点击“使用 HBuilderX 导入插件”
    菜单“工具” > 设置 > Settings.json > 插件配置 > Auto Saver > 勾选“编辑时自动保存”

  • uni-app开发中vue和nvue的区别
    uni-app开发中vue和nvue的区别 - 翼速应用uni-app提供了两种渲染方式：webview渲染和原生渲染，分别对应两种类型的页面：vue和nvue。二者在开发时存在应用差异，也各有优势，可根据项目需要使用。https://www.ysext.com/articleinfo/289.htmluni-app 入门之 nvue (weex) 爬坑记 - 啤酒煮鸡蛋 - 博客园前言 uni app 是 DCloud 出品的新一代跨端框架，可以说是目前跨端数最多的框架之一了，目前支持发布到：App（Android/iOS）、H5、小程序（微信小程序/支付宝小程序/百度小程序/https://www.cnblogs.com/hl1223/p/10384307.html

  • uni-app优秀商城示例
    代码规范易入门，建议装上看看目录结构
    GitHub - liuming9157/mzshopContribute to liuming9157/mzshop development by creating an account on GitHub.https://github.com/liuming9157/mzshop

  • HBuilderX快捷键

    ctrl+K 格式化
    ctrl+D 删整行
    ctrl+C 复制整行（如果没有选中内容的话）
    ctrl+X 剪切整行（如果没有选中内容的话）
    ctrl+/ 注释、反注释

  • HBuilder自定义代码块
    自动补全 / 代码提醒 / 自定义组件 / 自定义命令
    参考自 https://blog.csdn.net/zhengzizhi/article/details/105020140
    【目标1】
    敲view+回车输出 <view></view>
    菜单栏 > 工具 > 代码块设置 > Vue代码块
    在vue.json右边的“自定义代码块”中输入：

    "view": {"prefix": "view","body": ["<view>","\t$0","</view>"]
}

    OK! 在template中键入view即可看到第一个提示项view，回车，Enjoy！

    【目标2】
    敲clog或者consolelog+回车输出 console.log("");
    菜单栏 > 工具 > 代码块设置 > javascript代码块
    在javascript.json右边的“自定义代码块”中输入：

    "consolelog": {"prefix": "consolelog","body": ["console.log(\"$0\");"]
}

    OK! 在script中键入clog或者consolelog即可看到第一个提示项consolelog，回车
    实际上HBuilder自带了clog这个快捷键命令

  • HBuilderX编辑器F11退出全屏无效的解决办法 - 切换免打扰模式
    HBuilderX编辑器F11退出全屏无效的解决办法 - 切换免打扰模式_Rudon滨海渔村的博客-CSDN博客使用ctrl+F11自由切换，可以全屏、退出全屏 如图： Ctrl+S保存，即可使用快捷键“Ctrl+F11”切换全屏效果P.S.为什么不用F11，因为F11被系统占用了，改不了https://blog.csdn.net/qq285744011/article/details/125167752

  • uni-app常用指令
    v-bind

    <image v-bind:src="imgUrl"></image>
<!-- 缩写 -->
<image :src="imgUrl"></image>

    v-on

    <view v-on:click="doSomething">点击</view>
<!-- 缩写 -->
<view @click="doSomething">点击</view>

    v-if

    <view v-if="seen">现在你看到我了</view>
<view v-else>你看不到我了</view>

    v-if 和 v-show 区别

    v-for

    <view v - for="(item, index) in items">
{ { index } } - { { item.message } }
</view>

    除了数组，也可以遍历一个对象的所有属性

  • uni-app 点击按钮回到顶部
    uni-app 点击按钮回到顶部_杨葱儿-CSDN博客_uniapp点击回到顶部参考官方文档：https://uniapp.dcloud.io/api/ui/scroll?id=pagescrollto<button type="primary" @click="tapscroll">回到顶部</button>tapscroll:function(){uni.pageScrollTo({scrollTop: 0,duration: 300})}https://blog.csdn.net/weixin_44285250/article/details/106801622

  • UNI-APP 官方视频教程
    https://uniapp.dcloud.io/resource

  • text换行符 / 传统br换行 / uniapp多行字符串定义 / uniapp多行字符串输出展示
    方法0）    最新ES6多行字符串定义

    <template><view><!-- uniapp多行文字展示（自动换行） --><text>{{myText}}</text></view>
</template><script>export default {data() {return {// uniapp多行文字定义 - //（ES6写法，注意不是单引号，而是Esc键下面那个“反单引号”）myText: `这是多行文字行1阿斯顿行2哈哈行3`}},methods: {}}
</script><style></style>

    方法1）
    不用text组件，直接用行级标签view：

    <view>文字1111</view>
<view>文字2222</view>

    方法2）
    文字中插入view空标签：

    <text>亲爱的XX老师，</text>
<view></view>
<text>多年未见，甚是想念...</text>

  • uni-app 成功提示 / 错误提示 / 弹出窗口 / alert / showtoast

    uni.showToast({title: 'message'
});

  • 指令v-model="xx"数据双向绑定

    <input v-model="message" placeholder="edit me"/>

  • 通过变量动态控制class是否显示 (当前不是addClass，请在本文搜索addClass)

    <template><view><view ：class="[isActive ? activeClass ： '', errorClass]"></view><view class="static" :class="{ 'active': isActive, 'text-danger': hasError }">222</view><view class="container" :class="computedClassStr"></view><view class="container" :class="{active: isActive}"></view></view>
</template>
<script>export default {data () {return {isActive: true}},computed: {computedClassStr () {return this.isActive ? 'active' : ''},computedClassObject () {return { active: this.isActive }}}}
</script>

    more in 数组语法

  • uniapp页面跳转的多个方法 - JS方法
    1）uni.navigateTo 保留当前页面，跳转到应用内的非 tabBar 的页面
    2）uni.navigateBack 返回上一个页面
    3）uni.reLaunch 关闭所有页面，打开到应用内的某个页面。可以是tabBar页面
    4）uni.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。只能是tabBar页面

  • Uniapp打开外部网页、跳转指定链接 
    Uniapp打开外部网页、跳转指定链接 （打开app以外的web页面）_Rudon滨海渔村的博客-CSDN博客效果鸿蒙2.0 android app内部效果方法内置组件<web-view src="https://baidu.rudon.cn/"></web-view><template><view><web-view src="https://baidu.rudon.cn/"></web-view></view></template>详见web-view | uhttps://rudon.blog.csdn.net/article/details/123474905

  • 原生事件对象$event
    包括例如click时间、点击时鼠标x、y位置等

    event: {"type":"click","timeStamp":18320.499999997992,"detail":{"x":317,"y":37},"target":{"id":"","offsetLeft":0,"offsetTop":0,"dataset":{},"x":317,"y":37},"currentTarget":{"id":"","offsetLeft":0,"offsetTop":0,"dataset":{}}.....}

  • 事件修饰符 and  事件映射表

    @touchmove.stop.prevent="moveAct"
@click.stop="doThis"

  • 计算属性computed
    原来的表述式判断：
    {{author.books.length > 0 ? 'Yes'：'No'}}
    使用类似中间件的computed方法：

    export default {data() {return {author: {name: 'John Doe',books: ['Vue 2 - Advanced Guide','Vue 3 - Basic Guide','Vue 4 - The Mystery']}}},computed: {// 计算属性的 getterpublishedBooksMessage() {return this.author.books.length > 0 ? 'Yes' : 'No'}}
}

  • 侦听器watch
    选项：immediate

  • 跨端兼容 | 条件编译
    1.注释方式的不同
    js使用 // 注释
    css 使用 /* 注释 */
    vue/nvue 模板里使用 <!-- 注释 -->
    2.不同平台判断

    #ifdef H5 || MP-WEIXIN
H5或者微信小程序上的专用代码
#endif<!-- #ifndef APP-PLUS -->
除了App平台以外的专用代码
<!-- #endif -->

  • uni-app 跳转页面指定位置、锚点跳转
    1）    【官方方法】 - 不推荐，要写固定height
    scroll-view
    2）【先算DOM高度，再scroll指定高度】
    uni-app 跳转到另一个页面的指定位置 - 简书第一步，给指定页面想要跳转的位置加一个class第二步，点击跳转时，给页面传值 第三步，跳转到的页面接收 第四步，获取指定class的居上高度，并滚动https://www.jianshu.com/p/bdd0cf599a8b

  • uniapp页面切换效果，跳转效果，动画设置，fadeIn
    uniapp设置页面跳转效果 - navigateTo切换效果 - 全局animationType动画
    uniapp设置页面跳转效果 - navigateTo切换效果 - 全局animationType动画https://blog.csdn.net/qq285744011/article/details/125218949

  • uni-app 目录结构

    ┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents          存放小程序组件的目录，详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
└─uni.scss              这里是uni-app内置的常用样式变量

  • uni-app存放多行文字到外置js的变量
    【填坑日记】uni-app如何调用页面vue以外的js文件变量 - js如何赋值多行文字给变量_Rudon滨海渔村的博客-CSDN博客效果图步骤创建/static/js/longText.js并定义下标为calculatedexport default {calculated: `代码行1代码行2代码行3代码行4`}在视图文件/pages/index/index.vue中import这个js文件，并且赋值给app的一个变量，再输出<template><view> {{codes.calculated}}</view><https://blog.csdn.net/qq285744011/article/details/122478275

  • uni-app类似pre标签、code标签的多行文字输出，允许左右滚动查看
    首先：存放多行文字到外置js的变量（方法）
    然后，使用scroll-view+textarea显示

    <scroll-view scroll-y="false" scroll-x="true" ><textarea :value="var" style="width:2000rpx;" auto-height="true"/>
</scroll-view>

  • pages.json 全局配置
    页面路径、窗口、导航栏、底部tabbar等
    << globalStyle >>

    navigationBarBackgroundColor 导航栏背景色
navigationBarTextStyle 导航栏字体色（黑|白）
navigationBarTitleText 导航栏标题
navigationStyle 隐藏导航栏custom / default
backgroundColor 下拉时的底板背景色
backgroundTextStyle 下拉loading (dark/light)
enablePullDownRefresh 开启下拉刷新 真假
onReachBottomDistance 距离px 触底触发
transparentTitle 导航栏透明度 always auto none
------------------------------------
如果是auto，建议设置导航栏点击穿透是Yes
"titlePenetrate": "YES"
否则透明的导航栏会遮挡页面
------------------------------------
pageOrientation 横竖屏限制
auto 自动portrait 竖屏landscape 横屏
leftWindow topWindow rightWindow
控制显示 (真|假)
rpxCalcMaxDeviceWidth
rpxCalcBaseDeviceWidth
rpxCalcIncludeWidth
dynamicRpx
maxWidth
...

  • uni-app项目统一设置所有页面的背景颜色
    修改/app.vue的style部分，例如：

    关键词：背景色，bgcolor，background-color

  • uni-app经典布局
     

    topWindow等说明

  • 盒式布局对齐方法 (display: flex的容器里面的元素对齐)
    CSS3弹性布局中的justify-content、flex-direction的有机组合https://rudon.blog.csdn.net/article/details/123043631

    纵向对齐
    【align-content】
    start 上
    center 中
    end 下
    space-around 四分天下，左青龙右白虎
    space-between 隔空相望，天下太平
    space-evenly  三分天下

    横向对齐
    【justify-content】
    start 左
    center 中
    end 右
    space-around、space-between、space-evenly

    组合对齐 - 先是纵向，再是横向
    【place-content】
    start,start 左上
    end,center 中间靠下面
    end 右下

    子元素flex:1 表达的含义
    https://www.jianshu.com/p/61b1bafba6eb
    无视子元素内容宽度 使得flex布局的盒子里面的子元素宽度都一样的代码是flex: 1;
    flex: 1;       等于 flex: 1 1 0%; 
    三个参数分别是：

    flex-grow: 1
flex-shrink: 1
flex-basis: 0%

    grow伸
    shrink缩
    basis 定义当前子元素想要变成多宽，可以% 也可以px 也可以auto （合起来算作父盒子总宽）

    还是不懂？看官方的代码：
    https://hellouniapp.dcloud.net.cn/pages/component/view/view

  • 隐藏某个的页面 navigationBar导航栏

    修改这个页面的参数titleNView为false（/pages.json）

    {"path" : "pages/tabs/orders/orders","style" :                   {"navigationBarTitleText": "订单","enablePullDownRefresh": true,"titleNView": false}
}

  • uni-app scroll-view取消滚动条显示、隐藏滚动条
    uni-app scroll-view取消滚动条显示 - 知乎需要给srcoll-view设置高度height；和scroll-y=true属性 1. scroll-view ::-webkit-scrollbar { //下面四个属性，选一个就可 display:none; width: 0; height: 0; background-color: transparent; } 2. /deep/::-w…https://zhuanlan.zhihu.com/p/369319514

  • uni-app scroll-view 实现滑动菜单 - 解决scroll-view无法拖动的问题

    .xx-scrollviewX {width: 100%;/* https://segmentfault.com/a/1190000019649640 */white-space: nowrap;
}

    uni-app scroll-view 实现滑动菜单https://segmentfault.com/a/1190000019649640

  • uniapp页面不刷新 - 强行刷新本页数据 - DOM刷新 - 数据变化页面不生效 - 强制渲染 - 重新渲染

    // 刷新DOM
this.$forceUpdate()

  • uniapp实现安卓系统打电话功能，手机拨号，呼叫号码
    uni-app 实现拨打电话功能（android）_张志翔的博客-CSDN博客_uniapp拨打号码最近项目中需要拨打电话功能，特此记录便于日后查阅。项目中实现拨打电话的代码如下，包括微信和真机拨打电话两种方式：//#ifdef MP-WEIXINuni.makePhoneCall({ phoneNumber: '18354789632'});//#endif//#ifdef APP-PLUSplus.device.dial('18354789632', true);//#endif注：plus.device.dial的第2个参数是是否跳到手机拨号页面，true是跳过去让用https://vegetable-chicken.blog.csdn.net/article/details/118420591修改/manifest.json，在HBuilderX中点击“源码视图”，添加三个权限
    android.permission.CALL_PHONE
    android.permission.READ_CONTACTS
    android.permission.WRITE_CONTACTS
    到app-plus > distribute > android > permissions （注意给双引号加斜杠转义）

  • uni-app如何在每个页面都显示tabbar原生底部导航栏？
    官方：DCloud_UNI_GSQ 回复:只有tab页面有tabbar非tab页面没有。
        （意思是只有在pages.json里面的tabBar.list[n].pagePath定义了的页面才会有tabbar）
    民高：底部的tabBar栏写一个组件，直接引入即可，参考下面“自定义组件并引用”

  • uniapp获取页面高度 - 获取屏幕高度 （px）

    console.log('【屏幕高度】 ' + uni.getSystemInfoSync().windowHeight);

    uniapp获取原生tabbar高度（px）

    console.log('【原生tabbar高度】 '+ uni.getSystemInfoSync().windowBottom);

    更多官方说明在：
    uni.getSystemInfo(OBJECT) | uni-app官网https://uniapp.dcloud.io/api/system/info.html#getsysteminfo
    uniapp获取某元素的宽度、高度

    uniapp获取元素的宽度、高度_Rudon滨海渔村的博客-CSDN博客效果图安卓APP实测可用....完整代码重要：mounted( ){ }代表页面已被渲染<template><view><view class="xxoo" style="height: 650rpx; border: 3rpx orange solid; margin: 30rpx; background-color: #C0C0C0; padding: 30rpx;"><view>元素clhttps://blog.csdn.net/qq285744011/article/details/123253102
    还在摸索怎么使用await async函数.....promise{}...
    理解 JavaScript 的 async/await

  • uniapp-CSS内置变量
    uniapp-CSS内置变量_Abstracted的博客-CSDN博客_var(--status-bar-height)uni-app 提供内置 CSS 变量CSS变量描述APP小程序H5–status-bar-height系统状态栏高度系统状态栏高度、nvue注意见下25px0–window-top内容区域距离顶部的距离0NavigationBar 的高度–window-bottom内容区域距离底部的距离0TabBar 的高度注意：var(–status-bar-height) 此变量在微信小程序环境为固定 25px，在 App 里为手机实际状态栏高https://blog.csdn.net/qq_16159433/article/details/120623043uniapp css var变量包括：

    CSS变量 描述 APP 小程序 H5
    –status-bar-height 系统状态栏高度 系统状态栏高度、nvue注意见下 25px 0
    –window-top 内容区域距离顶部的距离 0 NavigationBar 的高度
    –window-bottom 内容区域距离底部的距离 0 TabBar 的高度
  • uniapp的popup弹出窗（type="bottom"）被tabbar完全遮挡覆盖的解决办法
    效果：

    代码：

    <uni-popup ref="xxx" background-color="#fff" @change="changeReject" type="bottom" class="ooo"><view class="CCCCCC"><text class="text">popup 内容222</text></view>
</uni-popup><style>.CCCCCC{margin-bottom: var(--window-bottom); // tabbar高度 - 安卓亲测可用}
</style>

  • uniapp实现页面左右滑动，上下滑动事件
    uniapp实现页面左右滑动，上下滑动事件_a_靖的博客-CSDN博客_uniapp 上下滑动实现代码：<view class="" @touchstart="touchstart" @touchend="touchend"></view>data() {return {touchData: {}, //滑动事件数据 }}methods: {touchstart(e) {this.touchData.clientX = e.changedTouches[0].clientX;this.touchData.clienthttps://blog.csdn.net/qq_35713752/article/details/115617186

  • 允许uniapp的popup弹窗层内容可以滚动，底部页面禁止滚动 - 官方的scroll-view方法
    uniapp小程序、app协议弹出层弹出框内容可滚动的设置方法

    <uni-popup ref="agreementBox" @change="change"><view class="popup-content margin0Auto width80pct bgColorWhite"><view><view class="textAlignCenter weightBold">{{agreementTitle}}</view><view class="fontSize12px"><scroll-view scroll-y="true" style="height: 68vh;">{{agreementContent}}</scroll-view></view></view></view>
</uni-popup>

    重点是要给scroll-view设置“scroll-y=’true‘”
    官方手册 https://uniapp.dcloud.io/component/uniui/uni-popup.html
    参考自  uniapp——弹窗层内容可以滚动，底部页面禁止滚动_亮晶晶的芋头的博客-CSDN博客_uniapp弹出层出现页面禁止滚动开发项目过程中，常常需要自己写弹出框，弹出框里可能或是列表，可能会是提示。当为列表或者需要弹出框内容滚动的时候，常常会遇到底层的内容一起跟着滚动。今天分享个解决方案，希望能够帮的上遇到此问题的小伙伴。在弹出层的遮罩view标签和内容view标签分别加上@touchmove.stop.prevent="disabledScroll"<view class="nav-bg" v-if="showTabModal" @click="onCloseMoreBg" @touchmove.stop.phttps://blog.csdn.net/weixin_40597676/article/details/117226337

  • uniapp弹出窗显示协议内容 - 解决文字自动换行的问题 - view标签忽略\n\r等换行符
    https://blog.csdn.net/qq285744011/article/details/124797009

  • uni-app自定义组件，并使用easycom自动注册，全局使用
    关键词：当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上！
    【web前端开发】在HBuilderX中自定义组件新方法 - “当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上 at App.vue:4”_Rudon滨海渔村的博客-CSDN博客效果要求HBuilderX 3.1.0 版本以上，需要使用uni_modules开发自定义组件。（旧版本的easycom用不了了，会和项目uni_modules下的组件冲突）（旧版本的自定义组件方法：）uni-app注册全局组件 - 符合easycom_Rudon滨海渔村的博客-CSDN博客效果图环境要求HBuilderX 2.5.5起支持easycom组件模式。uni-app官网uni-app：一个使用 Vue.js 开发跨平台应用的前端框架https://uniapp.dclouhttps://rudon.blog.csdn.net/article/details/123004985

  • uniapp复制内容到剪切板失败的解决办法 - 复制数字失败 - uni.setClipboardData
    uniapp复制内容到剪切板失败的解决办法 - 复制数字失败 - uni.setClipboardData_Rudon滨海渔村的博客-CSDN博客错误提示原因uniapp复制内容到剪切板，只接受字符串类型，需要转换 content = String(content) 强行改为字符串类型。uni.setClipboardData复制内容到剪切板，并提示成功与否copyContent (content, title = '') {uni.setClipboardData({data: String(content),success: function () {uni.showToast({https://rudon.blog.csdn.net/article/details/123226332

  • HBuilderX自定义外部命令 - 右键复制文件相对路径/绝对路径
    HBuilderX自定义外部命令 - 右键复制文件相对路径/绝对路径_Rudon滨海渔村的博客-CSDN博客效果图步骤win+R运行cmd，明确命令clip可用，如图打开HBuilderX，在项目文件右键，如图：在右边的编辑器中写入自己的命令，参考左边文档即可，很全，例如复制本文件的相对路径：[{ // 复制本文件的绝对路径 "name": "copyFullPath", "command": "echo ${file} | clip", "type": "process" }]保存，右键已生效。重新右键，enjoy~~~..https://blog.csdn.net/qq285744011/article/details/122825810

  • uniapp图表插件uCharts - 如何隐藏饼图的分类信息？- 饼图柱形图分析图图表大全
    uniapp图表插件uCharts - 如何隐藏饼图的分类信息？- 饼图柱形图分析图图表大全_Rudon滨海渔村的博客-CSDN博客效果图原来修改后实现步骤修改\uni_modules\qiun-data-charts\js_sdk\u-charts\config-echarts.js的262行附近原来修改后代码："pie": {"color": color,"title": {"text": ''},"tooltip": {"trigger": 'item'},"grid": {"top": 40,"bottom":https://rudon.blog.csdn.net/article/details/123731186pie legend show false
    <qiun-data-charts type="pie" :chartData="dataset" :echartsH5="true" :echartsApp="true" />

  • uniapp项目中禁止横屏 - app不要自动旋转 - 保持竖屏的方法
    uniapp项目中禁止横屏 - app不要自动旋转 - 保持竖屏的方法_Rudon滨海渔村的博客-CSDN博客效果图... 就是手机横屏时，app保持竖屏...的样子实现步骤修改/App.vue，在onLaunch里面设置不允许横屏：<script>export default {onLaunch: function() {console.log('App Launch')plus.screen.lockOrientation("portrait-primary")},onShow: function() {console.log('Ahttps://blog.csdn.net/qq285744011/article/details/124683566
  • uniapp动态切换选项卡
    https://rudon.blog.csdn.net/article/details/123294918
  • uniapp图片不显示 - 变量动态修改图片地址不生效 - 图片src路径错误
    uniapp图片不显示 - 变量动态修改图片地址不生效 - 图片src路径错误_Rudon滨海渔村的博客-CSDN博客效果图完整代码<template><view><image :src="popupImgSrc1" mode="aspectFit" style="width: 100px; height: 100px;"></image><image :src="popupImgSrc2" mode="aspectFit" style="width: 100px; height: 100px;"></image&https://rudon.blog.csdn.net/article/details/123792222图片路径 src无效 路径绑定 uniapp图片路径~@ @问题  写死没问题

  • uni.navigateTo跳转失败，无法跳转到指定的页面
    https://uniapp.dcloud.io/api/router?id=navigateto
    不是url参数问题，而是因为：
    uni.navigateTo指定返回的url，不能是pages.json中定义的tabBar的任何一个页面。

    可以使用uni.navigateBack可以返回到原页面

  • uniapp使用data-名称为函数传参，并在e.currentTarget.dataset.名称中获取

    <view data-category="3C" data-product="Mate 40 Pro"  @click="clickOn">...
</view><script>export default {data() {return {}},methods: {clickOn (e) {console.log(e.currentTarget.dataset)// 结果是 [object] {"category":"3C","product":"Mate 40 Pro"}}}}
</script>

    更多关键词：
    uniapp 传参 e data-xx 多参数  
    uni-app如何页面传参数
    uniapp表单传参data  
    uniapp 组件传参
    DOM传参
    事件传参
    click传参多参数

  • uniapp中的addClass（仿jQuery动态添加class方法） - removeClass的方法
    https://rudon.blog.csdn.net/article/details/123678551
    uniapp中的addClass（仿jQuery动态添加class方法） - removeClass的方法_Rudon滨海渔村的博客-CSDN博客效果效果： 点击变红色(addClass clicking)，0.5秒后还原 (removeClass)思路建议先看以下的完整DEMO。uniapp中没有addClass、removeClass，需要用到“通过变量动态控制class是否显示”点击，js判断当前事件e绑定的容器的data-product是什么，对应修改某个变量，这个变量控制某个class的显示/隐藏 - class自定义样式setTimeout() 定时再次修改变量完整代码<templathttps://rudon.blog.csdn.net/article/details/123678551

  • uniapp滑块视图容器swiper高度自适应 - 解决swiper显示不完整的问题
    uniapp滑块视图容器swiper高度自适应 - 解决swiper显示不完整的问题_Rudon滨海渔村的博客-CSDN博客问题所在swiper无法自适应高度，内容显示不全。解决思路（4个）1.懒人法： 直接设置整个swiper高度，100vh等于全屏高度。 （idea来源）<swiper @change="change" style="min-height:100vh;">2.官方推荐：https://uniapp.dcloud.io/component/swiper.html使用竖向滚动时，需要给<scroll-view>一个固定高度，通过 css 设置 h...https://rudon.blog.csdn.net/article/details/123753716

  • uniapp修改原生内置组件的样式 - 不污染全部页面
    uniapp修改原生内置组件的样式 - 不污染全部页面_Rudon滨海渔村的博客-CSDN博客效果图原来：修改后：核心步骤目标组件的元素外层加容器，class="box" （名字随意）在vue的style后面再加一个style scoped<style scoped>.box /deep/ .label-text { font-size: 15px;color: red;font-weight: bold;}</style>刷新，搞定完整步骤找出组件内部的元素的class，方便cs.https://blog.csdn.net/qq285744011/article/details/123691492

  • uniapp时间日期选择器 - 只选择月份 - 月份选择器picker
    uniapp时间日期选择器 - 只选择月份 - 月份选择器picker_Rudon滨海渔村的博客-CSDN博客效果图完整代码<template><view><picker mode="date" fields="month" :value="date" @change="bindDateChange"><view class="uni-input">{{date}}</view></picker></view></template><script>ehttps://rudon.blog.csdn.net/article/details/123717250

  • uniapp通过js唤起picker等组件 - 无需直接点击操作uniapp组件 - uniapp用JS点击某个DOM
    uni-app picker 可以通过js代码主动弹出显示吗？
    uniapp通过js唤起picker等组件 - 无需直接点击操作uniapp组件 - uniapp用JS点击某个DOM_Rudon滨海渔村的博客-CSDN博客常规<picker @change="bindPickerChange" :value="index" :range="array"><view class="uni-input">{{array[index]}}</view></picker>JS唤醒<picker @change="bindPickerChange" :value="index" :range="array" ref="xxoo"><viewhttps://rudon.blog.csdn.net/article/details/124009641this.$refs.xxoo.$el.click()

  • 解决uniapp无法显示uni-file-picker的问题 - 不显示图片选择框 - 图片上传按钮消失
    解决uniapp无法显示uni-file-picker的问题 - 不显示图片选择框 - 图片上传按钮消失_Rudon滨海渔村的博客-CSDN博客效果图解决前（图片选择框死活不出来）后实现步骤在外面套一个宽高写死的容器：<view style="width: 400rpx; min-height: 300rpx;"><uni-file-picker limit="9"></uni-file-picker></view>搞定！以下是uniapp官方的css，仅供阅读，无需理会.uni-file-pickerheight ..https://rudon.blog.csdn.net/article/details/124024118

  • uniapp数据更新页面视图不更新
    uniapp在data里面修改了样式数据，如何重新渲染数据
    uniapp 数组 修改 重新渲染
    方法：修改数据后 执行this.$forceUpdate()

  • uniapp内置API交互效果 - 常用方法汇总
    uniapp内置API交互效果 - 常用方法汇总_Rudon滨海渔村的博客-CSDN博客官网手册https://uniapp.dcloud.io/api/目前已汇总了以下部分：小分类：界面提示-类似alertuni.showToast({title: '标题',duration: 2000});加载中 - loading// 开启uni.showLoading({title: '加载中'});// 关闭setTimeout(function () {uni.hideLoading(..https://rudon.blog.csdn.net/article/details/124049646提示-类似alert
    加载中 - loading
    确认提示框 弹窗 确认框
    底部选择菜单 select
    手动修改/设置标题
    在当前页面显示导航条加载动画
    动态修改标签栏tabbar的文字+图标
    动态修改标签栏的样式 - 例如渐变背景色
    临时隐藏tabbar
    标签栏Tabbar添加角标 - 信息数量等
    标签栏Tabbar添加圆点 红点 小红点 提示圆点
    ...

  • 行到小程序模拟器的方法 - uniapp开启微信开发者工具预览支持 - HBuilderX
    uniapp运行到小程序模拟器的方法 - uniapp开启微信开发者工具预览支持 - HBuilderX_Rudon滨海渔村的博客-CSDN博客效果图步骤1）下载安装 稳定版的“微信开发者工具” - 有就更新到最新版稳定版 Stable Build | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html2）找到电脑上的“微信开发者工具”安装目录的路径3）在HBuilderX中选择菜单 > “运行” > “运行到小程序模拟器” > 运行设置4）设置好 .https://rudon.blog.csdn.net/article/details/124326894uniapp运行到微信开发者工具中小程序端页面空白的解决办法
    uniapp运行到微信开发者工具中小程序端页面空白的解决办法_Rudon滨海渔村的博客-CSDN博客效果图解决步骤1）确保“微信开发者工具”和HBuilderX已经是最新版本 菜单栏 > 微信开发者工具 > 检查更新 > 立即更新 （最好是重启后再更新） 2）确保“微信开发者工具”中无报错 - 有就回到HBuilderX检查修正 3）搞定，再不行就全部重装详细步骤更新更新更新升级安装，有问题的话可以重启再装，不行的话就“忽略”或者干掉...https://rudon.blog.csdn.net/article/details/124327230

  • uniapp图片上传 - thinkphp6后台接收 - 填坑日记
    多图片上传，手动上传到自己的服务器，tp框架，api
    https://blog.csdn.net/qq285744011/article/details/124868248

  • 状态管理vuex - 登录状态管理
    状态管理Vuexuni-app：一个使用 Vue.js 开发跨平台应用的前端框架https://uniapp.dcloud.io/vue-vuex
    比全局变量更牛，更适合大中型
    情景：未登录跳到pages/login/login/，已登录跳到pages/home/home/
    步骤：
    1）下载优秀的开源项目到HBuilderX作为参考，HBuilderX导入git项目。
    项目地址：https://gitee.com/wokaixin/a_fragrant_fly

    2）参考\store\store.js
    初始化登录状态state->hasLogin
    判断状态并跳转登录页面：uni.navigateTo({ url: '../login/login'  })
    3）页面登录成功，修改hasLogin为true，提示+跳转
    4）退出登录页面修改hasLogin为false，提示+跳转

    By the way，
    Vuex中store数据改变的唯一方法就是mutation；
    Vuex中action 提交的是 mutation，通过 mutation 来改变 state ，而不是直接变更状态；
    Vuex 的State是单一状态树，定义应用状态的默认初始值；
    Vuex 的Getter获取值；
    Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter；

    完整的一个uni-app登录退出的精简demo：
    弄ing in Git...

  • ...

  • ...

  • 更多...

uniapp产品编辑页-图片上传后回显编辑-组件uni-file-picker显示之前已上传的图片 + 头像图片原地覆盖上传示例

uniapp产品编辑页-图片上传后回显编辑-组件uni-file-picker显示之前已上传的图片 + 头像图片原地覆盖上传示例_Rudon滨海渔村的博客-CSDN博客uni-file-picker显示之前已上传的图片。uni-file-picker显示之前已上传的图片。头像图片原地覆盖上传（不显示删除按钮）头像图片原地覆盖上传（不显示删除按钮）https://blog.csdn.net/qq285744011/article/details/127420832

================= More happiness coming soon ===================

优秀开源uni-app项目

... 上github或者gitee搜uni-app即可 ...

前端铺子-uniapp移动端: 项目基于vue，使用colorUi与uView，完美支持微信小程序，包含功能：聊天室、自定义TabBar与顶部、地图轨迹回放、电子签名、图片编辑器、自定义相机/键盘、拍照图片水印、国庆红旗头像、在线答题、证件识别、周边定位查询、文档预览、各种图表、行政区域、海报生成器、视频播放、主题切换、时间轴、瀑布流、排行榜、课程表、渐变动画、加载动画、请求封装等

【持续更新】uni-app学习笔记相关推荐

  1. HBuilder X ——Uni app 学习笔记（一）

    HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...

  2. 得到app文稿导出_得到app学习笔记作为知识付费者，如何把所学内容快速输出？...

    原标题:得到app学习笔记作为知识付费者,如何把所学内容快速输出? 零.引子 昨天看到老公票圈更新了一条段子: 我就是那个伪勤奋者,在知识焦虑的胁迫下,这些年买了不知多少视频.微课.教程还有得到专栏. ...

  3. Flutter高级进阶实战 仿哔哩哔哩APP学习笔记

    Flutter高级进阶实战 仿哔哩哔哩APP学习笔记 近年来各大公司对Flutter技能的要求越来越高,甚至设立了专门岗位,但掌握Flutter高阶技能的人才寥寥无几,市面上干货Flutter高阶课程 ...

  4. 【 持续更新 】Android开发笔记汇总篇，爬各种坑，敲高效代码，各种奇难杂症，有您要治的病 。

    [持续更新]Android开发笔记汇总篇,爬各种坑,敲高效代码,各种奇难杂症,有您要治的病 . 一.AndroidStudio 开发工具的那些事 . 问题 1: AndroidStudio2.2以上在 ...

  5. 【我的OpenGL学习进阶之旅】【持续更新】关于学习OpenGL的一些资料

    目录 一.相关书籍 OpenGL 方面 C方面 NDK 线性代数 二.相关博客 2.0 一些比较官方的链接 2.1 OpenGL着色器语言相关 2.2 [[yfan]](https://segment ...

  6. zset获取指定score_redis zset更新score redis学习笔记5 - Redis - 服务器之家

    redis zset更新score redis学习笔记5 发布时间:2017-04-03 来源:服务器之家 一:概述 zset全称为sorted-sets类型,和set数据类型有极为相似,都是字符串的 ...

  7. 鸿蒙app学习笔记一

    前言 鸿蒙app开发基础知识 鸿蒙应用程序 HAP entry feature pack.info 库文件 资源文件 配置文件(config.json) HAR Node.js NPM 关于DevEc ...

  8. Windows 8 Metro App学习笔记(九)—磁砖

    瓷砖,即桌面显示的Tile,它的创建和生命周期都可以由用户自由创建并可以直接访问一个应用程序,还可以为信息的及时推送带来很多的方便.在Windows 8中,由SecondaryTile对象负责. 首先 ...

  9. 【跨端应用】—— uniapp黑马商城App学习笔记（二）

    一.设置微信小程序调试 HBuilderX点击[工具] --[设置]--[运行配置],找到[微信web开发者工具]安装所在的文件夹. 复制路径,填写到[小程序运行配置]-- [微信开发者工具路径] 先 ...

最新文章

  1. Rocksdb 的 BlobDB key-value 分离存储插件
  2. 辽宁大连花灯闹新春 逾万民众赏灯迎新年
  3. linux下编辑aacc.sh脚本命令,Shell命令实战详解
  4. 摘录理解LDAP与LDAP注入
  5. t30智能插座怎么设置_如何设置ConnectSense智能插座
  6. 2018年华尔街高盛、花旗等投行业绩创新高！
  7. 《初级会计电算化应用教程（金蝶KIS专业版）》——导读
  8. ueditor接入秀米编辑器
  9. MCSA 70-740 windows存储相关的基本概念
  10. Pycharm进入debug模式后一直显示collecting data解决方法
  11. 微信公众号申请、微信支付申请教程
  12. 微信小程序 实现带刻尺度滑块
  13. 【论文导读】Learning to Localize Sound Source in Visual Scenes
  14. CAN控制器和CAN收发器初始化
  15. python 中的 re.compile 函数（转）
  16. JDBC——MySQL
  17. 水溶性/油溶性四氧化三铁(Fe3O4)纳米颗粒
  18. 搭建一个STC8H的最小系统
  19. Algorithms for Detecting Significantly Mutated Pathways in Cancer
  20. 围观设计模式(23)--行为型之命令模式（Command Pattern）

热门文章

  1. yarn打包报错：error during build: Error: Assigning to rvalue (Note that you need plugins to import files
  2. c语言bmp位图读入,c语言 bmp位图差分
  3. Unity之ASE 图片遮罩
  4. python怎么清理垃圾和缓存_怎么才能正确清理电脑的缓存垃圾？
  5. dnf压爆服务器挑战网站,dnf手游压爆服务器挑战在哪里？地下城与勇士压爆挑战体验时间介绍[多图]...
  6. 虚拟同步发电机_学术简报基于分散式微电网的虚拟同步发电机无通信预同步并网方案...
  7. mysql dbcp 配置文件_数据库连接池DBCP使用方式
  8. node.js+uniapp计算机毕业设计安卓在线民宿预定app（程序+APP+LW）
  9. 上海老百姓的胆量 VS 大牌店营业员的势利
  10. iphone开发中内存利用说明