为您找到搜索结果：1312个
微信小程序 使用swiper制作一个滑动导航
最近在做一个导航的时候，发现使用overflow-x:auto来做多内容滑动导航效果很不好，思索是不是可以使用swiper来做一个，研究了下其实发现原理基本相同这里说下，要用swiper做导航菜单，有几个要特别注意的参数1：autoplay，官方说明【是否自动切换】，这个不填，菜单可不能自己动2：indicator-dots ，官方说明【是否显示面板指示点】，这个也不填，3：display-multiple-items，官方说明【同时显示的滑块数量】，敲重点，这个参数必须设为1，要与previous-margin和next-margin参数来控制焦点高亮图居中4，previous-margin和next-margin，官方说明【前边距，可用于露出前一项的一小部分，接受px和rpx值】【后边距，可用于露出后一项的一小部分，接受px和rpx值】5，current，官方说明【当前所在滑块的index】，主要控制哪一个被选中，比如默认加载第二项或点击某一个让其选中 <viewclass="container"><viewclass="swipe...
微信小程序 图片路径自动加上文件目录导致渲染报错问题
最近在做小程序时候，发现一些商品图片在渲染时一直报错，也不显示，但是控制台打印出来的路径却有没有问题报错提示出错的路径会在前面自动加上“page/**”,思索了之后想到了微信只能解释https的地址，顿时来了主意， 错误如图 在遍历时对图片路径进行处理，加上https://dataSource&&dataSource.map((item,index)=>{item.image="https://"+item.imageconsole.log("普通咖啡----",item.image);data.push(item)}) 这样处理后就不报错啦...
微信小程序 使用微信支付功能实现在线订单支付
以前做过PC页面微信支付，但是这次在小程序直接调用微信支付功能还是方便很多先放个微信官方API链接：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=5先说说整个下单支付流程的整体思路，0，准备工作：一，appId，开发帐号中注册时的appId。二，sdkContent，后台返回的包含有金额，支付方式等信息的数据包。三，key值，商户申请微信支付功能时所配置的密钥准备好后，1，首先选择下单金额和支付方式【这里默认只有微信支付一个】，拿到金额和支付方式和用户唯一识别码【登陆时就放入微信缓存中】，发送到后端下单接口生成订单号2，拿到返回的订单号和用户唯一识别码，再到后台现金充值接口拿到sdkContent，也就是一会在下一步微信支付中要用到的package参数，3，将开发帐号中注册时的appId【注意：区别于后台之间通讯用的appId，两不同也不通用】，时间戳，随机串，签名方式和数据包按微信签名规则拼接成字符串，后面接上key值【key值：商户申请微信支付功能时所配置的密钥】使用MD5方...
微信小程序 使用HMACSHA1和md5为登陆注册报文添加指纹验证签名
对接口请求报文作指纹验证签名相信在开发中经常碰到，这次在与java后端一起开发小程序时，就碰到需求对登陆注册请求报文添加指纹验证签名来防止信息被修改先来看下我们与后端定制签名规则2.4.签名规则原文规则：采用标准的JSON格式，null值字段舍去，按照key值字符串升序排列例如：{"appId":"1100310061380986","outTradeNo":"1515120685073","timestamp":1516947786,"tradeNo":"S2018010510512529274450746","version":"1.0"}加密规则：先将原文用HMACSHA1加密，加密秘钥为appkey，加密后将字节数组转换为十六进制字符A;然后再将A用MD5加密得到签名，此时上送报文：{"appId":"1100310061380986","outTradeNo":"1515120685073","sign":"0799322CC44C7B7F6DC2CEA1DD588A6876889950E540B49CC5ECE6660AFD24224BEB04C79BA5C7F894E42...
微信小程序 之wx.getLocation()获取地理信息中的小坑
提到wx.getLocation()这个方法，大家都知道是获取地理信息的今天用这个方法获取定位经纬度后传给后台取得附近markers标记集合，在开发工具上都正常有标记出现，但是在手机测试时，死活没有显示，最后发现是在手机测试时，后台已经报参数不合法抛出错误通知了原因是因为，在开发工具上获取经纬度只有小数点后5位，而我们传给后台接口的数据规定只有后6位，这在开发工具上是正常可以请求成功，但是在手机上测试时，定位更加精确，例如"longitude":"121.53446197509766",已经达到14位了所以这里有必要对数据进行加工处理，使用toFixed()方法截取数字的后6位//varcurrentLatitude=res.latitude;//纬度//varcurrentLongitude=res.longitude;//经度varcurrentLatitude=(res.latitude).toFixed(6);//纬度varcurrentLongitude=(res.longitude).toFixed(6);//经度错误如图：...
微信小程序 之三元运算符代替wx:if 来解决背景图片显示隐藏
最近在开发一个小程序项目时，碰到一个问题，在一个多条件单项选择中，为选中条件添加一个选中状态，选中状态为灰色背景，但是这个背景要用到背景图片大家都知道在小程序中wxss是无法读到本地图标资源，只能使用外部链接和base64，这俩种方法都不适合我们开发的时候使用，但是却可以在wxml中使用方法然后通过条件判断来控制是否渲染但是在小程序中，wx:if又只能控制整条内容，使用起来还要多写2个一样的模块，真的是非常不爽那么有没有一种类似jquery的addClass方法呢？答案是有的，那就是这里要讲的三元运算符。1，使用小程序的wx:if方法来实现class添加和删除<textclass="moneyon"wx:if="{{item.modeId==default}}>{{item.platformPrice/100}}元</text><textclass="money"wx:else>{{item.platformPrice/100}}元</text>使用三元运算符来实现class添加删除<textclass="money{{item.m...
微信小程序 本地缓存保持登录状态之wx.setStorageSync()使用技巧
微信小程序提供了一个如同浏览器cookie本地缓存方法，那就是今天要说的wx.setStorageSync() 注意，该方法是同步请求，还有个异步请求的方法是wx.setStorage()，参考官方文档【https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorage.html】取出本地缓存方法wx.getStorageSync，同样的，它也是异步请求，它也有一个同步请求方法wx.getStorage()，使用方法如下 登录时候，将所需要存的字段存入本地缓存中wx.setStorageSync('userIdEnc',userIdEnc);//将userIdEnc存入本地缓存wx.setStorageSync('loginDevice',loginDevice);//将loginDevice存入本地缓存使用时，再从本地缓存中取出varuserIdEnc=wx.getStorageSync('userIdEnc');//获取本地缓存中的userIdEnc//用户唯一识别码varlogi...
微信小程序 赋值问题
通常我们在页面跳转传递过来的参数要用到页面渲染时或是请求接口回来的数据要用到页面渲染时对page的data赋值可不能用简单的变量赋值，要用微信小微信专有的this.setData方法Page({/***页面的初始数据*/data:{radioItems:[//{modeId:1,modeName:'加强洗',time:'30分钟',modeTime:30,platformPrice:500},//{modeId:2,modeName:'标准洗',time:'30分钟',modeTime:30,platformPrice:400},//{modeId:3,modeName:'快速洗',time:'30分钟',modeTime:30,platformPrice:300},//{modeId:4,modeName:'单脱水',time:'30分钟',modeTime:30,platformPrice:100},]},/***生命周期函数--监听页面加载*/onLoad:function(options){//this.data.radioItems=JSON.parse(options.wo...
微信小程序 wx.navigateTo()传参及多个参数方法
varworkModeAndPriceList=res.data.data.workModeAndPriceList;//varresult=JSON.stringify(workModeAndPriceList);//console.log(workModeAndPriceList);//console.log(result);wx.navigateTo({url:'../workingMode/workingMode?workModeAndPriceList='+JSON.stringify(workModeAndPriceList)});workModeAndPriceList数据如下数据需求转义为字符串才能通过参数传递JSON.stringify转换后如下【注意：转换步骤必须放在跳转链接里，如果事先定义变量转换，则会报错!】接收页面：data:{radioItems:[//{modeId:1,modeName:'加强洗',time:'30分钟',modeTime:30,platformPrice:500},//{modeId:2,modeName:'标准洗',time:'30分...
微信小程序踩坑之一【weui-wxss-master单选按钮图标修改思路】
小程序原生所带的weui框架做小程序UI实在太方便了，但是他的一些细微变化也是让开发中碰到不少头疼的问题一直以来单选多选的美化都是设计师重点表达的地方之一而weui-wxss-master中的单选多选样式又写的与众不同，不同与常规的weui添加after伪类来显示不同，他是通过type="success_no_circle"来实现的，所以无论怎么更改icon或icon的after或befor都无效果这里想到一个变通的方法先给icon添加一个外层容器，给该容器添加背景图片来实现在不选中状态的UI样式，再给icon添加一个背景图片，同时控制icon的显示隐藏来达到图标切换的效果，这里额外说下，在小程序中，背景图片是不许直接引用项目中的图片，否则会直接报错，可以直接引用一个带http的绝对地址图片，或者转化成bese64来实现【图片在线转换64，https://tool.css-js.com/base64.html】先上原始UI<radio-groupbindchange="radioChange"><labelclass="weui-cellweui-check__lab...
微信小程序踩坑之一[thist]使用技巧
刚上手小程序时，习惯把this当成jquery中的$(this)来用，实际上这两个还是有差别的在页面方法中调用其他方法，一般是用this.function()，直接调用小程序的方法或函数则是用wx.function多层方法下的时候，则要给this定义一个变量才能使用，否则会一直报方法没有定义 下面踩坑之一的是调用地理定位时给经纬度赋值时碰到的Page({data:{scale:18,latitude:0,longitude:0,},onLoad:function(options){varthat=this;wx.getLocation({type:'gcj02',success:function(res){that.setData({latitude:res.latitude,longitude:res.longitude})}})},onShow:function(){this.mapCtx=wx.createMapContext('myMap');this.moveToLocation;},onReady:function(e){},moveToLocatio...
微信小程序踩坑之一[wx.request]请求模式
最近在做小程序时，使用wx.request()方法请求时，当使传输string类型时，一定要声明method请求模式为post，否则会一直报错，而不声明时默认为get， 已填坑=，=wx.request({method:"post",url:'http://***.***.**/user/**/gainValidateCode',//仅为示例，并非真实的接口地址data:'{"appId":"1100****60349","tim**mp":1***9871,"ve**on":"1.0","sign":"erwlk***lrjwlke","mobile":"186*****","validateWay":1,"validateType":2}@#***018***60349',dataType:"json",header:{'content-type':'application/json'//默认值},success:function(res){console.log(res.data)}}) ...
微信js-sdk，选择图片，上传，下载到本地，php服务端
//前端js代码<script>//客户端6.0.2wx.config({//debug:true,appId:"{pigcms:$signPackage.appId}",timestamp:{pigcms:$signPackage.timestamp},nonceStr:'{pigcms:$signPackage.nonceStr}',signature:'{pigcms:$signPackage.signature}',url:'{pigcms:$signPackage.url}',jsApiList:['checkJsApi','chooseImage','previewImage','uploadImage','downloadImage']});wx.ready(function(){//1判断当前版本是否支持指定JS接口，支持批量判断wx.checkJsApi({jsApiList:['chooseImage','previewImage','uploadImage','downloadImage','getNetworkType','openLocation'...
如何让页面只能在微信端打开？
<scripttype="text/javascript">//对浏览器的UserAgent进行正则匹配，不含有微信独有标识的则为其他浏览器varuseragent=navigator.userAgent;if(useragent.match(/MicroMessenger/i)!='MicroMessenger'){//这里警告框会阻塞当前页面继续加载varurl=window.location.href;window.location.href='https://open.weixin.qq.com/connect/oauth2/authorize?appid={$_W['account']['key']}&redirect_uri='+url+'&response_type=code&scope=snsapi_base&state=YWN0PW1vZHVsZSZuYW1lPXNob3BwaW5nMiZkbz1saXN0JndlaWQ9Mg==&connect_redirect=1#wechat_redirect';}</s...