yehaocheng520的博客

uniapp——上传图片获取到file对象而非临时地址——基础积累

uniapp 微信小程序和h5处理文件(pdf)下载+保存到本地+预览功能

没有苹果本也可以构建ios版本+生成不同设备效果图——香蕉云编

uniapp——ios证书申请——详细步骤+遇到的坑——技能提升

uniapp——实现base64格式二维码图片生成+保存二维码图片——基础积累

uniapp——实现二维码生成+保存二维码图片——基础积累

uniapp——实现在线选座功能——技能提升

uniapp——实现聊天室功能——技能提升

uniapp——实现电子签名功能——基础积累

一个电商的app，商品的展示是必不可少的，联动分类展示是很常见的：单向联动功能实现效果：左侧是分类列表，有很多分类，可以滑动并点击右侧是该分类下的商品列表仅支持左侧点击后右侧内容改变，为单向联动展示单向联动代码<view class="u-menu-wrap"> <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"&

作为一个电商的项目，支付功能是必备的，自定义数字支付键盘也是对应的。如果是用微信或者支付宝支付，则在支付时，会自动弹出数字键盘。现在来看看微信和支付宝的支付数字键盘的样式吧……好久没有用支付宝给人转账或者发红包了，支付宝的页面竟然有了这么多选项，真好……如果要自己做支付页面，则就需要自定义支付数字键盘了，此处用uview中的键盘组件来实现。效果如下：uview keyboard官网链接：https://www.uviewui.com/components/keyboard.htmlkeyb

前几天黄河爱浪大神帮我解决了一个问题，我很感激，更钦佩大神的厉害。翻看大神的博客时，发现黄河爱浪大神参与了uview的组件开发。真的是好厉害，大神是造轮子的人，我是用轮子的人……uview框架uview官网链接：https://www.uviewui.com/这个首页有element-ui的感觉奥，大厂的感觉：uview组件官网链接：https://www.uviewui.com/components/install.html在查看官网时，发现了一个对应的商城平台：vueshop商城平台链接：

