微信小程序实战 (小程序框架基础)

简介: 微信小程序实战 (小程序框架基础)

上一篇讲了创建helloWord项目,这一篇介绍小程序框架基础。

1.项目的目录结构

参考官方文档介绍 总结如图

网络异常,图片无法展示
|

2.小程序应用生命周期

参考官方文档 里面介绍了 在小程序全局入口文件app.js 中指定了小程序的生命周期回调等。

2.1 onLaunch() 监听小程序初始化

看我们生成的初始项目

网络异常,图片无法展示
|

它定义了一个onLaunch() 监听小程序初始化,方法。我们增加一行打印控制台日志查看,当我们重新编译时发现控制台已经打印 "onLaunch: 监听小程序初始化"

console.log("onLaunch: 监听小程序初始化")
复制代码

网络异常,图片无法展示
|

2.2 onShow() 监听小程序启动或切前台

增加onShow()生命周期方法测试

onShow(){
    console.log("onShow: 监听小程序启动或切前台")
  },
复制代码

网络异常,图片无法展示
|
发现监听小程序启动时已经打印了。接着测试切前台 右键工具栏图标管理勾选切后台

网络异常,图片无法展示
|
发现日志已经打印
网络异常,图片无法展示
|

2.3 onHide() 监听小程序切后台

增加onHide()生命周期方法测试

onHide(){
    console.log("onHide: 监听小程序切后台")
  },
复制代码

网络异常,图片无法展示
|

2.4 onError() 错误监听函数。

增加onError()生命周期方法测试,这个有错误参数

网络异常,图片无法展示
|

onError(error){
    console.log("onError: 错误监听函数 ---> "+error)
  },
复制代码

增加错误代码测试

网络异常,图片无法展示
|

另外几个就暂时不测试了,后面遇到对应的场景再测试。

3.小程序页面生命周期

不仅小程序有生命周期,小程序的页面也是有页面生命周期的,见图。

网络异常,图片无法展示
|

新建testPage测试页面

网络异常,图片无法展示
|

3.1 data 是页面第一次渲染使用的初始数据

<!--pages/testPage/testPage.wxml-->
<text>{{testInfo}}</text>
复制代码
/**
   * 页面的初始数据
   */
  data: {
    testInfo: '测试小程序的页面生命周期-------------->    data页面的初始数据'
  },
复制代码

效果

网络异常,图片无法展示
|

3.2 onLoad(Object query)页面加载时触发

参数说明:query打开当前页面路径中的参数 测试

/**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
      console.log("onLoad: 生命周期函数--监听页面加载"+options)
  },
复制代码

网络异常,图片无法展示
|

3.3 ### onShow()页面显示/切入前台时触发。

/**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    console.log("onShow:监听页面显示,切入前台时触发。")
  },
复制代码

网络异常,图片无法展示
|

3.4 onReady()页面初次渲染完成时触发

/**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    console.log("onReady:监听页面初次渲染完成。")
  },
复制代码

网络异常,图片无法展示
|

3.5onHide()页面隐藏/切入后台时触发

/**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    console.log("onHide:监听页面隐藏。")
  },
复制代码

网络异常,图片无法展示
|
增加跳转测试

<!--pages/testPage/testPage.wxml-->
<text>{{testInfo}}</text>
<navigator url="/pages/index/index" open-type="navigate">跳转index</navigator>
复制代码

点击跳转index后发现控制台打印了onHide:监听页面隐藏。

网络异常,图片无法展示
|

3.6onUnload()页面卸载时触发

增加redirect(关闭当前页面,跳转到应用内的某个页面)类型测试

<navigator url="/pages/index/index" open-type="redirect">跳转index-redirect</navigator>
复制代码

网络异常,图片无法展示
|

网络异常,图片无法展示
|

3.7 onPullDownRefresh()监听用户下拉动作

需要在app.json的window选项中或页面配置中开启enablePullDownRefresh

"enablePullDownRefresh":true
复制代码
/**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    console.log("onUnload:监听用户下拉动作。")
  },
复制代码

编译进行下拉测试

网络异常,图片无法展示
|

3.8 onPullDownRefresh()监听用户上拉触底事件

/**
   * 页面上拉触底事件的处理函数 监听用户上拉触底事件
   */
  onReachBottom() {
    console.log("onUnload:监听用户上拉触底事件。")
  },
复制代码

页面创建

view{$}*100 复制100个view标签
复制代码

编译测试

网络异常,图片无法展示
|

3.9 onPullDownRefresh()用户点击右上角分享

