devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

小程序（总结）_微信小程序 getapp()

作者：IT小白 | 2024-06-19 09:40:00

赞

踩

微信小程序 getapp()

小程序总结知识点，看这一篇就够了！

getApp() 方法

小程序提供了全局的 getApp() 方法，可获取当前小程序实例，一般用于在子页面中获取顶层应用

  1. // app.js
  2. App({
  3.   globalData: 1
  4. });
  1. // page.js
  2. var app = getApp();
  3. console.log(app.globalData); // 获取 globalData

一 整体结构

图片目录(images)、页面目录(pages)、公共脚本(utils)、全局配置(app.json、project.config.json)四个大的部分构成。

页面目录中，每个页面配置完成会自动生成4个文件(JS、JSON、WXSS、WXML)。页面逻辑，页面配置，页面样式，页面结构。

所有页面需要在app.json中的pages中进行配置注册。

导航栏的菜单配置需要在app.json中的tabBar中进行配置注册。

全局变量需要在app.js的globalData中进行定义，通过var app = getApp() 调用。

公共脚本需要将定义好的function在module.exports中进行暴露， 暴露模块接口。

二 左右轮播（swiper）、上下轮播

autoplay、interval、duration....自动切换播放、播放间隔时间、播放动画时间。

比如banner的左右滚动、公告的上下滚动（设置vertical为true）。

三 页面跳转、参数传递、接收参数

四种跳转方式

wx.navigateTo 跳转新页面；

wx.switchTab 跳转导航菜单页面；

wx.redirectTo 关闭当前页面，跳转新页面；

页面标签跳转；

参数传递

  1. wx.navigateTo({
  2.  
  3. url: '../activity/news/detail?id=' + activityid
  4.  
  5. })
  6.  
  7. wx.switchTab({
  8.  
  9. url: '../../index/index'
  10.  
  11. })
  12.  
  13. wx.redirectTo({
  14.  
  15. url: '../activity/news/detail?id=' + activityid
  16.  
  17. })
  18.

接收参数

  1. onLoad: function (options) {
  2.  
  3. var id = options.id;
  4.  
  5. }

接收参数
数据传递
1、本地缓存
2、全局变量：
在 app.js 中的 this.globalData = { } 中放入要存储的数；
在组件.js 中， 头部 引入 const app = getApp(); 获取到全局变量；
直接使用 app.globalData.key 来进行赋值和获取值。

3、路由：
使用wx.navigateTo和wx.redirectTo时，可以通过在url后拼接 + 变量， 然后在目标页面 通过在onLoad周期中，通过参数来获取传递过来的值。

