微信小程序中如果判断页面滚动方向？ 解决方案1.用到微信小程序API 获取页面实际高度 nodesRef.boundingClientRect([callback]) 监听用户滑动页面事件onPageScroll。 2.获取页面实际高度 <!--WXML--> <view id="box"><view class="list" wx:for="{{List}}" wx:key="List{{index}}"><image mode=aspectFill class=list_img src="{{item.imgUrl}}" ></image></view> </view> /* JS */// 封装函数获取ID为box的元素实际高度 getScroll...
小程序上传图片要先了解他其中的各个属性值，在https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html内有详细的介绍 今天在这里主要来讲下如何去上传图片并进行压缩，了解下以下属性值先来看下页面展示（点击上传图片，从相册中选择，上传完图片后又点了一次上传）来来来，上代码 wxml代码 <button bindtap=chooseImageTap>上传图片</button> <button bindtap=saveImage>保存</button> <canvas style="width:...
知识点：组件，animation，获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框，所以只有自定义。自定义的话，可以选择模板的方式，也可以选择组件的方式来创建。 这次我选择了组件，这样只需引入组件和添加数据，其它的不用管，就能实现多个地方重复使用了。 第一步：创建组件所需的文件 我喜欢把共用的内容都放在和pages文件同级的地方，所以有了下面的目录结构（1） 先创建一个自定义名字的文件夹，例如我上面的Co...
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！ 在写微信小程序时，有写到实现3D轮播图的效果，可以直接使用微信小程序中自带的组件swiper来实现 效果图如下：1.swiper的相关属性 indicator-dots 是否显示小圆点，也可以自己重新设置小圆点circular 是否衔接...
需求：显示音乐播放按钮、可手动拖拽进度条；页面中含多个音乐，播放当前音乐时暂停其他音乐播放。 小程序自带标签 audio 小程序自带的audio标签含固定的样式，且有最小尺寸。目前项目也不含name和author字段，所以放弃audio标签。 实现效果图初始化音乐数据 <text>{{currentProcess}}</text> <slider bindchange="" bindtouchstart="" bindtouchend="" max="{{totalProcessNum}}" min="0" value="{{currentProcessNum}}" disabled...
本文实例为大家分享了微信小程序支付前端源码，供大家参考，具体内容如下 //index.js Page({data: {},//点击支付按钮进行支付payclick: function () {var t = this;wx.login({//获取code换取openIDsuccess: function (res) {//code = res.code //返回codeconsole.log("获取code");console.log(res.code);var opid = t.getOpenId(res.code);}})},//获取openIDgetOpenId: function (code) {var that = this;wx.request({url: "https:...
首先在我们可以直接写到需要的 page 中，然后再进行抽取组件，自定义组件建议 wxzx-xxx 命名 官网地址：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 例如，我们封装的组件名为 **wxzx-loadmorewxzx-loadmore.wxml <view hidden="{{response.length < 1}}"><view class="weui-loadmore" hidden="{{is_loadmore}}"><view class="weui-loading"></view><view class="weui-loadmore__tips">正在加载...
有一个需求是分享当前页面，使用美工的分享按钮图片来分享，而小程序分享功能只有button有 open-type="share"这个属性，使用image标签肯定不行。我是这样做的：<button open-type="share" style="height:85rpx;width:215rpx;padding:0;background-color:#fff;border-color:#fff;margin-right:10rpx" > <image style="height:85rpx;width:215rpx;" src=../../../image/share_btn.png></image> </button>加入css样式去除button边框 ...
首先在没有播放音频之前，居然拿不到总时长 但是在播放之后也需要设置setTimeout来获取 所以在监听音频播放进度更新事件中获取。顺便获取当前播放进度 按照官方的写法 audioPlayed: function () {myAudio.play()setTieout(() => {myAudio.onTimeUpdate(() => {console.log(myAudio.duration) //总时长console.log(myAudio.currentTime) //当前播放进度})}, 500) }但是这两个console都没有触发，很是神奇 增加延迟的时间也没有用 ...
真的脑子疼，小程序的音频组件居然没有进度控制的功能，网上的方法又很少，逻辑通了就好写了。 1.所有音频播放、停止按钮使用状态切换控制 2.当点击某个音频播放时，首先将所有音频的状态置为停止状态，然后将当前音频置为播放状态 3.滚动条插件配合音频控件一起使用 4.播放状态时滚动条的长度随音频进度变化而变化，时间也要显示 5.拖动滚动条时，音频的当前时间随滚动条变化而变化1.wxml <text class="left_text">{{item.cur...
wxml <form bindsubmit=formSubmit><view class=all><text>手机号：</text><input name="phone" placeholder=请输入手机号 type=number style=color:#333 placeholder-style="color:#666" maxlength="11" bindinput=blurPhone></input></view><button formType="submit">保存</button> </form>wxss .all {border-top: 1rpx solid #efefef;border-bottom: 1rpx solid #efefef;height: 98rpx;font-size: 28rpx;display: flex;align-i...
问题 在微信小程序开发中，获取用户信息是经常会用到的！在之前，我们直接调用wx.getUserInfo接口，就可以直接获取用户的信息，然而为了安全考虑，从2018年4月30号开始，wx.getUserInfo接口不能直接调用（接口调整），需要使用<button open-type="getUserInfo"></button> 引导用户主动进行授权操作，意外就是来的这么突然，防不胜防！！！处理方法 1、<open-data></open-data> ：只是简单的获取信息用于显示其中，type="userAvatar...
之前做过一个版本是根据encryptData和Session_key解密得到完整的用户信息（包含union_id）的方法去获取用户信息，由于小程序升级，如今需要废弃encryptData的方式去获取用户信息，改成使用encryptedData的方式获取用户信息。 新的数据解密方法 接口如果涉及敏感数据（如wx.getUserInfo当中的 openId 和unionId ），接口的明文内容将不包含这些敏感数据。开发者如需要获取敏感数据，需要对接口返回的加密数据( encryptedData )进行对...
在微信开发中，写过的一个简单的音乐播放组件，记录下。 music音乐播放组件。 属性属性名类型默认值说明musicString 传入的音乐资源地址musicStyleString(随便写了个)音乐组件的样式rotateBooleantrue播放时是否有旋转效果iconOnString(随便写了个)音乐播放时的icon地址iconOffString(随便写了个)音乐暂停时的icon地址 代码 properties: {// 音乐路径music: {type: String,value: ,observer: function (newVal) {this._initMusic(n...
最近小程序中有一个图片旋转的需求，最初是想着通过切换多张图片达到旋转的效果，后来发现微信小程序带有动画api，然后就改由image+Animation来实现。 首先在wxml中定义image <image class="bth_image2" mode="aspectFit" animation="{{animation}}" src=../../images/***.png></image>注意其中的animation属性，image就由它来实现动画。 而{{animation}}我们在js的data中定义 data: {animation: },改变animation的值（官网提供角...