微信小程序开发tips

1、wx:for渲染后传值问题:

用wx:for渲染后,如果想在绑定的事件中获取点击项中的数据,则在wx:for的标签的属性中要加入data-item属性,具体如下:

a.wml文件

<view  wx:for="{{MeetingRoom}}" bindtap=‘fordetails‘ data-name="{{item.name}}">
        <view >
          <view >
            <view >{{item.name}}</view>
            <view >地址:{{item.location}}</view>
          </view>
         </view>

 a.js文件

Page({
  data: {
   MeetingRoom:[{
     id:"1",
     name:"1号会议室",
     location:"1楼101室"
   },{
     id: "2",
     name: "2号会议室",
     location: "2楼202室"
     },{
       id: "3",
       name: "3号会议室",
       location: "3楼303室"
   },{
     id: "4",
     name: "4号会议室",
     location: "4楼404室"
     }, {
       id: "5",
       name: "5号会议室",
       location: "5楼505室"
     }]
  },
fordetails:function(e){
  console.log(e.currentTarget.dataset.name)
  wx.navigateTo({
    url: ‘../detail/detail‘,
  })
})

data-item中设置的key对应的value就可以在e.currentTarget.dataset中获取到

2、跨页面传值

若想进行跨页面传值,则需要在页面跳转语句的地址中追加需要传的值,代码如下:

1 wx.navigateTo({
2     url: ‘../detail/detail?name=1号会议室‘
3   })

取值可以在跳转页面的onLoad函数中加载,代码如下:

1 onLoad: function (options) {
2     this.setData({
3       roomname:options.name
4     })
5   }

  

原文地址:https://www.cnblogs.com/kedray/p/9061748.html

时间: 2024-08-30 17:55:39

微信小程序开发tips的相关文章

Java微信小程序开发_00_资源帖

1.微信小程序开发:http://blog.csdn.net/column/details/13721.html?&page=1 2.微信小程序栏目:http://blog.csdn.net/column/details/14653.html?&page=2 3.

微信小程序开发心得

微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认证信息如,营业执照等 再次就是用一个未曾开通过公众号的QQ号或微信号来注册一个微信小程序号. 最后,下载微信小程序开发工具. 由于这里,我们更多的关注如何去开发一些app,而不是科谱微信小程序,故在此不在过多的解释,详细的说明,可以去官网帮助文档. 首先,我们拿自己的项目在一步一步的说明并开发吧,

微信小程序开发 --02

微信小程序在开发中,难度系数不是很大,其中应用的技术也是web开发中常用的技术,虽然在微信开发者工具中的叫法与常见的web开发的叫法不太一样. 首先,在微信小程序开发中,代码文件格式大体有以下四中: .wxml .wxss .js .json 首先,wxml后缀的文件类似于html和xml的结合,例如在html中常用的div在微信小程序开发中被替换成了view,而在html中输出文本用的p标签被替换成了text标签,引入图像由html中的img 标签变成了image标签,等等.如果你之前开发的w

微信小程序开发之数据存储 参数传递 数据缓存

微信小程序开发内测一个月.数据传递的方式很少.经常遇到页面销毁后回传参数的问题,小程序中并没有类似Android的startActivityForResult的方法,也没有类似广播这样的通讯方式,更没有类似eventbus的轮子可用. 现在已知传递参数的方法只找到三种,先总结下.由于正处于内测阶段,文档也不是很稳定,经常修改,目前尚没有人造轮子. 先上GIF: 1.APP.js 我把常用且不会更改的参数放在APP.js的data里面了.在各个page中都可以拿到var app = getApp(

微信小程序开发(3) 热门电影

在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发热门电影及预览功能. 本文主要分为两个部分,小程序主体部分及计算器业务页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 1. 小程序逻辑 App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide: f

微信小程序开发类型有哪些?

广州微信小程序开发公司(www.dthulian.com)品向科技表示,随着现在的互联网最热门话题,应该是微信小程序开发.那么我们就和大家来探讨下微信小程序开发类型有哪些? 首先微信小程序是什么? 微信小程序是由微信之父张小龙提出的一个概念,小程序是一种不需要下载安装就可以使用的应用,它实现了触手可及的梦想,用户只需扫一扫或者搜一下就可以打开应用.也体现了用完即走的理念,用户不用关心是否安装太多应用的问题,应用将无处不在,应用将随时可用,但又无需考虑安装及卸载. 对用户来讲,小程序可以实现"用完

微信小程序开发实战视频教程发布

昨日(9月23),腾讯终于发布了没有APPid,无需申请也可以进行微信小程序开发的视频教程了,我在在第一时间尝试并发布了这7个小视频教程,入门足够了.... 各位免费拿去,慢慢享用: 链接: https://pan.baidu.com/s/1o7DX7q6 密码: ztzq 也可以添加 微信小程序开发者交流QQ群:434276993,只欢迎对微信小程序开发有兴趣的朋友,其他勿加,感谢.

微信小程序开发:http请求

在微信小程序进行网络通信,只能和指定的域名进行通信,微信小程序包括四种类型的网络请求. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downloadFile) WebSocket通信(wx.connectSocket) 这里以介绍wx.request,wx.uploadFile,wx.dowloadFile三种网络请求为主 设置域名 要微信小程序进行网络通信,必须先设置域名,不然会出现错误: URL 域名不合法,请在 mp 后台配置后重试

微信小程序开发入门教程

做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先来看看其有哪些官方文档. 微信公众平台开发者文档统一入口为:https://mp.weixin.qq.com/wiki,这里面大部分内容都是以前就有的,微信开发都是基于此份文档. 现在的变化是在这份文档的顶部加了一个“微信公众平台.小程序”的入口,这个入口才就是专门针对微信小程序开发的文档,如下图: