微信小程序动态修改样式_kkk_3399的博客-CSDN博客_小程序动态修改样式

mikel阅读(432)

来源: 微信小程序动态修改样式_kkk_3399的博客-CSDN博客_小程序动态修改样式

前言
微信小程序动态修改样式:循环数组显示到页面,点击单独的按钮变换单独样式

一、wxml

<view class=”fb_tips”
wx:for=”{{arr11}}”
wx:key=”id”
>
<text class=”title_item {{item.isActive?’active’:”}} ”
bindtap=”clickpp” data-index=”{{index}}”
>{{item.value}}</text>

</view>

二、js
代码如下(示例):

Page({
data: {
arr11:[
{
id: 0,
value: “功能建议”,
isActive:false
},{
id: 1,
value: “购买遇到问题”,
isActive:false

},{
id: 2,
value: “性能问题”,
isActive:true
},{
id: 3,
value: “其他”,
isActive:false
}
]
},
clickpp(e) {
// 页面data-index传进来的索引
const index=e.currentTarget.dataset.index;
// console.log(index);
console.log(this.data.arr11[index].isActive);
// 拼接字符串
const isActive=`arr11[${index}].isActive`
// 使用setData修改当行数据
this.setData({
[isActive]: !this.data.arr11[index].isActive
})
// 打印数据
console.log(this.data.arr11[index].isActive);

}
})

三、wxss
.fb_tips {
display: flex;
flex-wrap: wrap;
}
.fb_tips text {
width: 30%;
padding: 10rpx;
text-align: center;
background-color: #fff;
margin: 20rpx 10rpx;
}
.fb_tips .active{
color:var(–themeColor);
border-bottom: 5rpx solid currentColor;
}

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

使用bat自动执行cmd命令(多个命令或单个命令)_鹏仔工作室的博客-CSDN博客_bat执行cmd命令

mikel阅读(451)

来源: 使用bat自动执行cmd命令(多个命令或单个命令)_鹏仔工作室的博客-CSDN博客_bat执行cmd命令

最近给其他公司开发的项目,需要部署到他那边公司大屏本地,他们大屏电脑动不动经常关机重启,重启一次就得找我们启动项目,非常的麻烦。

下面教大家如何使用bat写一段自动执行cmd启动项目的脚本。

首先,我们新建一个txt的文件,输入下方代码

cmd /k “cd /d 路径&&命令”
例如E盘下的A文件下的B文件,命令是anywhere

cmd /k “cd /d E:\A\B&&anywhere”
路径与命令使用&&隔开,编辑好以后保存,在将“txt”文件后缀改为“bat”,并双击打开,即可自动启动该路径下的cmd并自动执行命令。

其中代码中 /k 表示执行完命令不关闭cmd命令窗口,如果想执行完关闭,我们只需将 /k 更换为 /c 即可。

 

因为不止要启动前端程序,还得启动后端程序,那么我们如何自动执行多个命令呢?

我们只需给前面加上 start 即可,代码如下所示

start cmd /k “cd /d 路径&&命令”
start cmd /k “cd /d 路径&&命令”
例如

start cmd /k “cd /d E:\A\B&&anywhere”
start cmd /k “cd /d C:\xiangmu\wenjian&&java -jar sharedblog.jar”

修改完成后,记得保存bat格式。

最后,我只需给电脑设置开机自启自己写的bat程序即可。

围观地址
————————————————
版权声明:本文为CSDN博主「鹏仔工作室」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/tianpeng1996/article/details/123896364

微信小程序——e.target与e.currentTarget的区别 - 不睡 - 博客园

mikel阅读(412)

来源: 微信小程序——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;

 

 

 

总结:

target:事件源组件对象(事件冒泡源头)

currentTarget:当前组件对象(就是当前对象)

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

mikel阅读(482)

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

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

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

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

mikel阅读(591)

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

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

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

mikel阅读(485)

来源: 微信小程序详解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设置选中

mikel阅读(294)

来源: 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博客

mikel阅读(492)

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

原因是:服务器没有加入域、而登录服务器的名称用的又是IP(图1)

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

 

 

微信小程序踩坑-Cookie登陆失败_四袋粉的博客-CSDN博客_set-cookie 微信小程序不生效

mikel阅读(362)

目录

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地址传递的参数_微信小程序获取url参数_皮皮冰要做大神的博客-CSDN博客

mikel阅读(789)

一,【微信小程序】:获取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