小程序编程第25课

教程

这节课我们美化一下我们的小程序，然后把计算结果放到下一页。

复制如下代码到index.wxss中去（关于如何美化页面，点击这里学习CSS教程）

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 50px;
  border-bottom: 1px solid #ddd;
}

input{
  margin-left: 20px;
  flex: 1;
}

button{
  margin-top: 50px;
}


.th,.td {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 2fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-items: stretch;
  align-items: stretch;
}

然后我们发现页面成这个样子了

我们要把计算结果放到下一页，所以我们需要再建一个页面

怎么再建一个页面呢？

鼠标放到pages文件夹上，点击右键出现菜单

选择新建文件夹，输入文件夹名称，result

因为这个页面是用来展示结果的，所以我把名称取为result

然后我们鼠标移动到result文件夹上，点击鼠标右键，点击新建Page

输入页面名称result

然后就出现了4个文件，长地很index页面里面的4个文件差不多，就是名字不同

然后我们需要把结果放到这个页面上来展示，怎么转移过来呢？

我们先转移index.wxml文件中的内容

直接把需要展示内容的代码剪贴到result.wxml中即可

<view>
	计算结果
</view>
<view>
	{{result}}
</view>
<view>
	您输入的本金是{{p}}
</view>
<view>
	您输入的期数是{{n}}
</view>
<view>
	您输入的利率是{{i}}
</view>
<view>
	期末本息和是{{result}}
</view>

<view class="table">
	<view class="th">
		<text>期数</text>
		<text>利息</text>
		<text>累计利息</text>
		<text>累计本息和</text>
	</view>
	<view wx:for="{{items}}" class="td">
		<text>{{item.index}}</text>
		<text>{{item.perInterest}}</text>
		<text>{{item.totalInterest}}</text>
		<text>{{item.total}}</text>
	</view>
</view>

然后保存一下，我们就发现index页面少了结果的那些文字，清爽了不少

我们的result页面在哪呢？

鼠标移动到最上面，然后点击普通编译，出现了下拉框，点击添加编译模式

在启动页面输入框中输入pages/result/result 然后点击确定

然后就出现了我们的结果页

但是现在的问题是，我们的结果页并没有数据

我们的结果页需要的数据是result,p,n,i,items

这些东西从哪里来呢？

这些东西需要从上个页面传递过来

如何传递过来？

我们要在index页面中增加一段代码来缓存我们的计算结果等数据

打开index.js文件

在最下方，我们增加如下代码

wx.setStorageSync('result', fv)
wx.setStorageSync('p', p)
wx.setStorageSync('n', n)
wx.setStorageSync('i', i)
wx.setStorageSync('items', items)

这几行代码的意思就是把我们第二个页面需要的变量缓存起来，这里调用的是wx对象的setStorageSync方法

现在我们还需要在result页面中取出这些数据

怎么取呢？

我们打开result.js文件

在data中增加如下几个变量

然后在onLoad方法中增加如下代码

let result = wx.getStorageSync('result')
let p = wx.getStorageSync('p')
let n = wx.getStorageSync('n')
let i = wx.getStorageSync('i')
let items = wx.getStorageSync('items')
this.setData({
	result: result,
	p: p,
	n: n,
	i: i,
	items: arr
})

前几行代码的意思很明显就是把index页面中存起来的值给取出来

然后再把变量设置到data中去

我们需要在data中也增加这几个变量

data: {
	p: '',
   i: '',
   n: '',
   result: '',
   items: []
}

然后我们保存之后，发现还是没有任何变化

为什么？因为目前我们没有在Index页面输入任何数据，所以也没有存储任何结果

我么现在切换到index页面去

鼠标还是移到编译旁边的下拉框上去，点击选择普通编译

我们就到首页了

我们输入之后试试

点击计算后，没有任何反应

我们期望的是，点击计算之后自动跳转到结果页

该怎么办呢？

我们可以在储存完结果之后，调用跳转页面的方法

wx.navigateTo({
  url: '/pages/result/result',
})

增加以上代码即可实现

然后我们的结果页就出来了，但是很丑，没关系，下次我们再给它穿衣服

记得提交保存哦

作业

跟着教程开发出来即可，截图发群里打卡