小程序编程第18课

淩亂°似流年 2023-03-01 13:44 6阅读 0赞

# 教程 #

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

再加一个标签

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

然后，我们还缺一个按钮

按钮也是一个标签

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

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

[官方文档-组件][-]

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

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

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

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

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

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

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

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

怎么做呢？

跟着我写即可

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

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

display: flex;

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

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

今天就讲到这

# 作业 #

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

# 附件 #

.row { 
      display: flex;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWw5OQ_size_16_color_FFFFFF_t_70]: /images/20230208/845a3166b0d24ebfa10ac7f132ff6a76.png
[-]: https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html