<text bindtap="pay" data-object-id="{{item.objectId}}" data-total-fee="{{item.amount}}" class="{{status != 0 ? 'hidden': ''}}">支付</text>

 接收时：

  1. function(e) {
  2.         var objectId = e.currentTarget.dataset.objectId;
  3.         var totalFee = e.currentTarget.dataset.totalFee;

四 列表数据绑定

页面部分

JS部分

  1. wx.request({
  2.  
  3. url: app.globalData.requestUri + "/banners",
  4.  
  5. header: {
  6.  
  7. "Content-Type": "application/json"
  8.  
  9. },
  10.  
  11. method: "GET",
  12.  
  13. data: {
  14.  
  15. start: start,
  16.  
  17. maxResults: maxResults,
  18.  
  19. bannerType: bannerType
  20.  
  21. },
  22.  
  23. success: function (res) {
  24.  
  25. that.setData({
  26.  
  27. bannerList: res.data.items
  28.  
  29. })
  30.  
  31. }
  32.  
  33. })

wx.request注意点

method 必须大写；

GET时"Content-Type": "application/json"；

POST时"Content-Type": "application/x-www-form-urlencoded"

点击事件、传递参数

使用bindtap绑定方法。参数用data-*的形式传递。记得全部小写。默认会放在dataset中。

openActivity: function (event) {

var params = event.currentTarget.dataset;

//dataset中多个单词由连字符-链接，不能有大写(大写会自动转成小写)

//底部菜单要使用wx.switchTab 来跳转界面

  1. var type = params.type;
  2.  
  3. var activityType = params.activitytype;
  4.  
  5. var relativeId = params.relativeid;
  6.  
  7. }

五 详情数据绑定

js部分代码

  1. onLoad: function (options) {
  2.  
  3. var id = options.id;
  4.  
  5. var that = this;
  6.  
  7. wx.request({
  8.  
  9. url: app.globalData.requestUri + "/infos/" + id,
  10.  
  11. header: {
  12.  
  13. "Content-Type": "application/json"
  14.  
  15. },
  16.  
  17. method: "GET",
  18.  
  19. success: function (res) {
  20.  
  21. that.setData({
  22.  
  23. news: res.data,
  24.  
  25. imgurl: app.globalData.domain + res.data.imgurl,
  26.  
  27. publishTime: util.formatTime1(res.data.publishTime,'Y-M-D h:m:s')
  28.  
  29. })
  30.  
  31. }
  32.  
  33. })
  34.  
  35. }

页面代码部分

  1. {{news.title}}
  2.  
  3. {{publishTime}}

页面引用公用js

var util = require("../../../utils/util.js");

var app = getApp();

六 上拉刷新、下拉加载

上拉刷新

  1. onPullDownRefresh: function () {
  2.  
  3. var that = this;

//下拉刷新，将pageNumber和pageSize分别设置成0和10，并初始化数据，让数据重新通过loadRoom()获取

  1. that.setData({
  2.  
  3. start: 0,
  4.  
  5. maxResults: 10,
  6.  
  7. infoList: []
  8.  
  9. })
  10.  
  11. that.loadRooms();
  12.  
  13. wx.stopPullDownRefresh();
  14.  
  15. }

下拉加载

onReachBottom: function () {

上拉分页,将页码加1，然后调用分页函数 

  1. var that = this;
  2.  
  3. var start = that.data.start;
  4.  
  5. that.setData({
  6.  
  7. start: ++start
  8.  
  9. });
  10.  
  11. setTimeout(function () {
  12.  
  13. wx.showToast({
  14.  
  15. title: '加载中..',
  16.  
  17. }),
  18.  
  19. that.loadRooms();
  20.  
  21. }, 1000)
  22.  
  23. }

需要在json中配置启用下拉事件

  1. {
  2.  
  3. "enablePullDownRefresh": true
  4.  
  5. }

七 表单提交

表单提交注意点

bindsubmit表单提交事件；

bindinput输入框监控事件；

获得表单提交数据

  1. formSubmit: function (e) {
  2.  
  3.     //获得表单数据
  4.  
  5.     var objData = e.detail.value;
  6.  
  7.     var password = objData.password;
  8.  
  9.     var mobile = objData.mobile;
  10.  
  11.     var code = objData.code;
  12.  
  13. }

八 缓存数据读取

缓存写入

  1. wx.setStorageSync('password', password);
  2.  
  3. wx.setStorageSync('mobile', mobile);

缓存读取、移除、清除所有

  1. var mobile = wx.getStorageSync('mobile');
  2.  
  3. wx.removeStorageSync('mobile');
  4.  
  5. wx.clearStorage();

九 提示信息，弹出框 

提示信息和弹框，有icon时最多显示7个字，icon为none时可显示全部信息。

  1. wx.showToast({
  2.  
  3. title: '登录成功',
  4.  
  5. success: function () {
  6.  
  7. setTimeout(function () {
  8.  
  9. //要延时执行的代码

跳转到成功页面

  1. wx.switchTab({
  2.  
  3. url: '../index/index'
  4.  
  5. })
  6.  
  7. }, 2000) //延迟时间
  8.  
  9. }
  10.  
  11. })

模态框，确认取消对话框

  1. wx.showModal({
  2.  
  3. title: '确认',
  4.  
  5. content: '确认提交订单',
  6.  
  7. success: function (res) {
  8.  
  9. if (res.confirm) {
  10.  
  11. console.log('确定')
  12.  
  13. }else{
  14.  
  15. console.log(取消')
  17. }
  19. }
  21. })

十 分享

分享，imageUrl非必填

  1. onShareAppMessage: function () {
  2.  
  3. return {
  4.  
  5. title: '金算子',
  6.  
  7. desc: '新闻资讯',
  8.  
  9. imageUrl: '../../images/home/home-add-01.png',
  10.  
  11. path: '../activity/news/detail',
  12.  
  13. success: function (res) {
  14.  
  15. },
  16.  
  17. fail: function () {
  18.  
  19. }
  20.  
  21. }
  22.  
  23. }

十一 打电话 

打电话调用wx.makePhoneCall

  1. phoneCall: function (mpbile) {
  2.  
  3. wx.makePhoneCall({
  4.  
  5. phoneNumber: "13724201432"
  6.  
  7. })
  8.  
  9. }

1、组件也有它的生命周期（lifetimes）
自小程序基础版本2.2.3起，组件的生命周期可以在lifetimes字段中声明（这是推荐的方式，优先级最高） 

  1.   lifetimes: {
  2.     created: function () {
  3.       // 组件实例化，但节点树还未导入，因此这时不能用setData
  4.     },
  5.     attached: function () {
  6.       // 在组件实例进入页面节点树时执行 
  7.       // 节点树完成，可以用setData渲染节点，但无法操作节点
  8.     },
  9.     ready: function () {
  10.       // 组件布局完成，这时可以获取节点信息，也可以操作节点
  11.     },
  12.     move: function () {
  13.       // 组件实例被移动到树的另一个位置
  14.     },
  15.     detached: function () {
  16.       // 在组件实例被从页面节点树移除时执行
  17.     },
  18.   },

程序生命周期
（1）onLaunch：初始化完成
（2）onHide：收起小程序到后台
（3）onShow：展开小程序到前台（热启动）
（4）onError：程序出错

globalData——全局数据

页面生命周期
（1）onLoad：页面冷启动后，初次加载（只有一次）
（2）onShow：每次切换页面，在之后的页面中触发
（3）onReady：页面被首次切换到（每个页面只有一次）
（4）onHide：每次切换页面，在之前的页面中触发
（5）onUnload：关闭当前页

十二 用js控制标题

  1.     wx.setNavigationBarTitle({
  2.       title: '这是NavigationBarTitle',
  3.     })

十三 返回上一页 

  1.   wx.navigateBack();  //返回上一页
  2.  
  3.  wx.navigateBack({     //返回的页面数，如果 delta 大于现有页面数，则返回到首页。
  4.    delta: 2
  5.   })

十四 转发小程序 

  1. <button  open-type="share" plain="true"  style='border:none'>转发</button>
  2.  
  3. onShareAppMessage: function() {
  4.       return {
  5.         title: '标题',
  6.         path: '/zh_tcwq/pages/index/index',//打开的页面路径
  7.         success: function (res) {
  8.           // 转发成功
  9.         },
  10.         fail: function (res) {
  11.           // 转发失败
  12.         }
  13.       }
  14.     }

十五 使用第三方组件有赞 Vant

1.在微信开发工具软件 项目目录下右键->在终端打开->输入 npm init->一直回车到结束
2.安装vant -># 通过 npm 安装 -> 在终端下输入 ：npm i @vant/weapp -S --production

3.构建 npm 包
打开微信开发者工具，点击 工具 -> 构建 npm，详情->本地设置->勾选 使用 npm 模块 选项，构建完成后，即可引入组件


声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/736087
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号