微信小程序学习笔记
微信小程序学习
-
入门
-
小程序项目基本组成结构
-
小程序页面组成部分(每个页面都是一个单独的文件夹)
-
小程序代码的构成
-
JSON配置文件
-
JSON配置文件的作用:通过不同的.json配置文件,可以对程序项目进行不同级别的配置
-
app.json
是当前小程序的全局配置,包括所有页面路径、窗口外观 、界面表现、底部tab等
- pages:记录当前小程序所有页面的路径
- window:全局定义小程序所有页面的背景色、文字颜色等
- style:全局定义小程序组件使用的样式版本
- sitemapLocation:用来指明 sitemap.json 的位置
-
project.config.json
- 是项目配置文件,记录我们对小程序开发工具所做的个性化配置
- setting:保存了编译相关的配置,例如在详情的本地设置中的配置保存在这个地方
-
sitemap.json
用来配置小程序页面是否允许微信索引
如果不希望所有页面被索引,可以将action设置为disallow
如果想关闭调试器中的黄色警告,可以把project.config.json中setting中的checksitemap改为false
-
页面的.json文件
对本页面的窗口外观进行配置,页面中的配置项会覆盖ap.json的window中相同的配置项
-
-
-
认识小程序页面
-
创建页面的方法
在app.json的pages数组中添加页面路径即可,pages中的第一个页面为小程序默认页面
-
WXML模板
WeiXin Markup Language,是小程序框架设计的一套标签语言,用来构建小程序页面的结构,作用类似于HTML。
-
WXML与HTML的区别
-
-
WXSS
WeiXin Style Sheets:是一套样式语言,用于描述WXML的组件样式,类似于CSS
-
WXSS与CSS的不同:
-
-
JS逻辑交互
小程序中的JS分为三大类
- app.js:整个小程序项目的入口文件,通过调用App()函数来启动整个小程序
- 页面的.js文件:页面的入口文件,通过调用Page()函数来创建并运行页面
- 普通的.js文件:普通的功能模块文件,用来封装公共的函数或属性供页面使用
小程序的宿主环境
-
宿主环境:host environment,指程序运行所必须的依赖环境
-
小程序的宿主环境:手机微信
小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能,如微信扫码、支付、微信登录 、地理定位等等
-
小程序环境包含的内容
- 通信模型
- 运行机制
- 组件
- API
-
通信模型
- 通信的主体:渲染层、逻辑层
- WXML模板和WXSS样式工作在渲染层
- JS脚本工作在逻辑层
- 小程序中的通信模型分为两部分
- 通信的主体:渲染层、逻辑层
-
渲染层和逻辑层之间的通信:由微信客户端进行转发
-
逻辑层和第三方服务器之间的通信:也是由微信客户端进行转发
-
-
-
运行机制
-
小程序启动过程
-
页面渲染过程
-
-
组件
-
常用视图容器类组件
-
view
-
scroll-view
属性scroll-y为纵向滚动、scroll-x为横向滚动。
纵向时必须指定样式高度,横向时必须指定宽度
-
swiper和swiper-item 轮播图和轮播图项
-
常用基础内容组件
-
text
设置selectable属性之后文本可以长按选中
-
rich-text
通过nodes属性可以将html字符串渲染为对应的UI样式
-
-
其他常用组件
- button
- image
- button
-
-
-
API
- 概述:小程序中的API是由宿主环境提供的,通这些API开发者可以方便的调用微信提供的能力,例如:获取用户信息、本地存储、支付等、
- 三大分类
-
事件监听类
-
同步API
-
- 异步API
-
协同工作和发布
-
小程序开发流程
-
小程序版本
-
发布上线的整体步骤
-
上传代码
上传到了后台管理--版本管理中的开发版本列表中
-
提交审核
在开发版本的列表中点击“提交审核”,就可以把小程序提交给腾讯官方进行审核
-
发布
在审核版本中点击“发布”
-
推广
-
-
运营数据
- 查看运营数据的两种方式
-
在“小程序后台”查看
-
使用“小程序数据助手”查看
-
- 查看运营数据的两种方式
-
-
-
模板与配置
-
模板语法
-
数据绑定
-
基本原则
-
在data中定义页面的数据
在页面对应的.js文件中,把数据定义到data对象中即可
-
Mustacher语法
把data中的数据绑定到页面中渲染,使用Mustache语法(双大括号)将变量包起来
语法格式:
-
动态绑定内容
-
动态绑定属性
1.
-
三元运算
-
-
事件绑定
事件是渲染层到逻辑层的通讯方式,通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理
-
常用事件
-
事件对象event的属性
- target和currentTarget的区别
-
bindtap的语法格式
小程序中不存在html中的onclike()鼠标点击事件,是通过tap事件响应用户触摸行为
-
在事件处理函数中改变data中的数据值
为按钮绑定触摸事件
事件
通过this.setData({
data中的键名 :要赋的值
})
通过this.data.键名,可以获取到原来的值
-
事件传参
小程序中不能在绑定事件的同时为事件处理函数传递参数
 这样相当于调用一个名为“btnHandlr(123)”的事件处理函数 1. 传递参数语法  通过**data-参数名="{{值}}"**来传递参数,这样的值为数字 **data-参数名=“值**” 这样的值为文本 2. 在函数中获取参数 **event.target.dataset.参数名**
