微信小程序踩坑之路

调用微信API接口

获取到小程序开发账号，进行微信认证
小程序开通微信支付，即申请或复用微信支付商户号申请完小程序后，登录小程序后台（mp.weixin.qq.com）（==开通申请要求小程序已发布上线==）
小程序发起微信支付请求

wx.requestPayment(
{
'timeStamp': '',
'nonceStr': '',
'package': '',
'signType': 'MD5',
'paySign': '',
'success':function(res){},
'fail':function(res){},
'complete':function(res){}
}) 

注意参数格式
prepay_id:"prepay_id=wx2017033010242291fcfe0db70013231072" 

paySign="MD5(appId=wxd678efh567hg6787&nonceStr=5K8264ILTKCH16CQ2502SI8ZNMTM67VS&package=prepay_id=wx2017033010242291fcfe0db70013231072&signType=MD5&timeStamp=1490840662&key=qazwsxedcrfvtgbyhnujmikolp111111) = 22D9B4E54AB1950F51E0649E8810ACD6"

附上微信官方文档：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_12&index=6

微信公众号接口自定义公众号的菜单栏

原本是需要在小程序后台调用接口，access_token是公众号的全局唯一接口调用凭据，公众号调用各接口时都需使用access_token。

登入微信公众号获取到APPID和serect
通过微信官方给的使用网页调试工具调试该接口具体语法
在发送请求时一直发出现IP白名单的错误，不同的地址、连接不同的WiFi可能出现的白名单也都不同

仅仅适用于测试

 {
     "button":[
  
  
            {
                 "type":"miniprogram",
                 "name":"处理事故",
                 "url":"小程序服务器地址",
                 "appid":"xxxxx",
                 "pagepath":"pages/common/login/login"
             },
                  {
                 "type":"miniprogram",
                 "name":"xxx",
                 "url":"小程序服务器地址",
                 "appid":"xxxxxx",
                 "pagepath":"pages/xxx/xxx"
             },
               {    
               "type":"view",
               "name":"往期回顾",
               "url":"https://www.baidu.com"
            }
     ]
        
 }

微信小程序图片压缩的另类思路

使用画布进行图片压缩，当查看微信自带的压缩,发现quality设为60以上时，基本无压缩，而在部分机型上，反而还稍微增大一点。而且还不能重复压缩。

#使用画布进行压缩
CompressImange:function(){
 //选择需要上传、压缩的图片
    wx.chooseImage({
    //最多上传的图片数量
     count: 1,
     sizeType: ['original', 'compressed'],
     sourceType: ['album', 'camera'],
     success (res) {
     // tempFilePath可以作为img标签的src属性显示图片
      const tempFilePaths = res.tempFilePaths
     #获取图片信息
       wx.getImageInfo({
         src: tempFilePaths,
         success (res) {
           // console.log('获得原始图片大小',res.width)
              var originWidth, originHeight;
              originHeight = res.height;
              originWidth = res.width;
           // 最大尺寸限制
              var maxWidth = 160,
                 maxHeight = 160;
           // 目标尺寸
              var targetWidth = originWidth,
                 targetHeight = originHeight；
         //等比例压缩，如果宽度大于高度，则宽度优先，否则高度优先
                        if (originWidth > maxWidth || originHeight > maxHeight) {
                            if (originWidth / originHeight > maxWidth / maxHeight) {
                                // 要求宽度*(原生图片比例)=新图片尺寸
                                targetWidth = maxWidth;
                                targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                            } else {
                                targetHeight = maxHeight;
                                targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                            }
                        }
                        //尝试压缩文件，创建 canvas
                        var ctx = wx.createCanvasContext('firstCanvas');
                        ctx.clearRect(0, 0, targetWidth, targetHeight);
                        ctx.drawImage(tempFilePaths, 0, 0, targetWidth, targetHeight);
                        ctx.draw();
                        //更新canvas大小
                        that.setData({
                            cw: targetWidth,
                            ch: targetHeight
                        });
      }
    })
     }
    })
}

textarea 的文字层级问题

在微信小程序中，textarea的文字层级较高，当在页面弹出提示窗时，文字会显示在弹窗之上。

方法一：
弹窗显示时隐藏textarea的value

    <textarea value="{{dialogShow?'':textareaAValue}}"  maxlength="100"  bindinput="textareaAInput" placeholder="{{dialogShow?'':'请描述违规内容'}}"  placeholder-class="palder"></textarea>

