树莓派+小程序开发(二)

最新推荐文章于 2024-02-19 20:25:24 发布

下家山

最新推荐文章于 2024-02-19 20:25:24 发布

阅读量2.9k

点赞数 2

分类专栏：树莓派+微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/qq_27320195/article/details/105080534

版权

树莓派+微信小程序专栏收录该内容

12 篇文章 118 订阅 ¥99.90 ¥99.00

订阅专栏

超级会员免费看

树莓派+小程序开发(一)
树莓派+小程序开发(二)
四：真机调试
 五: 让小程序连接树莓派
 六：小程序控制面板设计
 七：树莓派如何解析小程序的信息
 八：树莓派如何回信息给小程序
 九：树莓派与微信小程序通过websocket通信
 十：小程序实时显示树莓派温湿度
 十一：python版 websocket服务器实现
 十二：python版websocket 服务器如何整合led和beep
十三：Python版服务器整合dht11温湿度传感器

四：推到重来

微信小程序新建项目，模板其实很复杂，这对一个不熟悉前端编程的程序员来说，其实很难很快掌握，需要网上找更多的资料恶补，甚至知道了后面的忘了前面的。因此，初学者最想做的时，想推倒重来，我重新写。
这一节，我们就删掉项目自带的代码和文件，以及目录，然后我们重新再建目录文件。
功能就是两个页面，一个按钮，按下按钮切换到下一页。
效果如图：
在这里插入图片描述

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”，系统页不会报错

// 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
系统自动生成的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
程序运行时，页面显示内容就是这个给的，我们改动一下，让它显示“主页”两个字。
结果如下
在这里插入图片描述
但是主页两个字显示在左侧，怎么让它显示在中间呢？
还记得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>

最后的效果：
在这里插入图片描述
至此，我们自己开发的小程序就完成了，虽然功能很简单，但是都是我们一手一脚搭起来的，还时很有收获的。

接下来，我们将进入第四章：真机调试。

下家山

关注

2
点赞
踩
29

收藏

觉得还不错? 一键收藏
打赏
2
评论
树莓派+小程序开发(二)

四：推到重来微信小程序新建项目，模板其实很复杂，这对一个不熟悉前端编程的程序员来说，其实很难很快掌握，需要网上找更多的资料恶补，甚至知道了后面的忘了前面的。因此，初学者最想做的时，想推倒重来，我重新写。这一节，我们就删掉项目自带的代码和文件，以及目录，然后我们重新再建目录文件。功能就是两个页面，一个按钮，按下按钮切换到下一页。效果如图：4.1 如何推倒右键删除pages，index,...
复制链接

扫一扫