小程序编程第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;
}
本文地址:https://blog.csdn.net/liul99/article/details/107602949
推荐阅读
-
c#一个定时重启的小程序实现代码第1/2页
-
微信小程序异步API为Promise简化异步编程的操作方法
-
第6章 AOP与全局异常处理6.1-6.4 微信小程序开发学习笔记
-
Java经典编程习题100例:第18例:编写程序,将一个数组中的元素倒排过来。例如原数组为1,2,3,4,5;则倒排后数组中的值
-
习题 5.11 有一行电文,已按下面规律译成密码:A-Z a-z即第一个字母变成第26个字母,第i个字母变成第(26-i+1)个字母。非字母字符不变。要求编程序将密码译回原文,并输出密码和原文。
-
小程序开发公司,挑战百日学习计划第36天(js控制全选按钮)
-
Python 练习册,每天一个小程序----第0000题
-
Microsoft Office,VB.NET编程 PIA使用小程序 OfficeMicrosoftVBVB.NET编程
-
初入职场程序员需要了解的25个编程小技巧
-
python编程练习(小甲鱼)第31-35课