# 目录
微信小程序开发(一)
微信小程序开发(二)
五: 让小程序连接树莓派
六:小程序控制面板设计
七:树莓派如何解析小程序的信息
八:树莓派如何回信息给小程序
九:树莓派与微信小程序通过websocket通信
十:小程序实时显示树莓派温湿度
四:推到重来
微信小程序新建项目,模板其实很复杂,这对一个不熟悉前端编程的程序员来说,其实很难很快掌握,需要网上找更多的资料恶补,甚至知道了后面的忘了前面的。因此,初学者最想做的时,想推倒重来,我重新写。
这一节,我们就删掉项目自带的代码和文件,以及目录,然后我们重新再建目录文件。
功能就是两个页面,一个按钮,按下按钮切换到下一页。
效果如图:
4.1 如何推倒
右键删除pages,index,logs
代码如下
4.2 如何重建
删除了所有的页面后,app.json提示下面的错误
VM224:1 appJSON["pages"] 需至少存在一项
所以我们需要至少一个页面
点”+”号,新建目录
点pages目录右键,新建目录——index
再点击index目录右键,新建Page——index
系统自动生成四个文件index.js,index.json,index.wxml,index.wxss
并且,app.json中会自动添加”pages/index/index”,系统页不会报错
系统自动生成的文件index.js
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
系统自动生成的index.json文件
{
"usingComponents": {}
}
系统自动生成的index.wxml文件代码
<!--pages/index/index.wxml-->
<text>pages/index/index.wxml</text>
系统自动生成的Index.wxss文件代码
/* pages/index/index.wxss */
4.3 完善第一步:主页
Index.js中的很多代码我们用不上,我们只保留一个函数onLoad,并且在里面添加一条调试语句
// pages/index/index.js
Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log("装载index.js页面...")
}
})
运行时,在控制台会打印该语句,效果如图
系统自动生成的index.json文件
{
"usingComponents": {}
}
不用做改动。
系统自动生成的index.wxml文件代码
<!--pages/index/index.wxml-->
<text>pages/index/index.wxml</text>
程序运行时,页面显示内容就是这个给的,我们改动一下,让它显示“主页”两个字。
结果如下
但是主页两个字显示在左侧,怎么让它显示在中间呢?
还记得app.wxss吗,这个文件时控制全局的,里面有一个align-items设置的是center,但是为什么没有取作用呢。
我们再看看原来的工程模板,index.wxml中加入了view层,并且引入了class=“container”,我们这里没有,所以我们这样改动一下
<!--pages/index/index.wxml-->
<view class="container">
<text>主页</text>
</view>
再看效果
调到中间来后,接下来我们希望把这个字体弄得大点,而且可能的话,换一个彩色字体
这样,我们需要研究index.wxss,因为这个文件时控制局部页面样式的。
系统自动生成的Index.wxss文件代码,时空的,我们仿照系统模板,添加一个类text_style,名字我们自定义就可以了,但是这样保存后,运行结果没有变化
/* pages/index/index.wxss */
.text_style{
color:green
}
原因在于我们没有在index.wxml中加入这个样式,index.wxml应该添加这一句
<!--pages/index/index.wxml-->
<view class="container">
<text class="text_style">主页</text>
</view>
运行结果如下
其实颜色已经改过来了,但是因为字体太小,我们看不清,所以接下来,我们在样式里面再添加字体大小的控制,还时修改index.wxss,而且还时类text_style中添加
/* pages/index/index.wxss */
.text_style{
color:green;
font-size:100rpx
}
再看效果,就OK了
按照我们的预设,我们还需要加一个按钮
4.4 完善第二步:按钮
我们记得在讲工程模板代码分析的时候,按钮也是在index.wxml中去实现的,我们也这样试试
<!--pages/index/index.wxml-->
<view class="container">
<text class="text_style">主页</text>
<button>下一页</button>
</view>
效果如下:
看着很不协调,我们需要改动一下,怎么改动呢,
<!--pages/index/index.wxml-->
<view class="container">
<text class="text_style">主页</text>
<button type="primary">下一页</button>
</view>
效果如图:
Primary这个单词是主要的,基本的,初级的,其实它还有一个意思是原色的,这里应该就是这个意思
但是,按钮和主页字样离得太近,怎么改动一下让下一页放到下面呢?我们在index.wxss中再为按钮添加一个类,设置离顶500个像素
/* pages/index/index.wxss */
.text_style{
color:green;
font-size:100rpx
}
.button_style{
margin-top: 500rpx
}
并且在index.wxml中也要加入这个类控制,
<!--pages/index/index.wxml-->
<view class="container">
<text class="text_style">主页</text>
<button class="button_style" type="primary">下一页</button>
</view>
最后的效果图;
4.5 实现第二个页面
我们需要在目录pages下面再新建一个目录next,然后在next下面新建page
系统会自动在app.json里面添加page
"pages": [
"pages/index/index",
"pages/next/next"
],
接着,我们需要在按钮“下一页”中实现函数的绑定,当我们点击下一页的时候,跳到next
首先,我们需要在index.wxml中实现button的绑定动作,代码如下
<!--pages/index/index.wxml-->
<view class="container">
<text class="text_style">主页</text>
<button class="button_style" type="primary" bindtap="goNextPage">下一页</button>
</view>
然后在index.js中去实现逻辑,即函数goNextPage,代码如下
// pages/index/index.js
Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log("装载index.js页面...")
},
goNextPage:function()
{
console.log('正在切换到下一页...')
wx.navigateTo({
url: '../next/next' //切换到下一页面
})
}
})
运行结果如图:
接着,我们再来修改一下next页面,实现当点击下一页时,切换过去,子页面显示“子页面”字样。这样,我们需要修改next.wxml
<!--pages/next/next.wxml-->
<text>下一页</text>
我们同样需要把这个字体调到中间,并且字体放大,设置绿色
我们修改next.wxss,代码如下
/* pages/next/next.wxss */
.text_style{
color:green;
font-size:100rpx
}
我们再修改next.wxml,代码如下:
<!--pages/next/next.wxml-->
<view class="container">
<text class="text_style">下一页</text>
</view>
最后的效果:
至此,我们自己开发的小程序就完成了,虽然功能很简单,但是都是我们一手一脚搭起来的,还时很有收获的。
下一篇:五: 让小程序连接树莓派