方法二：设置textarea的层级

z-index:-1   //尚未尝试

自适应的问题

微信小程序是会运行在多个平台中，所以很多时候也需要根据手机屏幕的大小做调整，灵活掌握css

# 左右居中
1、margin:0 auto;
2、justify-content: center;
# 垂直居中
1、line-height：
2、

微信小程序添加图片为背景图片

微信小程序通过background-image设置背景：只支持线上图片和base64图片，不支持本地图片；
1.在网站http://imgbase64.duoshitong.com/上将图片转成base64格式的文本

2.在WXSS中使用以上文本：

background-image: url("data:image/png;base64,iVBORw0KGgo=...");

3.为了使背景图片自适应宽高，可以做如下设置：

background-repeat:no-repeat;
background-size:100% 100%;
-moz-background-size:100% 100%;

获取用户手机号码的按钮

微信小程序的按钮集成了一个专门用于获取用户电话号码的属性

  <button disabled="{{!checked}}" class="yy-wechat-login" open-type='getPhoneNumber' bindgetphonenumber="getPhoneNumber">微信登录</button>

除此之外还有获取用户信息、客服信息回调等等功能

微信小程序实现消息传送

与微信钱包的开发流程差不多，就是需要配置一定的权限、然后按照规定的参数，发送请求，进行初始化JM,再发送会话即可。

极光社区消息发送参考文档

微信小程序生成带参二维码跳转至小程序对应路径，获取小程序码

参考文档

获取到微信小程序码的权限，

微信公众号开发者的自定义菜单的定制

参考文档：
https://developers.weixin.qq.com/doc/offiaccount/Custom_Menus/Creating_Custom-Defined_Menu.html

https://blog.csdn.net/andrewniu/article/details/81188041

后端操作

向微信平台请求，获取到access_token

#链接中有三个参数，分别是grant_type、appid和secret。根据图中的参数说明，grant_type传固定值client_credential，而appid和secret就是申请完自定义菜单后微信分配给我们的。
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

向服务器发送post请求，请求的body是json，根据自己的需要在官方文档中找到对应的按钮类型，服务器会根据设置的类型定制菜单

{
    "button": [
          {
            "name": "快处快赔", 
            "sub_button": [
             {
                "type": "scancode_push", 
                "name": "扫码添加事故", 
                "key": "xxxxx", 
                   
            },
            {
                 "type":"miniprogram",
                 "name":"历史事故",
                 "url":"xxxxx",
                 "appid":"xxx",
                 "pagepath": "xxxxx"
             }
            ]
        },
         {
            "name": "咨询服务", 
            "sub_button": [
                 {  
                "type":"view",
                "name":"往期回顾",
                "url":"xxxxxx"
                },{
                    type:"click",
                    name:"保险公司电话",
                }
        
            ]
         },
        
    ]
}

微信公众号开发者点击按钮设置自动回复功能

设置json的click点击事件，发送特定的xml数据包

组件scroll-view的使用

实现竖向滑动

scroll-y 设置为true
组件设置高度 style="height:520px"

实现横向滑动

scroll-x 设置为true
组件<scroll-view></scroll-view>属性设置不换行white-space为nowrap，width设置为100%
组件件<scroll-view></scroll-view>中的包裹的标签属性display设置为inline-block 即可

实现微信小程序电子签名

方案一： //www.greatytc.com/p/a1341c0d12e8
部分手机出现画板清除不干净
方案二：https://blog.csdn.net/weixin_34174132/article/details/88003551
方案三:https://blog.csdn.net/tclyjy/article/details/82759137
卡顿，图片总是上传不成功！

微信小程序踩坑之路

微信小程序踩坑之路

调用微信API接口

微信公众号接口自定义公众号的菜单栏

微信小程序图片压缩的另类思路

textarea 的文字层级问题

自适应的问题

微信小程序添加图片为背景图片

获取用户手机号码的按钮

微信小程序实现消息传送

微信小程序生成带参二维码 跳转至小程序对应路径，获取小程序码

微信公众号开发者的自定义菜单的定制

后端操作

微信公众号开发者点击按钮设置自动回复功能

组件scroll-view的使用

实现竖向滑动

实现横向滑动

实现微信小程序电子签名

微信小程序生成带参二维码跳转至小程序对应路径，获取小程序码