从 0 开始写小程序(一):点击事件、获取元素 id 与页面传值详解

2024-07-03
来源:网络整理

1.从零开始写一个小程序(一)点击事件,获取元素ID,并传值给页面

我不是专业的程序员,但是突然想研究一下微信小程序的开发,想开发一个实时菜价系统APP,新手什么都不会,就从零开始,想着写个博客,把遇到的问题和一点一点摸索出来的解决办法记录下来。

遇到的第一个问题是参数传递;

如何在小程序的点击触发事件中获取当前元素的id,并将值传递给下一个页面:

在 wxml 中:

  蔬菜类a>

点击触发器的内容是等号“”后面的函数方法。

在 js 中:

gotoresult:   function (e) {         var kind = e.target.id         console.log(kind);     wx.navigateTo({ url: '../result/result?kind='+kind});        }

函数触发,这里关键点是传递e..id

可以获取当前控件的id值,通过wx.跳转到页面,通过在URL里写参数来传递该值(如?kind=kind)。

在下一页,使用 .kind 方法获取传递的值,这里的 kind 就是上面写的参数名,如:

onLoad: function (options) {       var ta=options.kind;        console.log(txt);    },

微信开发者工具上传小程序_微信小程序发布接口_微信小程序开发之页面传值

2.从零开始写一个小程序(二)js中获取数据

如何使用wxml在js中获取数据

例子:

在 wxml 中:

{{txt}}text>

通过上面的{{txt}}可以获取js中data下定义的txt的值

在 js 中:

data: {     txt:{}     }

首先在data中定义一个“容器”txt:{},{}中的空格表示值是从别的地方传进来的,当然也可以直接在{}中写data,比如txt:{'123'},相当于上面wxml获取到的123;使用一个this.({})方法,通过其他方式给容器传值,比如:

onLoad: function (options) {        var ta=options.kind;       this.setData({         txt:ta,       })  },

这样上面数据中定义的txt的值就是ta的值。

遇到一个问题,一定要用小程序,去腾讯云免费申请了一个,绑定了好久都绑定不了,提示“指定的登录会话不存在…​​…”

后来才知道还要双击证书文件才能安装证书……尴尬

分享