来源： 微信小程序——e.target与e.currentTarget的区别 – 不睡 – 博客园

在小程序的点击事件中，我们经常使用这两个属性来传参，看起来效果一样，查了官方文档如下：

target：事件源组件对象

currentTarget：当前组件对象

什么意思？我刚开始就有点不懂，那就直接上代码：

<view id="outter" bindtap="tap1">
   outer view
   <view id="middle" bindtap="tap2">
     middle view
     <view id="inner" bindtap="tap3">
       inner view
      </view>
   </view>
</view>



  tap1: function (e) {
    console.log(1, e)
  },
  tap2: function (e) {
    console.log(2, e)
  },
  tap3: function (e) {
    console.log(3, e)
  },

结果如下:

点击子元素inner，但由于事件冒泡父元素middle和outter都触发，从上图中我们可以看出区别：

父元素middle和outter，target的id都是等于inner(子元素的id)；

middle的currentTarget的id是middle，outter的currentTarget的id是outter；

来源： 小程序数组动态改变数据页面不渲染_会跳舞的小猴子的博客-CSDN博客_支付宝小程序数组数据改变后不选渲染

在我改变shopList数组中的number时，点击addClick按钮，数据在后台输出为改变值，但是页面并不渲染。原因是因为，我只改变了shopList中的子数据，而父数据并未更改，所以导致后台输出与页面值不符。
修改后如下图

将子数据修改，重新给父数据赋值。而且必须使用this.setData({})
————————————————
版权声明：本文为CSDN博主「会跳舞的小猴子」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41820599/article/details/104529803

来源： 微信小程序——动态修改页面数据(和样式)及参数传递 – 不睡 – 博客园

微信小程序——动态修改页面数据(和样式)及参数传递

1.1.1动态修改页面数据

在小程序中我们经常要动态渲染数据，对于新手而言我们常常遇到修改的数据在控制台显示和页面显示不一致，因为我们用“=”修改数据的，这种是可以修改，但无法改变页面的状态的，还会造成数据不一致，代码如下：

data: {
    array: [{ text: '数组' }]
  }

onLoad:function(){
　　this.data.array[0].text=1;
　　console.log(this.data.array[0].text);
}

修改代码：

onLoad:function(){
    // this.data.array[0].text=1;
    this.setData({
      'array[0].text': '1'
    })
    console.log(this.data.array[0].text);
  }

 

 

1.2.1参数传递及修改样式

微信小程序的事件绑定中，我们常常需要传递参数及动态修改元素的样式，但微信小程序不支持JQuery和DOM操作，即不能用这两种方法修改样式：

1、$(“$id”).css(“color”,”red”);

2、document.getElementById(“id”).style.color=”red”;

 

虽然微信小程序都不支持JQ和DOM操作，但有另外一套方法；下面我将实现点击事件中传参并修改元素的样式，代码如下：

<!-- 循环 -->
<view wx:for="{{isChecked}}" wx:key="index">
  <checkbox checked="{{item}}"></checkbox>
</view>

<!-- 循环 -->
<view wx:for="{{isChecked}}" wx:key="index">
  <!-- 先绑定click函数，通过自定义的属性data-id传参给click函数 -->
  <view class="vf {{item==true?'':'vf-active'}}" bindtap="click" data-id="{{index}}">{{index+1}}</view>
</view>

 

这里写了两个样式，点击之后“vf-active”的样式才显示出来

checkbox{
  float: left;
  padding: 25rpx;
}
.vf{
  background: #666;
  color: #fff;
  height: 60rpx;
  width: 60rpx;
  float: left;
  margin: 30rpx;
  text-align: center;
  line-height: 60rpx;
  border-radius:10rpx; 
}
.vf-active{
  background: #07c160;
}

 

这里通过e.target.dataset动态获取参数(也可以使用e.currentTarget.dataset，效果一样)

Page({
  data: {
    isChecked: [true, true, true, true, true, true, true, true, true, true, true, true, true, true]
  },
  // 动态修改数据
  click: function (e) {
    console.log(e.target.dataset.id);
    var id = e.target.dataset.id
    var str = "isChecked[" + id + "]"//重点在这里，组合出一个字符串
    this.setData({
      [str]: false//用中括号把str括起来即可
    })
  },
  onLoad:function(){

  }
})

效果如下：

 

1.3.1使用setData修改数组或对象

前面已经讲过要想动态修改数据就必须使用setData，数组和对象也一样，但新手使用setData就容易遇到问题了：

这样修改直接报红

 

在修改数组和对象的时候就直接将要修改的参数名写成对应字符串就可以了，然后使用[]将字符串括起来，代码如下：

var str = "isChecked[" + id + "]"//重点在这里，组合出一个字符串
this.setData({
   [str]: false//用中括号把str括起来即可
})

 

修改对象也一样：

var ifo = "info[" + 0 + "].data"
this.setData({
    [ifo]:"这是修改后的"
})

 

总结：

1、直接用“=”赋值，这种是可以修改，但无法改变页面的状态的，还会造成数据不一致

2、this.setData，setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）

3、微信小程序不支持JQuery和DOM操作修改样式，但可以先写两套样式然后使用三元运算符

4、e.currentTarget.dataset和e.target.dataset都可以获取数据效果一样，除非遇到了事件冒泡，点击查看区别

来源： 微信小程序详解wx:if elif else的用法(搭配view、block)_CodingForAndroid的博客-CSDN博客_小程序elseif

1、搭配view 控制显示

<view wx:if=”{{boolean==true}}”>
<view class=”bg_black”></view>
</view>
<view wx:elif=”{{boolean==false}}”>
<view class=”bg_red”></view>
</view>
<view wx:else>
<view class=”bg_red”></view>
</view>

2、搭配block 控制显示

<block wx:if=”{{boolean==true}}”>
<view class=”bg_black”></view>
</block>
<block wx:elif=”{{boolean==false}}”>
<view class=”bg_red”></view>
</block>
<block wx:else>
<view class=”bg_red”></view>
</block>

小程序 wx:if多条件

<view wx:if=”{{a}}”>单个条件</view>
<view wx:if=”{{a || b || c}}”>多个或条件</view>
<view wx:if=”{{a && b && c}}”>多个且条件</view>

wx:if else 的判断

<view wx:if=”{{a > 5}}”>6</view>
<view wx:elif=”{{a < 5}}”>4</view>
<view wx:else>5</view>

注意：wx:if不仅仅是view标签可以用，其他的标签里也可以用

谢谢认真观读本文的每一位小伙伴，衷心欢迎小伙伴给我指出文中的错误，也欢迎小伙伴与我交流学习。

