全栈工程师之路-中级篇之小程序开发-第一章第三节阅读官方demo

简介: 全栈工程师之路-中级篇之小程序开发-第一章第三节阅读官方demo

在网上好多人,喜欢找别人写好的一些线上的项目源码,比较完整的。想着学习的更加实用和全面一点。

这无可厚非,但是,我发现有好多人并不是很在意官方提供的demo。比如ionic的tabs demo就没有什么人看。


我个人觉得既然官方把这样的demo推到了入门的地位,那必然是有它的道理的。所以我很喜欢从官方的demo开始学习,因为它足够简单,又足够让我明白它的用法和逻辑。


上一节课,我们已经讲解了如何新建一个项目,并且讲解了工具里面的一部分功能。剩下的在项目开发中比较常用的,不容易被忽略的,上一节就没详细讲解。会在之后的开发中介绍。


一、目录结构

image.png

小程序规定一个页面对应四个文件。(其中有的必须有的非必需,太麻烦了,反正记下来四个文件就好)

*.js 小程序的逻辑文件

*.json 小程序的配置文件

*.wxss 小程序的样式文件--相当于css

*.wxml 小程序的页面结构--相当于html

每一个子页面都对应四个上述的文件。


在根目录下还有三个文件,可以理解为存放公共配置、公共逻辑、公共样式的地方。这么理解吧,小程序会首先使用这外面的三个文件。如果子页面自己的相应文件做了修改,则会使用子页面的配置和样式。

接下来我们打开app.json文件

image.png

看第一个page属性,是一个字符串数组,用于配制子页面的文件路径。

注意数组的第一项就是打开小程序时的主页面。

还有这里有一个新建页面的技巧,最开始我新建一个页面是先新建一个文件夹,然后在文件夹里面新建四个文件,最后再在配置表里面添加路径。

有一次由于拼写错误,发现,工具自动新建里一个文件夹和页面所需的文件,并且文件里面还写了必要的内容。

如:在page里面写上"pages/test/test". 按ctrl+s保存(Mac用command+s),工具就自动创建了四个文件了。

image.png

接着看app.json里面的window属性。

window属性用来配置小程序的状态栏、导航栏、标题和窗口的背景色。注意每个子页面都可以在自己的json文件里面,单独对上述这四个属性做单独的配置。

除了图中四种属性,还有enablePullDownRefresh 是否开启下拉刷新。

接下来我们打开app.wxss

image.png

这个属于公共的样式表,只要在这个文件中定义的样式文件,可以在任何子页面中调用。

而在子页面中定义的独立样式,则只能在自己的结构文件中调用,子页面之间不能相互调用。

/util/util.js

工具文件,编辑一些常用工具方法,用的比较多的就是用来配置服务器请求路径。

这应该是用来做公用方法的,但是公用方法又可以写在app.js中,所以我也不是太清楚,这个文件的意义是什么。

接下来我们来看一下,我们刚刚新建的test.js文件。

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

这个新建的文件,比demo现有的代码能让我们更清楚的知道小程序的生命周期。

我们现在每一个勾子函数中打印出相应的日志。

如:

image.png修改app.json文件,将test页面修改成默认页面

image.png补充一点

image.png打开工具-调试-console查看,打印日志。可以查看勾子函数的调用顺序,了解小程序的生命周期,其他没打印的函数,看名字,应该能明白。

其中两个函数,这里可以重复提一下。onPullDownRefresh(监听用户下拉动作)、onReachBottom(页面上拉触底事件的处理函数)

image.png

这两个函数onPullDownRefresh用于下拉刷新页面,可参考微信朋友圈,下拉拉取朋友们最新发布的朋友圈消息。

onReachBottom是用户加载更多列表,同样参考微信朋友圈,下拉拉取更多朋友圈列表历史记录,分页加载更多数据的概念。


接下来让我们重新回到最原始的demo里查看index里面的内容。

修改app.json,将"pages/index/index"设置成page数组的第一项,是index页面作为启动页。

打开// pages/index/index.wxml

image.png

现在把所有的关注点集中在上图我标记的位置(我打开的时候我电脑里面的demo我做过一点点修改,可能跟原来的不太一样,但是这几个地方没有变化,不要太较真哦)

1、先看第二行class="container"这个和传统的html中的用法一样,只是对应文件wxss中的.container{}

2、标签,在小程序中,所使用的标签全是微信做过封装的,可以按照html的标签去理解记忆这些标签,但是不能完全等同,应该查阅详细的api看看有什么属性,便于后续的开发,可能你要的什么功能,微信已经封装好了。

3、src=“{{地址变量}}”’这个和ng中的绑定数据很像,只是直接使用src,注意双大括号要当在双引号里面。

4、在标签中的绑定数据也是用双{{}},现在好多新的框架基本上都是这么做的,注意这里双大括号不需要放在双引号里面。

5、bindtap="bindTiewTap" 事件绑定,这里先略过,后续的详细的出一节讲解所有的绑定事件,也可查阅官方文档。

接下来我们先深入的看小程序的数据绑定,这里我们从上图中的标记4{{'你好,'+userInfo.nickName}}入手了解。

