微信小程序 - 自定义components组件详解A篇

官网API:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html 自定义组件的原因,可以重复使用,只有数据不同且模板一样,节约开发成本. wxml  <swiper-banner Height="400rpx" Width="100%" imgList="{{banners}}&q…

微信小程序自定义音频组件，自定义滚动条，单曲循环，循环播放

小程序自定义音频组件,带滚动条摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的而微信小程序API给我们提供的就是这样的而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 audio 组件,即使官方推荐更强大的 wx.createInnerAudioContext 但是不符合需求,所以这里用到的是 backgroundAudioManager() https://developers.weixin.qq.com/miniprogram/dev/api/getBackg…

微信小程序自定义导航组件 nav头部全面屏设计

nav-dynamic 微信小程序自定义nav头部组件:适配全面屏设计: 实现功能初始进入页面时,展示初始状态下的nav样式: 页面滚动时,监听页面滚动事件,展示滚动状态下的nav样式: 根据配置字段值.页面栈数量,展示“返回”图标: 根据配置字段值.页面栈数量,展示“首页”图标,同时配置“首页路径”: 设置组件插槽,允许开发者在组件上添加任意元素: github下载地址(麻烦git给我比个…

微信小程序项目wx-store代码详解

这篇文章会很长,非常长,特别长,无敌长. 真的是挤牙膏般的项目进度,差不多是8月底有开始这个项目的想法,时至今日都1个多月了,抛去频繁的加班时间,王者时间,羽毛球时间...见缝插针的写这个项目,我竟然写完了,我竟然没有半途放弃,可真把我自己感动坏了. 好吧,主要是这个小程序很简单,本文会讲解一下这个小程序的代码,所有代码几乎是我一个个敲出来的,所有逻辑也是自己构思梳理的,因此很多实现方式并不是很好,冗余代码很多,代码质量堪忧,但我也在学习中,随着技术提升,会不断来重构代码,如果大家有任何建议欢迎…

微信小程序--问题汇总及详解之form表单

附上微信小程序开发文档链接:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html form表单: 当点击 <form/> 表单中 formType 为 submit 的 <button/> 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key. bindtap 用户点击时触发 bindchange 用户输入完成时触发(建议要输入中文的input采用这个点击事件) 判断两…

微信小程序 this和that详解及简单实例

微信小程序中,在wx.request({});方法调用成功或者失败之后,有时候会需要获取页面初始化数据data的情况,这个时候,如果使用,this.data来获取,会出现获取不到的情况,调试页面也会报undefiend.原因是,在javascript中,this代表着当前对象,会随着程序的执行过程中的上下文改变,在wx.request({});方法的回调函数中,对象已经发生改变,所以已经不是wx.request({});方法对象了,data属性也不存在了.官方的解决办法是,复制一份当前的对象,如…

微信小程序获取用户手机号详解

最近在做一款微信小程序,需要获取用户手机号,具体步骤如下: 流程图: 1.首先,客户端调用wx.login,回调数据了包含jscode,用于获取openid(用户唯一标识)和sessionkey(会话密钥). 2.拿到jscode后,将其发送给服务端,服务端拿它与微信服务端做交互获取openid和sessionkey.具体获取方法如下: (1)需要写一个HttpUrlConnection工具类: <span style="font-size:18px;">public cl…

【微信小程序】支付过程详解

一.介绍今天跟大家分享微信小程序集成支付. 二.分析 1.小程序支付API 地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-pay.html#wxrequestpaymentobject 注释: 通过接口的查看,我们知道,小程序端要想使用支付的接口,必须要拿到相应的值 timeStamp:Linux时间戳,可获取本地时间. nonceStr:随机字符串,从服务器统一下单接口返回. package:统一下单接口返回的prepay_id参数…

微信小程序支付之代码详解

微信小程序自带的一套规则,类似vue语法,但是好多功能都集成在api中,给了很多初学者轮子,所以首先要熟悉这些api,忘记可照官网继续开发这里主要说下微信小程序的支付,原理类似上篇介绍的公众网页支付,话不多说,直接贴代码,不懂的可以直接留言,我们一起来探讨. wxPay: function (payStr) { var json = JSON.parse(payStr) wx.requestPayment({ timeStamp: json.timestamp, nonceStr: json.…

微信小程序——自定义图标组件

字体图标在网页中非常常见了.为了方便在小程序里面重复使用,自定义了一个图标组件,方便控制它的大小,颜色,自定义点击事件. 自定义图标组件的代码如下: 下面的代码是icon文件夹下面的4个文件 index.wxml: <view class="custom-class ss-font ss-icon-{{ name }}" style="{{ color ? 'color: ' + color : '' }}; {{ size ? 'font-size: ' + size…

微信小程序flex容器属性详解

flex容器属性详解 flex-direction决定元素的排列方向 flex-wrap决定元素如何换行 flex-flow 是 flex-direction 和flex-wrap的简写 justify-content元素在主轴的对齐方式 align-items元素在交叉轴的对齐方式 flex元素属性详解 flex-grow 当有多余空间时,元素的放大比例默认值是0 flex-shrink当空间不足时,元素的缩小比例默认值是1 flex-basis元素在主轴上占据的空间 px flex是gr…

微信小程序--问题汇总及详解之图片上传和地图

地图用的是百度的地图,链接:http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/getlocation 获取日期时间可以用小程序里自带的js文件,var util = require('../../utils/util.js') 引入文件 var date = new Date(); //有需要改的参数可以自己定义也可以去源文件找到然后更改 //传后台用这个参数 var paramTime = util.formatTime2(date);…

微信小程序~生命周期方法详解

生命周期是指一个小程序从创建到销毁的一系列过程在小程序中 ,通过App()来注册一个小程序 ,通过Page()来注册一个页面先来看一张小程序项目结构从上图可以看出,根目录下面有包含了app.js,app.wxss,app.json三个文件这是小程序的全局文件,app.js是小程序逻辑 ,app.json是小程序公共设置,app.wxss是小程序公共样式表在app.js文件中 , 定义了一些生命周期方法 , onLaunch,onShow,onHide,onError,以及任意开发者添加…

微信小程序setData()方法的详解以及对数组/json操作

此篇文章是本人对setData方法的一些理解,是查阅文档和查找一些其他资料综述的,有所不足希望指正! 直接进入正题! 一.setData()方法: 1.参数接受一个对象,以key,value的形式表示: 2.参数和变量名称一致,可用一个值代替(es6新语法特性) 如上图所示,在this.data中设置ceshi这条数据,在方法中,我们定义ceshi变量让其等于that.data.ceshi; 然后对ceshi进行操作,其实就是对that.data.ceshi进行操作,而that.setData(…

微信小程序 - 自定义弹窗组件

2019-01-06:简化了一些代码,以及增加了可用性. // 弹窗配置 dialogConfig: { // 弹窗 dialogvisible: false, options: { // 显示关闭按钮 showclose: true, // 显示底部 showfooter: false, // 是否点击modal关闭 closeonclickmodal: true, // 是否全屏 fullscreen: false }, frames: { // 标题 title: '留言', // 标题位…

微信小程序--问题汇总及详解之清空电话号码

wxml: <view class="btns" wx:for="{{phoneList}}" wx:key="id"> <input bindinput="writeNumber" type="number" value="{{item.phone}}" class="btn1" maxlength="11" placehold…

微信小程序--问题汇总及详解之picker 增、删

<block wx:for="{{salesList}}" wx:for-index="index" wx:key="id" wx:for-item="item"> <view class="con_txt"> <view class="con_txt1" style="margin-left:30rpx;width:140rpx">…

微信小程序--问题汇总及详解之tab切换

设置背景颜色就直接在page里设置 page {background-color: rgb(242, 242, 242);} tab切换: navigator 页面链接传参的格式为url="路径?title={{item.title}}" 多个用&&连接下个页面接收参数: wxml: <view class="container"> <view class="swiper-tab"> <…

微信小程序位置定位position详解，相对定位relative，绝对定位absolute相关问题

一.位置position[定位属性:static,relative,absolute,fixed,inherit,-ms-page,initial,unset] 1.static:元素框正常生成,块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或者多个行框,置于其父元素中. 2.relative:[相对于自己本身在流中的位置的偏移]元素框偏移某个距离.元素扔保持其未定位前的形状,它原来所占的空间扔保留. 3.absolute:[相对于父元素 —— 前提是父元素的位置是确定的]元素…