欢迎爱学习的小伙伴加群一起进步：[点击链接加入群聊【编程之美】
————————————————
版权声明：本文为CSDN博主「CodingForAndroid」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u011733020/article/details/108281436

来源： layui动态设置select选中_渣 渣 辉的博客-CSDN博客_layui select设置选中

<select id=”box” name=”origin” lay-filter=”origin-select”>
<option value=”1″>这是1</option>
<option value=”2″>这是2</option>
</select>

如果想要动态设置2为默认选择项，直接取它对应的value就ok了

// 当前的select的id
$(‘#box’).val(2);

//更新全部
form.render();
————————————————
版权声明：本文为CSDN博主「渣 渣 辉」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44547635/article/details/108471422

来源： sql server登录失败。该登录名来自不受信任的域，不能与 Windows 身份验证一起使用.报错：18452_水亦流人必上的博客-CSDN博客

原因是：服务器没有加入域、而登录服务器的名称用的又是IP（图1）

解决方法：在服务器名称选择（计算机名称）、如果没有就按计算机名称输入进去

目录

1 问题描述

小程序成功登陆后，安卓用户预约操作时，偶尔会出现登陆异常情况。

2 登陆实现方案

后端Cookie校验用户登陆状态

3 排查过程

1）后台日志排查，用户Cookie无效

2）微信小程序日志排查，安卓用户有问题

3）现象复现，安卓手机提示异常

4）微信小程序埋点输出日志，Cookie存取正常

5）正常与异常Cookie对比，Cookie顺序不对

6）异常Cookie排查，Cookie拼接不正确

4 为什么苹果手机、部分安卓手机没有问题？

5 问题原因

腾讯小程序Bug，Set-Cookie逗号拼接方式有问题

6 解决方法

Cookie正则分割，分号重新拼接

7 标准答案

8 硬广告

微信预约小程序，14天免费使用

1 问题描述
最近有用户反馈，小程序登陆有问题

小程序成功登陆后，安卓用户预约操作时，偶尔会出现登陆异常情况。
之前解决过shiro登陆失败的问题，《Shiro框架Given final block not properly padded问题解决》，但是没有彻底解决登陆失败的问题。

登陆失败现象极其诡异，问题难以复现。

1 用户10秒前刚登陆，用户后续操作马上提示“登陆异常”

2 部分安卓用户在登陆后，在后续操作提示“登陆异常”，这种现象是偶然发生的，安卓用户出现登陆异常概率大概是10分之1。

2 苹果用户从未没有出现”登陆异常“现象。

2 登陆实现方案
在介绍问题前，本文先简单描述下本文应用登陆实现方案。

本文的小程序应用是单独使用Cookie来维护登陆状态，登陆并未使用小程序的sessionKey来维护后台登陆状态。

后端Cookie校验用户登陆状态
为什么不使用小程序SessionKey维护登陆状态？

1 老应用有单独Cookie登陆方式。

2 后台支持多平台登陆（比如小程序、h5网页等），不完全依赖小程序SessionKey完成登陆 。

Shiro控制用户权限

1 获取微信小程序code值

2 code值以及appId换取用户openId

3 openId快捷登陆

4 小程序保存登陆Cookie

5 小程序携带Cookie请求后端应用

6 后端根据前端的Cookie校验用户的登陆情况

可惜小程序不支持Cookie，（浏览器一般会保存用户Cookie，方便后续浏览网页使用）

如何解决小程序支持Cookie登陆？

以下是网上常见的Cookie登陆解决方式。

// 登录
wx.login({
success: function (res) {
log.info(res)
//获取登录的临时凭证
var code = res.code;
//调用后端，获取微信的session_key,secret
wx.request({
url: domain + ‘/user/wxLogin’,
header: {
“Content-Type”: “application/x-www-form-urlencoded”
},
method: “POST”,
data: util.json2Form({
code: code,
appId: that.globalData.appId
}),
success: function (result) {
// cookie存储起来
var cookie = result.header[‘Set-Cookie’]
wx.setStorageSync(‘cookie’, cookie)

},
fail: function (res) {

}
})
}
})
})
wx.request从res.header[‘Set-Cookie’]中获取cookie信息，并使用wx.setStoargeSync将cookie信息同步写入小程序私有存储空间中

wx.request({
url: domain + ‘/api/xxx/xxx’,
header: {
“Content-Type”: “application/x-www-form-urlencoded”,
‘cookie’: wx.getStorageSync(“cookie”)
},
method: ‘POST’,
data: util.json2Form({ xx1: xx1, xx2: xx2 }),
success: function (result) {

},
fail: function (res) {
log.info(“服务器异常:” + res)
wx.showToast({
title: ‘服务器异常’,
icon: ‘none’,
duration: 2000
})
}
})
wx.getStorageSync同步将cookie从小程序中取出，小程序携带该cookie请求后台服务，完成用户登陆状态校验。

3 排查过程
问题不可怕，可怕的是不能稳定地复现case。本人平时使用iphone手机，重复用户的操作，基本复现不出来“登陆异常”的现象，只能在服务后台以及小程序前端疯狂埋点打日志。

1）后台日志排查，用户Cookie无效
从后台日志可以看出，用户成功登陆，但是用户没有在后续的请求使用用有效cookie去请求后台服务，后台直接拒绝服务。

2）微信小程序日志排查，安卓用户有问题
通过后台和小程序日志发现，出现“登陆异常”的用户基本是安卓用户，苹果用户基本没有这个问题。

3）现象复现，安卓手机提示异常
目标锁定安卓手机，直接找了台安卓手机，重复登陆、预约操作，大概反复操作10次，终于复现了“登陆异常”的现象，喜大普奔啊。