-
bindinput语法格式
-
input事件响应文本框的输入事件
-
绑定
-
事件
通过event.detail.value可以拿到文本框最新的值
-
-
-
条件渲染
-
wx:if
-
结合
使用wx:if
-
通过元素的hidden属性可以直接设置元素的显示与隐藏
-
wx:if 和 hidden 的对比
-
-
列表渲染
-
wx:for
-
可以通过wx:for-index指定当前循环项索引的变量名
-
wx:for-item指定当前项的变量名

- wx:key=" " 用来提高渲染效率
 没有id时可以直接用index
-
-
WXSS相比CSS扩展的特性:
-
rpx尺寸单位
- rpx(responsive pixel),微信小程序独有,用来解决屏适配的尺寸单位
- 实现原理:
-
@import样式导入
在wxss中引入其它wxss,
@import "文件名.wxss"
-
-
-
全局配置
-
小程序窗口的组成部分
-
window节点常用配置项
-
tabBar
用于实现多页面的快速切换。有底部tabBar和顶部tabBar。
注意:tabBar中只能配置最少2个、最多5个tab页签
当渲染顶部tabBar时,不显示icon,只显示文本
- tabBar的6个组成部分

-
tabBar节点的配置项
-
每个tab项的配置选项

-
与pages、window平级新建tabBar节点
-
tab页签对应的页面必须放在Pages数组的前边 , 不能在后边
-
-
页面配置
- 常用配置项
-
数据请求
-
网络数据请求的限制
-
配置request合法域名
- 发起get请求
res.data是服务器返回的真实数据对象
-
发起post请求
将method改为POST
-
在页面刚加载时请求数据
在页面的生命周期函数onLoad()中调用函数
-
跨过request合法域名校验
-
关于跨域和Ajax的说明
-
-
-
视图与逻辑
-
页面导航
页面之间的跳转
-
小程序中实现页面导航的方式
-
声明式导航
-
导航到tabBar页面
tabBar页面指被配置为tabBar的页面
-
导航到非tabBar页面
- 后退导航
为了简便,如果只是后退到一上页面,则可以省略delta属性,因为其默认值为1
-
-
编程式导航
-
跳转到tabBar页面
调用wx.switchTab({url: ''}) 不可以传递参数
-
跳转到非tabBar页面
调用wx.navigateTo({url: ''})
-
后退导航
如果只后退一页直接调用wx.navigateBack()就可以,如果要后退多页,可以在其中指定detal参数
-
-
导航传参
与web时一样,路径后用?携带参数
注:只有跳转到非tabBar页面时可以携带参数
-
在onLoad中接收导航传参
-
-
页面事件
-
下拉刷新事件
-
启用下拉刷新
-
监听下拉刷新的函数
当完成刷新之后不自动关闭,可以调用wx.stopPullDownRefresh()方法即可
-
-
上拉触底事件
配置上拉触底距离:在页面的.json配置文件中,配置onReachBottomDistance
- 设置上拉触底时的加载提示
 在加载数据前开启,加载完成后(无论成功或失败)关闭
