微信h5调起微信支付


因为项目需要,要在H5页面中加入微信支付,所以便去尝试,只想说真的很坑,尤其调试起来不方便

这是微信的官方API文档 微信API

微信支付的准备工作

申请公众号,申请开通支付,这个很简单,自行百度
申请好之后 在微信公众平台页面的“微信支付”页面中的“开发配置”Tab上配置“支付授权目录”,“测试授权目录”,“测试白名单”
在微信公众平台页面的“开发者中心”中找到“AppID(应用ID)”和“AppSecret(应用密钥)”
在商户平台中找到微信支付分配的商户号,以及自己配置一个商户支付密钥
具体步骤
首先通过微信支付的api 获得支付用的prepay_id,这里需要用到上面提到的“AppID(应用ID)”,“AppSecret(应用密钥)”,“微信支付分配的商户号”,“商户支付密钥”以及其他的一些参数(具体参照微信开发文档)用MD5加密成签名(第一次签名)获得prepay_id后,用prepay_id和一些其他参数(具体参照微信开发文档)用MD5加密成签名(第二次签名)然后在前端通过微信内置浏览器提供的js API,WeixinJSBridge.invoke来调用微信支付的弹出页面,这里需要用到上面的第二次的签名

具体代码如下

$.get('/xxx',function(data){
if(data && data !== ""){
var _data = $.parseJSON(data)[0];
if(parseInt(_data.userAgent) < 5){
alert('您的微信版本低于5.0,无法使用微信支付!');
return false;
}
WeixinJSBridge.invoke('getBrandWCPayRequest',{
'appId': _data.appId,
'timeStamp': _data.timeStamp,
'nonceStr': _data.nonceStr,
'package': 'prepay_id=' + _data.packageOne,
'signType': _data.signType,
'paySign': _data.paySign
},function(res){
if(res.err_msg === 'get_brand_wcpay_request:ok'){
alert('支付成功,返回订单列表!');
}else if(res.err_msg === 'get_brand_wcpay_request:cancel'){
alert('取消支付!');
}
});

}
});
几个容易失败点需要注意
支付链接和在开发平台配置的链接不匹配
总共需要2次签名,并且所需的参数是不同的,在JS中用到的签名是第二次签名,不要混淆参数传递的不能有错


小程序input和textarea的placeholder层级问题解决


微信小程序中placeholder层级总是最高,微信官方给出的解决办法:

  • 由于textarea是原生组件实现,层级最高,目前还无法支持在上面覆盖元素这样的交互设计。

一句没用的话……

最后的解决办法:

wxml:

<input placeholder='口味偏好等要求' name="leave" placeholder-class="zindex" cursor-spacing="10"></input>

wxss:

.zindex{
  z-index: -1;
}

搞定!


微信小程序开发规范


  • JS模块引入请使用import关键字,而非require,WXML引入模板用标签,WXSS使用@import语法,三者统一
  • 使用 let 代替var进行变量定义,使用const定义常量,如:let goods = 1,const SEX=’男’
  • 所有方法和变量名称都使用小写camel模式,一般是动词+名词形式,尽量不要超过5个单词,如:getList,setBackImage
  • 所有用到的常量的地方都使用全大写,下划线分隔的形式,如:EGG_CHE
  • 使用this转换的地方,统一使用that,如:let that = this; 尽量使用箭头函数,可保留this指向
  • 所有自定义方法(onLoad,onShow等系统方法除外)必须使用规范注释语法进行注释
  • 在page和model里定义方法的时候,直接使用getList(){} 即可,中间可以不用加function关键字
  • 小程序声明周期函数里(onLoad,onReady,onShow,onHide,onUnload等)不要直接写复杂业务逻辑,复杂业务逻辑独立成方法,这里只负责方法调用。
  • 所有数据处理必须封装到model里面,包括url地址,参数格式化,返回结果格式化都放到model里面,在page里使用的时候,基本不用做过多数据处理,一般都直接setData皆可,model规范请参考前面的说明。
  • 如果1个功能在超过一个地方出现,那请实现为公用组件,组件实现请参考前面的说明。
  • 在WXML模板里,如果同时有2个循环中都使用到了同样的代码片段,请使用template的方式定义,然后直接使用即可,不能重复写.
  • 所有地方都需要有对接口返回空数据的处理,界面上要有相应的提示和引导。

微信小程序图片自适应高度解决方案


一、使用image组件属性mode

模式说明
缩放scaleToFill不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
缩放aspectFit保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
缩放aspectFill保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
缩放widthFix宽度不变,高度自动变化,保持原图宽高比不变

微信公众平台官方image的mode值有这4个缩放模式,其中 widthFix 是可以让图片宽度不变,高度自适应,很方便

二、使用bindload绑定函数动态自适应。

微信小程序image组件上有 bindload 属性,官方定义:

当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height:’图片高度px’, width:’图片宽度px’}

HTML代码片段

<image src="{{ item }}" bindload="imageLoad" data-index="{{ index }}" style="width:{{ images[index].width }}rpx; height:{{ images[index].height }}rpx;"></image>

js代码片段

Page({
  data: {
    images:[]
  },
  imageLoad: function(e) {
     var $width=e.detail.width,    //获取图片真实宽度
         $height=e.detail.height,
         ratio=$width/$height;    //图片的真实宽高比例
     var viewWidth=750,           //设置图片显示宽度,左右留有16rpx边距
         viewHeight=750/ratio;    //计算的高度值
      var image=this.data.images; 
      //将图片的datadata-index作为image对象的key,然后存储图片的宽高值
      image[e.target.dataset.index]={
         width:viewWidth,
         height:viewHeight
      }
      this.setData({
           images:image
      })
  }
})