北京华网天下

树莓派与小程序开发全攻略：从真机调试到实时显示温湿度

2024-07-30

来源：网络整理

树莓派+小程序开发（一）

树莓派+小程序开发（下）

4：真机调试

五：让小程序连接树莓派

6. 小程序控制面板设计

7：树莓派如何解析小程序的信息

8. 如何给树莓派上的小程序发送消息

9.树莓派与微信小程序通信通过

10：小程序实时显示树莓派温湿度

11：版本服务器实现

12：如何在服务器上集成 LED 和蜂鸣器

13：集成温湿度传感器的服务器

四：重新开始

新建一个微信小程序项目的模板其实非常复杂，对于一个对前端编程并不熟悉的程序员来说，想要快速掌握其实是比较困难的，需要在网上找更多的资料来弥补，甚至在知道后面的部分之后就忘记前面的部分了，所以初学者最想做的就是从头开始重写。

在本节中，我们将删除项目自带的代码、文件和目录，然后重建目录文件。

功能为两页和一个按钮，按该按钮可切换到下一页。

效果如下图：

4.1 如何下推

右键点击删除，日志

代码显示如下

4.2 如何重建

删除所有页面后，app.json提示如下错误

:1 [""] 至少必须存在一个项目

所以我们至少需要一页

单击“+”号创建新目录

然后右键点击目录，新建一个Page——

系统自动生成四个文件.js,.json,.wxml,.wxss

另外app.json中会自动添加“//”，系统页面不会报错

// pages/index/index.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })

系统自动生成的.json文件

""：{}

系统自动生成的.wxml文件代码

//.wxml

系统自动生成的.wxss文件代码

/* //.wxss */

4.3 完善第一步：首页

我们不需要在.js中写很多代码，我们只保留一个函数并在其中添加一条调试语句

// pages/index/index.js Page({ /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log("装载index.js页面...") } })

运行时，该语句会打印在控制台中，如图

系统自动生成的.json文件

""：{}

无需进行任何更改。

系统自动生成的.wxml文件代码

//.wxml

程序运行时，页面会显示此处给出的内容。让我们对其进行修改，使其显示“主页”字样。

结果如下

但是“首页”字样显示在左侧。如何让它显示在中间？

还记得app.wxss吗？这个文件控制全局的情况。里面有一个-设置，但是为什么不起作用呢？

我们先看一下原来的项目模板，.wxml中添加了视图层，引入了==，我们这里没有，所以改成这样

<view class="container"> <text>主页</text> </view>

再看看效果

调整到中间之后，我们想把字体弄大一点，如果可以的话，改成彩色字体。

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

系统自动生成的.wxss文件代码是时空的，我们模仿系统模板，添加一个类，自定义名字，但是保存之后，运行结果没有任何变化。

/* pages/index/index.wxss */ .text_style{ color:green }

python开发微信小程序模板_python微信开发_pycharm开发微信小程序

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

<view class="container"> <text class="text_style">主页</text> </view>

结果如下

其实颜色已经改了，但是因为字体太小，看不清楚，所以接下来我们在样式中添加字体大小控制，修改.wxss，在中添加

/* pages/index/index.wxss */ .text_style{ color:green; font-size:100rpx }

再看看效果，还可以

根据我们的预设，我们还需要添加一个按钮

4.4 完善第二步：按钮

记得之前讲到项目模板代码分析的时候，按钮也是在.wxml中实现的，我们这样试试看。

<view class="container"> <text class="text_style">主页</text> <button>下一页</button> </view>

效果如下：

看起来很不一致。我们需要更改它。我们应该如何更改它？

<view class="container"> <text class="text_style">主页</text> <button type="primary">下一页</button> </view>

效果如下图：

这个词的意思是主要的，基本的，主要的。其实它的意思也是原色。这里应该是这个意思。

但是，按钮离主页太近了。我们如何才能改变它，以便将下一页放在下面？我们在 .wxss 中为按钮添加一个类，并将其设置为距顶部 500 像素。

/* pages/index/index.wxss */ .text_style{ color:green; font-size:100rpx } .button_style{ margin-top: 500rpx }

并在.wxml中添加此类控件，

<view class="container"> <text class="text_style">主页</text> <button class="button_style" type="primary">下一页</button> </view>

最终效果图；

4.5 实现第二个页面

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

系统会自动将页面添加到app.json中

""：[

“//”，

“/下一个/下一个”

]，

接下来我们需要在“下一页”按钮中实现功能绑定，当点击下一页时，就跳转到下一页。

首先我们需要在.wxml中实现绑定动作，代码如下

<view class="container"> <text class="text_style">主页</text> <button class="button_style" type="primary" bindtap="goNextPage">下一页</button> </view>

然后在.js中实现逻辑，也就是函数，代码如下

// pages/index/index.js Page({ /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log("装载index.js页面...") }, goNextPage:function() { console.log('正在切换到下一页...') wx.navigateTo({ url: '../next/next' //切换到下一页面 }) } })