4）微信小程序埋点输出日志，Cookie存取正常
起初怀疑wx.setStoargeSync有bug，未将cookie成功写入小程序。

验证方式：将res.header[‘Set-Cookie’]、wx.getStorageSync日志输出。

如果res.header[‘Set-Cookie’]输出日志为空，则定位是后端服务问题，未将cookie携带返回。

如果res.header[‘Set-Cookie’]输出日志不为空，wx.getStorageSync(‘cookie’)输出日志为空，则定位setStorageSync写入有bug

但是最终现象res.header[‘Set-Cookie’]、wx.getStorageSync(‘cookie’)输出日志均不为空，排查思路中断了。

5）正常与异常Cookie对比，Cookie顺序不对
对比正常请求的cookie与异常请求的cookie

发现cookie的顺序不一样

后台shiro做权限控制，返回3个Set-Cookie值，苹果用户的请求基本是以JESSIONID开头，而有问题的安卓用户请求是以remeberMe=Delete开关

6）异常Cookie排查，Cookie拼接不正确
将登陆异常请求的cookie按照正常请求cookie的顺序调整了下， 用户请求后端可以成功登陆。

使用错误顺序cookie请求后端，后端解析cookie并未获取到JESSIONID。

后端是如何解析Cookie，根据分号”;”分割Cookie字符串，由于错误顺序Cookie是使用逗号做分割符，后端将Expires与JESSIONID视为一个整体，所以无法解析出JESSIONID

4 为什么苹果手机、部分安卓手机没有问题？
没有问题的Cookie，JESSIONID可以被后台正确分割出来。苹果手机获取Set-Cookie顺序是严格一致的，安卓手机Set-Cookie顺序是随机的。

5 问题原因
腾讯小程序Bug，Set-Cookie逗号拼接方式有问题
微信开放社区也有人反馈过这个bug，但是以微信社区人员解决问题的稀烂态度，至今未解决该bug。

解决bug只能靠自己去兼容这个bug

6 解决方法
当返回结果的header有多个Set-Cookier时，微信小程序获取res.header[‘Set-Cookie’]，已经是将Set-Cookie用逗号拼接好的字符串。

如果使用简单的逗号分割，Expires时间也含有逗号，Cookie结果是错误的。

Cookie正则分割，分号重新拼接
见示例

简单的逗号无法分割，可以使用正则表达式去分割Cookie字符串，

需要被分割的逗号，后继字符串是含有=

7 标准答案
微信小程序使用Cookie登陆标准答案

// 登录
wx.login({
success: function (res) {
log.info(res)
//获取登录的临时凭证
var code = res.code;
//调用后端，获取微信的session_key,secret
wx.request({
url: domain + ‘/user/wxLogin’,
header: {
“Content-Type”: “application/x-www-form-urlencoded”
},
method: “POST”,
data: util.json2Form({
code: code,
appId: that.globalData.appId
}),
success: function (result) {
// Set-Cookie字符串获取
var cookie = result.header[‘Set-Cookie’]
// 字符串分割成数组
var cookieArray = cookie.split(/,(?=[^,]*=)/)
// 分号拼接数组
var newCookie = cookieArray.join(‘;’)
// 存储拼接后的cookie
try {
wx.setStorageSync(‘cookie’, newCookie)
} catch (error) {
log.error(‘setStorageSync cookie fail’)
}

},
fail: function (res) {

}
})
}
})

————————————————
版权声明：本文为CSDN博主「四袋粉」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/czx0132/article/details/110101854

一，【微信小程序】：获取URL地址传递的参数；

1. URL参数传递页【index.js】代码：

//点击打开新页面
onOpenPage:function(e){
var url=”/pages/webView/webView?url=/mobile/slwzl/sjsj/sjsj.html&bt=搜集审批&title=数据呈现”;
wx.navigateTo({
url: url,
});
}
2.URL参数接收页【webView.js】代码：

（1）微信小程序传递的url参数还是跟平时获取方式不一样 它是传递JSON对象的方式 可以在onLoad方法获取 如下：

