uniapp
Apeng_0919
这个作者很懒,什么都没留下…
展开
-
uniapp 修改打包后的js文件后缀为时间戳
通常我们通过uniapp打包h5端的dist包中的js文件,都会带有一串hash后缀,并且每次打包的hash后缀都没有改变,这样会导致H5新版打包上线后,用户依旧使用的是浏览器中缓存的老版js文件。文件更新滞后等现象。所以我们需要用时间戳作为后缀那么如何实现将生成的js文件的后缀改为时间戳呢?在文件夹中创建一个vue.config.js文件将以下代码复制进去即可const Timestamp = new Date().getTime(); //当前时间为了防止打包缓存不刷新,所..原创 2022-05-23 15:56:44 · 1883 阅读 · 1 评论 -
禁用safari双击事件
body{ touch-action: manipulation !important;}原创 2022-03-23 17:36:09 · 332 阅读 · 0 评论 -
uniapp 实现识别二维码(app端和h5端,兼容safari)
有个项目需求要实现扫描二维码并且识别出内容填充到输入框,app端还比较简单,官网上就有现成的,官网链接如下:https://uniapp.dcloud.io/api/system/barcode?id=scancodehandleClick(){ let that = this; uni.scanCode({ success: function(res) { // console.log('条码类型:' + res.scanType); that.a原创 2022-03-23 17:30:56 · 9978 阅读 · 9 评论 -
uniapp 实现保持登录状态
主要思路:在项目启动时判断是否存在token(根据不同的业务需求有不同的判断条件),如果存在则直接进入首页,不存在则先登录,登录成功进入首页。于是,在app的生命周期函数中操作: onLaunch: function() { let token= uni.getStorageSync('token'); let base_login_name = uni.getStorageSync('base_login_name'); if (token &&原创 2022-03-17 17:28:04 · 9606 阅读 · 8 评论 -
uniapp iOS自定义添加至主屏幕的书签名称和图标
百度到的方法如下:<!doctype html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- iPad and iPad mini (with @2× display) iOS ≥ 8 --> <lin原创 2022-03-17 15:26:42 · 2555 阅读 · 0 评论 -
js 数字精度问题
在做项目的时候通常回遇到这个问题:原创 2022-01-27 12:14:37 · 1835 阅读 · 0 评论 -
uniappp 离线打包提示未添加videoplayer模块
在uniapp项目中添加了视频播放器,video标签,用Android studio打包后项目提示未添加videoplayer模块原因:未在uniapp中勾选对应模块,未在SDK中添加对应依赖模块解决方法:1.勾选videoplayer模块2.在SDK添加对应依赖把以上两个aar文件复制到自己项目的lib文件夹里面(我这里使用的是带有原生插件的文件夹UniPlugin-Hello-AS,通常是复制到文件夹HBuilder-Integrate-AS,主要是看你打..原创 2022-01-13 12:16:26 · 1736 阅读 · 1 评论 -
uniapp 页面之间传参
方法一:传递参数:let content = { id: 123, title: '文章', createTime:'2021-12-23'}uni.navigateTo({ url: '/pages/strategy/fx?content=' + JSON.stringify(content)})接收参数:onLoad(val) { let date= JSON.parse(val.content);},这种方法有一种缺陷,在传递大量参数时可能会造成数据截断或者数原创 2021-12-23 14:05:05 · 7242 阅读 · 0 评论 -
uniapp用canvas实现分享海报
做app时通常会遇到分享海报的需求,将当前页面的海报保存到本地相册,然后就可以分享。重点是将当前页面的某一块作为海报页面保存到本地。这是是通过canvas画图来解决的,参考官网将canvas转换为图片的方法https://uniapp.dcloud.io/api/canvas/canvasToTempFilePath?id=canvastotempfilepath首先将需要的海报用canvas画出来,这里就比较繁琐,定位定点要准确,如果UI设计图精准的话就要方便一些。1.因为can.原创 2021-11-18 21:07:27 · 2150 阅读 · 1 评论 -
Uniapp 离线打包流程(Android)
1.生成本地离线包2.下载编译器Android Studio3.下载离线SDK(下载地址:原生开发者支持)4.在编译器中打开此文件夹5.将第一步的离线包替换掉如下文件夹6.修改data下的dcloud-control.xml文件中appid为你注册的uniapp时生成的appid7.配置AndroidManifest.xml,修改包名为你自己的包名。8.登录开发者中心,选择你的项目(没有的话就自己创建)9.添加自己的appke...原创 2021-11-06 15:24:31 · 2347 阅读 · 2 评论 -
Android studio打包apk后提示“打包时未添加ui模块”
打包没问题,下载到手机上打开发现报如下弹框:网上找了很多方法,说的都是没有打包什么UI模块,但问题是我根本就没有在项目中用到这些模块,一步步回溯,回退,打包,发现是android打包的时候不能设置混淆在工程应用目录的gradle文件中设置minifyEnabled为false就行了。在此记录离线打包出现的问题。...原创 2021-11-01 18:10:41 · 3027 阅读 · 3 评论 -
uniapp打包静态资源优化
HBuilderx打包是对包的大小有限制的,一般不能超过40M,超过40M则需要缴费打包,好像十块钱一次,虽然不贵,但是长此以往也是一笔不小的费用,且不是解决根源问题的处理方式。此时,没钱的前端只好想法设法地压缩包的大小,为此我找了很多方法,记录于此:仔细地观察了文件中比较大比较占资源的就是图片和字体文件所占的比重较大,代码基本都很小,所以应当将优化静态资源作为优化方向。方法1:分包 参考官网:uni-app官网我做的是app,官网说明不支持app和h5的分包设置,只支持几个小程序。。.原创 2021-11-01 17:57:53 · 4726 阅读 · 4 评论 -
uniapp 将当前页面保存为图片
也是参考其他博主的方法,直接将此方法绑定在点击事件中:capture() { var pages = getCurrentPages(); //获取当前页面信息 var page = pages[pages.length - 1]; var bitmap = null; var currentWebview = page.$getAppWebview(); bitmap = new plus.nativeObj.Bitmap('amway_img'); // 将webview内容绘制到.原创 2021-10-15 15:35:54 · 4072 阅读 · 12 评论 -
uniapp 获取滑动的距离
在uni-app官网上面有说明用<scroll-view>标签将需要滚动的内容包裹起来<scroll-view scroll-y="true" :scroll-top="scrollTop" @scroll="scroll" @scrolltolower="scrolltolower"> <view>需要滚动的内容</view></scroll-view>scroll方法就是用来获取滑动的距离这个&...原创 2021-09-27 18:04:33 · 4986 阅读 · 0 评论 -
uniapp 自定义底部导航栏
在做项目时,经常遇到在现有的框架中无法实现UI图上的样式,比如说将底部导航栏的字体在选中状态下变为渐变色,在浏览器上可以直接修改css样式,但是运行到真机时才发现根本不生效,查阅官方文档才发现app端的根本不支持这些属性更改下面是我在项目中做底部导航栏的过程1.首先是用的官方的底部导航栏,具体可以看我的这篇文档https://blog.csdn.net/weixin_50606255/article/details/116270949在用这个底部导航栏时,就无法更改字体颜色为渐变色(app端)原创 2021-09-02 10:32:46 · 17458 阅读 · 12 评论 -
前端如何引入外部字体
作为前端应该都会遇到一个问题,在做界面UI时,常常会有些字体的样式跟设计图的样式不同,即使代码一样,通过和同事小伙伴百度,发现浏览器并不支持某些字体,是需要从外部引入的,下面简单记录一下自己的如何实现的不同的字体样式的:1.将外部字体下载放在存放静态资源的文件夹中,我是直接问UI设计师要的字体文件2.可以直接放在App.vue中全局使用,我是创建了一个scss文件专门用来引入字体@font-face{ font-family: "Bahnschrift-BoldSemiCond.原创 2021-08-19 10:54:48 · 2665 阅读 · 1 评论 -
uniapp实现复制剪切功能(app端和h5端)
在用uniapp写项目时,总会遇到一些需求是无法在app端和h5端同时实现的,这时候就需要两端分开写,比如经常遇到的复制剪切的功能:app端:这里用到的方法 setClipboardData 和 getClipboardData 可以参考一下官网的详细介绍https://uniapp.dcloud.io/api/system/clipboard coypLink(data) { uni.setClipboardData({ data: data, .原创 2021-08-11 16:29:08 · 1716 阅读 · 2 评论 -
uniapp 将图片保存在本地(app端和h5端)
用uniapp框架写项目,遇到将图片保存在本地的需求,下面简单记录一下如何实现,图片格式为base64,可直接复制使用app端: saveBase64Img(base64) { const bitmap = new plus.nativeObj.Bitmap('test'); bitmap.loadBase64Data( base64, function() { const url = '_doc/' + new Date() + '.原创 2021-08-11 16:19:50 · 15292 阅读 · 10 评论 -
uniapp 中使用图表(秋云uCharts图表组件)
在用uniapp做项目时,遇到要做折线图的需求,但是又不想用echarts,在uniapp中dom操作非常的麻烦。于是找到了一个专门为app而生的图表插件uCharts(秋云uCharts图表组件),下面说一下怎么使用:1.下载插件https://ext.dcloud.net.cn/plugin?id=271,用HBuilderx编译器可以直接导入2.导入之后会发现目录发生了变化,这就是导入的图表组件及其配置3.在<template>中写代码,这里跟echarts差不多,..原创 2021-08-10 15:39:52 · 13212 阅读 · 5 评论 -
uniapp使用走马灯gbro-marquee以及遇到的坑
参考官网的详细文档https://ext.dcloud.net.cn/plugin?id=18051.下载插件2.引入插件3.在template中引用<gbro-marquee broadcastType='text' @changeEvent='gotoCommNews' direction="left" :viewHeight="100" :broadcastIconIsDisplay="!true" :touchEvent="true" ..原创 2021-07-30 15:43:18 · 2677 阅读 · 9 评论 -
uniapp底部导航栏的图片大小无法设置怎么办?
如果你不知道如何实现底部导航栏,可以参考文档https://blog.csdn.net/weixin_50606255/article/details/116270949问题描述:当app运行到浏览器时,可以修改底部导航栏的图标样式来控制图标大小,但是再运行到真机时却发现底部导航栏根本没有改变关于底部导航栏的图标,官方只有以下说明:只是在图标尺寸上做出了建议,并没有属性可以直接控制图标大小,说明uniapp是根据图标尺寸来自适应的,当前解决问题的方式最快捷方便的就是让UI切合适的图标,我..原创 2021-07-30 12:17:45 · 5904 阅读 · 0 评论 -
uniapp 实现热更新(安卓和ios)
经常在做app的时候,会有做热更新的需求,这也是常用的更新app的一种手段。当你每次发版不想更新整个app安装包时,可以采用差量更新。在HBuilderx中提供了这个wgt包,将打出来的包给后端放在服务器上,后端会提供一个下载链接。下面是实现热更新的具体方法:// 检查是否更新版本updateVersion() { // 热更新不会更新app的版本号 // 这里用一个常量定义(每次修改版本号将设置里面的版本号手动更新) let realVersion = '1012';.原创 2021-07-30 11:56:42 · 12332 阅读 · 8 评论 -
uniapp 实现选项卡功能
template:items是选项卡的标题,current是当前选中,默认为0items: ['选项卡1', '选项卡2', '选项卡3'], <view class="newsTab"> <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button" active-color="#4cd964">&l原创 2021-07-06 16:38:49 · 2697 阅读 · 4 评论 -
uniapp 实现上拉加载
1.page.json中,将 enablePullDownRefresh 设置为 true{ "path": "pages/home/communityNews", "style": { "navigationBarTitleText": "社区动态", "enablePullDownRefresh": true }}2.触发上拉加载的方法 onReachBottom: onLoad() { uni.showNavigationBarLoading(原创 2021-07-05 16:54:16 · 7431 阅读 · 0 评论 -
uniapp 实现下拉刷新(完整代码可复制)
效果图:下拉时会刷新页面,当划到最后一页时,‘下拉加载更多数据’ 提示会变成 '暂无更多下拉';具体写法参考官方文档https://uniapp.dcloud.io/api/ui/pulldown首先要在pages.josn中将 enablePullDownRefresh 设置为 true;"style": { "navigationBarTitleText": "社区动态", "enablePullDownRefresh": true}template:<temp.原创 2021-07-05 16:24:20 · 2078 阅读 · 0 评论 -
uniapp 封装请求接口(完整代码可复制)
项目目录如下:1.配置URL:在base.js中let baseURL = '';// 是否在控制台显示接口请求日志,本地环境启用,打包环境禁用let showHttpLog = false;// 测试环境baseURL = 'http://192.168.111.42:3333/';// 正式环境// baseURL = 'XXXXX.XXXXX.com';module.exports = { baseURL: baseURL, showHttpLog: showHtt原创 2021-07-03 14:40:25 · 18115 阅读 · 11 评论 -
uniapp uni-forms表单校验
:rules="loginRules" 代表表单校验规则 validate-trigger="bind"代表边输入边校验,还可以设置为submit,即提交表单时再校验; uni-forms-item标签的属性name="phone"和校验规则中的一一对应,相当于element表单校验中的prop<uni-forms :value="loginForm" ref="loginForm" :rules="loginRules" validate-trigger="bind"> <..原创 2021-07-02 15:53:58 · 5729 阅读 · 3 评论 -
uniapp 点击详情展示更多,并且标记已读(完整代码)
想要实现的效果:消息未读是标记为高亮色点击查看之后,下拉展开详情,并且未读标记变灰,表示消息已读。以下代码可直接复制使用html:<template> <view class="commNewsModule"> <view class="card" v-for="(item,index) in cardArr" :key="index"> <uni-icons type="smallcircle-filled" size="5"原创 2021-07-01 18:14:14 · 4680 阅读 · 8 评论 -
uniapp 路由跳转的几种方式(包含跳转到外部链接)
1.navigateTo(保留当前页面,跳转到其他页面,使用navigateTo可以返回上一页)uni.navigateTo({ url:'./straSettings'});2.reLaunch(关闭所有页面,跳转到其他页面)uni.reLaunch({ url:'./straSettings'})3.redirectTo(关闭当前页面,跳转到其他页面)uni.redirectTo({ url:'./straSettings'})4.switchTab(适用于..原创 2021-07-01 17:48:39 · 26827 阅读 · 1 评论 -
uniapp uni-list-item点击事件无效怎么办?
在最初使用uniapp中自带的组件时,总是会遇到一些问题,像uni-list-item组件在点击时会有不生效的情况:<uni-list class="listArr"> <uni-list-item v-for="(item,index) in listArr" :key="index" :title="item.title" show-arrow="true" :thumb="item.img" @click="gotolist(item.title)">原创 2021-07-01 17:22:56 · 8466 阅读 · 9 评论 -
使用vue uniapp制作一个打地鼠游戏
实现的效果如下,可在上方设置参数,可以设置地鼠出现的速度和总数;可在代码中设置专属头像作为地鼠代码如下,可直接复制:<template> <view class="game"> <view class="scoped"> <view class="set"> <uni-title type="h3" title="设置参数"></uni-title> <view class="setR原创 2021-06-01 17:21:53 · 1931 阅读 · 0 评论 -
uniapp 表单校验uni-forms
<uni-forms :value="loginForm" ref="loginForm" :rules="loginRules" validate-trigger="bind" > <uni-forms-item name="phone" label="手机号"> <uni-easyinput type="text" v-model="loginForm.phone" placeholder="点击输入手机号"></uni-e...原创 2021-04-29 16:48:37 · 2150 阅读 · 0 评论 -
uniapp 底部导航栏设置
首先需要创建一个uniapp项目,这里是用的HBuilderx创建的,点击左上角文件--新建--项目,选择uniapp项目,填上项目名称,选择模板,如果你想使用uniapp中的组件和扩展组件,了一选择uni-ui的模板,点击创建,一个项目就创建好了创建项目成功之后的目录如下:点击上方菜单栏的运行---运行到浏览器,选中你电脑上有的浏览器即可,下方终端会会显示运行成功,按照网址打开就行了(localhost:8080)就能成功运行项目了。在pages文件夹里面添加页面找到pag原创 2021-04-29 16:29:48 · 10916 阅读 · 3 评论