微信小程序中模板template使用wx:if,wx:else失效的问题

最新推荐文章于 2024-11-05 21:00:00 发布
原创 最新推荐文章于 2024-11-05 21:00:00 发布 · 1.9k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序

博主在开发微信小程序时遇到一个问题，即在模板中使用wx:if和wx:else进行条件渲染时，无论isAgree的值是true还是false，页面显示始终相同，表现为赞图标始终为灰色。已尝试更改isAgree的值，但无效果。寻求熟悉微信小程序开发的大佬解答。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天微信小程序页面编写过程中使用到了模板，但是在模板中使用wx:if，wx:else时发现并不好使，在代码不变化的情况下不管我的判断值为真还是为假，最终显示结果都一样，具体可看图：
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
isAgree为true,然后在下图的右边赞为灰色，右边代码wx:if，wx:else不变，接下来改为false，仍为灰色
在这里插入图片描述

在这里插入图片描述
就是这么个情况，如果有知道的大佬可以留言回复，非常感谢！！！

ES-Lad
关注
微信小程序条件渲染hidden与wx:if的比较和不生效问题
你那里开花了吗
07-02 1万+
微信小程序条件渲染hidden与wx:if的比较和不生效问题导读一、定义二、hidden、wx:if的区别三、hidden不生效 导读   本篇文章将为你详细讲解微信小程序里的hidden和wx:if这两个属性的使用和区别。后面也会说到hidden不生效的问题，涉及到样式的基本知识，具体请往下看。 一、定义   hidden和wx:if都是微信小程序中通过条件来判断是否渲染该代码块的控制属性，通过...
微信小程序判断wx:if wx:for template
热门推荐
xingguanghui_1134的专栏
06-26 1万+
view是组件类 wx:if true 4}}">5 4 2 使用block控制多个标签，不是一个组件，仅仅是包装元素。不在页面做任何渲染。 ===========wx:if  和hidden=============== wx:if是惰性的初始渲染条件为真的时候才渲染。 hidden始终被渲染，如果是频繁切换情景使用hidden. *********列表渲染*
微信小程序wx:else无效问题
qq_30351747的博客
06-18 3520
微信小程序wx:else无效问题 1、wx:else 或wx:if 不能和wx:for 同层级使用 2、查看wx:else 的标签是否和wx:if对应的标签是同层级的 3、查看是否有多余的wx:else 一个wx:if只能对应一个wx:else 4、查看判断语句外部是否有引用组件，在写项目的时候，我引用了vant里的van-row和van-col，在它里面判断，结果判断无效，被污染。原因就是这个组件源码使用了判断语句，去掉引用组件就可以了。 ...
为什么wx:if 判断失效
slm311的专栏
12-09 4742
总结一下wx:if判断失效的原因 1.` <view class="allbut1" wx:if="downflag==1"> <view bindtap="down" class='but1'>上传数据</view> </view>没用{{}} <view class="allbut1" wx:if="{{downflag==1 }}"> <view bindtap="down" class='but1'>上传数据</vi
微信小程序中template点击失效的解决方案
zhouguizhi
11-14 2312
假如我想点击一个列表中的子item跳转到另外一个界面 &lt;import src="posts-item/posts-item-template.wxml" /&gt; &lt;view&gt; &lt;block wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="idx"&gt; &lt;templa
wx:else无效的问题
shengjunlintianxia的博客
07-17 537
wx:if在wx:for内无效 放在外面才行 这让我想到vue里 v-if ，或许是同样的道理
微信小程序文件上传(唤起文件资源管理器)
weixin_45439337的博客
07-30 1706
这个组件由于包含了，文件上传进度条以及预览等功能，所有代码较多。核心代码主要在web-view页面和 fileUpload 文件下index.html这里也是可以携带token进行文件上传的web-view中message的到的就是上传接口返回的url注意：web-view得有路由变化以及页面销毁等才会传参。
微信小程序之消息模板推送
wy123123000的博客
11-26 1560
微信小程序消息推送需要用户触发动作才能发送消息，比如用户提交订单、支付成功。一次只能发一条。也就是说只有用户点了小程序，操作了form表单提交然后生成一个formid ,才可以通过这条formid可以推送一条模板消息。也就是用户不点你小程序按钮，就不会推送。（微信真的是神坑。。。） 微信小程序消息推送分两种，一种直接从小程序的前端页面发起请求推送，另外一种在后台发起请求进行消息...
微信小程序入坑: 写一个简化版知乎日报
hongchh的博客
07-08 6057
最近开始入坑微信小程序，发现想要练手也不容易，找免费的基于HTTPS的API就要花点时间。在看了网上一些介绍后，决定采用知乎日报的API，写一个简单版的知乎日报作为入坑练习。本文尝试使用微信小程序写一个小demo，实现知乎日报的3个主要页面以及部分功能。3个页面分别为“首页”、“详情页”和“评论页”。 index: 首页，展示热闻轮播和热闻列表。点击某条热闻时跳转到详情页面。 detail...
微信小程序的开发之瀑布流功能
这是我的博客
06-15 2388
就直接上代码啦~~~ &lt;!-- 瀑布流 --&gt; &lt;view class="content"&gt; &lt;view class="left"&gt; &lt;block wx:for="{{note}}" wx:key=""&gt; &lt;template is=&quo
微信小程序登录流程全解析：Python安全与效率双管齐下
![微信小程序登录流程全解析：Python安全与效率...微信小程序的登录流程开始于用户打开一个小程序，该流程经历了用户身份验证和授权等关键步骤，最终实现了用户与小程序之间的安全连接。开发者在实现登录功能时，通常需
微信小程序在wx:for循环中使用wx:if判断失效
weixin_45004544的博客
03-26 1435
后来发现不对劲，修改了一个wx:if就可以正确显示了。
微信小程序Bad attr `wx:else` with message: `wx:if not found, then something must be wr
u010231454的专栏
12-06 1214
在小程序中使用wx:if 跟wx:else ，出现以下报错时的检查方式
小程序 wx:if条件判断失效
HDdgut的博客
11-05 418
原因：{{}}后面多了空格，变成了拼接" "，导致失效。小程序代码wx:if条件判断失效。
解决微信小程序wx:if使用不了函数，WXS使用方法以及防踩坑
weixin_47077674的博客
04-24 9164
最近自己写自己的小程序的时候遇到了wx:if想要绑定的数据使用了indexOf()方法来判断是否需要显示，但是wx:if没有办法在绑定的数据中进行函数运算，只能进行简单的判断和加减运算。 在网上搜索了一下之后发现只能将数据在JS中计算后在赋值到data中，或者使用WXS来自己写一个函数方法，然后在wxml中引用后就可以将这个方法使用在wxml绑定的数据中了 下面先放一下官方文档的WXS的定义 WX...
uniapp微信小程序端动态改变数据v-if渲染不改变
Listen_wind_的博客
08-16 2081
uniapp微信小程序端动态改变数据v-if渲染不改变
微信小程序开发 条件渲染wxif,hidden；列表渲染wx：for
qq_35262929的博客
10-27 1000
微信小程序中的条件渲染和列表渲染，使用wx:for,wx:elif,wx:else,hidden;
微信小程序template的使用
qq_36926807的博客
08-01 436
在小程序开发的过程中，很多时候有些模板是一样的，那么我们就可以使用template来实现共用一个模板块。具体实现如下： 一、定义模板 1、新建一个template文件夹用来管理项目中所有的模板；  2、新建一个common.wxml文件来定义模板；  3、使用name属性，作为模板的名字。然后在&lt;template/&gt;内定义代码片段。 &lt;template name="cours...
微信小程序 wx：if使用
m0_73481765的博客
09-09 6614
指令来控制某个元素是否需要被渲染到页面上。根据条件表达式的结果，包裹的内容会被渲染到页面上；当条件为假时，则不会渲染这部分内容。，根据该条件表达式的结果决定是否渲染。的值为真或非空字符串、非零数字等，被。在微信小程序中，可以使用。指令的值为一个条件表达式。指令决定元素是否显示。
现在有个需求，我的uniapp微信小程序提供统一的登录，登录后在我的微信小程序中有个按钮，点击可跳转到另一个微信小程序，如何做统一的认证，是需要前端微信小程序传递token吗，还是如何，那当在另一个微信小程序中登录失效时，如何做到返回登录页，是直接跳转到我的微信小程序登录页好，还是通信告诉我登录失效了
最新发布
06-30
<think>我们正在处理一个关于在uni-app微信小程序中实现统一登录认证，并处理跨小程序跳转及登录失效情况的问题。用户的需求包括：统一登录认证、跳转其他小程序时的token传递、登录失效处理以及返回登录页。 参考引用内容： [^1]提供了小程序登录所需的配置（application.yml）和获取openid的接口（jscode2sessionUrl），以及appid和secret的配置说明。[^2]展示了一键登录的按钮触发事件（getUserProfile）。 [^3]说明了在登录成功后如何跳转到之前存储的页面（redirectPage）以及清除存储的页面路径。根据这些引用，我们可以设计如下方案：###1.统一登录认证在微信小程序中，我们可以通过调用微信的登录接口（wx.login）获取临时code，然后将code发送到我们自己的后端服务器，后端服务器再通过微信提供的接口（jscode2session）获取用户的openid和session_key。之后，后端可以生成一个自定义的token（如JWT）返回给小程序，小程序存储这个token，并在后续请求中携带。 步骤： 1.用户点击登录按钮，触发登录方法（如getUserProfile）。2.调用wx.login获取code。3.将code发送到后端，后端用code、appid和secret请求微信接口换取openid和session_key。4.后端生成token（JWT）并返回给小程序。 5.小程序存储token（如存储在storage中）。###2.跳转其他小程序时的token传递微信小程序之间跳转可以使用`wx.navigateToMiniProgram`（或uni-app封装的对应API）。但是，微信限制直接传递token给其他小程序，因此我们需要通过其他方式传递认证信息。方案：-使用云函数或中间服务：将token存储到云函数或自己的中间服务，然后生成一个一次性的code或ticket，将这个code传递给目标小程序。目标小程序通过这个code到中间服务换取token。 -通过URL参数传递加密信息：将token加密后作为URL参数传递，目标小程序获取后解密并使用。但这种方式安全性较低，不推荐传递敏感信息。 这里我们推荐使用第一种方案（中间服务）： 1.源小程序在跳转前，将token上传到中间服务（需要确保安全，比如使用HTTPS），并获取一个临时code。 2.跳转目标小程序时，将临时code作为参数传递（例如：`wx.navigateToMiniProgram({ appId:'目标小程序appid',path:'页面路径?code=临时code'})`）。 3.目标小程序启动时，从URL参数中获取code，然后请求中间服务换取token，并存储在本地。###3.登录失效处理当请求后端接口返回401（未认证）时，表示token失效，需要重新登录。处理步骤：1.在请求的拦截器中（如uni.request的全局拦截）判断返回状态码，如果是401，则跳转到登录页面，并存储当前页面路径（以便登录后跳转回来）。 2.在跳转登录页之前，清除本地存储的token。3.登录页面提供登录功能，登录成功后，根据存储的页面路径跳转回原来的页面。###4.返回登录页在登录失效时，我们需要跳转到登录页，并记录当前页面（以便登录后返回）。同时，在登录页面，如果用户成功登录，则跳转到记录的页面（如果没有记录则跳转到首页）。 具体实现：-在全局请求拦截中，遇到401状态码，存储当前页面路径（使用uni.setStorageSync('redirectPage',当前页面路径)），然后跳转到登录页（uni.reLaunch({ url: '/pages/login/index' })）。 -登录成功后，从storage中获取redirectPage，如果存在则跳转到该页面，否则跳转首页。###代码示例####1.登录方法（一键登录）```javascript//在登录页面（pages/login/index.vue）methods:{getUserProfile() {//获取用户信息（微信接口）uni.getUserProfile({desc: '用于完善会员资料',success:(infoRes)=> {//获取codeuni.login({success: (loginRes) =>{//发送code到后端uni.request({url:'https://your-backend.com/login',method:'POST',data:{code:loginRes.code,encryptedData:infoRes.encryptedData, //如果需要解密用户信息iv:infoRes.iv},success:(res) =>{if (res.data.code ===200) {//存储token和用户信息uni.setStorageSync('token', res.data.token);uni.setStorageSync('userInfo',res.data.userInfo);//跳转回之前页面或首页constredirectPage= uni.getStorageSync('redirectPage');uni.removeStorageSync('redirectPage');if(redirectPage){uni.reLaunch({url:redirectPage});} else{uni.switchTab({ url: '/pages/index/index'});}}}});}});}});}} ```####2.请求拦截处理（全局）可以在`main.js`中设置全局请求拦截器（uni-app中可以使用拦截器插件或自己封装）。 ```javascript//封装request函数，添加拦截器const request= (options)=> {returnnew Promise((resolve, reject) =>{//在请求头中添加tokenoptions.header =options.header|| {};consttoken =uni.getStorageSync('token');if (token){options.header.Authorization =`Bearer${token}`;}uni.request({...options,success:(res) =>{if (res.statusCode ===401) {//登录失效，清除token并跳转到登录页uni.removeStorageSync('token');//存储当前页面路径（用于登录后跳转）constcurrentPages= getCurrentPages();const currentPage =currentPages[currentPages.length -1];const path= currentPage.route;constquery =currentPage.options ?`?${Object.keys(currentPage.options).map(key=>`${key}=${currentPage.options[key]}`).join('&')}`: '';constredirectPage= `/${path}${query}`;uni.setStorageSync('redirectPage',redirectPage);uni.reLaunch({url:'/pages/login/index' });returnreject(newError('登录失效'));}resolve(res.data);},fail:(err)=> {reject(err);}});});};//挂载到全局Vue.prototype.$request= request; ```####3.跳转到其他小程序并传递token```javascript//在需要跳转的地方async navigateToOtherMiniProgram() {//获取临时code（通过中间服务）consttoken= uni.getStorageSync('token');constres =await this.$request({url:'https://your-middle-service.com/generate-code',method:'POST',data:{ token}});if (res.code===200){const tempCode =res.data.code;//跳转到目标小程序uni.navigateToMiniProgram({appId: '目标小程序的appid',path: `pages/index/index?code=${tempCode}`,success:() =>{console.log('跳转成功');}});} }``` ###注意事项1.中间服务需要设计安全机制，例如临时code一次性有效且短时间过期。 2.在跳转其他小程序时，需要确保目标小程序已经关联在同一个微信开放平台账号下，否则无法跳转。 3.登录状态维护需要前后端配合，后端在生成token时应设置合理的有效期。 ###相关问题1.如何保证token传递的安全性？ 2.如何实现多个小程序之间的单点登录（SSO）？3.微信小程序登录还有哪些注意事项（如用户信息获取）？</think>以下是为您设计的 UniApp 微信小程序统一登录认证方案，包含跨小程序 token 传递和登录失效处理的全流程实现： ### 一、统一登录认证核心流程 ```mermaid graph TD A[用户点击登录] --> B{检测本地token} B -->|有效| C[正常使用] B -->|无效/过期| D[跳转统一登录页] D --> E[调用wx.login获取code] E --> F[发送code到服务端] F --> G[服务端换取openid/session_key] G --> H[生成JWT token] H --> I[返回token给小程序] I --> J[存储token至Storage] J --> K[携带token访问接口] ``` ### 二、关键代码实现 #### 1. 登录页面（`pages/login/index.vue`） ```vue <template> <button @click="handleLogin">微信一键登录</button> </template> <script> export default { methods: { async handleLogin() { // 存储当前页面路径用于登录后跳转 const pages = getCurrentPages() const currentPage = pages[pages.length - 1] uni.setStorageSync('redirectPage', `/${currentPage.route}`) // 获取微信code const [loginErr, loginRes] = await uni.login() if (loginErr) return uni.showToast({ title: '登录失败' }) // 请求后端获取token const [res] = await uni.request({ url: '/api/auth/login', method: 'POST', data: { code: loginRes.code } }) // 存储token uni.setStorageSync('token', res.data.token) this.redirectBack() }, redirectBack() { const redirectPage = uni.getStorageSync('redirectPage') uni.removeStorageSync('redirectPage') if (redirectPage) { uni.reLaunch({ url: redirectPage }) } else { uni.switchTab({ url: '/pages/home/index' }) } } } } </script> ``` #### 2. 请求拦截器（`utils/http.js`） ```javascript const http = (options) => { // 添加token到header const token = uni.getStorageSync('token') options.header = { 'Authorization': `Bearer ${token}`, ...options.header } return new Promise((resolve, reject) => { uni.request({ ...options, success: (res) => { // 处理401未授权 if (res.statusCode === 401) { uni.removeStorageSync('token') // 清除失效token uni.setStorageSync('redirectPage', options.url) // 记录当前页面 uni.reLaunch({ url: '/pages/login/index' }) return reject(new Error('登录已过期')) } resolve(res.data) }, fail: reject }) }) } ``` #### 3. 跨小程序跳转 token 传递 ```javascript // 跳转目标小程序 async function navigateToMiniProgram(appId, path) { // 从服务端获取加密token（防止直接暴露） const token = uni.getStorageSync('token') const [res] = await http.post('/api/auth/encrypt-token', { token }) uni.navigateToMiniProgram({ appId, path: `${path}?token=${res.encryptedToken}`, success: () => console.log('跳转成功') }) } // 目标小程序接收（App.vue） export default { onLaunch(options) { const encryptedToken = options.query.token if (encryptedToken) { // 解密并存储token http.post('/api/auth/decrypt-token', { encryptedToken }).then(res => { uni.setStorageSync('token', res.token) }) } } } ``` ### 三、登录失效处理方案 1. **自动拦截机制**： - 在全局请求拦截器中捕获 401 状态码 - 自动跳转登录页并记录原页面路径 2. **定时刷新 token**： ```javascript // 定时检查token有效期 setInterval(() => { const token = uni.getStorageSync('token') if (token && isTokenExpiring(token)) { http.post('/api/auth/refresh-token').then(res => { uni.setStorageSync('token', res.newToken) }) } }, 300000) // 每5分钟检查一次 ``` 3. **页面进入检查**（`main.js`全局路由守卫）： ```javascript uni.addInterceptor('navigateTo', { invoke(args) { if (!uni.getStorageSync('token') && !args.url.includes('/login')) { uni.setStorageSync('redirectPage', args.url) return { url: '/pages/login/index' } } return args } }) ``` ### 四、安全增强措施 1. **Token 安全存储**： ```javascript // 使用加密存储 uni.setStorageSync('token', { value: encrypt(token), expire: Date.now() + 7200000 // 2小时有效期 }) ``` 2. **敏感操作二次验证**： ```javascript function sensitiveOperation() { uni.checkSession({ success: () => {/* 正常执行 */}, fail: () => uni.reLaunch({ url: '/pages/login/index' }) }) } ``` 3. **服务端配置示例**（`application.yml`）： ```yaml weixin: jscode2sessionUrl: https://api.weixin.qq.com/sns/jscode2session appid: YOUR_APPID secret: YOUR_SECRET tokenExpire: 7200 # token有效期(秒) ``` ### 相关优化建议 1. **增加登录态检测**：使用 `uni.checkSession` 定期检查微信登录态 2. **生物认证集成**：支持指纹/面容识别快速登录 3. **操作日志记录**：关键操作记录安全日志 4. **异地登录提醒**：检测到新设备登录时发送通知 > 提示：实际开发中需在服务端完成 token 签名验证和加密传输，推荐使用 JWT + RSA256 非对称加密方案[^1] ### 相关问题 1. 如何在小程序间安全传递敏感数据？ 2. 微信小程序登录如何防止重放攻击？ 3. 如何处理多个小程序的单点登录（SSO）？ 4. 如何实现无感刷新 token？ 5. 小程序登录如何与 PC 端系统实现统一认证？ [^1]: 参考微信官方登录凭证校验机制：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html [^2]: 基于 JWT 的认证方案：https://jwt.io/introduction [^3]: UniApp 跨平台开发指南：https://uniapp.dcloud.io
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值