![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
uniapp
文章平均质量分 50
小曲曲
这个作者很懒,什么都没留下…
展开
-
文生图项目总结
采用父盒子 flex:center,内层盒子居中显示:横图可以,超高竖图顶部会有遮挡;所以判断竖图就定义宽90%,高度auto根据图片比例动态计算宽高,动态设置内层盒子的宽高;盒子里放图片和文字假如是9:16 的图片,固定一个高度,计算固定宽度;其他比例宽度为手机屏幕宽度,高度计算。原创 2024-02-28 10:48:44 · 883 阅读 · 0 评论 -
uniapp在H5端实现PDF和视频的上传、预览、下载
【代码】uniapp在H5端实现PDF和视频的上传、预览、下载。原创 2023-11-27 15:50:55 · 2590 阅读 · 1 评论 -
uniapp实现在线PDF文件预览
【代码】uniapp实现在线PDF文件预览。原创 2023-11-09 15:56:25 · 2816 阅读 · 2 评论 -
uniapp使用vur-cli新建项目并打包——sass一直报错问题
【代码】uniapp使用vur-cli新建项目并打包。原创 2023-11-09 15:49:44 · 351 阅读 · 0 评论 -
uniapp——list列表分页,数据是rows
【代码】uniapp——list列表分页,数据是rows。原创 2023-10-27 10:46:56 · 1026 阅读 · 0 评论 -
uniapp-form表单
【代码】uniapp-form表单。原创 2023-08-23 16:41:49 · 883 阅读 · 0 评论 -
uniapp自定义tabbar——中间特殊按钮
【代码】uview2.0自定义tabbar。原创 2023-08-23 10:54:57 · 2890 阅读 · 0 评论 -
uniapp视频video
【代码】uniapp视频video。原创 2023-08-23 10:40:06 · 696 阅读 · 0 评论 -
vue和uniapp公共样式
vue使用lessreset.less* { margin: 0; padding: 0;}ul { list-style: none;}button,input,select,textarea { margin: 0;}html { box-sizing: border-box;}*,*::before,*::after { box-sizing: inherit;}img,video { height: auto; max-width原创 2021-02-26 16:32:25 · 1007 阅读 · 0 评论 -
uniapp富文本组件editor的使用
文档https://uniapp.dcloud.io/api/media/editor-context?id=editorcontext新建组件editor<template> <view class="container"> <view class="page-body"> <view class='wrapper'> <view class='toolbar' @tap="format" style="height: 130p原创 2021-02-25 14:30:24 · 6681 阅读 · 5 评论 -
收藏小技巧
替换富文本中图片宽度100%.replace(/\<img/gi, '< img style="width:100%;height:auto"');vue 动态样式:style=" 'background-image: url('+(item.close - item.open < 0 ?kimg1[i]:kimg[i]) +');' " //computedkimg(){return [require("../../assets/img/1.png"),require(原创 2021-02-23 13:59:15 · 193 阅读 · 0 评论 -
uniapp支付大全
H5微信支付(jsAPI)bug1:H5的jsAPI需要先授权,获取code,才能获取支付参数,在授权时报redirect_uri参数错误url必须是线上地址url需要编码需要在公众号后台配置网页授权域名bug2:当前页面的URL未注册https://ddcity.brt999.com/h5/在微信支付商户平台,jsAPI支付配置添加 url:https://ddcity.brt999.com/h5/app微信支付bug:支付失败:签名不对应微信开放平台关联ap.原创 2021-01-21 10:44:44 · 1009 阅读 · 1 评论 -
uniapp签到页面
日历组件<template> <!-- 打卡日历页面 --> <view class='all'> <view class="bar"> <!-- 上一个月 --> <view class="previous" @click="handleCalendar(0)"> <button class="barbtn" v-if="langType=='ch'">上一月</button>.原创 2021-01-13 16:52:52 · 4814 阅读 · 6 评论 -
uniapp支付页面模板
支付组件<template> <view> <u-popup v-model="show" mode="bottom" :closeable="true" @close="close"> <view class="plr-40"> <view class="center ptb-30">选择支付方式</view> <u-radio-group v-model="value"> <.原创 2021-01-06 17:28:28 · 2931 阅读 · 0 评论 -
全国城市数据
{"name": "阿坝藏族羌族自治州",},{"name": "阿克苏市",},{"name": "阿拉尔市",},{"name": "阿拉善盟",},{"name": "阿勒泰市",},{"name": "阿里地区",},{"name": "阿图什市",},{"name": "安康市",},{"name": "安庆市",},{"name": "安顺市",},{"name": "安阳市",},{"name": "鞍山市",},{"name": "巴彦淖尔市",},{"name"原创 2020-12-07 14:45:56 · 304 阅读 · 0 评论 -
uniapp之uview上拉加载和下拉刷新
onLoad中需要调用getList()tab切换需要初始化data,然后调用getList()开启下拉刷新需要在json文件配置 <view class="mg-30"> <empty v-if="list.length==0" text="暂无订单"></empty> <orderItem :type="1" :item="item" v-for="(item,i) in list" :key="i" class="mb-30">&.原创 2020-12-07 09:45:00 · 9829 阅读 · 0 评论 -
uniapp折线图uchart
导入插件一个页面两个折线图html<view class="bg-white radius-10 mg-20 pd-20"> <view class="flex"> <view class="u-font-28 text-center w100 mtb-30">最近一周收益</view> </view> <canvas canvas-id="canvasLineA" id="canvasLineA" class原创 2020-11-26 18:10:14 · 6195 阅读 · 4 评论 -
uniapp原生canvas绘制商品分享海报
<template> <view class="login"> <u-navbar title="canvas" :is-back="false" title-color="#333"></u-navbar> <canvas :style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="myCanvas" id="myCanvas"></canvas.原创 2020-10-27 16:14:41 · 759 阅读 · 0 评论 -
uniapp微信支付
bug必须打自定义基座运行测试,但是就调起来一次,之后就掉不起来了可以打包测试一下,应该没问题点击支付 submit(){ this.$http('/api/property/rechange_index',{ type: this.isActive, money:this.items[this.active].price },"POST").then(data=>{ //data返回参数 //{ // appid:原创 2020-10-27 15:55:03 · 1321 阅读 · 0 评论 -
uniapp发布动态——文字图片地区
页面<template> <view class=""> <view class="ptb-30"> <view class="plr"> <textarea v-model="message" maxlength="1000" placeholder="输入内容(最多1000字)" class="w100" style="height: 450rpx;" /> </view> <view c.原创 2020-10-23 09:44:50 · 1312 阅读 · 4 评论 -
uniapp定位和选择城市
//页面<template> <u-index-list :scrollTop="scrollTop" :index-list="indexList"> <view v-for="(item, index) in list" :key="index"> <u-index-anchor :index="item.letter" /> <view class="list-cell u-border-bottom" v-for="(ite.原创 2020-10-12 10:34:46 · 9061 阅读 · 7 评论 -
uniapp上传图片
//点击更换图像 changeUserimg() { let _this = this uni.chooseImage({ count: 1, //默认9 success: function(res) { const tempFilePaths = res.tempFilePaths; uni.showLoading({ title: '上传中' }) uni.uploadFile({ ...原创 2020-10-09 14:35:35 · 698 阅读 · 1 评论 -
uniapp和vue连接socket
app.vue全局获取数据并存储在vuex<script> // 解压数据 import pako from './hybrid/html/pako.js'; export default { onLaunch: function() { uni.removeStorageSync('showUp') uni.removeStorageSync('rate') uni.removeStorageSync('coin') uni.removeStorageSyn原创 2020-10-08 14:14:03 · 2610 阅读 · 0 评论 -
uniapp后端合成分享海报
选择海报组件 share.vue<template> <view class=''> <u-popup class="popup flex flex-column" height="790" v-model="isshow" mode="bottom" @close="close"> <!-- 分享按钮 --> <view class="bg-white fixed-bottom"> <view class=".原创 2020-10-08 14:08:49 · 500 阅读 · 1 评论 -
uniapp插件使用canvas绘制分享海报
插件市场bug:浏览器上图片不显示,手机上就好了组件poster.vue<template> <view><canvas :canvas-id="id" :style="'width:' + boardWidth + '; height:' + boardHeight + ';' + customStyle"></canvas></view></template><script>/** 从 0x20 开始到原创 2020-10-08 11:48:38 · 2011 阅读 · 0 评论 -
小程序页面跳转及返回总结
1、跳转方式2、wx.navigateTo(Object object)保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。 wx.navigateTo({ url: `/pages/circle_detail/circle_detail?id=${id}` ...原创 2019-08-01 17:07:08 · 9010 阅读 · 0 评论 -
取消接口请求abort()
使用场景bug: tab切换,当点击tab2时,由于接口反应比较慢,在数据返回之前切换tab,会造成tab2的数据会拼接在切换后的tab列表下面解决方法:在tab切换时,取消未完成的接口请求 getList() { this.status == 'loading' // 用一个变量接受请求 this.req = uni.request({ url: baseUrl + '/api/userOrder', data: { page: thi原创 2020-09-11 15:32:11 · 2013 阅读 · 0 评论 -
uniapp空页面
组件 empty.vuebug: props默认值为defaultbug:动态style :style="{marginTop:top+‘rpx’}" ,marginTop 要大写bug:动态style :style="{width:width+‘rpx’,height:height+‘rpx’}" 单位后边不能加;<template> <view class='null text-center u-p-b-50' :style="{marginTop:top+'rp原创 2020-09-07 10:21:41 · 1805 阅读 · 0 评论 -
uniapp引入字体包——DIN
下载字体包放在common目录里引入并定义类名 // App.vue @font-face { font-family: "DIN"; src: url("/common/DIN/DIN-Medium.otf") } .DIN{ font-family: 'DIN' !important; }页面内使用 <view class="DIN u-font-32 red">123456789</view> <view class="DIN b原创 2020-08-27 10:02:36 · 3720 阅读 · 0 评论 -
uview1.x自定义tabbar
在pages.json中正常定义tabbar逻辑和字段, 只需配置tabBar字段list中的pagePath属性即可 "list": [{ "pagePath": "pages/tabBar/Home/home" // "text": "首页", // "iconPath": "static/img/Home.png", // "selectedIconPath": "static/img/Home-select.png" }, { "pagePa.原创 2020-08-24 18:18:14 · 12305 阅读 · 13 评论 -
uniapp引导页
使用背景图自动填充图片,是为了适配不同的屏幕pages.json第一项 { "path": "pages/guide/guide", //引导页 "style": { "navigationStyle": "custom" //自定义头部 } },引导页面<template> <view class='vh100 w100' v-if="!hasGuide"> <swiper class="swiper w100 h100" .原创 2020-08-21 09:21:48 · 937 阅读 · 0 评论 -
uniapp笔记和坑
注意事项需要下载 HBuildX 和微信开发工具可运行在浏览器(H5),微信开发工具(小程序),手机或模拟器(app)新建 uniapp 项目后,点击运行在微信编辑器的时候,若是第一次,会弹窗输入微信编辑器安装包所在的文件目录如果在微信编辑器运行失败,需要编辑器——设置——安全设置——开启服务器端口运行在手机,需要连接手机,点击项目选中状态在运行,运行后会在手机安装调试工具,点击手机上的工具即可打开...原创 2020-08-14 18:15:19 · 1513 阅读 · 1 评论 -
uniapp版本升级和热更新
bug:获取版本号是异步操作bug:非强制更新只弹出一次。方法:在close时,若是非强制更新本地存储标识,在onshow判断本地有标识不再弹出更新提示基本规则版本升级为大版本更新 版本号 1.0.0 1.1.0 1.2.0,区分安卓 和 ios,区分强制更新和自主更新热更新为小版本更新,不区分安卓 和 ios,可以不同时发版,但要保证相同版本的功能一致,静默更新判断规则传递参数手机类型 和 现有版本号 Vif 大版本的前两位 > V ==> 大版本更新else i原创 2020-08-14 18:10:00 · 4775 阅读 · 0 评论 -
uniapp嵌入html页面
创建目录结构,放入html文件嵌入webview标签即可原创 2020-08-12 18:37:24 · 9142 阅读 · 6 评论 -
uniapp安卓证书及高德地图秘钥申请
蒲公英——工具箱——安卓证书在线制作获取高德秘钥1、登录高德开发者:13838028812 密码:tt-kfz13072、控制台——应用管理——我的应用——创建新应用——添加3、安卓获取安全码下载jdk安装 百度安装成功后打开cmd,获取安卓安全码4、提交安卓5、提交ios6、得到高德key...原创 2020-12-02 14:00:16 · 865 阅读 · 0 评论 -
uniapp计算app缓存和清理缓存
计算data(){ return { fileSizeString:'' }},//methodsformatSize() { let that = this; plus.cache.calculate(function(size) { let sizeCache = parseInt(size); if (sizeCache == 0) { that.fileSizeString = "0B"; } else if (si原创 2020-08-10 17:42:00 · 2882 阅读 · 1 评论 -
eslint配置
新建 .eslintrc.jsmodule.exports = { env: { browser: true, es6: true, node: true }, extends: ['plugin:vue/recommended', 'eslint:recommended'], globals: { wx: 'readonly', Atomics: 'readonly', We原创 2020-07-29 11:46:06 · 311 阅读 · 0 评论 -
uniapp头部标题栏初步方案
整体app采用沉浸式顶部对于需要全屏的页面,开启自定义标题栏 //pages.json "pages": [ { "path": "pages/index/index", "style": { "navigationStyle":"custom" //开启自定义标题 } }, ]对于正常标题,正常配置// pages.json{ "path": "pages/news/index", "style": { "navigationBa原创 2020-07-23 11:43:11 · 3245 阅读 · 0 评论