小程序
文章平均质量分 57
jinxi1112
这个作者很懒,什么都没留下…
展开
-
uniapp实现九宫格拖拽排序(movable-view)
功能包括:选择多张图片上传,单击预览图片,长按拖拽排序,本文主要讲解拖拽排序的实现效果图如下:实现思路:1.定义imgList数组,存放图片元素;2.长按图片时记录当前移动元素index,简称moveId;3.移动时,记录结束位置,计算结束位置的index,简称moveToId;4.移动结束,记录原来的元素信息imgList[moveId],使用splice方法删除moveId元素,添加moveToId元素5.利用归位函数为movable-view的x、y赋值,将元素归位.原创 2022-04-22 14:38:51 · 6960 阅读 · 5 评论 -
微信小程序实现讯飞语音合成
参考文档:语音合成(流式版)WebAPI 文档微信小程序背景音频播报可参考:uniapp实现微信小程序websocket+背景音频语音播报实现步骤注册讯飞账号,完成实名认证,获取应用appid 连接讯飞websocket,在握手阶段,请求方需要对请求进行签名 发送请求文本,讯飞服务器返回合成后的音频片段,采用base64编码 将返回的音频片段组合,并转成可播放的MP3文件1.注册账号,并获取应用appid打开官网网址:讯飞开放平台-语音合成点击免费试用,按步骤完成实名认证后得.原创 2022-02-09 10:14:10 · 5728 阅读 · 9 评论 -
uniapp实现微信小程序websocket+背景音频语音播报
业务需求:根据后台返回消息播报语音,要求后台运行可继续播报实现步骤:建立socket连接监听消息,并建立心跳检测机制,防止socket意外断连 将接收到的文字信息转化为音频文件 使用uni.getBackgroundAudioManager(),实现后台运行可以持续播报音频 解决并发问题,同时接收多个文件按顺序播报1.建立socket连接onShow() { const SocketTask = getApp().globalData.SocketTask; if (!.原创 2022-02-08 14:32:18 · 7138 阅读 · 2 评论 -
uniapp使用高德地图定位(兼容app)
1.获取Key 查看官方文档需要:应用包名和SHA1(获取方法查看)2.配置manifest.json3.设置安全通讯域名登录微信公众平台,在 "设置"->"开发设置" 中设置 request 合法域名,将https://restapi.amap.com中添加进去4.下载微信小程序插件amap-wx.js地址在创建的项目中,新建一个名为 libs 目录,将 amap-wx.js 文件拷贝到 libs 的本地目录下,完成安装。5.在项目中使用...原创 2021-12-13 15:47:11 · 15741 阅读 · 0 评论 -
uniapp使用uni-data-picker插件实现省市区弹窗(兼容app)
官方文档:uni-app官网1.使用HBuilder导入插件.uni-data-picker 数据驱动的picker选择器 - DCloud 插件市场2.导入成功后,在src文件夹下多一个uni_modules的文件夹3.引入插件import uniDataPicker from '@/uni_modules/uni-data-picker/components/uni-data-picker/keypress.js';4.在页面中使用<uni-data-pic..原创 2021-12-06 15:46:59 · 9788 阅读 · 1 评论 -
mpx跨平台转web遇到的问题
1.class不允许使用标签名2.所有dom放入一个根节点3.onShareAppMessage分享钩子无法使用4.button的open-type无法使用5.自定义顶栏失效,web不显示解决:pageLifetimes不支持,将show改为attached6.setData报错解决:根据环境判断使用=赋值或setData7.wxs文件引用报错8.判断是否是web的方法 if (!navigator) { return fal原创 2021-11-15 09:54:29 · 229 阅读 · 0 评论 -
微信小程序优惠券列表领取(send-coupon插件)
插件配置和引入请参考官方文档:https://pay.weixin.qq.com/wiki/doc/apiv3/apis/chapter9_3_1.shtml<send-coupon bind:sendcoupon="getcoupon" bind:userconfirm="redirectuser" send_coupon_params="{{send_coupon_params}}" sign="{{sign}}" send_coupon_mercha原创 2021-11-11 14:26:03 · 5157 阅读 · 3 评论 -
canvas制作九宫格拼图(坐标完整版)
形状和位置如下图所示:drawOne (ctx) { const r = 10 ctx.moveTo(2 * r, 2 * r) ctx.lineTo(12 * r, 2 * r) ctx.lineTo(12 * r, 5 * r) ctx.arcTo(13 * r, 5 * r, 13 * r, 6 * r, r) ctx.lineTo(13 * r, 7 * r) ctx.arcTo(13 * r, 8 .原创 2021-07-15 17:55:42 · 818 阅读 · 0 评论 -
微信小程序使用canvas制作拼图动画
效果如上图制作思路:1. 制作9个由特殊图形拼成的九宫格,包含模糊和彩色高亮2.生成的拼图进行一系列路径动画(蓄能弹起效果)3.将生成的拼图拼贴在对应的位置上,并产生破碎动画特效技术实现思路:1.将拼图图片利用canvas rgb通道方法制作成模糊灰度图,参考博文https://blog.csdn.net/sunzhibin1/article/details/823879262.制作九宫格拼图<view class="canvas-wrap..原创 2021-07-15 16:06:35 · 1009 阅读 · 0 评论 -
小程序使用scroll-view时无法触发 onPullDownRefresh,自定义下拉刷新
心路历程:小程序底栏采用了fixed定位,导致页面滚动时ios手机出现底栏闪动,为了解决这个问题,将page滚动改为scroll-view,从而引发了下拉刷新失效,因为页面需要监控scroll滚动,不得已需要舍弃onPullDownRefresh,自定义了一个比较简单的下拉刷新,效果图如下:下拉松手0.5s后刷新并回弹。tempalte:将刷新代码放入scroll-view,loading动画我采用了vant组件,这个可以自己随意发挥 <scroll-view scrol原创 2020-09-16 10:14:20 · 2808 阅读 · 1 评论 -
修改Vant Weapp中popup的样式
使用custom-style可更改样式,如:上边框更改为圆角 <van-popup show="{{ show }}" position="bottom" custom-style="border-top-left-radius: 5px;border-top-right-radius: 5px;" ...原创 2019-11-28 16:09:00 · 13829 阅读 · 0 评论 -
小程序使用switchTab跳转带参数
1.当前页定义全局变量,并给变量赋值<script> // 定义全局变量 const app = getApp(); createPage({...selectCounty(county) { app.cityName = county.name; wx.switchTab({ ...原创 2019-11-28 16:05:27 · 3687 阅读 · 0 评论