uni-app
uni-app知识
小仙女de成长
啊麻利麻利哄
展开
-
uniapp子组件监听触底
uniapp子组件监听触底原创 2022-06-29 08:47:35 · 1581 阅读 · 3 评论 -
uni-app动态修改导航条的标题
由于这个微信小程序表单页面是用于创建和编辑的,所以导航条的标题不能是一样的,但是在路由配置里面只能设置一个。所以需要在页面中进行修改,在这里用到了uni-app给我们的uni.setNavigationBarTitle(OBJECT) [动态设置当前页面的标题。]...原创 2022-06-24 16:15:36 · 1700 阅读 · 6 评论 -
uni-app 对接企业微信登录
企业微信 uni-app原创 2022-06-22 11:11:41 · 2936 阅读 · 8 评论 -
解决uview+uni-app框架写的H5应用嵌入到【企业微信】中顶部导航栏显示两次的问题
解决:找到App.vue页面,把底部的"正式打包隐藏顶部导航栏"注释解开,那么逻辑就是我们打包的时候顶部导航栏就没有了(因为开发过程中要把这个注释掉,不然你浏览器上没有顶部导航不好调试、、然后打包的时候去掉注释就可以了、),只有一个企业微信读取一次,不会出现两次的情况。过程:由"图1"到"图2"...转载 2022-05-26 09:52:40 · 1142 阅读 · 2 评论 -
uniapp 视频下载、进度监听及保存到相册
/***视频下载保存相册**/uploadVideo() { uni.showLoading(); const downloadTask = uni.downloadFile({ // 视频路径 测试视频demo时长有1分钟 url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4', success: res => { if (res.statusCode === 200) { // 视频保存到手机相册 .转载 2022-05-25 11:33:35 · 1743 阅读 · 3 评论 -
富文本图片太大溢出以及富文本显示问题
优化之前,图片太大解决方法:1、在common 目录下新建 index.js:/*graceUI rich-text 加强工具link : graceui.hcoder.netauthor : 5213606@qq.com 深海*/ // 正则变量var graceRichTextReg; // 批量替换的样式 [ 根据项目需求自行设置 ]var GRT = [ // div 样式 ['div', "line-height:2em;"], // h1 样式.转载 2022-05-25 10:41:02 · 1724 阅读 · 11 评论 -
uniapp表单上传多张图片
注意事项:只有app支持多图片上传,小程序只能一张一张传需求描述:表单数据和选择的多张照片同时提交,效果如下所示:话不多说,上代码,前端代码:<template> <view> <u-popup :show="show" @close="close"> <view style="display: flex;"> <view class="form-left"> 问题描述 </vie转载 2022-05-13 10:19:13 · 2859 阅读 · 0 评论 -
uniapp下导航栏自定义多按钮单击事件
在pages.json添加导航栏中的按钮"pages":[{ "path":"pages/index/index", "style":{ "enablePullDownRefresh":true, "app-plus":{原创 2022-05-07 15:32:54 · 1196 阅读 · 0 评论 -
uniapp编译时pages.json 解析失败
1、原因:今天用的uniapp的条件编译,对APP和微信小程序进行编译,突然发现,总是有一方编译不通过,刚开始还以为是条件编译的问题,后来仔细看看官网文档又查阅了些资料总算明白了我们使用条件编译时,没有保证编译前和编译后文件的正确性;JSON文件里面是不允许出现多余字符的,所以导致解析失败!下图的错误示范:...转载 2022-05-07 13:14:57 · 3261 阅读 · 1 评论 -
uniapp跳转外部链接
总体思路是用uni.navigateTo跳转一个渲染外部链接的内部页面downLoad(item){ let url = encodeURIComponent(item.url) uni.navigateTo({ url:'./webView?url='+url }) },url是文件路径。要用encodeURIComponent编码。不然路径会不完整渲染外部要用web-viewwebView.vue页面<template> &l原创 2022-05-07 11:30:27 · 4810 阅读 · 2 评论 -
uni-app 环境配置,uni.request封装,接口配置,全局配置,接口调用的封装
1.环境配置 (可参考uni-官网的环境配置)common文件夹下新建config.jslet url_config = ""if(process.env.NODE_ENV === 'development'){ // 开发环境 url_config = 'https://*****.com/'}else{ // 生产环境 url_config = 'https://*****.com/'}export default url_config2.uni转载 2022-05-05 15:11:57 · 3048 阅读 · 0 评论 -
uni生命周期
uni生命周期分为:页面生命周期和应用生命周期应用生命周期:onLaunch:当uni-app初始化完成时触发(全局只触发一次)onShow:当uni-app启动,或从后台进入前台显示onHide:当uni-app从前台进入后台onUniNViewMessage:对nvue页面发送的数据进行监听页面生命周期:onLoad:监听页面加载,其参数为上个页面传递的数据,参数类型为ObjectonShow:监听页面显示onReady:监听页面初次渲染完成onHide:监听页面转载 2020-10-19 09:50:05 · 1584 阅读 · 0 评论 -
uni-app(小程序)背景图片的处理出不来
解决方法:使用网络图片,找个图床把你要用的图片传上去,然后以网络图片的形式引入到你的项目里面。比如qq空间,哈哈哈哈 使用使用<image/>标签,这个就不多说了,image作为背景,用绝对定位分隔图层出来就可以实现,可行但是我初衷还是想要用background的形式引入背景图片。 将图片转为base64,我用的是这个方法,网上有免费的在线转换器,比如:http://imgbase64.duoshitong.com/上传图片,转换,复制得到的base64编码,然后粘贴到原来的backgr转载 2020-09-24 15:16:11 · 1392 阅读 · 0 评论 -
uniapp实现app移动端在线预览pdf文件
移动端实现pdf预览1、先根据uniapp的文档 写个公共组件webView<template> <view style="width: 100%;" > <web-view :src="allUrl"></web-view> </view></template><script> export default { data() {转载 2020-09-16 08:27:43 · 4029 阅读 · 0 评论 -
uni.showModal的弹框取消按钮去掉
就类似这样的uni.showModal({ content: '没有取消按钮的弹框', showCancel: false, buttonText: '确定', success: (res) => { if (res.confirm) { console.log('用户点击确定'); } else if (res.cancel) {转载 2020-09-15 13:15:25 · 9318 阅读 · 0 评论 -
UNI-APP添加顶部导航栏并且更换图标
在page.json里的配置项{ "path": "pages/my/index", "style": { "app-plus": { "titleNView": { "buttons": [{ "text": "\ue605",转载 2020-09-11 09:23:33 · 1227 阅读 · 0 评论 -
uni-app引入vconsole调试移动端项目
1.安装npm install vconsole2.在main.js插入import VConsole from 'vconsole'const vConsole = new VConsole()注意注意注意:unia-pp真机联调不支持vconsole,坑啊!!!!原创 2020-09-11 08:38:21 · 4486 阅读 · 4 评论 -
<text>标签中的文字如何居中显示
应该放在容器里才有用吧,给容器加样式就行啊。<viewclass='testText'><text>是真的吗?text></view>.testText{ width:100%; height:30px; text-align:center;}转载 2020-09-09 14:42:52 · 3116 阅读 · 0 评论 -
uniapp常用提示框
1:成功提示uni.showToast({title: '提交成功',duration: 2000});2:加载框uni.showLoading({ title: '加载中' }); setTimeout(function () { uni.hideLoading(.原创 2020-09-09 11:01:02 · 702 阅读 · 0 评论 -
uni-app中picker相关坑
数据格式如下:array: [{ id:'111', category_name:'水果' },{ id:'222', category_name:'222' }],1、数组picker 的显示<picker @change="bindPickerChange" :转载 2020-09-07 16:49:53 · 1885 阅读 · 0 评论 -
uniapp获取视频时长
<!-- poster为视频封面,timeupdate为视频播放进度事件,每250毫秒触发一次(但是不准) --><video :src="class_info.video_audio_url" id="myVideo" :poster="imgurl" @timeupdate="videoTimeUpdateEvent"></video>data() { return { videoContext: {}, // 用于绑定视频.转载 2020-09-04 10:22:09 · 6438 阅读 · 0 评论 -
uni-app点击预览图片
<image :src="info.shopLogoUrl" @tap="_previewImage(info.shopLogoUrl)" mode="widthFix" > _previewImage(image) { var imgArr = []; imgArr.push(image); //预览图片 uni.previewImage({ urls: imgArr, current: imgArr[0] }); }.转载 2020-08-28 14:14:54 · 799 阅读 · 0 评论 -
uni-app引入阿里矢量图在移动端不显示的问题
1、uni-app引入字体图标是不支持本地的,所以在调用的时候直接复制阿里的在线图标粘贴到vue.app下的style下:请求头!!!一定要加转载 2020-08-24 15:06:59 · 770 阅读 · 0 评论 -
uni-app上拉加载和下拉刷新代码
http://www.5imoban.net/jiaocheng/hbuilder/2019/0911/3619.html1、pages.json配置需要上拉加载和下拉刷新的enablePullDownRefresh为true{ "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigat.转载 2020-08-18 10:52:32 · 292 阅读 · 0 评论 -
uniapp左上角返回按钮跳转,返回按钮事件
找到你要跳转的那个界面有时候返回,他不是跳转到首页,我们这里就要加一个监听函数。就在你写的对应的页面加,不是在pages.json里面加哦 onBackPress(event){ uni.redirectTo({ url:'../index/index' }); return true; },...转载 2020-07-29 09:30:36 · 15021 阅读 · 4 评论 -
uni-app实现下拉框下拉效果
效果如下:代码: <view class="uni-form-item uni-column"> <picker @change="examinationType" :range="examinationTypeArray"> <label>考试类型:</label> <label class="">{{ examinationTypeArrayType }原创 2020-07-27 11:01:05 · 21039 阅读 · 14 评论 -
解决:HBuilder X 未检测到手机或模拟器
解决办法1、找到HBuilderX安装目录下的D:\Archive\HBuilderX\plugins\launcher\tools\adbs。2、先备份该录下的除了文件夹外的其他三个文件。也就是说将adb.exe文件和AdbWinApi.dll和AdbWinUsbApi.dll文件删除3、然后把1.0.31目录下的除文件夹的其他所有文件拷贝到D:\Archive\HBuilderX\plugins\launcher\tools\adbs,直接覆盖即可。4、重启HBuilderX就可以转载 2020-07-24 16:07:24 · 4425 阅读 · 4 评论 -
uni-app Banner ( 轮播图 ) 实现
例子:<view class="page-section-spacing"> <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1500" > <swiper-item v-for="(item , index) in homeSlide" :key="index"> <image :src="item转载 2020-07-24 10:18:16 · 1132 阅读 · 0 评论 -
uni-app封装ajax请求方法
位置项目根目录index.js定义了两种请求get和postimport baseconfig from "./common/baseconfig.js"const httpClient = { request:function(method,url,data){ var headers={ "Content-Type": "application/x-www-form-urlencoded", "Auth-Token": uni.getStorageSync("auth_t转载 2020-07-24 10:00:26 · 1825 阅读 · 0 评论 -
uni-app导航栏设置,在pages.json里面配置
全局导航栏样式设置: 在pages.json的globalStyle里进行各个参数配置"globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "Hello uniapp", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8", "backgroundColorTop".原创 2020-07-24 08:43:03 · 1272 阅读 · 0 评论 -
uni-app点击进行页面路由跳转
<view class="" @tap="go"> 去轮播页</view>// methods:{ go(){ uni.navigateTo({ url:"/pages/banpaiindex/banpaiindex" //这边的url前面多个斜杠哦!!!!!! }) }},//路径注意就行了{ "path" : "pages/banpaiindex/ba.原创 2020-07-23 16:22:53 · 2076 阅读 · 1 评论 -
UNI-APP 使用 ICONFONT
根据官网 小于 40kb 的字体文件可以直接本地引用。方法如下:首先下载字体文件。然后删除多余文件,只需要留下 iconfont.ttf 和 iconfont.css 文件即可使用。放入到 static 下。修改 iconfont.css 文件,如下image左侧红框里是留下的字体文件,右侧是修改 iconfont.css 样式。然后,引入 样式文件:image最后,就可以在 项目中使用了。下面是 实际效果:设置了大小和颜色。image.转载 2020-07-23 16:07:36 · 429 阅读 · 0 评论 -
uni-app如何使用全局组件
只需要看红色箭头的内容,组件内容该是什么就是什么使用的时候,在需要使用的组件内直接用就行了直接用就行了,不需要再import了转载 2020-07-23 16:03:41 · 1959 阅读 · 1 评论 -
uni-app项目中使用scss语法
最简单的方法如下:点击菜单栏中的“工具 – 插件安装 – scss/sass编译” 点击安装,如果成功了,就可以正常使用了。第一步:工具 – 插件安装第二步:第三步:安装成功啦原创 2020-07-23 14:49:40 · 714 阅读 · 0 评论 -
uniapp 路由的配置
在pages.json里面配置==============page.json=============={ "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages { "path": "pages/tabBar/component/component", "style": { "navigationBarTitleText": "组件", "app-plus"转载 2020-07-23 10:35:47 · 1542 阅读 · 0 评论