微信小程序中用于发起网络请求的API就是wx.request了，具体的参数太多，此处就不再一一详举了，基本使用示例如下：wx.request({url:'test.php',//仅为示例，并非真实的接口地址method:"POST",data:{param1:'',param2:''},header:{'content-type':'application/json'//默认值},success:function(res){console.log(res.data)}})14 1wx.request({2url:'test.php',//仅为示例，并非真实的接口地址3method:"POST",4data:{5param1:'',6param2:''7},8header:{9'content-type':'application/json'//默认值10},11success:function(res){12console.log(res.data)13}14})值得注意的有如下几点：希望在获取数据之后进行的操作，切记一定要写在success回调中，因为wx.request是...

如果相同的wxml代码可能在不同的页面重复使用，ctrl+c配合ctrl+v的方式，后期维护起来未免也太麻烦了。微信提供了“模板”，可以在模板中定义代码片段，然后在不同的地方调用。使用<template>对代码进行模板定义，并使用name属性为模板进行命名，如：<templatename="msgItem"><view><text>{{index}}:{{msg}}</text><text>Time:{{time}}</text></view></template>6 1<templatename="msgItem">2 <view>3  <text>{{index}}:{{msg}}</text>4  <text>Time:{{time}}</text>5 </view>6</template>而在需要使用模板的地...

在微信小程序中，事件的绑定依附于组件，当事件触发时，就会执行事件对应的处理函数。我们回到前几章中的例子，将index页面调整为首页（app.json中调整pages数组元素的顺序），此时我们希望，点击页面中的“HelloWorld”字样，能够跳转到我们之前写的Welcome页面中去：首先来说明一下事件的绑定形式：事件绑定依附于组件，所以其绑定的写法和组件的属性写法是类似的，以key、value形式key以bind或catch开头并跟上事件类型，如bindtap、catchtap，也可以使用冒号如bind:tap、catch:tapvalue是一个字符串，对应Page中同名的函数原来的wxml中HelloWorld对应的组件代码为：<viewclass="usermotto"><textclass="user-motto">{{motto}}</text></view>3 1<viewclass="usermotto">2  <textclass="user-motto">{{motto...

对于小程序中的wxss布局方式，不推荐使用诸如position，float之类的属性，而是采用flex布局，灵活快捷自适应，关键是自适应！此处另起标题也是为了表达我对其强烈的推荐，因为我这个后端都能用flex很好的布局，可见其简单快捷性！强烈推荐阮一峰老师的两篇博文：Flex布局教程：语法篇Flex布局教程：实例篇...

如上图，整个IDE分为四个部分：中间的文件目录树模拟器（左侧）编辑器（右上）调试器（右下） 其中调试器是不是很熟悉？没错，和你用的chrome开发者工具一模一样，稍微有点要提醒的是：.js类型的文件，在Sources中都有两个，其中xx.js是编译后的，xx.js?[sm]才是和我们实际文件相同，调试时使用xx.js?[sm] Storage可以看到当前小程序的缓存内容 AppData可以查看当前程序中的数据信息 最后，模拟器的预览和执行必须在编译后，所以每当你代码进行了更新，先点击一下”编译“，效果才会是最新的。 ...

我总是喜欢在写东西之前唠唠嗑，按照惯例会在博文的开篇写这么一段“写在前面的话”，这次却为了这个唠嗑单独开了一篇文，大概预想着要胡说八道的话有点多。前段时间突然对小程序来了兴趣，说句实话，我都忘记了准确的导火线，大概是一直想做点什么个人的小作品，结果又因为贫穷限制了我买服务器。索性这个世界上有种东西叫“第三方API”，我买不起，我用别人的还不行吗？这个问题解决了，还有个问题没解决，那就是我这个人既不会iOS也不会Android，总不能用第三方API写Web吧，那不是也得要个人服务器，又回到最初的起点。于是用三方API结合微信小程序就很有意思了，适配移动端也容易，体积小，开发起来成本也远远更低，加上现在微信大大提高了小程序在其生态的入口和地位，说不定掌握它的开发也是未来升职加薪的助力。说干就干，索性就去慕课网买了开发教学视频《微信小程序入门与实战》，149，也还好，不算太贵。累计花了约30h，课程也大概上了近80%，顺便花了6h用gank.io的公开API撸了一个简单的刷刷妹纸图片的小程序（目前并没有上线，因为功能太简单了不想提交上线，后续再完善一部分再提交吧==），接近过年，无心再码点什...

2.2.1组装xml点击支付按钮后，写一个Ajax将前台部分信息发送给后台，然后组装xml，调用统一下单接口。该接口在《微信支付官方文档-统一下单》进行了很详细的解释，我在这里进行部分说明：参数说明   备注appId   开发者应用ID，在“开发-基本配置”查看mch_id微信支付的商户号，在“微信支付-商户信息”查看device_info   终端设备号（门店号或收银设备ID）PC网页或公众号内支付，则传“WEB”body商品或支付的简单描述trade_type可取值JSAPI，NATIVE，APP等，我们这里使用的是JSAPIJSAPI公众号支付；NATIVE原生扫码支付；APPapp支付nonce_str随机字符串参考算法：《微信支付官方文档-安全规范》notify_url通知地址，微信支付成功后，微信服务器会发送信息到该urlout_trade_no商户系统内部订单号，由商户自定义，订单号要保持唯一性total_fee订单总金额，单位：分openid用户标识，用户在该公众号下的唯一身份标...

好了，现在我们知道模板消息是官方固定好的格式，我们填充内容。而且对应给了我们模板的ID，那么我们来看看，对于推送模板消息，需要我们提供哪些内容：http请求方式:POSThttps://api.weixin.qq.com/cgi-bin/message/template/send?access_token=ACCESS_TOKEN2 1http请求方式:POST2https://api.weixin.qq.com/cgi-bin/message/template/send?access_token=ACCESS_TOKENPOST数据示例如下：{"touser":"OPENID","template_id":"ngqIpbwh8bUfcSsECmogfXcV14J0tQlEpBO27izEYtY","url":"http://weixin.qq.com/download","miniprogram":{"appid":"xiaochengxuappid12345","pagepath":"index?foo=bar"},"data":{"first":{"value":"恭喜...

所谓图文消息，就是我们常在订阅号中收到的如下图所示的消息类型： 从微信开发者文档-消息管理-发送消息-群发接口和原创校验-上传图文消息素材中可以看到，图文消息就是文章的集合，每条图文消息包含的文章不得超过8条。我们从开发文档中上传图文消息素材的POST格式来看，一个文章大概包含的内容有：{"articles":[{"thumb_media_id":"qI6_Ze_6PtV7svjolgs-rN6stStuHIjs9_DidOHaj0Q-mwvBelOXCFZiq2OsIU-p","author":"xxx","title":"HappyDay","content_source_url":"www.qq.com","content":"content","digest":"digest","show_cover_pic":1},{"thumb_media_id":"qI6_Ze_6PtV7svjolgs-rN6stStuHIjs9_DidOHaj0Q-mwvBelOXCFZiq2OsIU-p","author":"xxx","title":"HappyDay","content...

先讲一下微信平台消息的基本传递过程，接下来的更多概念和接口用法才更容易理解。我们在使用一些微信公众号的时候，肯定遇到过这种情况，给公众号发送一些消息，它会回复你不同的内容，也就是说，该微信公众号可以识别你的消息类型、内容，然后做出不同的反馈。甚至复杂的，可以模拟出一个自动应答的机器人。（如下图的中国移动为例）那么我们就了解下这个消息发送过去的处理过程是怎样的。借用一下方倍老师博客中的图片和部分叙述：用户在给公众号发送一条消息时，并不是直接到达我们的服务器，而是先到达微信服务器，微信服务器会将用户的消息组装为一些特定格式的xml文件，这个xml文件就包括了收发人、消息类型、发送时间等等，然后再交给我们的服务器。我们的服务器对这种格式的消息进行解析，根据需要进行判断，再把我们想要返回的消息组装成一个符合微信规范的xml文件，发给微信服务器，然后交由它进行解析和回传处理。（其中GET方式请求访问我们的服务器是主要用于微信服务器的校验，POST方式大多是用于交互，即用户发送消息我们设置逻辑进行响应，所以通常请求到我们的服务器以后，要根据不同的请求类型进行判断后，再进行逻辑处理）所以到这里，我们...

最近在做一个导航的时候，发现使用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方...

对接口请求报文作指纹验证签名相信在开发中经常碰到，这次在与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()这个方法，大家都知道是获取地理信息的今天用这个方法获取定位经纬度后传给后台取得附近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);//经度错误如图：...