微信小程序 JSON.parse 自定义radio weui 页面左右滑动 重复提交 encryptedData解密偶尔报错-41003

1.JSON.parse

在使用JSON.parse的时候，返回来的数据一定是严格的json格式，key值一定要用 双引号 包起来，否则浏览器就会抛出异常。 
另外，对于不标准的json字符串，如第一种示例，使用eval()虽然可以正常解析，但是从安全的角度来讲，一定要谨慎使用eval方法。规范json格式。

错误代码：

    var res = "[{id:1,name:'liming'},{id:2,name:'xiaobai'}]";

    var objRes = JSON.parse(res);

    console.log(objRes)

正确代码：

    var res = '[{"id":1,"name":"liming"},{"id":2,"name":"xiaobai"}]';

    var objRes = JSON.parse(res);

    console.log(objRes)

2. 自定义radio单选框默认样式 多选

wxml
<radio-group class="classify" bindchange="radioChange">
    <label class="classify-label" wx:for-items="{{classify}}" wx:key="name">
      <radio value="{{item.name}}" checked="{{item.checked}}" /> <text class="classify-text">{{item.value}}</text>
    </label>
</radio-group>
wxss
/* 未选中的 背景样式 */
radio-group{
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #A7A7A7;
}
radio-group .radio{
    display: flex;
    align-items: center;
}

/* 未选中的 背景样式 */
radio .wx-radio-input{ 
    height: 36rpx; 
    width: 36rpx;
    border-radius: 5%;
    background: transparent;
 }
/* 选中后的 背景样式 */
radio .wx-radio-input.wx-radio-input-checked{
   border: none;
}
/* 选中后的 对勾样式 */
radio .wx-radio-input.wx-radio-input-checked::before{
   border-radius: 5%;
   width: 26rpx; 
   height: 26rpx;
    line-height: 26rpx;
    font-size:26rpx; 
   text-align: center;
   color:#fff;
   background: #E71E0F;
   border: 16rpx solid #E71E0F;
}
/*checkbox 选项框大小  */
checkbox .wx-checkbox-input {
    width: 36rpx;
    height: 36rpx;
    border-radius: 5%;
}
/*checkbox选中后样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    background: #E71E0F;
    border: none;
}
/*checkbox选中后图标样式  */
 
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
    width: 26rpx;
    height: 26rpx;
    line-height: 26rpx;
    text-align: center;
    font-size: 26rpx;
    color: #fff;
    background: #E71E0F;
    border: 16rpx solid #E71E0F;
    /* transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1); */
}

3. 引用weui

https://github.com/Tencent/weui-wxss

4.页面左右滑动

（1）检查view 有超过手机宽度的  （2）scroll-view

5.重复提交

思路1：加锁，2.加锁 加时间计算

参考：https://www.cnblogs.com/kevinCoder/p/10953538.html

 

    const promise =new Promise((resolve,reject)=>{
      //promise运行中有三个状态
      //pending 进行中
      //fulfilled 已成功
      //rejected 已失败
      console.log('进行中。。。')

        wx.getSystemInfo({
          success: res=>{
              resolve(res)//会把进行中改变成已成功
          },
          fail:err=>{

            reject(err)//会把进行中改变成已失败
          }
        })
    })
    promise.then(res=>{
      console.log(res)
      console.log('然后去')
    },err=>{
      cosole.log(err)
    })

封装promisify.js，参考：https://www.jianshu.com/p/8a4f62cc7f8d

module.exports = (api) => {
    return (options, ...params) => {
        return new Promise((resolve, reject) => {
            api(Object.assign({}, options, { success: resolve, fail: reject }), ...params);
        });
    }
}

使用

const promisify = require('./promisify')
const getSystemInfo = promisify(wx.getSystemInfo)

getSystemInfo().then(res=>{
    // success
    console.log(res)
}).catch(res=>{

})

6.使用阿里图标的两种方式：

(1).转换iconfont.ttf文件为base64格式

(2).在线生成字体url的地址后再使用

7.relative、absolute定位居中

里面的absolute加样式

.box2 {

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

}

8.小程序内容安全（img，media，msg）

https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/sec-check/security.imgSecCheck.html

9.针对input添加padding后宽度变化问题

padding-left的操作后，这个时候会发现限定宽度的input宽度发生了变化

box-sizing: border-box;//其他浏览器
-webkit-box-sizing: border-box;//谷歌
-moz-box-sizing: border-box;//火狐

10.微信小程序encryptedData解密偶尔报错-41003

偶尔失败的情况，很大可能是wx.getUserInfo和wx.login的顺序弄错了。

正常的流程，wx.login拿到code =》 wx.getUserInfo拿到iv和encryptedData =》 发送给服务器解密

很容易错写成在wx.getUserInfo的回调里再调wx.login拿code再发送给服务器，这样，getUserInfo里的data加密用的session_key就有可能跟解密的时候的session_key不一致，因为wx.login有可能会刷新了session_key

解决： 保证userinfo总是在最后的一次login之后发起

 

 

---