微信小程序简单入门教程

2024-03-19 18:58:04

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

操作方法

01

首先，我在这里先介绍下今天要实现的功能： 1、tabBar 2、内容传值（data） 3、循环的利用（九九乘法表的实现） 4、事件绑定（点击事件）
02

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

这是我今天的项目的结构布局，先给大家看看一下，主要分为2个目录，images和pages目录。其中images目录用来存放logo等图片内容。 pages目录用来存放小程序相关的页面等资源。
04

先给大家介绍一下实现tabBar的方法。实现代码如图所示。每个tab均对应自己的图片根目录和显示文字内容属性及page对应的路径。
05

接着，给大家介绍一下实现数据传值的方法写法。这边，需要注意的是，传值一般通过xx.js中的data传值，在xx.wxml页面填写相应的变量名称来获取传值内容{{变量名称}}。两边的变量名称要一致。
06

接下来给大家介绍第三种要实现的功能，循环的利用。这里我借用实现九九乘法表的功能来说明一下。九九乘法表需要用到2层循环，为了避免重复，这里需要添加一个条件，i>=j（从小到大排列）。为了可以并排显示，需要添加一个样式 flex-wrp。具体代码如下图所示
07

再给大家介绍一下关于事件绑定的实现。我们这里需要用到一个属性，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); }
08

最后，给大家看一下整体的处理效果。功能已经全部实现，美观没有做处理，样子丑点希望你们可以理解。页面关键代码均以在上述步骤中附上，仅供参考！

赞 (0)

微信小程序开发实战教程: 手把手教你开发跑步微信小程序

微信小程序正式上线,很多地方在刷屏,我们可以看见很多人都在使用微信小程序,但是不少用户不会微信小程序怎么开发?下面我们的小编带来微信小程序开发实战教程,手把手教你开发跑步微信小程序,随着小编一起来了解 ...
微信小程序下载地址微信小程序开发破解教程

微信小程序开发简要教程: 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果.这个小程序的首页将会显示欢迎语以及当前用户的微信头像,点击头像,可以在新开的页面中查看当前小程 ...
如何自己开发小程序？自己制作微信小程序详细图文教程

小程序火了,在微信平台每天都会上线很多新小程序,但对于很多不会编程的小白来说,如果自己开发一个微信小程序呢?其实,方法也很简单,知道借助一些专业平台,10分钟也让你轻松制作属于自己的微信小程序,以下是 ...
微信开发者工具怎么开发小程序（微信小程序开发入门）

微信开发者工具一般由于小程序包的上传与发布.但是由于技术的发展,一些智能型平台已经实现与第三方平台接口对接,已实现一键发布,告别通过开发者工具进行传输.但为了小部分的需求者学习,使用开发者工具发布小程 ...
零基础小程序开发入门教程

从零开发开发微信小程序操作方法 01 首先下载微信小程序开发者工具并安装,开发者工具安装完成后我们就可以将其打开,初次打开会需要用微信扫码登录,用手机微信扫一扫后确认登录就可以了. 02 登录成功后 ...
微信小程序开发的教程

2018年是小程序开始大火的一年.众多的小程序入雨后春笋般破图而出,作为开发者怎么开发一个小程序呢.让我们开始吧,let's do it. 操作方法 01 首先,打开微信小程序注册页面注册账号跟密码 ...
微信小程序开发入门

微信小程序在2016年9月21日邀请内测,这里是开发的一些入门知识. 操作方法 01 当你准备开发一个微信小程序的时候,你首先需要一个小程序的 APPId ,在微信公众号官网可以获得.(暂时只有官方邀 ...
制作微信小程序的软件（微信小程序怎么制作教程）

现在即使小程序已经非常普及了,依然也是有很多人加入到小程序的大队伍中,纷纷制作自己的微信小程序.那么微信怎么制作小程序?制作微信小程序流程又是什么呢?今天就带大家一起来看看.微信怎么制作小程序?制作微 ...
微信小程序内测申请教程

微信小程序是一种不需要下载安装即可使用的应用,用户只需要扫一扫或者搜一搜即可打开应用,这样一来用户将不用再担心手机应用安装太多的问题,应用无需安装或者卸载,随时都可以使用.但是小程序本次内侧采用的是邀 ...