尚学堂微信小程序大作业学习笔记

2023-11-24 19:35:10

1.小程序基础：
2天的基础课程 4天的项目制作

1.1 注册小程序原因
公司已经注册完毕了（公司内部人员注册完毕）给appId
不注册小程序账号：1.小程序是本地的不能发布 2.功能部分没有权限

优点：体积小方便-随用随走开发成本低

缺点：功能少基本上是用来引流的必须依托微信平台

1.2 目录结构
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page
（指南---目录结构）
pages 小程序页面
index 页面文件夹名称
index.js 逻辑（一个小程序页面-由4个文件组成名字一致）
index.json 配置
index.wxml 页面标签
index.wxss 页面样式
logs 日志页面
xxx 4个文件
utils js文件夹
日期格式化的js 模块
app.js 应用的逻辑文件（必须）
app.wxss 全局的样式
app.json 全局配置文件（必须）
project.json文件项目配置文件

1.3 app.json
小程序根目录下的 app.json
文件用来对微信小程序进行全局配置，决定页面文件的路径、
窗口表现、设置网络超时时间、设置多 tab 等

1.4 小程序里面wxss样式区别

1.单位尺寸

rpx px 750设计稿=750rpx 100%=750rpx

2.样式导入

语法：@import‘相对路径’；wxss里面

备注：

样式是导入样式文件里面wxss---》wxss

页面wxml导入：Template

js文件之前导入-模块：module.exports=‘’ require（）

1.5小程序常用组件

表单组件：

input form button

视图组件：

view swiper swiper-item scroll-view

导航：--重点

navigator 属性：url=‘’ open-type=‘跳转类型’

open-type=''

1.navigate 默认保留当前的页面跳转到应用内的某个页面，非tabbar

2.redirect 关闭当前的页面跳转到应用内的某个页面，非tabbar

3.switchTab 跳转到tabBar页面，关闭非Tabbar

4.reLaunch 跳转到页面，关闭所有

5.navigateBack 返回

2.页面渲染

小程序的运行环境分成渲染层（也叫视图层View）和逻辑层（也叫数据层App Service），

其中WXML模板和WXSS样式工作在渲染层，JS脚本工作在逻辑层。
小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView进行渲染；
逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个
WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微
信客户端）做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型下图所示。

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

可以在APP里写全局变量，所有页面都可以共享，还自定义函数，比如说网络请求的封装，这样所有的页面响应都可以调用，所有小程序js文件都是没dom和bom操作的，打印window和document都是undefined的

那其他页面是怎么调用全局变量和方法的呢？

整个小程序只有一个App实例，是全部页面共享的。开发者可以通过getApp方法获取到全局唯一的App实例，获取App上的数据或调用开发者注册在app上的函数。

Pge({})对于小程序中的每个页面，都需要在页面对应的js文件中进行注册，
指定页面的初始数据、生命周期回调、事件处理函数等
1.页面的初始数据
2.生命周期回调
3.事件处理函数
4.自定义函数方法

一进页面先加载onload生命周期回调一监听页面加载页面加载时触发，一个页面只会调用一次，

onready（标签读完了开始读数据了）只加载一次，除非再刷新，生命周期回调——监听页面初次渲染完成时触发。一个页面只会调用一次，代表页已经准备妥当，可以和视图层进行交互。

onshow生命周期回调——监听页面显示页面显示/切入前台时触发

其他函数

3.1界面层数据绑定

数据绑定
WXML中的动态数据均来自对应Page.js里的data.
简单绑定
数据绑定使用Mustache语法（双大括号）将变量包起来{{}}

1.内容{{}直接作为组件的内容获取变量
2.属性{{}作为属性读取

特殊用法

读取数组和对象

3.2界面层列表渲染（遍历数组）

wx:for
在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item

为什么遍历数组会报警告呢？因为要加一个key值，如果列表中项目的位置会动态改变或者有新的项目加到列表中，并且希望列表中的项目保持自己的特征和状态，要用微信可以来指定列表中项目唯一标识符如不提供wx:key会报一个warning
如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略warming