微信小程序开发时有时会需要从wx:for遍历的元素中选取最后一个来进行相关操作,以下方法以隐藏最后一个元素为例 index==list.length-1 通过获取列表的总长度减一来得到最后一个元素是最普遍的方法 <block wx:for="{{time}}" wx:key="item" data-index="{{index}}"> <view class="bottomLine" hidden='{{in

微信小程序wepy开发循环wx:for需要注意 item index值必须在wx:for之后使用 <view wx:for="{{tablist}}" class="item {{activeid === item.id ? 'active':''}}" wx:key="{{index}}" @tap="checkcookbookitem({{item.id}})"> <text>{{item.titl

在微信小程序里面没有DOM对象, 不能操作DOM. 所有的操作通过数据来实现,下面主要实现了给循环列表点击添加类的操作 一.单项 目标需求:实现下图,给点击的view增加类,每次只能选择一个. 主要思路:给点击的view增加类,依靠点击的index对state进行赋值.如果相同时,给该view增加类. 实现代码: .wxml文件 <view> <view class='appointent-date'> <view class="appointent-date-di

在微信小程序中也有for循环,用于进行列表渲染. 官方实例 打开微信开发者文档,在框架部分的视图层-->wxml-->列表渲染中可以看到官方给出的for循环实例,在实例中 可以看到下面相关说明. 默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item:使用 wx:for-item 可以指定数组当前元素的变量名,使用 wx:for-index 可以指定数组当前下标的变量名. test.wxml <view wx:for="{{array}}"

最近做微信小程序碰到了一些问题,和wx:for循环相关,wx:for有很多用途,例如可以用于swiper中图片的循环,也就是所谓的轮播图,也可以用于其它的循环,可以大大地减少代码量. 但wx:for.for-items.for-item.for-index这几个绕来绕去确实挺让人头疼的,下面来讲讲这几个的用法. wx:for绑定一个数组,就可使用数组中各项数据重复渲染该组件,默认数组的当前项的下标变量名默认为index,数组当前项的变量名为item,也可以根据自己的需要来重新定义这两个名字; w

在<使用uView UI+UniApp开发微信小程序>的随笔中,介绍了基于uView UI+UniApp开发微信小程序的一些基础知识和准备工作,其中也大概介绍了一下基本的登录过程,本篇随笔详细介绍一下微信小程序的相关登录处理以及登录后设置用户身份信息,并跳转到相应页面的处理过程. 1.令牌判断和登录方式 在之前介绍过,在业务系统中,我们需要根据登录用户的身份获取对应的数据,如果用户没有登录,这些信息是无法获到的,那么我们可以在app.vue中判断用户是否登录,然后跳转到对应的页面,如下所示.

今天根据网上的教程搭建了微信小程序的环境,然后看文档做了一个简单的小应用. 项目的目录是这个样子的: app.js.app.json.app.wxss是全局文件,必不可少的文件.定义在app.wxss中的样式为全局样式,作用于每一个页面.在page的wxss文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖app.wxss中相同的选择器. app.js文件代码: App({ onLaunch: function () { console.log('小程序已启动') }, onShow: f

比如:如果在微信小程序中要遍历输出 0-9 的数,我们会使用for循环 ;i<;i++){ console.log(i); } 确实结果也是这样: 但是,如果我在循环时同时调用wx的api接口10次,那么输出的结果就会不同(这是产生了闭关的效应) eg:每次调用一次wx.showToast()接口,并在成功时输出循环的值. ;i<;i++){ wx.showToast({ title: 'haha', success:function(){ console.log(i); } }) } 结果:

前言 微信小程序年前的跳一跳确实是火了一把,然后呢一直没有时间去实践项目,一直想搞但是工作上不需要所以,嗯嗯嗯嗯嗯emmmmm..... 需求 小程序语音识别,全景图片观看,登录授权,获取个人基本信息 一:基础框架 官方开发文档:https://developers.weixin.qq.com/miniprogram/dev/ (其实官方文档写的很清楚了) 跟着官方文档一步一步来,新建一个小程序项目就好 然后呢,毕竟默认的只是基本骨架,肌肉线条还是要自己填的  app.json 是当前小程序的全

微信小程序中用到input值时候,判断其内容是否为空,可以用if-else判断内容的length,也可以给input加点击事件,判断其内容:以下是我解决问题的过程wxml代码 <view class="name"> <text>姓名</text> <input type='text' placeholder='收货人姓名' value="{{userName}}" bindblur='username'></in

一.Taro简介 1.名字由来 Taro['tɑ:roʊ],泰罗·奥特曼,宇宙警备队总教官,实力最强的奥特曼. 2.taro是什么 Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5 等应用. 3.官方文档 https://taro-docs.jd.com/taro/docs/README/index.html 二.安装 1.node版本 node版本需要>=12.0.0(可以命令行输入 node

微信小程序有个属性hover-class='active',是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: wxml: ? 1 2 3 4 5 6 7 8 <view class="taga">  <view class="tag-title">标签</view>  <view class="tag-box">  <vie

wx.navigateToMiniProgram({ appId: 'xxxxxxxxxxxxxxxxxx', // 要跳转的小程序的appid path: 'page/index/index', // 跳转的目标页面 extarData: { open: 'auth' }, success(res) { // 打开成功 } }) 注意:从小程序A内跳转到小程序B内有一个前提条件:A和B必须被同一个公众号关联

今天在做砍价页面的时候需要将一个按钮动起来,效果图如下: 其实它实现的原理很简单,就是循环的缩小放大. css3中的animate 有个属性是 animation-iteration-count 可以控制动画的循环播放,但是小程序里面没有.该怎么实现呢? 无非就是2种状态的切换. wxml: <button class='cut-btn' open-type='share' animation="{{animationData}}">喊好友砍一刀</button>

简单来说分两步走: 1.配置项目根目录的 app.json 文件中的 navigateToMiniProgramAppIdList { "pages": [ "pages/index/index" ], "navigateToMiniProgramAppIdList": [ "小程序APYID" ] } 2.在项目对应的 wxml 中使用 navigator 标签进行配置 <navigator class="&

上一篇我们有写到 template的使用方法 .在实际运用中,需要做到template里面再嵌套一层循环.我们先看一下数据结构: 模板是用于循环list,现在的需求是在模板里面嵌套一个orderItemList的循环.写法也是wx:for,代码如下: order.orderItemList 里面的order 是你在引用模板的时候,取的for-item名字.还有不懂的可以看template的使用方法 . 前方高能预警!!!到目前为止,都很顺利.可是在用的时候,循环没出来.怎么回事啊...正解如下图

首先先看一下pages的目录结构吧. 我创建了一个topics页面.3个文件全创建好了之后 我往topics.js添加数据 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 /* ---topics.js----*/   Page({   data:{       topics: [       {title:"初始angular"},       {title:"初始ionic"},       {title:"初始we

首先先看一下pages的目录结构吧. 我创建了一个topics页面.3个文件全创建好了之后 我往topics.js添加数据 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 /* ---topics.js----*/   Page({   data:{       topics: [       {title:"初始angular"},       {title:"初始ionic"},       {title:"初始we

目标:做个横向导航,可以横向滚动. 思路:使用scroll-view组件,可实现横向滚动功能.scroll-view内包含一个动态的view列表,代表导航的每一项,导航要接收动态数组,然后使用列表展示.使用模板技术做到可复用. 按照思路,先要做个template. 新建一个wxml文件:navbar.wxml <template name="navbar"> <scroll-view class='navbar' scroll-x="true" s

一.index.js设置如下 //获取用户的授权信息,放到本地缓存中 wx.getSetting({ success: (res) => { if(res.authSetting['scope.userInfo']) { wx.setStorage({ key: 'can_getuserinfo', data: 1, }) } else { wx.setStorage({ key: 'can_getuserinfo', data: 0, }) } } }), //1:从本地缓存中获取数据,如果获

<view wx:for="{{hommer}}" wx:for-item="item" wx:for-index="index" wx:key="{{item.id}}"> <view bindtap="onTap" data-ide="{{item.id}}"> <view style="height:15vw;line-height:15vw