/**
* 生命周期函数–监听页面加载
*/
onLoad: function (option) {
console.log(option);
console.log(option.url);//输出：/mobile/slwzl/sjsj/sjsj.html
console.log(option.bt);//输出: 搜集审批
console.log(option.title);//输出: 数据呈现
},

//显示url数据
//{url: “/mobile/slwzl/sjsj/sjsj.html”, bt: “搜集审批”, title: “数据呈现”}
（2）截图：

————————————————
版权声明：本文为CSDN博主「皮皮冰要做大神」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_38366657/article/details/123088693

来源： 【优化】小程序优化-代码篇 | 微信开放社区

前言

不知道大家有没有这种体会，刚到公司时，领导要你维护之前别人写的代码，你看着别人写的代码陷入了深深的思考：“这谁写的代码，这么残忍”

俗话说“不怕自己写代码，就怕改别人的代码”，一言不和就改到你吐血，所以为了别人好，也为了自己好，代码规范，从我做起。

项目目录结构

在开发之前，首先要明确你要做什么，不要一上来就是干，咱们先把项目结构搭好。一般来说，开发工具初始化的项目基本可以满足需求，如果你的项目比较复杂又有一定的结构的话就要考虑分好目录结构了，我的做法如下图：

• component文件夹是放自定义组件的
• pages放页面
• public放公共资源如样式表和公共图标
• units放各种公共api文件和封装的一些js文件
• config.js是配置文件

这么分已经足以满足我的需求，你可以根据自己的项目灵活拆分。

配置文件

我的项目中有个config.js，这个文件是用来配置项目中要用到的一些接口和其它私有字段，我们知道在开发时通常会有测试环境和正式环境，而测试环境跟正式环境的域名可能会不一样，如果不做好配置的话直接写死接口那等到上线的时候一个个改会非常麻烦，所以做好配置是必需的，文件大致如下：

首先是定义域名，然后在config对象里定义接口名称，getAPI(key)是获取接口方法，最后通过module暴露出去就可以了.引用的时候只要在页面引入 import domain from ‘…/…/config’;，然后wx.request的时候url的获取方式是domain.getAPI(’’)

代码健壮性、容错性

例子

代码的健壮性、容错性也是我们应该要考虑的一点，移动端的项目不像pc端的网络那么稳定，很多时候网络一不稳定就决定我们的项目是否能正常运行，而一个好的项目就一定要有良好的容错性，就是说在网络异常或其它因素导致我们的项目不能运行时程序要有一个友好的反馈，下面是一个网络请求的例子：

相信多数人请求的方式是这样，包括我以前刚接触小程序的时候也是这样写，这样写不是说不好，而是不太严谨，如果能够正常获取数据那还好，但是一旦请求出现错误那程序可以到此就没法运行下去了，有些比较好的会加上faill失败回调，但也只是请求失败时的判断，在请求成功到获取数据的这段流程内其实是还有一些需要我们判断的，一般我的做法是这样：

在请求成功后小程序会进行如下判断：

• 判断是否返回200，是则进行一下步操作，否则抛出错误
• 判断数据结构是否完整，是则进行一下步操作，否则抛出错误

然后就可以在页面根据情况进行相应的操作了。

定制错误提示码

可以看到上面的截图的错误打印后面会带一个gde0或gde1的英文代码，这个代码是干嘛用的呢，其实是用来报障的，当我们的小程序上线后可能会遇到一些用户发来的报障，一般是通过截图发给我们，之前没有做错误提示码的时候可能只是根据一句错误提示来定位错误，但是很多时候误提示语都是一样的，我们根本不知道是哪里错了，这样一来就不能很快的定位的错误，所以加上这样一个提示码，到时用户一发截图来，我们只要根据这个错误码就能很快的定位错误并解决了，错误提示码建议命名如下：

• 不宜过长，3个字母左右
• 唯一性
• 意义明确

像上面gde表示获取草稿失败，后面加上数字表示是哪一步出错。

模块化

我们组内的大神说过， 模块化的意义在义分治，不在于复用。
之前我以为模块化只是为了可以复用，其实不然，无论模块多么小也是可以模块化，哪怕只是一个简单的样式也一样，并是不为了复用，而是管理起来方便。
很多同学经常将一些公共的样式事js放在app.wxss和app.js里以便调用，这样做其实有一个坏处，就是维护性比较差，如果是比较小的项目还好，项目一大问题就来了。而且项目是会迭代的，不可能总是一个人开发，可能后面会交接给其他人开发，所以会造成的问题就是：