/**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
    console.log("onShareAppMessage:用户点击右上角分享。")
  }
复制代码

编译测试

网络异常,图片无法展示
|

4.小程序全局配置app.json (常用属性)

额,简单看一几个常见的属性吧,其他属性后面用到了再说。全局配置

4.1 entryPagePath 小程序默认启动首页

未设置默认首页时,默认pages的第一个为首页。

网络异常,图片无法展示
|

现在我们设置 index为首页。

"entryPagePath":"pages/index/index",
复制代码

测试

网络异常,图片无法展示
|

4.2 window用于设置小程序的状态栏、导航条、标题、窗口背景色。

简单试几个:

4.2.1 backgroundTextStyle(下拉 loading 的样式,仅支持 dark / light)属性,我们修改为 dark

效果

网络异常,图片无法展示
|

4.2.2 navigationBarBackgroundColor 导航栏背景颜色,我们修改为 99ff66

参考十六进制颜色对照表

网络异常,图片无法展示
|
测试

网络异常,图片无法展示
|

4.2.3 navigationBarTitleText (导航栏标题文字内容) 我们修改为 微信小程序学习

网络异常,图片无法展示
|

4.2.4 tabBar 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

设置自动提示

网络异常,图片无法展示
|
回车可以看到list属性

网络异常,图片无法展示
|

官文属性介绍:

网络异常,图片无法展示
|

测试,其中图标可以在阿里巴巴矢量图标库中下载

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index", 
      "text": "首页",
      "iconPath": "icon/shouye.png",
      "selectedIconPath": "icon/shouyefill.png"
    },
    {
      "pagePath": "pages/classification/classification", 
      "text": "分类",
      "iconPath": "icon/fenlei.png",
      "selectedIconPath": "icon/fenlei_1.png"
    },
    {
      "pagePath": "pages/cart/cart", 
      "text": "购物车",
      "iconPath": "icon/gouwuche.png",
      "selectedIconPath": "icon/gouwuchefill.png"
    },
    {
      "pagePath": "pages/my/my", 
      "text": "我的",
      "iconPath": "icon/wode.png",
      "selectedIconPath": "icon/wode-wode.png"
    }]
复制代码

网络异常,图片无法展示
|
详细属性
网络异常,图片无法展示
|

4.3页面监听 由tabBar引出 页面生命周期方法 onTabItemTap(Object object)

点击 tab 时触发

在分类页面增加 onTabItemTap 方法

/**
   * 点击 tab 时触发
   */
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  }
复制代码

测试

网络异常,图片无法展示
|

5.小程序页面配置

除了全局的app.json配置,对于小程序的每一个页面,可以单独的配置属性。对于每个页面的属性是继承app.json配置的,但是如果每个页面也定义了自己的属性则会覆盖app.json配置的属性。

如:在“分类”页面上修改:

{
  "usingComponents": {},
  "navigationBarTitleText": "微信小程序学习-分类",
  "navigationBarBackgroundColor": "#ffccff"
}
复制代码

测试:可以看出导航栏标题文字内容、导航栏背景颜色已经修改

网络异常,图片无法展示
|

6.sitemap配置

参考官文

根据规则属性,设置是否可以被搜索到,以及被搜索到的条件。

网络异常,图片无法展示
|

配置示例

示例1

{
  "rules":[{
    "action": "allow",
    "page": "path/to/page",
    "params": ["a", "b"],
    "matching": "exact"
  }, {
    "action": "disallow",
    "page": "path/to/page"
  }]
}
复制代码
-   `path/to/page?a=1&b=2` => 优先索引
-   `path/to/page` => 不被索引
-   `path/to/page?a=1` => 不被索引
-   `path/to/page?a=1&b=2&c=3` => 不被索引
-   其他页面都会被索引
复制代码

下一篇: WXML:小程序版HTML


相关文章
|
2月前
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
531 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
2月前
|
JSON 监控 小程序
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
140 14
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
|
4月前
|
存储 移动开发 小程序
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
基于开源技术栈构建的校园圈子系统小程序,整合社交与生活服务功能,涵盖兴趣圈子、私信聊天、资料共享、二手交易、兼职跑腿等六大核心模块。通过多端账号同步(微信公众号/小程序/H5),实现数据实时交互,满足学生群体的多元化需求。项目精准锚定校园市场,以“社交+服务”双轮驱动,提供一站式解决方案,支持快速部署与多校区运营,同时具备广告、佣金、会员等多元变现能力,是打造校园生态的理想工具。
319 2
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
|
5月前
|
人工智能 开发框架 机器人
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
3767 15
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
|
5月前
|
小程序 数据安全/隐私保护 开发者
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
238 3
|
5月前
|
人工智能 自然语言处理 小程序
让小程序拥有“视觉之眼“:DeepSeek图像识别实战指南
本文介绍如何通过DeepSeek计算机视觉技术,赋予小程序“看懂世界”的能力。从构建视觉感知系统、训练专属视觉词典到创造会思考的界面,详细讲解了实现智能相册、植物识别器和老旧照片修复等功能的步骤。最后探讨性能优化与安全合规要点,展望未来视觉智能应用的无限可能。
|
5月前
|
人工智能 小程序 程序员
【视频测评 DEMO 参考】VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
433 8
|
5月前
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
1481 12
|
5月前
|
小程序 测试技术 数据安全/隐私保护
微信公众号接口测试实战指南
微信公众号接口测试是确保系统稳定性和功能完整性的重要环节。本文详细介绍了测试全流程,包括准备、工具选择(如Postman、JMeter)、用例设计与执行,以及常见问题的解决方法。通过全面测试,可以提前发现潜在问题,优化用户体验,确保公众号上线后稳定运行。内容涵盖基础接口、高级接口、微信支付和数据统计接口的测试,强调了功能验证、性能优化、安全保护及用户体验的重要性。未来,随着微信生态的发展,接口测试将面临更多挑战和机遇,如小程序融合、AI应用和国际化拓展。
|
9月前
|
开发框架 人工智能 小程序
小程序常见的 UI 框架
【10月更文挑战第17天】小程序 UI 框架为开发者提供了便捷的工具和资源,帮助他们快速构建高质量的小程序界面。在选择框架时,需要综合考虑各种因素,以找到最适合项目的解决方案。随着技术的不断进步,UI 框架也将不断发展和创新,为小程序开发带来更多的便利和可能性。
611 58

热门文章

最新文章