-
-
生命周期
-
分类
- 应用生命周期:小程序启动--运行--销毁的过程
- 页面生命周期:每个页面的加载--渲染--销毁的过程
-
生命周期函数
是由小程序提供的内置函数,伴随生命周期自动按次序执行
分类
-
应用生命周期函数
定义在app.js中
onLaunch :当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
onShow :当小程序启动,或从后台进入前台显示,会触发 onShow
onHide : 当小程序从前台进入后台,会触发 onHide
onError : 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
-
页面的生命周期函数
-
-
-
WXS脚本
-
概述
WXS是小程序独有的一套脚本语言,结合WXML可以构建出页面的结构
-
WXS应用场景
wxml中无法调用在页面的.js文件中定义的函数,但是,wxml可以调用wxs中定义的函数。因此,wxs的典型应用场景就是过滤器
-
wxs和JS的关系
-
基本语法
<view>{{m1.toUpper("ccx")}}</view> <wxs module="m1"> module.exports.toUpper = function(str){ return str.toUpperCase(); } </wxs>
-
定义一个wxs文件
创建一个扩展名为.wxs的文件
创建一个函数,最后通过module.exports向外输出
-
wxs的隔离性
-
-
-
基础加强
-
自定义组件
-
创建组件
-
引用组件
-
局部引用
-
全局引用
-
组件和页面的区别
-
-
组件隔离性
即页面和引用的组件不会互相影响
注意:
更改样式隔离
-
组件的数据、方法和、属性
-
data数据
在组件的.js文件的Component({})中的data节点中定义数据
-
组件方法
必须定义在.js文件的Component({})的methods节点中
自定义方法也要定义在method中,建议为名字以_开头
-
properties属性
properties是组件的对外属性,用来接收外界传递到组件中的数据
- data和properties的区别
-
-
数据监听器
- 用于监听和响应任何属性和数据字段的变化,从而执行特定的操作
- 监听对象属性的变化
-
监听对象中所有属性:‘ 对象名.** ’ :function(obj){}
用**来代替对象中的所有属性,再用obj.属性名来接收
-
微信小程序中的ES6新特性,字符串模板
${变量名}
用反引号`括起来的字符串,{}中为变量名
-
纯数据字段
-
什么是纯数据字段 :只用于逻辑处理,不用于页面渲染,也不传递到其他页面中
-
好处:有助于更新页面的性能
-
定义纯数据字段的方法
-
-
组件的生命周期
-
组件的全部生命周期函数
-
主要的生命周期函数
-
定义生命周期函数
在components中定义lifetimes节点,在这个节点中定义生命周期函数
lifetimes: { created(){ console.log("created..") }, attached(){ console.log("attached..") } }
-
组件所在页面的生命周期
-
在组件中监听所在页面的生命周期函数
定义在pageLifetimes节点中
-
-
插槽
-
什么是插槽
在自定义级的的wxml结构中,可以提供一个
节点(插槽),用于承载组件使用者提供的wxml结构
-
单个插槽
意思在一个组件中只能使用一个slot标签进行占位
-
多个插槽
-
启用多个插槽
添加options节点,配置multipleSlots项
-
定义多个插槽
用name属性来区分
-
使用插槽
通过slot属性来指定到不同的插槽
-
-
-
父子组件之间的通信
-
父子组件之间通信的3种方式
-
属性绑定
用于实现父向子传值,只能传递普通类型的数据,不可以传递方法。
在子组件的properties节点中声明变量,在父组件中使用子组件时通过属性的方式传递父组件的变量值
-
事件绑定
-
-
3.
4.
-
获取组件实例
在父组件中调用this.selectComponent("id或class选择器"),来获取子组件的实例对象。
-
-
behaviors
-
什么是behaviors
是小程序中用于实现组件间代码共享的特性
-
behaviors的工作方式
-
创建behavior
直接创建.js文件
-
导入并使用behavior
-
behavior中所有可用的节点
-
-
-
npm包
-
小程序中使用npm包的限制
-
Vant Weapp
-
Vant Weapp官网:https://vant-ui.github.io/vant-weapp
-
安装Vant组件库
-
使用Vant组件
-
引入vant的按钮,在usingComponent节点中配置
"van-button": "@vant/weapp/button/index"
-
然后在wxml页面中使用即可
-
-
使用CSS变量自定义全局样式
在app.wxss文件中,定义CSS变量
都有哪些可用的变量可以在Vant官网中查找
-
-
API 的Promise化
- 每次安装完新的包都要重新进行构建
-
-
全局数据共享
-
-
小程序中的全局数据共享方案
-
MobX
运行这个命令:
npm i --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
来安装MobX相关包
然后删掉miniprogram_npm文件夹,重新构建npm
-
定义store实例对象,
在项目的根目录下创建一个store文件夹,然后创建一个store.js
//在这个js文件中,专门用来创建Store的实例对象 import {observable,action} from 'mobx-miniprogram' export const store = observable({ //数据字段 numA: 1, numB: 2, //计算属性 get sum(){//get修饰表示这个方法是只读的 return this.numA + this.numB }, //action函数,专业用来修改store中数据的值 updateNumA: action(function(step){ this.numA += step }), updateNumB: action(function(step){ this.numB += step }) })
-
将Store中的成员绑定到页面中
-
导入需要的成员(createStoreBindings方法和store实例对象)
-
在onLoad:生命周期函数中进行绑定
-
利用绑定时的返回值在onUnload函数中进行清理
-
-
在页面上使用Store中的成员
- 将Store中的成员绑定到组件中
- 在组件中使用Store成员
-
-
-
分包
-
概念
指把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载
-
分包的好处
-
分包前项目的构成
所有页面和资源都打包在一起,整个项目体积大,首次启动的下载时间长
-
分包后项目构成
小程序由1个主包+多个分包组成
-
分包的加载规则
-
分包的体积限制
-
使用分包
-
配置方法
在app.json中添加subPackages节点 "subpackages": [ //第一个分包 { //分包根路径 "root": "pkgA", //分包的别名 "name": "p1", //分包所包含的页面 "pages": [ "pages/cat/cat", "pages/dog/dog" ] }, //第二个分包 { //分包根路径 "root": "pkgB", "name": "p2", "pages": [ "pages/apple/apple" ] } ],
-
查看分包体积
-
打包原则
-
引用原则
-
-
独立分包
-
可以独立于主包和其他分包而单独运行
-
独立分包和普通分包的区别
-
配置独立分包
在配置分包时加上"independent" : true即可
-
引用原则
独立分包和普通分包以及主包之间是相互隔绝的,不能相互引用彼此的资源。例如
主包无法引用独立分包内的私有资源
独立分包也不能引用主包内的公共资源
-
-
分包预下载
-
预下载分包的行为,会在进入指定的页面时触发。
在app.json中使用preloadRule节点定义分包的预下载规则
"preloadRule": { //会触发预下载的页面 "pages/contact/contact":{ //在指定网络模式下进行预下载,取值为wifi或all "network": "wifi", //要下载的分包,可以写分包的root名或name "packages": ["p1" ] } },
-
预下载的限制
同一个分包中的页面享有共同的预下载大小限额2M
-
-
-
案例
自定义tabBar
- 在app.json中的tabBar节点中配置"custom" : true
- 在项目根目录下新建custom-tab-bar文件夹,然后在其下新建index组件
- 编写tabBar代码
- 在自定义组件中使用Vant Weapp组件时,需要开启styleIsolation: ‘shared'选项
- 要实现tab页面的切换,需要监听
绑定的change事件,在其中调用wx.switchtab方法,页面路径为this.data.list[event.detail].path。注意switchtab中url路径要以项目根路径/开头
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