- 博客(329)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 uni-app 处理数组（将一维数组转二维数组）
这里我们先看结果一维数组处理结果以下是处理代码let newArr = []; for (var i = 0; i < this.imgList.length; i += 2) { newArr.push(this.imgList.slice(i, i + 2)) } console.log(newArr)如果对你有用，关注一下博主的小程序，登录一下给予支持，以后有什么开源好用的源码都会上传到小程序...
2022-04-15 12:21:09
1626
原创 uni-app实现翻转动画（附源码）
这里不做过多解释直接复制就可以使用// 翻转动画turnAnimation() { var animation = uni.createAnimation({ duration: 1000, timingFunction: 'ease', //linear 全程匀速运动 ease 动画以低速开始，然后加快，在结束前变慢 }) this.animation = animation animation.rotateY(360).step() this.animationData =
2022-04-02 14:49:38
2318
2
原创 uni-app单商家点餐系统（已完结-附带源码）
这里我们将开始单商家点餐系统，我们从用户端开始出发为了提高用户使用效果，我将完善用户对操作方面的一些动画及流程上的优化这里先看一下本次更新页面后面我会将本次项目导图做出来，以便对整体项目的了解如果有想参与本次项目的朋友可以关注下方小程序-个人中心-客服联系我，或者有想要源码的朋友也可以通过下方小程序联系我......
2022-03-28 10:19:38
5227
10
原创 uni-app项目基础配置（在项目中经常做的一些公共封装方法）
这里我们就以uni-app举例，简单介绍一下在项目中需要的一些配置1、封装公共网络请求2、封装路由表对象（我们将项目中所有路由封装起来，方便统一管理）3、封装图片静态资源表5、封装相同数据统一管理，避免每个页面都需要定义6、使用store存储8、通用格式处理9、封装常用方法统一管理以上是我们本次项目总结，封装及调用方法这里我简单举几个例子校验手机格式function checkMobile(mobile) { return RegExp( /^((
2022-03-18 16:46:54
1407
原创 uni-app封装时间戳转日期（超详细）
创建一个js文件，这里我已utils命名：utils.js直接先看代码/** * @param {Object} n：数据转化 */function formatNumber(n) { n = n.toString() return n[1] ? n : '0' + n}/** * 时间戳转化为年 月 日 时 分 秒 * number: 传入时间戳 * format：返回格式，支持自定义，但参数必须与formateArr里保持一致 */function formatTi
2022-03-15 16:16:29
2018
原创 uni-app实现上传图片裁剪效果（附源码）
我们先来看一下效果封装一个组件在components下创建一个 文件夹随意命名，这里我是uni-img-cropperuni-img-cropper.vue<template> <view class="container" v-show="isShow"> <view> <view class="cropper-content"> <view v-if="isShowImg" class="uni-corpper"
2022-03-10 11:20:15
7803
23
原创 uni-app示例(前端上传图片及视频到七牛云)
这里我是以uni-app为例封装一个公共的上传七牛云方法，复制可直接使用最后有调用方法先直接看代码吧，有什么问题，下方留言讨论我们先在项目根目录创建一个common文件夹，接在在common下创建一个qiniuyunUploader.js可随意命名，这只是我的例子不是很规范qiniuyunUploader.js(function () { // 请参考demo的index.js中的initQiniu()方法，若在使用处对options进行了赋值，则此处config不需要赋默认值
2022-01-26 16:49:35
3045
原创 uni-app 数组获取根据条件获取第一个元素（find）
直接上代码let obj = this.list.find(data => { if(data.id === this.isIndex) { return data } }) console.log(obj)
2021-12-17 16:03:10
3414
原创 uni-app 实现左滑删除两种数据结构（超详细附源码）
我们先来看第一种简单的二维数组来张效果图实现代码<template> <view class="content unify-margin"> <view v-if="list.length !== 0"> <!-- 间隔 --> <uni-interval height="8px"></uni-interval> <view class="item unify-relative u.
2021-12-15 16:14:46
1693
原创 uni-app 使用scroll-view实现左右滑动会出现上下错乱解决办法
<!-- 左右滑动列表 --> <scroll-view scroll-x="true" class="scroll-view" show-scrollbar="false"> <view class="item" v-for="(item,index) in list" :key="index"> <image class="item-image unify-radius" :src="item.main_pic || errorImage" .
2021-12-09 09:18:37
2095
原创 uni-app 生成app证书及查看安全码
首先我们先安装JRE环境下载链接：https://www.oracle.com/technetwork/java/javase/downloads/index.html我这里安装的是windows下的下载之后可以下一步安装，我这里更改安装路径未D盘安装完之后将安装路径配置到环境变量我的电脑-属性-高级系统设置- 环境变量-选择Path-编辑-新建-复制进去保存就行了下面我们打开命令行输入keytool这就安装好了下面我们开始生成证书使用keytool -g.
2021-12-08 11:24:20
2905
原创 前端防止快速连续点击,节流函数
// 防止快速连续点击,节流函数function throttle(fun, delay) { let oadDate = Date.now(); return function() { let _this = this; let args = arguments; let newDate = Date.now(); if(newDate-oadDate > delay) { fun.apply(_this, args); oadDa.
2021-12-07 19:42:36
898
原创 uni-app 接收网址参数
onLoad(options) { let params = this.getRequestParams(); let mobile = params['mobile']; // 参数名 console.log(mobile ) }, methods: { // 获取utl参数 getRequestParams() { let url = location.href; let requestParams = {}; if (url.indexO.
2021-11-23 13:48:56
2098
原创 js--二维数组对象中根据某个相同的属性值合并其他项
let arr = [ { id: 1, list: { id: 66 } }, { id: 1, list: { id: 44 } }, { id: 2, list: { id: 55 } }, { id: 2, list: { id: 33 } }, { id: 3, list: { id: 11 } }, { id: 3, list: { id: 22 } } ] let tempArr = [], newAr.
2021-11-04 14:39:11
1204
原创 JS获取当前时间的年、月、日、时间等
var date = new Date(); date .getYear(); //获取当前年份(2位)date .getFullYear(); //获取完整的年份(4位)date .getMonth(); //获取当前月份(0-11,0代表1月)date .getDate(); //获取当前日(1-31)date .getDay(); .
2021-10-30 12:09:35
4788
原创 uni-app 实现轮播图（完整版）
先来张效果图吧代码不多，也不难，这里直接上代码了，复制就可以用<template> <view class="content"> <!-- 轮播图 --> <swiper class="image-container" previous-margin="45rpx" next-margin="45rpx" circular autoplay @change="swiperChange"> <swiper-item :cla.
2021-10-28 10:20:37
18758
13
原创 uni-app 关键字高亮
这里直接上代码了，备注都在代码里<template> <rich-text :nodes="html"></rich-text></template><script> export default { props: { content: { // 需要高亮的内容 type: String, default: '' }, keys: { // 高亮的关键字，多个用 | 隔开 type: S
2021-10-23 12:12:05
2459
6
原创 css 动画集合（亲测可用，完善中...）
/*弹层动画（从上往下）*/.fadeIn { -webkit-animation: fadeInDown .3s; animation: fadeInDown .3s;}@keyframes fadeInDown { 0% { -webkit-transform: translate3d(0, -20%, 0); -webkit-transform: translate3d(0, -20%, 0); transform: .
2021-10-08 16:28:08
347
原创 一行显示4个，超出自动换行（解决办法）
先看一下问题吧data() { return { myHealthAdminMenu: { name: '健康管理', list: [{ name: '基础信息', image: $mAssetsPath.iconHealth1, isAstrict: false }, { name: '健康档案', image: $mAssetsPath.iconHealth2, isAstrict: false }, { .
2021-09-18 16:05:13
4975
原创 uni-app scroll-view 点击实现元素居中？
前言在 uni-app 开发中scroll-view组件用到几率也是比较大滴，存在问题主要是：点击子元素，子元素在什么位置展示？今天我们来好好总结一下 0.0~Part.1 可能出现的需求效果一：当前点击子元素靠左展示效果二：当前点击子元素靠左留一展示效果三：当前点击子元素居中展示应该常见的用户体验效果就这三种了，我们看看怎么实现？go~Part.2 我的思路在 uni-app 的官方(uni-app官网) API中对scroll-vi...
2021-09-17 17:06:11
4562
5
原创 uni-app前端解密微信小程序手机号加密数据
在官方下载地址：https://res.wx.qq.com/wxdoc/dist/assets/media/aes-sample.eae1f364.zip获取手机号：<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="button base-button-box"></button>刚才下载的解密文件我们只需要引入WXBizDataCrypt.js就可以了，node文.
2021-07-14 19:50:37
5262
18
原创 uni-app实现组件菜单左右滑动并点击切换（选中居中显示）
先看下效果效果一： 可直接使用scroll-into-view属性实现 或者 也可使用scroll-left思路：第一种，scroll-into-view 绑定一个动态 ID，子元素循环产出ID，点击时进行绑定(这次就不做代码产出了) 第二种，计算每个子元素的宽度，点击时获取当前点击元素前面的元素宽度之和效果二：使用scroll-left思路：计算每个子元素的宽度，点击时获取当前点击元素索引 - 1 的前面元素宽度之和，相比于效果一的第...
2021-05-26 11:07:35
6223
10
原创 uni-app使用canvas绘制海报（记录一波）
这里直接上代码了都有注释先来张绘制效果<canvas class="canvas" :style="{width: canvasWidth + 'px', height: canvasHeight + 'px'}" canvas-id="myCanvas"></canvas>export default{ data() { return { backImage: '', // 背景图
2021-05-18 11:42:47
1950
原创 uni-app在打包h5标题隐藏
在我们用uni-app打包h5项目的时候会出现两个标题我们需要把下面标题隐藏掉， 只需要在项目Vpp.vue公共css隐藏一下<script> export default { onLaunch: function() { console.log('App Launch') }, onShow: function() { console.log('App Show') }, onHide: function() { console.log('
2021-05-13 17:41:34
2469
原创 uni-app项目h5本地访问接口配置
创建uni-app项目找到manifest.json文件点击源码视图使用方法参考https://mp.csdn.net/editor/html/116757653
2021-05-13 17:22:50
2882
原创 uni-app项目封装网络请求
在项目根目录创建一个utils文件夹主要放一些项目公共封装方法在utils下创建request.js文件import indexConfig from '@/config/index.config'这个引入文件参考上一篇https://blog.csdn.net/qq_42543264/article/details/116757495/** * 封装网络请求 */import indexConfig from '@/config/index.config'module.exp..
2021-05-13 17:13:02
1385
原创 uni-app项目配置公共服务器域名
在项目根目录创建一个config文件夹主要放一些项目公共配置管理在config文件夹下创建一个index.config.js文件const CONFIG = { // 开发环境配置 development: { assetsPath: '/static', // 静态资源路径 baseUrl: '', // 后台接口请求地址 hostUrl: '', // H5地址(前端运行地址) websocketUrl: '', // websocket服务端地址 weixinAppI
2021-05-13 17:08:30
5928
原创 uni-app 判断浏览器是在普通浏览器中还是微信浏览器中
uni-app判断let status = navigator.userAgent.toLowerCase(); if (status.match(/MicroMessenger/i) == "micromessenger") { return '微信浏览器' }else{ return '普通浏览器' }...
2021-04-25 10:03:54
2594
原创 微信小程序跳转另一个微信小程序携带参数并接收参数
当前微信小程序wx.navigateToMiniProgram({ appId: 'xxx', // 跳转小程序的appId path: '', // 跳转小程序的路径 extraData: { // 需要带的的参数 id: 1, }, envVersion: 'release', // 有效值 develop（开发版），trial（体验版），releas...
2021-03-30 09:17:40
10855
1
原创 uni-app 解析富文本将html转换
这里我说一下用法就行了， 源码可以自行下载我们只需要在需要的地方引入该组件即可注册组件在需要的位置渲染该组件<u-parse :content="article" :imageProp="imageProp" @preview="preview" @navigate="navigate"></u-parse>export default { data() { return { article: '',
2021-03-27 14:59:14
2315
原创 uni-app 从底部向上弹出菜单
我在项目需求中需要实现从底部向上弹窗菜单效果功能在uni-app给出原生组件showActionSheet发现设置标题， 在uni-app项目中正常显示， 但是在微信小程序中不显示了， 我这里还有一个问题就是标题太长， 而showActionSheet没有办法设置标题字体大小， 这就很尴尬了接下来看看我已经实现的效果吧这是我需要效果官方没有给我们， 这里我们只能自定义了项目根目录创建一个文件夹components主要是放一些我们组件components下在创建一个文件夹show-
2021-03-27 14:47:25
12474
12
原创 css 实现漂亮的分割线
<div class="test"></div>.test { width: 100%; height: 10rpx; background-color: #fff; background-image: linear-gradient(0deg, rgba($color: #ff6a00, $alpha:.5) 50%, transparent 50%), linear-gradient(90deg, rgba($color: #ff6a00, $a.
2021-03-18 15:09:01
4055
原创 js二维数组去重
var arr = [{ key: '1', value: '乐乐' }, { key: '2', value: '博博' }, { key: '3', value: '淘淘' },{ key: '4', value: '哈哈' },{ key: '1', value: '乐乐' }]; // 方法1：利用对象访问属性的方法，判断对象中是否存在ke...
2021-03-10 10:30:18
918
原创 微信小程序更新机制
在app.js// app.jsApp({ onLaunch() { this.autoUpdate() }, // 更新机制 autoUpdate: function() { var _this = this; // 获取小程序更新机制兼容 if(wx.canIUse('getUpdateManager')) { const updateManager = wx.getUpdateManager() // 1.检查小程序是否
2021-02-18 09:38:12
718
原创 微信小程序使用wxParse，解决图片显示路径未拼接问题
另外附上小程序 wxParse的使用方法小程序 转换富文本编辑器的方法先到github下载一个库 https://github.com/icindy/wxParse包含文件夹 -wxParse --wxParse.js(必须存在) --html2json.js(必须存在) --htmlparser.js(必须存在) --showdown.js(必须存在) --wxDiscode.js(必须存在) ...
2021-02-18 09:31:55
581
原创 微信小程序实现跑马灯效果(自定义组件详解)
首先看一下效果吧首先我们在项目根目录建一个公共文件夹,这里我命名为components在components里面创建一个组件, dt-horse-race-lamp > index 最后我会把我的目录结构给大家看一下, 代码都有注释,这里我就不做过多的解释了组件wxml<view class="horse-race-lamp"> <!-- 跑马灯效果 --> <view class="example"> <vie...
2021-01-27 14:02:01
3780
原创 微信小程序将html转为wxml(超详细)
微信小程序开发虽说是比较偏向前端开发，但是它们的语法结构又不太一样。例如，wxml跟html就有本质的不同，就拿a标签来说吧，wxml是不支持a标签的，还有就是wxml不兼容html，下面小编就针对这个问题来分析一下怎么才能将html转换成wxml。具体步骤如下：到https://github.com/icindy/wxParse下载这里我直接上代码了,不是太难,百度也有很多先看一下我的数据结构创建一个common文件夹,把wxParse放进去在需要的页面js里面引用const
2021-01-21 11:36:38
8392
16
原创 css实现底部圆弧
页面布局如下：<view class="box"> 我是页面内容</view>//圆弧部分的高度是由box的高度决定的css部分代码如下所示：.box { position: relative;}.box::after { content: ''; width: 140%; height: 100%; position: absolute; left: -20%; top: 0; z-index: -1; border
2021-01-19 16:35:10
2120
微信小程序实现收货地址城市选择效果mock.js
2020-11-17
微信小程序实现城市选择效果city.js文件
2020-11-12
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人