2020年12月_叶浩成520

12月 11月 10月 09月 08月 07月 06月 05月 04月 02月

原创 uniapp 实现地图定位并导航的功能(微信小程序+安卓app+IOSapp)注意事项

微信小程序获取定位app获取定位

2020-12-31 14:31:46 3134

原创 Vue使用filters过滤时不能使用this的解决办法——两次遇到了，一定要记住奥~

Vue使用filters过滤时不能使用this的解决办法script部分filters: { getName(val) { for (let i = 0; i < this.list.length; i++) { let id = Object.keys(this.list[i])[0]; if (id === val) { return this.list[i][val]; } } }},html部分代码<

2020-12-30 21:19:17 2102

原创 vue this.$set(对象，对象参数，参数值)赋值后，视图不渲染的问题解决

问题出现场景：电商小程序的购物车页面，当选中某一个店铺时，该店铺中所有的商品都要选中，取消店铺的选中时，店铺中的所有商品都要取消选中。html结构checkbox是多选框，具体样式是方形的，为了能够实现圆形，可以在checkbox组件外面的标签中添加checkbox-round的class样式。<checkbox :checked="shop.checked" style="transform:scale(0.7)" @click="selectShop($event,shop)"/&gt

2020-12-29 15:14:45 5967 7

原创 vue-admin websocket接收消息推送+语音提示（详细代码）

websocket接收消息推送+语音提示这个是同事的代码，我拿来记录一下，希望以后可以看得懂……utils/websocket.jsconst audioUrl = require('@/assets/remind-music/remind.mp3')export default { install: function (Vue){ let Socket = '' let setIntervalWesocketPush = null let socketUrl = ''

2020-12-25 14:27:22 2691 4

原创 vue websocket实现消息推送和语音提醒功能

最近在做商家后台管理系统，在使用小程序或者app进行下单后，后台管理系统需要有实时的提醒，类似于美团或者饿了么的“您有新的订单，请注意查收”具体的操作我没有写，是其他同事整的这一块。下面记录一下百度到的相关知识点。vue + webSocket 实时任务信息通知WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。websocket

2020-12-24 21:28:24 11911 20

原创 uniapp 微信小程序选择地图位置并返回经纬度及详细地址（uni.chooseLocation和高德地图api两种方式实现）

uniapp 微信小程序实现选择地图位置功能最近在做商家小程序，就是用于给实体店老板进行网上开店的小程序。其中有一项功能就是获取商店的位置，要求支持：获取当前定位/检索到指定位置/地图选点等功能，并返回选择地点的regionId和经纬度以及详细的地址等信息。获取地理信息的授权功能1. manifest.json中写入授权地理位置的描述代码如下："permission" : { "scope.userLocation" : { "desc" : "您的位置将用于绑定您的区

2020-12-24 13:01:35 25578 32

原创 uniapp 微信小程序使用button调用在线客服聊天功能

微信客服聊天功能

2020-12-19 15:15:37 12107 6

原创 vue-admin 通过VUEX实时更新头像功能实现

vue-admin是一套基于vue+elementUi的后台管理系统框架，对前端来说真的非常友好，对一些想要搭建后台管理系统的后端同事也是一个很好的框架，实用性很高。近期，我们公司正在做商户平台，根据商家Logo的图片上传，右上角的图标也要实时更新。首先找到这个文件 src/layout/components/Navbar.vue<div class="avatar-wrapper"> <img :src="avatar? avatar + '?imageView2/1/w.

2020-12-18 23:16:43 3108 4

原创 uniapp 微信小程序页面跳转时传递参数（uni.switchTab传参无法获取,uni.reLaunch传参可以获取）

最近在做店铺的小程序，首页是店铺展示，可以是自己的店铺也可以是别人的店铺。我的页面，如果本人有店铺，则可以通过按钮点击事件进入到首页，然后首页加载的数据就变成了自己的店铺信息。uni.switchTab跳转tab页面无法传递参数由于这个是tab页面，则我首先想到的就是通过：uni.switchTab进行tab页面的跳转代码如下：enterShop(){ uni.switchTab({ url:"/pages/index/index?myShop=1" })},然后在首页的onS

2020-12-17 15:22:39 11813 2

原创 uniapp picker组件点击区域问题：目前是仅支持点击文字部分，改为点击整行均可以进行弹窗

最近在用uniapp开发微信小程序时，点击某些选项时，需要底部弹窗展示数据列，然后选择其中的一项。如下图所示：此时需要用到的就是picker组件：uniapp picker组件使用链接：https://uniapp.dcloud.io/component/picker?id=pickerhtml部分结构：<view class="item" > <picker :value="formData2.bankName" :range="bankArr" class="pick

2020-12-17 15:04:57 3917

原创 uniapp 仿支付宝首页流光按钮效果流光动画实现

支付宝流光按钮效果效果动效：按钮从小到大并出现弹跳效果流光自左向右滑过最终实现效果如下图所示：代码如下：<view class="ceshi"> 12点开抢</view><style lang="scss">@keyframes heart{ 0%{ transform:scale(0.9); } 60%{ transform:scale(1); } 80%{ transform:scale(0.9); } 95%{

2020-12-02 13:38:46 1240

原创 uniapp 电商app 步骤条功能的使用

步骤条功能原型图如下图所示：dcloud插件市场中是有现成的组件的：使用方法script中引入import uniSteps from '@/components/uni-steps/uni-steps.vue'export default { components: {uniSteps}}template中使用<uni-steps :options="[{title: '事件一'}, {title: '事件二'}, {title: '事件三'}, {title: '事

2020-12-01 19:39:48 6087 4

原创 uniapp 电商小程序商品双向联动列表使用详细功能介绍

商品双向联动列表的使用电商app中，商品双向联动列表是非常常见的。类似于这样的：dcloud插件市场是有现成的插件的，是黄河爱浪同学写的。。。商品双向联动列表插件地址：https://ext.dcloud.net.cn/plugin?id=707目前我没有详细调整样式，因为UI图还在修改中，最终实现的效果不是很好看，但是基本功能都是有的：接口的数据是前端模拟的，后续会根据接口自行调整数据。另外如果某个商品选择数量时，如果有不同的规格，则需要在底部弹窗进行规格的展示，然后选择规格后再加入购

2020-12-01 19:28:49 1729

原创 uniapp 微信小程序 getPhoneNumber 获取手机号提示 appid没有权限

appid没有权限问题出现原因，当前小程序账号没有进行“微信认证”登录微信小程序后台，可以查看到当前小程序的基本信息。微信小程序授权获取手机号接口因为需要用户主动触发才能发起获取手机号接口，所以该功能不由 API 来调用，需用组件的点击来触发。注意：目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体）。需谨慎使用，若用户举报较多或被发现在不必要场景下使用，微信有权永久回收该小程序的该接口权限。使用获取手机号接口的小程序需要“微信认证”通过的可以使用接口调用

2020-12-01 10:13:25 4313