您的位置首页生活百科

微信小程序简单入门教程

微信小程序简单入门教程

的有关信息介绍如下:

微信小程序简单入门教程

在微信、朋友圈之后,又出来一个大招“微信小程序”。越来越多的IT开发开始转型开发微信小程序,如今风头正盛,小编也想把自己的入门教程分享给大家

首先,我在这里先介绍下今天要实现的功能:

1、tabBar

2、内容传值(data)

3、循环的利用(九九乘法表的实现)

4、事件绑定(点击事件)

打开微信开发者工具,新建一个微信小程序,在这里就不给大家做具体的图像说明了。

这是我今天的项目的结构布局,先给大家看看一下,主要分为2个目录,images和pages目录。

其中images目录用来存放logo等图片内容。

pages目录用来存放小程序相关的页面等资源。

先给大家介绍一下实现tabBar的方法。

实现代码如图所示。

每个tab均对应自己的图片根目录和显示文字内容属性及page对应的路径。

接着,给大家介绍一下实现数据传值的方法写法。

这边,需要注意的是,传值一般通过xx.js中的data传值,在xx.wxml页面填写相应的变量名称来获取传值内容{{变量名称}}。

两边的变量名称要一致。

接下来给大家介绍第三种要实现的功能,循环的利用。

这里我借用实现九九乘法表的功能来说明一下。

九九乘法表需要用到2层循环,为了避免重复,这里需要添加一个条件,i>=j(从小到大排列)。

为了可以并排显示,需要添加一个样式 flex-wrp。

具体代码如下图所示

再给大家介绍一下关于事件绑定的实现。

我们这里需要用到一个属性,bindTap后面跟事件名称或者说是函数名称。

函数具体实现方法需要在xx.js文件中写明。

参考代码如下。

js文件中:

Clickme: function (e) {

console.log(e);

count++;

param.data.viewmsg = '显示内容 ' + e.target.id + ' 点击次数 ' + count;

this.setData(param.data);

}

最后,给大家看一下整体的处理效果。

功能已经全部实现,美观没有做处理,样子丑点希望你们可以理解。

页面关键代码均以在上述步骤中附上,仅供参考!