小程序编程第18课

教程

这节课开始我们做一个实战项目:复利计算器2

这个小程序是我自己开发的已经稳定运行一年多的小程序。这个小程序目前能带来约每月能带来300元的被动收入,熟练开发之后,开发这种小程序也就一周左右,如果产品满足市场需求,那么每年躺着都能赚钱。

盈利模式也相当简单,就是靠广告收入。广告是腾讯公司自动植入的广告,只要你的小程序有1000人用过,那么就能开通广告功能,直接躺着收钱。

小程序是一个真正能够把你的一份时间出售多份的一种产品

目前已经有不少人仅仅通过小程序就实现财务自由了。比如微信上面的小游戏,有的一个月就是几十万的收入,非常恐怖。只要你有创意,只要你的产品能够满足足够多用户的某些需求,然后你就会盈利。

关于开发小程序的重要性就介绍到这,现在开始真正的实战。

我们先来看一看这个小程序有哪些功能。

这个小程序目前的功能主要是

在这里插入图片描述
上面就是这个小程序的功能

今天我们就做一个东西,先把复利计算器这一页的东西先做出来。刚开始我们不要做这么复杂,比如本金的单位就不用了,期数的单位默认就是年,利率的单位默认就是年利率。

下面的计算选项也是默认算终值就可以了

计算按钮还是需要的,我们最开始做得肯定是不好看的,重点要满足功能。页面长地丑我们可以先慢慢优化。

现在我们打开小程序开发工具,新建一个项目

我们怎么做这个东西,首先我们知道我们要做成什么样子,然后我们要把它先画出来。

也就是说我们第一步要画一个静态页面。

也就是我们看到的这些输入框和按钮,文字之类的东西,我们先把他们给画出来。怎么画呢?

就是用标签来画,标签就是一对一对的东西。你看这个<view></view>就是一对,这个<view>是开始标签,</view>是结束标签

这一对标签的开始标签和结束标签之间,我们可以放我们想展示的任何东西,字母也好文字也罢,都可以,还可以嵌套其它标签。

那现在我们把index.wxml这些所有的标签都删除,比如我们现在要展示本金两个字,怎么展示呢?我们可以写一个<text></text>标签,这个标签顾名思义,就是放文本的。本金就是属于文本,我们可以把它放进去。

<text>本金</text>

你可以输入text然后点击回车,自动就出现完整的一对标签了,这样不容易写错。

然后我们保存看一下,是不是出现了本金两个字。

那现在我们紧接着需要展示一个输入框,以便让用户可以输入本金,怎么展示呢?

这就是我们熟悉的input的标签要出场了。

<input placeholder="请输入"></input>

这个input标签和text标签不同,它多了一个placeholder属性,也就是它可以在输入框内展示一些占位符,可以用来提示用户。这里placeholder的值就是请输入

然后所有标签还有一些共同的属性,比如class,id,还有一些事件监听属性等。这个我们现在还没有用上,用上了再讲。

然后现在我们有了本金这两个字,和一个输入框。但是他们没有在一行 ,而且好像长地也很难看。先不管这么多。我们还缺了个单位

再加一个标签

<text></text>

然后同理,我们把期数 ,利率也加上去。

然后,我们还缺一个按钮

按钮也是一个标签

<button>开始计算</button>

这些所有的标签都在官方文档里面,这些标签也叫做组件。组件这个概念就好像我们玩积木玩具一样,那些积木零件就是组件。

不知道你有没有玩过「我的世界」这款游戏,游戏里面的每个砖头就是一个组件。

官方文档-组件

现在我们的页面就开发好了,只不过很丑。

都说人靠衣装佛靠金装,我们的页面也是需要穿衣服才能好看的。

如把这个index文件夹比作人的话,那么index.wxml文件就是人的骨架,index.wxss文件就是人的衣服,index.js就是人的大脑。index.json呢?就是一个现在不需要知道的东西。

有了骨架,我们大概知道这个页面有哪些东西,但是因为它没有穿衣服 ,所以很丑。

穿衣服也是可以写成很厚一本书的东西,它实际上是一门语言叫做:css,我们学编程主要是掌握编程逻辑,所以index.js是我们最看重的东西。

也就是大脑,至于衣服和骨架我们目前不需要太过于在乎。因为这两样也不是一时半会能学完的,需要有专门的一系列教程来学习。

我们现在能掌握一些基础的就好了,先跟着写即可。

现在我们简单给这个页面穿一件衣服,也就是把本该在一行的东西,放在一起。

怎么做呢?

跟着我写即可

首先把需要在一行标签外面包view标签,然后在这个标签上添加一个属性class,然后属性值填上row

然后打开,index.wxss文件,删除掉已有代码,然后增加如下代码

display: flex;

然后保存看看,是不是该在一行的都在一行了

虽然还是很丑,比如间距什么的还是不和谐。但问题不大,至少看起来像回事了。

今天就讲到这

作业

跟着写的代码开发出今天的页面,截图发到群里即可

附件

<view class="row">
	<text>本金</text>
	<input placeholder="请输入"></input>
	<text></text>
</view>
<view class="row">
	<text>期数</text>
	<input placeholder="请输入"></input>
	<text></text>
</view>
<view class="row">
	<text>利率</text>
	<input placeholder="请输入"></input>
	<text>%年利率</text>
</view>
<button type="primary">开始计算</button>
.row {
  display: flex;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

冰奕辰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值