微信小程序 特点无需安装用完即走无需卸载触手可及主体文件01.app.js 小程序入口文件02.app.json 小程序的全局配置文件03.app.wxss 小程序的全局样式注意事项主体文件的名称必须是appapp.js,和app.json文件时必须的page文件夹下每个页面通常由四个文件组成每个文件只对当前页面有效1.js:页面逻辑2.wxml 页面结构3.wxss 页面样式4..json 小页面配置注意事项.js文件和.wxml是必须的注意微信开发者工具缓存非常严重如果发现代码和预期不一样先点击编译编译后还没有达到预期效果就要清除缓存甚至重启项目配置文件JSON 是一种轻量级的数据格式常用于前后端数据的交互但是在小程序中JSON 扮演的配置项的角色用于配置项目或者页面属性和行为每个页面或组件也都有一个对应的 json 文件。小程序中常见的配置文件有以下几种app.json小程序全局配置文件用于配置小程序的一些全局属性和页面路由。页面.json小程序页面配置文件也称局部配置文件用于配置当前页面的窗口样式、页面标题等project.config.json小程序项目的配置文件用于保存项目的一些配置信息和开发者的个人设置sitemap.json配置小程序及其页面是否允许被微信索引提高小程序在搜索引擎搜索到的概率全局配置-pages配置pages字段用来指定小程序由那些页面组成用于让小程序知道由哪些页面组成以及页面定义在那个目录每一项都对应一个页面的路径信息。在配置 pages 字段时有以下注意事项页面路由不需要写文件后缀框架会自动去寻找对应位置的四个文件进行处理小程序中新增 / 减少页面都需要对 pages 数组进行修改未指定 entryPagePath小程序初始页面 时数组的第一项代表小程序的初始页面首页全局配置-window配置window字段用于设置小程序状态栏导航栏标题窗口背景色。navigationBarTitleText: EXO应援部,navigationBarBackgroundColor: #c0c0c0,//顶部背景色enablePullDownRefresh: true,//下拉栏是否呈现backgroundColor: #efefef,//下拉栏背景色backgroundTextStyle:light//下拉栏背景色深浅全局配置-tabber配置如果小程序是一个多 tab 应用客户端窗口的底部或顶部有 tab 栏可以切换页面可以通过 tabBar 配置项指定 tab 栏的表现以及 tab 切换时显示的对应页面。注意事项tab按数组的顺序排列list配置最少2个最多5个。属性类型必填默认值描述最低版本colorHexColor是tab 上的文字默认颜色仅支持十六进制颜色selectedColorHexColor是tab 上的文字选中时的颜色仅支持十六进制颜色backgroundColorHexColor是tab 的背景色仅支持十六进制颜色borderStylestring否blacktabbar 上边框的颜色仅支持 black /whitelistArray是tab 的列表详见 list 属性说明最少 2 个、最多 5 个 tabpositionstring否bottomtabBar 的位置仅支持 bottom /topcustomboolean否false自定义 tabBar见详情2.5.0局部配置-页面配置app.json 中的部分配置也支持对单个页面进行配置可以在页面对应的.json文件来对本页面的表现进行配置。页面中配置项在当前页面会覆盖app.json中相同的配置项样式相关的配置项属于app.json中的window属性但这里不需要额外指定window字段具体的取值和含义可参考全局配置文档中说明。文件内容为一个 JSON 对象有以下属性属性类型默认值描述最低版本navigationBarBackgroundColorHexColor#000000导航栏背景颜色如 #000000navigationBarTextStylestringwhite导航栏标题、状态栏颜色仅支持 black /whitenavigationBarTitleTextstring导航栏标题文字内容navigationStylestringdefault导航栏样式仅支持以下值default 默认样式custom 自定义导航栏只保留右上角胶囊按钮。iOS/Android 微信客户端 7.0.0Windows/Mac 端基础库 v3.6.1homeButtonbooleanfalse在非首页、非页面栈最底层页面或非 tabbar 内页面中的导航栏展示 home 键微信客户端 8.0.24backgroundColorHexColor#ffffff窗口的背景色backgroundColorContentHexColor#RRGGBBAA页面容器背景色点击查看设置背景色详情项目配置文件项目根目录中的project.config.json和project.private.config.json文件可以对项目进行配置project.private.config.json中的相同设置优先级高于project.config.json可以在project.config.json文件中配置公共的配置在project.private.config.json配置个人的配置可以将project.private.config.json写到.gitignore避免版本管理的冲突。project.private.config.json中有的字段开发者工具内的设置修改会优先覆盖project.private.config.json的内容。如在project.private.config.json有appid字段那么在 详情-基本信息 中修改了 appid会写到project.private.config.json中不会覆盖掉project.config.json的appid字段的内容开发阶段相关的设置修改优先同步到project.private.config.json中但与最终编译产物有关的设置无法在project.private.config.json中生效界面上的改动也不会同步到project.private.config.json文件中。详见 表格 是否允许私有设置。project.config.json setting里配置useCompilerPlugins: [sass],将wxss文件改为scsssetmap.json文件由于设置是否允许检索注意事项1.注没有sitemap.json则默认所有的页面都能被索引2.{“action”“allow”“page”“*”}是优先级默认规则未显示指明“disallow”的都默认被索引样式和组件样式rpx不同手机适配屏幕宽度是750rpx开发建议开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准iPhone6 的设计稿一般是 750px如果用 iPhone6 作为视觉稿的标准 量取多少 px直接写多少 rpx 即可开发起来更方便也能够适配屏幕的宽度设计稿宽度是 750px而 iPhone6 的手机设备宽度是 375px设计稿想完整展示到手机中就需要缩小一倍 在 iPhone6 下px 和 rpx 的换算关系是1rpx 0.5px750rpx 375px刚好能够填充整个屏幕的宽度组件viewview小程序提供的容器组件可以直接当成div使用即可swiper和swiper-item轮播图在进行网页开发的时候实现轮播图的时候我们通常先使用 HTML、CSS 实现轮播图的结构样式然后使用 JS 控制轮播图的效果或者直接使用插件实现轮播图的功能而在小程序中实现小程序功能则相对简单很多。在小程序中提供了 swiper 和 swiper-item 组件实现轮播图 swiper滑块视图容器其中只能放置 swiper-item 组件 swiper-item只可放置在 swiper 组件中宽高自动设置为 100%代表 swiper 中的每一项轮播图js属性属性名称类型默认值描述示例autoplaystringbooleanfalse是否自动切换轮播swiper autoplayintervalnumber3000自动切换时间间隔毫秒swiper autoplay interval2000indicator-dotsstringbooleanfalse是否显示面板指示点swiper indicator-dotscircularstringbooleanfalse是否循环播放衔接滑动swiper circularindicator-colorstringrgba(0,0,0,.3)未选中指示点颜色swiper indicator-color#fffindicator-active-colorstring#000000选中指示点颜色swiper indicator-active-color#f3514fcss样式代码片段核心作用详细说明swiper { height: 360rpx; }给轮播容器设置固定高度rpx是 uniapp 专属响应式单位会根据屏幕宽度自动适配750rpx 对应屏幕完整宽度360rpx 适配绝大多数机型的轮播图展示高度避免多屏幕尺寸适配问题swiper { background-color: skyblue; }给轮播容器设置背景色当轮播项未完全铺满容器、或轮播切换间隙时会显示该背景色避免页面留白突兀提升视觉连贯性swiper-item:first-child给第一个轮播项设置样式首项轮播项背景色设置为浅珊瑚色lightcoral常用于轮播封面、特殊引导项的差异化展示swiper-item:last-child给最后一个轮播项设置样式末项轮播项背景色设置为浅绿色lightgreen常用于轮播收尾页、特殊活动页的差异化展示image在小程序中如果需要渲染图片需要使用 image 组件常用的属性有 4 个src 属性图片资源地址mode图片裁剪、缩放的模式show-menu-by-longpress长按图片显示菜单lazy-load图片懒加载注意事项image 默认具有宽度和高度宽是 320px 高度是 240pximage 组件不给 src 属性设置图片地址也占据宽和高text文本渲染一、基础介绍text是小程序专属文本组件等同于网页的 span 行内文本标签专门用来展示文字内容只有text组件内文字支持长按复制文本换行、空格、文字样式控制必须用它view直接写文字部分功能失效。二、常用核心属性表格属性作用示例selectable是否允许长按复制文字text selectable可复制文字/textspace显示连续空格ensp半角 /emsp全角 /nbsp不合并空格text spaceemspa b/textdecode是否解析转义字符 等text decodelt;你好gt;/text三、基础使用示例html预览!-- 普通文本 -- text普通文字内容/text !-- 可复制文本 -- text selectable这段文字长按能复制/text !-- 解析转义符号 -- text decode100 gt; 99 nbsp; 空格/text四、关键注意点行内特性text是行内元素多个 text 会并排显示想要换行需要外层套view或者加换行符\nhtml预览text第一行\n第二行/text嵌套限制仅text可以嵌套text其他组件不能嵌套在 text 内部样式限制文字颜色、字号、行高直接给text设置样式不要写在父 view 间接控制和 view 区别view块级容器用来布局文字不支持复制、转义空格text纯文本容器处理文字展示、复制、空格、转义字符。五、结合你之前轮播代码的完整场景示例html预览swiper-item image src../assets/banner/banner-1.png modeaspectFill/image !-- 轮播图上叠加文字 -- text classbanner-title暖冬新品活动/text /swiper-item配套样式scsstext.banner-title { position: absolute; top: 30rpx; left: 30rpx; color: #fff; font-size: 32rpx; }小程序 navigator 导航标签知识点总结一、基础标签navigator小程序用于页面跳转的原生组件核心属性url必填目标页面路径必须以/开头写完整页面路径/pages/xxx/xxxopen-type跳转模式决定页面栈行为不同模式规则差异很大二、两种核心跳转模式图中讲解的 navigate /redirect1. open-typenavigate默认值不写也等效跳转限制不能跳 TabBar 底部标签页仅支持普通非 tab 页面页面栈逻辑保留当前页面新页面入栈栈结构A → BA 还存在点左上角返回可回到 A场景详情页、列表页等普通子页面跳转2. open-typeredirect跳转限制同样不能跳 TabBar 页面页面栈逻辑关闭当前页面新页面替换当前栈顶栈结构A 跳转 B 后A 被销毁栈只剩 B无法返回 A场景不需要返回上一页的场景登录成功跳转首页、表单提交后跳转三、TabBar 页面跳转补充图中隐含重点坑点navigate/redirect都无法跳转底部 tab 页面如 cart 购物车如果配置在 tabBar 中上面代码跳转无效 跳 TabBar 页面必须用这两种模式open-typeswitchTab切换底部 tab清空所有非 tab 页面栈仅保留 tab 页面open-typereLaunch关闭全部页面重新加载目标页面可跳 tab / 普通页四、页面栈核心区别对比表格模式能否跳 Tab 页原页面状态返回按钮页面栈层数变化栈最大 10 层限制影响对应 JS API常用场景navigate❌ 不支持保留存入页面栈有返回可回到上一页层数 1新增页面入栈栈达到 10 层后无法跳转直接报错wx.navigateTo()列表→商品详情、多级子页面浏览需要返回上一页redirect❌ 不支持销毁被新页面替换无返回上一页入口层数不变替换当前栈顶页面不受 10 层上限约束栈满仍可正常跳转wx.redirectTo()表单提交成功跳转、登录后跳转首页不需要回退当前页switchTab✅ 仅 Tab 页全部非 tab 页面销毁无返回切换 tab清空所有非 Tab 页面栈仅保留 Tab 页面直接重置页面栈不存在超限问题wx.switchTab()底部导航栏切换首页、购物车、个人中心等标签页reLaunch✅ 全部页面所有页面全部销毁无返回全新页面清空全部页面栈栈只剩目标 1 页彻底重置栈永远不会栈溢出wx.reLaunch()退出登录、权限拦截强制跳转首页、多层页面后一键回到首页navigateBack—页面回退不跳转新页面当前页面直接销毁本身就是返回操作层数 - deltadelta 默认 1返回 1 层只会减少栈深度不会触发栈溢出wx.navigateBack()点击返回、完成操作批量退回多级页面switcTab不支持传参 navigateBack本身返回上一级页面不支持传参五、代码示例对应解读html预览!-- navigate保留当前页返回可回来list为普通非tab页 -- navigator url/pages/list/list open-typenavigate到商品列表页面/navigator !-- redirect关闭当前页cart如果是tab页则跳转失效 -- navigator url/pages/cart/cart open-typeredirect到商品分类列表/navigator易错坑如果/pages/cart/cart是 app.json 中 tabBar 配置的页面这段redirect代码跳转无效果必须改成switchTab。六、配套 API 对应关系逻辑一致组件open-type和 js 导航 API 一一对应navigate →wx.navigateTo()redirect →wx.redirectTo()switchTab →wx.switchTab()reLaunch →wx.reLaunch()navigateBack →wx.navigateBack()页面回退小程序 scroll-view 完整知识点总结一、核心作用提供可滚动区域替代原生页面滚动实现局部横向 / 纵向滚动可自定义滚动、下拉刷新、滚动监听、滚动定位等能力。二、必备滚动属性必写想要滚动必须设置对应方向属性否则内容超出不会滚动scroll-y布尔值开启纵向垂直滚动容器必须设置固定高度height才生效scroll-x布尔值开启横向水平滚动容器需设置固定宽度内部元素使用white-space: nowrap不换行示例基础结构html预览!-- 垂直滚动 -- scroll-view scroll-y styleheight: 500rpx; view超长内容.../view /scroll-view !-- 水平滚动 -- scroll-view scroll-x stylewidth: 100%; view stylewhite-space: nowrap; view styledisplay: inline-block;width:200rpx;模块1/view view styledisplay: inline-block;width:200rpx;模块2/view /view /scroll-view三、常用功能属性1. 滚动控制scroll-top数字控制垂直滚动距离动态赋值可实现滚动到指定位置scroll-left数字控制水平滚动距离scroll-into-view字符串传入子元素id自动滚动到对应元素位置无需计算距离html预览scroll-view scroll-y scroll-into-viewtarget view idtarget目标位置/view /scroll-viewscroll-with-animation布尔滚动时开启平滑过渡动画2. 边界阈值触顶 / 触底监听lower-threshold距离底部多少像素时触发scrolltolower触底加载事件默认 50upper-threshold距离顶部多少像素时触发scrolltoupper触顶事件3. 滚动优化与样式enable-flex开启 flex 布局兼容横向滚动搭配 flex 时必加scrollbar-hidden隐藏滚动条美化 UIenable-passive优化滚动流畅度减少卡顿4. 下拉刷新局部下拉区别页面下拉refresher-enabled开启 scroll-view 内部下拉刷新refresher-triggered控制下拉刷新加载状态refresher-background下拉区域背景色四、核心绑定事件表格事件触发时机使用场景bindscroll滚动过程持续触发获取实时滚动距离、滚动监听bindscrolltoupper滚动到顶部 / 左边界回到顶部加载、刷新提示bindscrolltolower滚动到底部 / 右边界分页加载更多上拉加载bindrefresherpulling下拉拉动时自定义下拉 UIbindrefresherrefresh松手触发下拉刷新请求第一页数据bindrefresherrestore下拉取消回弹重置加载状态bindscroll 事件参数js运行scrollHandle(e) { // 垂直滚动距离 let scrollTop e.detail.scrollTop // 容器可视高度 let scrollHeight e.detail.scrollHeight // 整体内容高度 let viewHeight e.detail.viewHeight }五、高频踩坑点scroll-y 不滚动忘记给 scroll-view 设置固定 height高度由内容撑开时无法滚动。scroll-x 横向不滚动内部块级元素自动换行需给子容器加white-space: nowrap子元素设display: inline-block。scroll-into-view失效 id 不能以数字开头、不能带特殊符号目标元素必须在 scroll-view 直接子级内。页面滚动与 scroll-view 冲突 页面自带滚动局部滚动区域会出现双重滚动卡顿可给页面设置overflow:hidden。分页加载重复请求scrolltolower会连续多次触发需增加节流锁加载中标记请求完成再解锁。switchTab 页面 scroll-top 不复位 tab 切换时页面缓存需手动在onShow重置scroll-top0。六、经典业务场景模板场景 1垂直列表 上拉加载更多html预览scroll-view scroll-y styleheight: 100vh; lower-threshold80 bindscrolltolowerloadMore view wx:for{{list}} wx:keyid{{item.name}}/view /scroll-viewjs运行Page({ data: { page: 1, list: [], loading: false }, // 触底加载 loadMore() { if(this.data.loading) return this.setData({ loading: true }) // 请求接口 page1 // 完成后 loadingfalse } })场景 2横向滑动标签栏html预览scroll-view scroll-x stylewidth:100%; enable-flex scrollbar-hidden view styledisplay:flex;white-space:nowrap; view wx:for{{tabs}} wx:keyid stylewidth:180rpx;text-align:center;{{item.title}}/view /view /scroll-view场景 3下拉刷新局部列表html预览scroll-view scroll-y styleheight:800rpx refresher-enabled refresher-triggered{{triggered}} bindrefresherrefreshonRefresh 列表内容 /scroll-viewjs运行onRefresh() { // 重新请求第一页数据 // 请求完成关闭刷新动画 this.setData({ triggered: false }) }七、与页面原生滚动的区别页面滚动整个页面滚动无需容器下拉刷新是全局配置无法精准控制滚动位置。scroll-view局部区域滚动可多区域独立滚动支持程序控制滚动位置、监听触底适合弹窗、分类栏、局部列表。background-image只能使用网址或base64格式 不支持本地路径