小程序基础_微信小程序调用什么方法注册小程序实例-CSDN博客

本文链接：https://blog.csdn.net/2301_77409122/article/details/138698700

app.json 全局配置

pages:[] 页面路径列表，小程序中所有页面都必须在pages中进行注册

window:全局默认窗口展示

tabBar:顶部tab栏的展示

项目配置文件 | 微信开放文档

page.json 页面配置

页面配置项在当前页面会覆盖app.json的window中相同的配置项

页面配置 | 微信开放文档

注册小程序 - App函数

每个小程序都需要在app.js中调用App函数注册小程序实例

在注册时，可以绑定对应的生命周期函数；

在生命周期函数中，执行对应的代码

App(Object object) | 微信开放文档

我们来思考：注册App时，我们一般会做什么呢?

判断小程序的进入场景

监听生命周期函数，在生命周期中，执行对应的业务逻辑，比如在某个生命周期函数中进行登录操作或请求网络数据

因为App()实例只有一个，并且是全局共享的(实例对象)，所以我们可以将一些共享数据放在这里

判断打开场景

常见的打开场景：群聊会话中打开，小程序列表中打开，微信扫一扫打开，另一个小程序打开

微信开放文档

如何确定场景?

在onLaunch和onShow生命周期回调函数中，会有options参数，其中有scene值

定义全局App的数据

1. 可以在Object中定义全局App的数据

2. 定义的数据可以在其他页面中访问

生命周期函数

在生命周期函数中，完成应用启动后的初始化操作

比如：

1. 登录操作

2. 读取本地数据（类似token，然后保存在全局方便使用）

3. 请求整个应用程序需要的数据

注册页面 - Page函数

在注册时，可以绑定初始化数据，生命周期回调，事件处理函数等

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

思考，注册一个Page页面时，我们一般需要做什么?

1. 在生命周期函数中发送网络请求，从服务器获取数据

2. 初始化一些数据，方便wxml引用展示

3. 监听wxml中的事件，绑定对应的事件函数

4. 其他一些监听（比如页面滚动，上拉刷新，下拉加载更多等）

上拉和下拉的监听

1. 配置页面的jsonwenjian

2. 代码中进行监听

Text 文本组件

Text组件用于显示文本，类似于span标签，是行内元素

user-select属性决定文本内容是否让用户选中

space有三个取值

decode是否解码

—— decode可以解析的有  <

Button按钮组件

open-type 用户获取一些特殊性的权限，可以绑定一些特殊的事件

View视图组件

块级元素，独占一行，通常用作容器组件

Image图片组件

mode属性非常关键

ScrollView滚动组件

可以实现局部滚动

**实现滚动效果必须添加scroll-x或者scroll-y属性（只需要添加即可，属性值相当于true了）

** 垂直方向滚动必须设置scroll-view一个高度

组件的共同属性

WXSS-WXML-WXS语法

wxss编写程序样式

wxss支持的选择器类，id，元素，::after，::before，元素1,元素2

Mustache语法绑定双大括号 {{}}

大小写敏感

逻辑判断 wx:if - wx:elif - wx:else

hidden属性和wx:if的区别

hidden控制隐藏和显示是控制是否添加hidden属性

wx:if是控制组件是否渲染的

wx:for可遍历数组，字符串和数字

数组中对应某项的数据，使用变量名item获取，index

wx:for-item="aa" wx:for-index="i" 可以对item，index进行别名

wx:key的值可以是字符串和关键字*this（*this代表item本身，需要item本身是一个唯一的字符串或者数字）

block标签，并不是一个组件，仅仅是一个包裹元素，不会在页面中做任何渲染，只接受控制属性

WXS语法基本使用

wxs有两种写法

1. 写在<wxs>标签总

<wxs>标签的属性：

2. 写在以.wxs结尾的文件中

每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认是私有的，对其它模块不可见

一个模块想要对外暴露其内部的私有变量与函数，只能通过module.exports实现

案例：

小程序的事件处理

某些组件会有自己特性的事件类型，比如input的bindinput/bindblur/bindfocus等；scroll-view的bindscrolltowpper/bindscrolltolower等

几个组件都有的，并且常见的事件类型：

事件对象event

当某个事件触发时，会产生一个事件对象，并且这个对象被传入到回调函数中

事件对象常见的属性：

属性	类型	说明
type	String	事件类型
timeStamp	Integer	事件生成时的时间戳
target	Object	触发事件的组件的一些属性集合
currentTarget	Object	当前组件的一些属性值集合
mark	Object	事件标记数据

currentTarget和target的区别

touches和changedTouches的区别

事件参数的传递

当试图层发生事件时，某些情况需要事件携带一些参数到执行的函数中，这个时候就可以通过data-属性来完成

格式：data-属性的名称

获取：e.currentTarget.dataset.属性的名称

小程序的组件化开发

小程序系统API调用

网络请求 - API参数 wx.request(Object object)

服务器域名配置：

如果不配置端口。如 https://myserver.com，那么请求的 URL 中也不能包含端口，甚至是默认的 443 端口也不可以。如果向 https://myserver.com:443 请求则会失败。

展示弹窗效果

小程序中展示弹窗有四种方式：wx.showToast，wx.showModal，wx.showLoading，wx.showActionSheet

分享功能

小程序有两种分享方式：

1. 点击右上角的菜单按钮，之后点击转发

2. 点击某一个按钮，直接转发

当我们转发给好友一个小程序时，通常小程序中会显示一些信息，通过onShareAppMessage，监听用户点击页面内转发按钮(button组件open-type="share")或右上角菜单“转发”按钮的行为，并自定义转发内容。此事件处理函数需要return一个Object，用于自定义转发内容

字段	说明	默认值
title	转发标题	当前小程序名称
path	转发路径	当前页面path，必须是以/开头的完整路径
imageUrl	自定义图片路径，可以是本地文件路径，代码包文件路径或者网络图片路径，支持PNG及JPG，显示图片长宽比是5:4	使用默认截图

获取设备信息 wx.getSystemInfo(Object object)

在开发中，我们需要经常获取当前设备的信息，用于手机信息或进行一些适配工作

属性	类型	说明
success	function	接口调用成功的回调函数
fail	function	接口调用失败的回调函数
complete	function	接口调用结束的回调函数(调用成功,失败都会执行)

获取位置信息 wx.getLocation(Object object)

开发中我们需要经常获取用户的位置信息，方便给用户提供相关的服务

对于用户的关键信息，需要获取用户的授权后才能获得

全局配置 | 微信开放文档

Storage存储

同步存取数据的方法：wx.setStorageSync(string key,any data)；any wx.getStorageSync(string key)；wx.removeStorageSync(string key)；ex.clearStorageSync()

异步存储数据的方法：wx.setStorage(Object object)；wx.getStorage(Object object)；wx.removeStorage(Object object)；wx.clearStorage(Object object)

界面挑战的方式

界面的挑战有两种方式：通过navigator组件和通过wx的API跳转

wx的API：

名称	功能说明
wx.switchTab	挑战到tabBar页面，并关闭其他所有非tabBar页面
wx.reLaunch	关闭所有页面，打开到应用内的某个页面
wx.redirectTo	关闭当前页面，跳转到应用内的某个页面
wx.navigateTo	保留当前页，跳转到应用内的某个页面，但是不能跳到tabbar页面
wx.navigateBack	关闭当前页面，返回上一页面或多级页面