小程序知识点(小程序都有哪些类型)

2023-09-16 16:42:30 编辑:红海豚网络 来源:本站原创

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

图片目录(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中进行暴露, 暴露模块接口。

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

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

四种跳转方式

wx.navigateTo 跳转新页面;

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

wx.redirectTo 关闭当前页面,跳转新页面;

页面标签跳转;

参数传递

接收参数

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

接收时

页面部分

JS部分

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 来跳转界面

js部分代码

页面部分代码

页面引用公用js

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

var app = getApp();

上拉刷新

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

下拉加载

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

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

表单提交注意点

bindsubmit表单提交事件;

bindinput输入框监控事件;

获得表单提交数据

缓存写入

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

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

//跳转到成功页面

模态框,确认取消对话框

分享,imageUrl非必填

打电话调用wx.makePhoneCall

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

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

globalData——全局数据

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

在小程序的里面,我们使用rpx来代替px,官方的定义如下:

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

如果你使用的是<scroll-view>组件:他有一个事件叫做:bindscrolltolower,滚动到底部/右边,会触发 scrolltolower 事件。
// wxml

// wxss

如果你使用<view>,你就不需要在元素里面绑定任何事件,直接在js文件里面申明:

在你需要的进行下拉刷新的页面的json文件里面:

然后在js中,进行相应的数据操作:

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

本站文章均为红海豚网络网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,我们谢绝直接复制和抄袭!感谢...
[!--temp.www_96kaifa_com_kefu--]