store模块化开发首先是文档结构：store文件夹默认的文件是index.js，这个文件相当于主入口文件：store中Index.js文件内容如下：import Vue from "vue"import Vuex from "vuex"import cart from "./modules/cart.js"import shop from "./modules/shop.js"Vue.use(Vuex)const store = new Vuex.Store({ state:{

点击输入框时，键盘抬起，然后如下展示：会发现键盘部分会遮挡输入框，而我们想要的效果如下所示：解决办法就是在textarea中添加如下的属性：cursor-spacing="20" 具体数值可以根据实际情况进行调整。。。<textarea cursor-spacing="20" :focus="focus" auto-height="true" v-model="textMsg" @focus="textareaFocus" />解决！...

小程序发布与运行运行小程序可以点击菜单中的“运行”-“运行到小程序模拟器”,然后选择“微信小程序运行”即可打开微信开发者工具。测试环境与正式环境的切换之前的处理方式是：测试环境与正式环境需要手动切换。手动切换很容易忘记，导致微信公众平台上传的版本环境不对。可以通过下面的方式进行不同环境的发布。自定义发布新建一个config.js配置文件// path: let host = "https://xxxxx.net"let h5Host = "https://xxxxx.net"if (

电商app创建订单并调取支付接口创建订单后，如果创建成功，则需要调取支付接口，如微信小程序会自动调取微信支付接口，但是这个需要响应时间，如果在响应时间内，频繁点击“提交订单”按钮，则会出现错误，也不利于用户交互，此时可以通过延迟的方式来处理。延时处理思路如下：在data中定义一个变量存储时间参数，如：lasttime获取点击按钮时的当前时间，如：new Date().getTime()代码如下：let d = new Date();let nowtime = d.getTime();//

商品收藏夹关于商品收藏夹，有几个相关的地方：商品详情页面可以将商品加入收藏或者取消收藏。具体数据影响到收藏夹中的商品数据。收藏夹页面展示收藏中的商品数据。收藏夹中点击某一项商品还是会进入商品详情页面，在此页面点击取消收藏则收藏夹中去掉该商品。商品详情页面收藏或者取消收藏这个只需要调用接口即可，简单一带而过。。收藏夹点击进入商品详情页面，监听取消收藏事件在收藏夹进入的商品详情页面，商品肯定是已收藏状态，点击则一定会触发取消收藏事件。百度找了很多方法，找到最多的是下面的办法：我这边测

电商app购物车页面的刷新问题onShow周期函数中实时渲染数据在电商app中，购物车需要根据商品加入购物车/购物车商品删除/购物车商品下单等操作进行实时刷新数据。最开始的处理方案就是：在购物车页面的onShow周期函数中添加加载数据的方法，只要一进入到购物车页面，就进行数据的刷新。这样能够实现实时刷新，但是无论从哪个页面进入购物车页面，都会导致数据重新渲染，如果购物车中商品数量很多，则用户体验性非常之不好。利用vuex中的mapGetters进行判断是否要刷新数据具体实现方法如下：store

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

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

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

微信客服聊天功能

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

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

支付宝流光按钮效果效果动效：按钮从小到大并出现弹跳效果流光自左向右滑过最终实现效果如下图所示：代码如下：<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%{

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

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

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

uniapp 搜索框点击搜索键盘不收回无论是Uniapp标题栏中的检索框还是用的Input组件中的检索框，点击“搜索”或者“完成”时，都需要键盘收回。目前在实际开发中，安卓的是可以自动收回的，但是IOS的键盘不会。解决方法：uni.hideKeyboard(); //添加这一行代码即可...

uniapp 消息推送功能实现上周公司要求做一个消息推送的功能，由于现有的电商APP是用uniapp做的，所以优先考虑uniapp自带的unipush消息推送。ios证书导出踩坑ios推送证书导出连接：http://docs.getui.com/getui/mobile/ios/apns/这个链接我操作过好几次，因为原来就有证书，现在应该是在原有证书的基础上添加一个消息推送的功能，然后重新导出证书cer文件，通过苹果电脑自带的钥匙串功能导出p12证书。导出证书后，需要重新导出证书许可文件profi

uniapp 兼容IOS手机底部黑线IOS苹果手机有很多款手机底部都有一条黑线。app底部的tabbar 导航栏如果遇到IOS手机则会出现问题。因为我这边的tabbar导航栏是自己写的，不是用的uniapp自带的，所以如果遇到IOS手机底部有黑线的这种，需要将tabbar导航栏的高度调整一下才可以。除此之外还有些页面，底部有个按钮之类的，也是需要做兼容处理的。如下：解决办法如下：三行代码搞定：第一种办法：通过padding-bottom赋一个安全值可以通过padding-botto

阿里OSS对象存储前几天公司要求做一个app上传视频和图文的功能，针对视频与图片的上传，公司这边走的是阿里的OSS对象存储。在之前的测试过程中，部分视频上传会失败。由于我对这个OSS存储不是很熟，因此我咨询了阿里的售后工程师，结果发现：我挺瞎的……[捂脸]与阿里售后工程师聊天记录如下：问题描述：有些几M的视频是可以上传成功的，但是超过几M之后就不能上传成功了，但是具体几M，我还不清楚……，也没有办法弹窗提示用户。在提供了一系列的上传参数后，阿里工程师回复如下：在前端代码中，我找到了这个co

uniapp 打包成h5最近公司有个项目是针对各种小商小贩的，类似于微店，给每家每户开个店。由于之前都是用uniapp开发app 与小程序，话说我使用Uniapp也就4个多月的时间，并不具有很扎实的基础……所以当被问到是否可以用uniapp打包成h5时，有点懵……查找一番资料得知：Uniapp打包成h5与打包成app基本没啥区别，之前的开发步骤都是一样的。唯一的区别就是打包的过程而已……下面记录一下打包步骤，此步骤是借鉴的大神的，并非本人实际操作，如果实操过程中发现其他的问题，后面会及时更新此文

消息列表记录当前页面位置消息列表如上图所示，右侧红点代表消息未读。点击消息进行详情后，然后返回到消息列表中时，需要重新刷新页面，将未读消息转变为已读消息。然后还需要将页面直接定位到之前的位置。返回到当前页面然后刷新，这个应该是onShow中的方法。在onShow中进行接口的调用，将数据更新，然后页面位置的问题，可以通过onPageScroll的方法来处理。1.监听页面的滚动// scrollTop是data中定义的变量，可以将页面的滚动值赋值保存下来。onPageScroll(e) { th

uniapp 富文本框的使用uniapp中是有富文本框组件的。uniapp中的富文本框组件的使用官网链接：https://uniapp.dcloud.io/component/editor?id=editor官网富文本框的展示部分：（下面红框框住的菜单含义如下：）B 加粗I 斜体U 下划线居中靠右字体撤回反撤回添加横线图片结构部分：<editor id="editor" class="ql-container" :placeholder="placehold

正则表达式var regex1 = new RegExp("(i?)(\<img)(?!(.*?style=['\"](.*)['\"])[^\>]+\>)","gmi");//给不含style="" 或 style='' 的img标签加上style=""htmlstr = htmlstr.replace(regex1, "$2 style=\"\"$3");console.log("增加style=\"\"后的html字符串："+htmlstr);//正则匹配含有style的i

列表滑动删除功能这种滑动删除功能最早我是从QQ上看到的。这种效果在Uniapp插件市场中是已经有现成的。滑动删除插件链接：https://ext.dcloud.net.cn/plugin?id=208wkiwi-swipe-action组件的使用引用wkiwi-swipe-action组件import wkiwiSwipeAction from "@/components/wkiwi-swipe-action"注册wkiwi-swipe-action组件 components: {w

uniapp 中的video视频组件的层级问题uniapp中的video视频组件默认是最高层级的，也就是说无论写什么样式，都是在video的下层，这样就会影响到页面的展示。如果点击视频播放的时候，video视频组件会永远在最高层，为了能够解决这个问题，可以通过另一个方式来处理。就是视频播放的时候全屏展示，这样就可以避免层级的问题了。页面顶部添加一个视频的组件如果是视频格式的则可以点击进行视频的播放data中创建一个参数用于接收视频路径页面onReady时创建视频区域methods方

砍价功能剪切板最近公司在做电商中的砍价活动，如果在电商app中分享砍价商品信息到微信好友，展示的是一个h5链接的形式。下图分别是从 电商app分享砍价商品 分享到微信好友 砍价需要下载的电商app页面电商app 分享功能（分享到微信好友）share(item) { // 分享图文到微信聊天界面 uni.share({ provider: "weixin", // 服务商 scene:

瀑布流布局如上的布局就是瀑布流布局。由于图片的大小不一致，商品的格式错乱，形成的独特布局。如果想要实现这种布局，可以通过两种方式来实现：瀑布流布局实现方式一：column-count的方式column-count的方式实现瀑布流布局：https://www.jq22.com/webqd4677 主要用到的参数：column-count column-gap column-width 几个参数；column-count:瀑布流的列数column-gap: 相邻瀑布流之间的间距colum