• app.wxss和app.js里的内容只会越来越多，因为别人不确定哪些是没用的也不敢删，只能往里加东西，造成文件臃肿，不利于维护。
• app.wxss和app.js对于每个页面都有效，可读性方面比较差。

所以模块化的意义就出来了，将公共的部分进行模块化统一管理，也便于维护。

样式模块化

公共样式根据上面的目录结构我是放在public里的css里，每个文件命名好说明是哪个部分的模块化，比如下面这个就表示一个按钮的模块化

前面说过模块化不在于大小，就算只是一个简单的样式也可以进行模块化，只要在用到的地方import一下就行了，就知道哪里有用到，哪里没有用到，清晰明了。

js模块化

js模块化这里分为两个部分的模块化，一部分是公共js的模块化，另一部分是页面js的模块化即业务与数据的拆分。

公共js模块化

比较常用的公共js有微信登录，弹窗，请求等，一般我是放在units文件夹里，这里经微信弹窗api为例：

如图是在小程序中经常会用到的弹窗提示，这里进行封装，定义变量，只要在页面中引入就能直接调用了，不用每次都写一大串。比如在请求的时候是这样用的

toast()就是封装的弹窗api，这样看起来是不是清爽多了！

业务与数据模块化

业务与数据模块化就是指业务和数据分开，互不影响，业务只负责业务，数据只负责数据，可以看到页面会比普通的页面多了一个api.js

这个文件主要就是用来获取数据的，而index.js主要用来处理数据，这样分工明确，相比以往获取数据和处理数据都在一个页面要好很多，而且我这里获取数据是返回一个promise对象的，也方便处理一些异步操作。

组件化

组件化相信大家都不陌生了，自从小程序支持自定义组件，可以说是大大地提高了开发效率，我们可以将一些公共的部分进行组件化，这部分就不详细介绍，大家可以去看文档。组件化对于我们的项目来说有很大的好处，而且组件化的可移植性强，从一个项目复用到另一个项目基本不需要做什么改动。

总结

这篇文章通过我自己的一些经验来给大家介绍如何优化自己的代码，主要有以下几点

• 分好项目目录结构
• 做好接口配置文件
• 代码健壮性、容错性的处理
• 定制错误提示码方便定位错误
• 样式模块化和js模块化
• 组件化

最后放上项目目录结构的代码片段，大家可以研究一下，有问题一起探讨：https://developers.weixin.qq.com/s/1uVHRDmT7j6l

来源： 微信小程序数组操作find，filter查找特定值 – 掘金

// 定义一个需要被查找的数组
var memoList = [{ id: 1, name:  '1'},
                   {id: 2, name:  '2'},
                   {id: 3, name:  '3'}]

// 用 editItem 变量将 查找出来的数据进行接收`

var` `editItem = memoList.find((ele) => {
                        return  ele.id == 2
                        })   

// 打印 editItem 得到的结果是 {id: 2, name: '2'}
复制代码

  let test = [1, 2, 3, 4, 5];
        let a = test.find(item => item > 3);
        console.log(a); //4

let b = test.find(item => item == 0);
        console.log(b); //undefined
复制代码

 let game = getGameListData.data.data.find(item=>{
    return item.gamename.indexOf(this.data.searchInfo) !==-1
  })
复制代码

var arr = ['A', 'B', 'C'];\
var r = arr.filter(function (element, index, self) {undefined\
    console.log(element); // 依次打印'A', 'B', 'C'\
    console.log(index); // 依次打印0, 1, 2\
    console.log(self); // self就是变量arr\
    return true;\
});
复制代码

    let filterNum = searchInputInfo.filter(item=>{
      return item.name.indexOf(searchInfo) !==-1
    })
复制代码

var a=11,
arr=[11,22,33]
arr.map(function(elem,index,array){
    if(elem==a){
        console.log(elem);
    }
})
复制代码