微信小程序
文章平均质量分 93
微信小程序相关功能知识点
12程序猿
这个作者很懒,什么都没留下…
展开
-
Java开发实现微信小程序支付(微信支付)
目录一、前期准备工作1.申请小程序开发者账号并认证2.小程序开通微信支付3.开发指引4.到官方下载Java的支付SDK二、代码实现1.开发流程:2.实现步骤2.1 下单,生成待支付订单2.2 调用微信统一下单2.3 小程序发起微信支付3.后台业务逻辑涉及到的工具类及参数封装类3.1 WeChatPayDto3.2 WeChatPayUtil:微信支付工具类3.3 WXPayUtil、WxPayNotifyResponse3.4 HttpUtils工具类3.5 ErrorCode:返回码3.6 request原创 2021-08-30 17:47:59 · 19492 阅读 · 23 评论 -
微信小程序实现客服功能、word文件下载到本地
微信小程序项目开发中,遇到联系客服和word文档打印(下载)功能,记录一下,以便查阅。一、客服功能官方文档1.在小程序中加入客服消息按钮:使用button按钮,设置open-type=‘contact’ 属性。<!--联系客服--> <view> <button open-type='contact' style="border: none;padding: 0;font-size: unset;line-height: unset;font-weight:原创 2021-01-13 11:40:23 · 2179 阅读 · 0 评论 -
微信小程序 实时搜索并高亮关键字
微信小程序实现实时搜索并高亮关键字的功能效果一、效果图二、实现流程:1.在文本框中输入关键字key,如“比赛”,检索出比赛相关的列表key = 比赛2.处理结果列表:在key的前后加分隔符,如“%%”3.通过第2步的分隔符进行切割,获取新的数组:str.split("%%")4.页面for循环上面的新数组:与key相等,则高亮显示,否则常规样式显示三、代码实现1.index.js 部分代码:2.index.wxml 部分代码:注意:下面的函数 比较关键//返回一个使用key切割s原创 2020-12-22 14:58:35 · 2674 阅读 · 2 评论 -
微信小程序 之 去掉滚动条样式
微信小程序去掉滚动条样式想要实现的效果:保留滚动效果,但是要去掉滚动条/**去除滚动条样式 */::-webkit-scrollbar{ display: none; width: 0; height: 0; color:transparent;}原创 2020-11-20 14:42:40 · 773 阅读 · 0 评论 -
java代码实现获取微信小程序码并返回图片地址
java调用微信小程序服务器API获取小程序码一、实现思路1.登录微信https://mp.weixin.qq.com获取小程序AppID和AppSecret;2.根据小程序AppID和AppSecret获取accesstoken3.调用小程序码API接口:接口地址:https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN并添加post请求参数4.请求成功,会直接返回图片二进制内容5.对返回的数据进原创 2020-09-25 10:54:04 · 1600 阅读 · 0 评论 -
微信小程序 获取小程序码和二维码java接口开发
前言:目前小程序推出了自己的识别码,小程序码,这个圆形的码看起来比二维码好看。本文总结微信小程序的获取小程序码和二维码并生成二维码图片的接口开发。主要内容摘抄自微信小程序的API文档,java接口开发是自己总结开发。微信小程序API文档:获取二维码一、简介通过后台接口可以获取小程序任意页面的二维码,扫描该二维码可以直接进入小程序对应的页面。目前微信支持两种二维码,小程序码(左),小程序二维码(右),如下所示:二、获取小程序码目前有两个接口可以生成小程序码,开发者可以根据自己的需要选择合适的接口。转载 2020-09-25 10:23:34 · 4352 阅读 · 1 评论 -
如何灵活修改 第三方插件vant webapp中的DatetimePicker 时间选择插件的选中样式
开发mpvue小程序项目中 ,使用第三方插件vant webapp 的DatetimePicker 时间选择插件时,想要修改 选中项的样式,遇到了问题,按照官方文档 修改,但是 没起效果,经过一番处理,终于解决了。 先把方法记录如下,以便以后再遇到此类问题。1.需求:vant webapp 的 DatetimePicker 时间选择插件 默认选中行的字体颜色是 黑色,如下:想要的效果是 默认选中行的字体颜色是蓝色,如:在 不直接修改插件本身wxss样式的情况下,如何实现想要的效果???2.解决原创 2020-09-11 16:29:57 · 2377 阅读 · 0 评论 -
微信小程序---批量倒计时js方法通用
参考 微信小程序----团购或秒杀的批量倒计时实现 对倒计时countDown()方法做整理,实现通用方法,以便多个页面使用。countDown()通用处理如下:1.新建一个.js文件:util.js2.在util.js 文件中 编写 countDown()方法,传入endTimeList参数(活动的结束时间数组),代码如下:/*** 倒计时函数* endTimeList:活动的结束时间数组*/const countDown = endTimeList =>{ console.l原创 2020-07-20 10:31:53 · 711 阅读 · 0 评论 -
微信小程序----团购或秒杀的批量倒计时实现
效果图实现思路微信小程序实现倒计时,可以将倒计时的时间进行每一秒的计算和渲染!一、JS1.模拟商品列表数据 goodsList;2.在 onLoad 周期函数中对活动结束时间进行提取;3.建立时间格式化函数 timeFormat;4.建立倒计时函数 countDown;5.在 onLoad 周期函数的提取结尾执行倒计时函数 countDown。倒计时函数详解1.获取当前时间,同时得到活动结束时间数组;2.循环活动结束时间数组,计算每个商品活动结束时间的倒计时天、时、分、秒;3.转载 2020-07-20 10:05:41 · 726 阅读 · 0 评论 -
微信小程序 腾讯位置服务地图选点和路线规划
微信小程序使用 腾讯位置服务插件 实现 地图选点和路线规划效果图:实现过程点击“开发指南”,根据对应打开网页中的接入指引进行开发实现。腾讯位置服务地图选点:开发指南腾讯位置服务路线规划:开发指南实现源码下载地址:点击此处...原创 2020-07-14 14:18:34 · 4704 阅读 · 6 评论 -
微信小程序实现视频功能(三):视频弹幕、弹幕颜色自定义效果
微信小程序开发实现视频详情播放与发送弹幕弹幕发送颜色有两种处理:随机颜色、选择颜色效果图:1.视频播放器2.选择弹幕颜色1…视频播放器微信已经封装的非常好.我这里只用了很简单的几个属性由于以前没做过弹幕,看到danmu-list就激动了.而且只需要将弹幕内容加入集合即可.弹幕列表的元素: { text: '第 1s 出现的红色弹幕',//文本 color: '#ff0000',//颜色 time: 1//发送的时间 }其他转载 2020-07-13 11:31:14 · 3274 阅读 · 1 评论 -
微信小程序开发之城市定位(腾讯位置服务)
微信小程序实现城市定位功能一、定位当前城市信息的步骤:步骤1:获取当前地理位置,首先要拿到用户的授权 wx.openSeting步骤2:调用 wx.getLocation获取当前用户的地理位置(微信返回的是经纬度、速度等参数)步骤3:微信没有将经纬度直接转换为地理位置,借用腾讯位置服务中关于小程序的地理位置转换JS SDK 的API(返回信息中包括国家,省、市、区、经纬度等地理位置)—qqmapsdk.reverseGeocoder逆地址解析城市信息解析成功,进行判断:判断一:如果本地存储没有原创 2020-07-14 13:49:15 · 5834 阅读 · 1 评论 -
微信小程序实现图片轮播(原生)
微信小程序实现图片轮播:使用 小程序原生组件swiper和swiper-item来实现。一、官方文档中swiper和swiper-item的介绍:Swiper滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。Swiper-item仅可放置在swiper组件中,宽高自动设置为100%。二、开发实现效果图1.index.wxml图片轮播<!--pages/index/index.wxml--><view class="containerBo原创 2020-07-14 11:20:57 · 2480 阅读 · 0 评论 -
小程序的生命周期函数的整理
微信小程序生命周期函数1.app.js中的生命周期方法:onLaunch、onShow、onHide、onError,以及开发者添加的函数或者数据2.在page页面中定义的生命周期方法其中,打开小程序后会依次执行onLoad,onReady和onShow方法前后台切换会分别执行onHide和onShow方法,当小程序页面销毁时会执行 onUnload方法...原创 2020-07-13 15:41:27 · 359 阅读 · 0 评论 -
微信小程序开发实现 --- 阻止事件冒泡
微信小程序阻止冒泡1.普通按钮事件 @click.stop2.分享 open-type="share":(1)方式一:button 上加 catchtap="share"(2)方式二:设置 button为绝对定位原创 2020-07-13 15:34:21 · 810 阅读 · 1 评论 -
微信小程序 屏幕滚动监听
一、监听屏幕滚动 判断上下滚动onPageScroll: function (ev) { console.log(ev) let _this = this //当滚动的top值最大或者最小时,为什么要做这一步是由于在手机实测小程序的时候会发生滚动条回弹,所以为了解决回弹,设置默认最大最小值 if (ev.scrollTop <= 0) { ev.scrollTop = 0 } else if (ev.scrollTop > wx.getSys原创 2020-07-13 15:30:31 · 2360 阅读 · 1 评论 -
微信小程序实现视频功能(二):视频列表与下载
微信小程序开发实现视频列表呈现与视频下载功能一、功能介绍1.列表显示(初始显示封面图)2.点击播放视频,点击另一个,上一个暂停并显示封面图3.点击下载图标,下载视频到本地二、代码实现效果图:1. video-list.wxml<!--pages/video-list/video-list.wxml--><view class="mainContent"> <view wx:for="{{videoList}}" wx:key="{{index}}"原创 2020-07-13 10:48:01 · 5629 阅读 · 6 评论 -
微信小程序实现视频功能(一):视频上传
微信小程序开发实现视频的上传(官方提供了API,基本直接调用就可以了)一、效果图:二、代码实现1. video.wxml<!--pages/video/video.wxml--><view class="main"> <view class="playerInfo"> <view class="video" wx:if="{{clickFlag}}"> <image class="videoCo原创 2020-07-13 10:21:55 · 20846 阅读 · 8 评论 -
微信小程序 定时器setInterval、setTimeout,简单易用
setTimeout setTimeout(function() { console.log('doSomething') }, 2000);上面就是一个2s的定时器,最基础的简单用法。这个方法也可以返回一个id,即定时器id,用来清除定时,比如:clearTimeout(timeoutID)setIntervalsetInterval与setTimeout的使用差别不大,参数都是一样的,区别就在于setTimeout是到时执行一次,setIn转载 2020-07-13 09:52:51 · 1374 阅读 · 0 评论 -
微信小程序实现列表的横向滑动
微信小程序原生方式实现列表的横向滑动的两种方法:效果图:方式一:简单样式实现父元素设置:white-space:nowrap;//不换行overflow-x: auto;子元素设置:display:inline-block;方式二:scroll-view 标签 + 样式scroll-view的横向滚动:scroll-view的内层view元素需要:display:inline-block;scroll-view的外层元素需要:white-space:nowrap;实现代码:原创 2020-07-13 09:44:35 · 4508 阅读 · 1 评论 -
微信小程序实现动态添加删除自定义选项
微信小程序实现动态添加删除自定义选项一、功能介绍点击“添加选项”,新增自定义选项输入框;点击选项输入框左侧的“减号图标”可以删除该行输入框。二、代码实现先看效果图1.wxml 代码<!--pages/packageA//selfdefine-option/selfdefine-option.wxml--><view class="main"> <view wx:for="{{options}}" wx:key="{{index}}"> &l原创 2020-07-13 09:26:09 · 1841 阅读 · 1 评论 -
微信小程序开发之『弹出菜单』特效(转)
先看下效果图.:1.popMenu.jsPage({ data: { isPopping: false,//是否已经弹出 animPlus: {},//旋转动画 animCollect: {},//item位移,透明度 animTranspond: {},//item位移,透明度 animInput: {},//item位移,透明度 }, //点击弹出 plus: function () {转载 2020-07-13 09:14:17 · 991 阅读 · 0 评论 -
最简单的微信小程序滑动删除
好了,言归正传,今天实现一个在android和ios很常见的功能,列表item滑动删除,老规矩,先上图镇楼实现原理就是:1、将你要展示的布局和删除按钮放在同一个父item布局中,水平排列2、让你要展示的布局充满屏幕,通过css样式让超出的删除按钮隐藏3、监听touch事件,平移布局显示和隐藏删除按钮说完原理下面开始看实现,首先看列表xml的实现(其实小程序中没有严格意义上的列表控件,依靠for循环来生成列表)<view class="touch-item {{item.isTouch转载 2020-07-10 14:33:42 · 1193 阅读 · 0 评论 -
微信小程序实现自定义组件
微信小程序中的组件前言之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!!好在微信小程序的库从 1.6.3 开始,官方对于自定义组件这一块有了比较大的变动,首先比较明显的感觉就是文档比以前全多了,有木有!(小程序文档),现在小程序支持简洁的组件化编程,可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中复用,提高自己代码的可读性,降低自己维护代码的成本!本篇文章就是手把手教你实现小程序中自定义组件转载 2020-07-10 14:16:08 · 336 阅读 · 0 评论 -
微信小程序之自定义分享功能
小程序调起分享的两种方式:方式1:小程序右上角自带的分享功能(…):如果在当前页面调用wx.hideShareMenu()方法,那么右上角的分享功能将被隐藏,当然,隐藏方法与现实方法是承兑出现的,调用wx.showShareMenu()方法,可以显示该功能。方式2:自定义分享按钮 <button open-type='share'>分享</button>一、介绍微信小程序的分享功能可以分享页面给朋友或群聊,但是不能分享到朋友圈,需要分享朋友圈的话,可以在小程序内设计一个原创 2020-07-10 13:52:02 · 8954 阅读 · 0 评论 -
微信小程序更新机制
微信小程序更新机制1)小程序的启动方式:冷启动----小程序首次打开或销毁后再次被打开热启动----小程序打开后,在一段时间内(目前:5分钟)再次被打开,此时会将后台的小程序切换到前台。2)根据以上两种启动方式,相应的更新机制为:小程序冷启动时,会检查小程序是否有最新版本。如果有则将异步下载最新版本,但是仍将运行当前版本等到下一次冷启动时再运行最新版本。如果你想现在就使用最新版本则需要调用wx.getUpdateManager API进行处理;3)关于wx.getUpdateManager实战转载 2020-07-10 13:34:00 · 319 阅读 · 0 评论 -
微信小程序版本自动更新
微信小程序版本自动更新知识点1: 当用户点击左上角关闭,或者按了设备Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台,只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。知识点2: 小程序的启动分为"冷启动" 和 “热启动”.热启动是指: 小程序打开后,在一段时间内(目前:5分钟)再次被打开,此时会将后台的小程序切换到前台。冷启动是指: 小程序首次打开或销毁后再次被打开知识点3: 更新版本冷启动时, 如果发现有新版转载 2020-07-10 11:17:48 · 3156 阅读 · 0 评论 -
微信小程序 下拉刷新、上拉加载demo
原生微信小程序 下拉刷新、上拉加载demo代码一、item-list.wxml<!--pages/item-list/item-list.wxml--><view class="itemList"> <view class="item" wx:for="{{itemList}}" wx:key="{{item.id}}"> <view class="name">{{item.id}}{{item.name}}</view&原创 2020-07-10 11:01:01 · 1325 阅读 · 1 评论 -
小程序开发——自定义下拉刷新和上拉加载更多
小程序的下拉刷新和上拉加载更多,系统已经提供方法。我这里就是利用系统的方法,用自定义的UI和动画去实现。先附上效果图下拉刷新上拉加载更多第一步想要利用系统的方法,首先要开启。开启方法:在相应的.json文件里面添加"enablePullDownRefresh": true(当然,这个是默认开启的,如果发现无法使用时,就手动再开启一次)第二步需要在相应的.wxss文件添加加载动画的样式.weui-loadmore { width: 100%; height: 100rp转载 2020-07-10 10:34:40 · 618 阅读 · 0 评论 -
微信小程序下拉刷新/上拉加载更多
查看文档,在用page()函数注册页面的时候有这样的两个对象参数用户判断用户在最顶部下拉和到达最底部,在小程序里,用户顶部下拉是默认禁止的,我们需要把他设置为启用,在app.json中的设置对所有页面有效,在单独页面设置则对当前页面有效;看一下json文件"enablePullDownRefresh": true,注意这里的true是布尔型而不是字符;有同学说设置完之后可以下拉,但是看不到图标;在app.json中这样设置;这样下拉之后就可以看到了;每个页面生成的时候已经默认为我们设转载 2020-07-10 10:27:53 · 301 阅读 · 0 评论 -
微信小程序使用flyio封装request请求
flyio:一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、自动转换JSON、支持请求/响应拦截器、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。flyio官方文档flyio下载地址原生微信小程序中使用flyio请求,封装代码如下一、在src/utils下新建request.js文件,文件代码如下:/*flyio: 一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。 可以让您在多原创 2020-07-10 10:00:26 · 2639 阅读 · 1 评论 -
微信小程序网络封装-简单高效(转)
转自:https://www.cnblogs.com/denluoyia/p/9428570.html一、引言微信小程序的网络请求很便捷,直接调用就可以了。但最好还是根据需求,处理一些参数回调信息,进行二次封装,为整个小程序应用直接提供调方法接口岂不是更好?利用网络请求的一贯思维,分三个回调:onStart:开始请求, onSuccess:请求成功回调, onFailed:请求失败回调, 意思就是字面意思~二、netUtil.js 网络请求工具封装在utils目录下创建一个netUtil.js文件转载 2020-07-10 09:04:12 · 304 阅读 · 0 评论 -
微信小程序获取用户收货地址
获取用户收货地址需要用户点击授权,所以有两种情况,确认授权、取消授权。情况一,用户第一次访问用户地址授权,并且点击确定授权。情况二,用户点击取消授权后,再次获取授权流程:(代码逻辑整理)1.点击事件触发函数,获取用户当前设置2.根据用户当前设置中的用户授权结果,判断是否包含收货地址授权3.如果包含收货地址授权并且没有取消过收货地址授权,直接调用wx.chooseAddress(),获取用户收货地址。4.取消过收货地址授权,调用wx.openSetting(),调起客户端小程序设置界面让用户转载 2020-07-08 17:17:38 · 2308 阅读 · 0 评论 -
微信小程序 --- 物流快递查询
一、前言我对小程序开发实现 物流信息查询 功能比较感兴趣。在网上查找了一些相关资料,实现了相关功能。效果图:点击选择要查看的物流公司,输入快递单号,点击查询物流信息:二、准备工作使用阿里云 — 快递物流查询API接口1.购买套餐登录或注册阿里云,进入https://market.aliyun.com/products/57126001/cmapi010996.html?spm=5176.2020520132.101.2.fd3b7218w99ZrP#sku=yuncode499600原创 2020-07-08 17:01:43 · 7765 阅读 · 1 评论 -
微信小程序之分包
微信小程序分包浏览查看微信小程序官方文档,整理如下:一、二、使用分包配置方法假设支持分包的小程序目录结构如下:├── app.js├── app.json├── app.wxss├── packageA│ └── pages│ ├── cat│ └── dog├── packageB│ └── pages│ ├── apple│ └── banana├── pages│ ├── index│ └── lo原创 2020-07-08 15:53:39 · 2327 阅读 · 0 评论 -
微信小程序 -- 获取语音,并将语音转为文字(插件:微信同声传译)
实现的功能是获取语音,并将语音转为文字,实现效果如下:一. 小程序后台添加插件:微信同声传译登录小程序后台:https://mp.weixin.qq.com1. 设置 -> 第三方设置 -> 添加插件2.输入“微信同声传译”,点击搜索,之后选择并点击添加3.成功添加后,点击详情4.复制它的AppID和最新版本号(后序有用)。二、 配置在app.json进行配置其中,version的值对应上面的版本号,provider的值对应上面的AppID "plugins":{转载 2020-07-08 15:39:37 · 3874 阅读 · 3 评论 -
微信小程序开发之授权登录流程
原创 2020-07-08 15:08:18 · 704 阅读 · 0 评论 -
微信小程序中用户登录和登录态维护
转载 2020-07-08 15:00:17 · 205 阅读 · 0 评论 -
一步步教会你微信小程序的登录授权(转)
转自:https://www.cnblogs.com/xiaoqiong-li/p/10950967.html转载 2020-07-08 14:41:11 · 251 阅读 · 0 评论 -
微信小程序开发学习--- 入门知识
一、小程序基本概念微信小程序就是基于微信平台的H5轻应用,微信将系统底层功能(设备、位置、媒体、文件等)和微信自身功能(登录、支付、分享等)封装成API供小程序调用。1.开发工具:为了配合小程序开发,微信专门配备了自己的开发工具,自行选择对应版本安装。2.创建项目应用:安装完成后,打开并扫码登录。小程序发布需要企业级的认证公共号,所以个人订阅号是不能发布的。3.编写小程序:demo初始化并包含了一些简单的代码文件,其中app.js、app.json、app.wxss这三个是必不可少的,小程序会读原创 2020-07-08 14:17:07 · 898 阅读 · 0 评论