# 目录

微信小程序开发(一)
微信小程序开发(二)
五: 让小程序连接树莓派
六：小程序控制面板设计
七：树莓派如何解析小程序的信息
八：树莓派如何回信息给小程序
九：树莓派与微信小程序通过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文件代码

<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文件代码

<text>pages/index/index.wxml</text>

程序运行时，页面显示内容就是这个给的，我们改动一下，让它显示“主页”两个字。

结果如下

但是主页两个字显示在左侧，怎么让它显示在中间呢？

还记得app.wxss吗，这个文件时控制全局的，里面有一个align-items设置的是center，但是为什么没有取作用呢。

我们再看看原来的工程模板，index.wxml中加入了view层，并且引入了class=“container”，我们这里没有，所以我们这样改动一下

</view>

再看效果

调到中间来后，接下来我们希望把这个字体弄得大点，而且可能的话，换一个彩色字体

这样，我们需要研究index.wxss，因为这个文件时控制局部页面样式的。

系统自动生成的Index.wxss文件代码，时空的，我们仿照系统模板，添加一个类text_style，名字我们自定义就可以了，但是这样保存后，运行结果没有变化

/* pages/index/index.wxss */

.text_style{

color:green

}

原因在于我们没有在index.wxml中加入这个样式，index.wxml应该添加这一句

</view>

运行结果如下

其实颜色已经改过来了，但是因为字体太小，我们看不清，所以接下来，我们在样式里面再添加字体大小的控制，还时修改index.wxss，而且还时类text_style中添加

/* pages/index/index.wxss */

.text_style{

color:green;

font-size:100rpx

}

再看效果，就OK了

按照我们的预设，我们还需要加一个按钮

4.4 完善第二步：按钮

我们记得在讲工程模板代码分析的时候，按钮也是在index.wxml中去实现的，我们也这样试试

</view>

效果如下：

看着很不协调，我们需要改动一下，怎么改动呢，

</view>

效果如图：

Primary这个单词是主要的，基本的，初级的，其实它还有一个意思是原色的，这里应该就是这个意思

但是，按钮和主页字样离得太近，怎么改动一下让下一页放到下面呢？我们在index.wxss中再为按钮添加一个类，设置离顶500个像素

/* pages/index/index.wxss */

.text_style{

color:green;

font-size:100rpx

}

.button_style{

margin-top: 500rpx

}

并且在index.wxml中也要加入这个类控制，

</view>

最后的效果图；

4.5 实现第二个页面

我们需要在目录pages下面再新建一个目录next，然后在next下面新建page

系统会自动在app.json里面添加page

"pages": [

"pages/index/index",

"pages/next/next"

接着，我们需要在按钮“下一页”中实现函数的绑定，当我们点击下一页的时候，跳到next

首先，我们需要在index.wxml中实现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

我们同样需要把这个字体调到中间，并且字体放大，设置绿色

我们修改next.wxss，代码如下

/* pages/next/next.wxss */

.text_style{

color:green;

font-size:100rpx

}

我们再修改next.wxml，代码如下：

</view>

最后的效果：

至此，我们自己开发的小程序就完成了，虽然功能很简单，但是都是我们一手一脚搭起来的，还时很有收获的。

下一篇：五: 让小程序连接树莓派

下家山

发布了38 篇原创文章 · 获赞 14 · 访问量 1万+

私信关注

微信小程序开发(二)

# 目录

四：推到重来

4.1 如何推倒

4.2 如何重建

4.3 完善第一步：主页

4.4 完善第二步：按钮

4.5 实现第二个页面

猜你喜欢