小程序入门与实战/在线制作

使用微信扫描二维码分享朋友圈，成交更快更简单！

，我在这里先介绍下今天要实现的功能：

1、tabBar

2、内容传值（data）

3、循环的利用（九九乘法表的实现）

4、事件绑定（点击事件）

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

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

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

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

小程序简单入门教程
4
先给大家介绍一下实现tabBar的方法。

实现代码如图所示。

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

小程序简单入门教程
5
接着，给大家介绍一下实现数据传值的方法写法。

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

两边的变量名称要一致。

小程序简单入门教程
小程序简单入门教程
6
接下来给大家介绍第三种要实现的功能，循环的利用。

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

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

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

具体代码如下图所示

小程序简单入门教程
小程序简单入门教程
7
再给大家介绍一下关于事件绑定的实现。

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

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

参考代码如下。

<button id="view0" type="warn" bindtap="Clickme">View0</button>

js文件中：

Clickme: function (e) {

console.log(e);

count++;

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

this.setData(param.data);

}

小程序简单入门教程
小程序简单入门教程
8
后，给大家看一下整体的处理效果。

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

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

小程序简单入门教程
小程序简单入门教程
小程序简单入门教程
小程序简单入门教程
END
注意事项
传值前后两边的变量名称要一致
页面关键代码均以在上述步骤中附上，仅供参考！
为了可以并排显示，需要添加一个样式 flex-wrp



您好亲，我们是盛仁德电子科技有限公司
我们拥有无数企业官网开发经验
保质保量，原创设计，完成，价格合理，完善的售后
1、我们拥有强大的网站研发团队；搭建周期短、价格低
2、我们拥有国内的设计师，为您定制专属品牌网站；
3、完善的售后服务，让每一位客户没有后顾之忧！
4、真诚的心与每一位客户建立合作伙伴关系！
5、我们有足够的信心给您一个满意的结果！
网站开发、网页设计、UI设计、VI设计、小程序制作、公众号运营推广、企业logo设计、互联网推广等
为企业提供一站式互联网服务
真诚期望与您合作！
您的满意，就是我们的追求！竭诚为您服务！
公司官网：
欢迎联系我们：（同号）