这里可以知道这里的数据绑定了userInfo变量的nickName属性。那这个userInfo又是从哪里来的呢?

接着我们打开文件// pages/index/index.js

image.png看第五行的data,我们知道userInfo是这个data的一个属性。这里我们知道小程序把界面绑定在了他相对应的js的data中。

这么理解吧,js中的Page对应一个界面。

看第3行,创建了一个变量app通过全局方法,getApp()获取了当前应用实例。

在19行中调用了app.getUserInfo的方法。这里可以跟进查看到上一层的app.js中。

image.png

这里我们就知道了,在index.js中调用getApp()方法获取的就是app.js中的这个App();

image.png

接下来我们把注意力集中在getUserInfo这个方法中,这里出现一个wx.login()方法。

这里我们并没有人任何一个地方定义了wx变量,所以这里可以知道,小程序中把wx作为官方API的保留关键字。这里调用了微信的登录接口,获取了用户数据。

那么这一整个流程就是进入index界面-调用onload方法-调用app.js中的getUserInfo方法-调用微信登录接口-获取用户数据-通过回调函数cb-回调到index.js中-

将数据赋值给data的userInfo-传递到界面中的{{userInfo.nikeName}}实现数据展示。

其实要深究的话这个demo还有不少内容,介于篇幅将其他的内容放于后续的章节中讲解。


这节课的内容就到这里结束了。

感谢您的阅读。





目录
打赏
0
0
0
0
17
分享
相关文章
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
50 9
weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
本文介绍了一款基于微信小程序的校园二手物品交易平台的开发与实现。该平台采用Java语言开发服务端,使用MySQL数据库进行数据存储,前端以微信小程序为载体,支持管理员和学生两种角色操作。管理员可管理用户、商品分类及信息、交易记录等,而学生则能注册登录、发布购买商品、参与交流论坛等。系统设计注重交互性和安全性,通过SSM框架优化开发流程,确保高效稳定运行,满足用户便捷交易的需求,推动校园资源共享与循环利用。
工会成立100周年纪念,开发职工健身AI运动小程序、APP方案推荐
为庆祝中华全国总工会成立100周年,特推出基于AI技术的智能健身系统,以小程序和APP形式呈现,助力职工健康生活。方案包括:1) 小程序插件,支持多种运动识别,开箱即用;2) APP插件,提供更高精度的运动检测;3) 成熟的「AI乐运动」系统,支持赛事活动管理。这些方案满足不同需求,推动全民健身体验升级,彰显工会对职工健康的关怀。
【一步步开发AI运动小程序】二十一、如何将AI运动项目配置持久化到后端?
本文介绍基于云智「Ai运动识别引擎」的运动配置持久化方案,旨在优化小程序或Uni APP中AI运动识别能力。通过将运动检测参数(如`Key`、`Name`、`TickMode`、`rules`或`samples`)持久化到后端,可避免因频繁调整运动参数而重新发布应用,提升用户体验。持久化数据结构支持规则和姿态样本存储,适用于关系数据库、文件或文档数据库(如MongoDB)。此外,云智还提供运动自动适配工具及「AI乐运动」产品,助力快速实现AI体育、全民健身等场景。
weixin168“返家乡”高校暑期社会实践微信小程序设计与开发ssm(文档+源码)_kaic
本文探讨高校暑期社会实践微信小程序的开发与应用,旨在通过信息化手段提升活动管理效率。借助微信小程序技术、SSM框架及MySQL数据库,实现信息共享、流程规范和操作便捷。系统涵盖需求分析、可行性研究、设计实现等环节,确保技术可行、操作简便且经济合理。最终,该小程序可优化活动发布、学生信息管理和心得交流等功能,降低管理成本并提高工作效率。
【一步步开发AI运动小程序】十九、运动识别中如何解析RGBA帧图片?
本文介绍了如何将相机抽取的RGBA帧图像解析为`.jpg`或`.png`格式,适用于体测、赛事等场景。首先讲解了RGBA图像结构,其为一维数组,每四个元素表示一个像素的颜色与透明度值。接着通过`uni.createOffscreenCanvas()`创建离屏画布以减少绘制干扰,并提供代码实现,将RGBA数据逐像素绘制到画布上生成图片。最后说明了为何不直接使用拍照API及图像转换的调用频率建议,强调应先暂存帧数据,运动结束后再进行转换和上传,以优化性能。
【一步步开发AI运动小程序】二十、AI运动小程序如何适配相机全屏模式?
本文探讨了小程序`camera`组件在全屏模式下的适配问题及其解决方案。由于`camera`组件存在预览图像裁切特性,可能导致入镜检测与预览不一致、骨骼图与人体不重合等问题。通过分析其裁剪逻辑(长边按比缩放,短边居中裁切),我们提供了计算裁剪比例和留白的适配方法,并优化了插件特性以支持全屏应用。同时,文章还讨论了全屏模式可能带来的副作用,如人体可视区域变小、检测范围变化及抽帧帧率下降等,并给出了改进建议。该方案适用于云上赛事、健身锻炼、AI体测、AR互动等场景,助力提升用户体验和UI布局合理性。
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
91 0
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
118 0
在线课堂+工具组件小程序uniapp移动端源码
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
823 3

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等