当前位置: 萬仟网 > 互联网>腾讯>微信 > 小程序编程第18课

小程序编程第18课

2020年07月28日  | 萬仟网互联网  | 我要评论
教程这节课开始我们做一个实战项目:复利计算器2这个小程序是我自己开发的已经稳定运行一年多的小程序。这个小程序目前能带来约每月能带来300元的被动收入,熟练开发之后,开发这种小程序也就一周左右,如果产品满足市场需求,那么每年躺着都能赚钱。盈利模式也相当简单,就是靠广告收入。广告是腾讯公司自动植入的广告,只要你的小程序有1000人用过,那么就能开通广告功能,直接躺着收钱。小程序是一个真正能够把你的一份时间出售多份的一种产品目前已经有不少人仅仅通过小程序就实现财务自由了。比如微信上面的小游戏,有的一个月

教程

这节课开始我们做一个实战项目:复利计算器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;
}

本文地址:https://blog.csdn.net/liul99/article/details/107602949

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
Copyright © 2017-2021  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com