互联网小程序培训课件

微信小程序开发培训课件第一章小程序概述与发展趋势什么是微信小程序微信小程序是一种轻量级应用程序,无需下载安装即可使用。它依托于微信生态系统,为用户提供"即用即走"的便捷体验。小程序结合了原生App的流畅性和Web应用的灵活性,成为移动互联网时代的重要应用形态。核心特点轻量级架构,启动速度快无需安装,节省手机存储空间依托微信12亿+用户生态开发成本低,维护便捷跨平台兼容,一次开发多端运行8.5亿日活跃用户2025年小程序日活跃用户数750万小程序数量已上线小程序总数突破2.3万亿交易规模年度小程序电商交易额小程序与传统App、Web的核心区别vs原生App无需下载安装,即开即用体积更小,通常不超过2MB开发周期短,成本降低60%更新无感知,自动同步最新版本依赖微信环境,功能受限vsWeb网页性能更优,接近原生体验离线缓存,支持弱网环境调用更多原生能力(相机、位置等)更流畅的动画与交互效果受微信平台规则约束技术栈对比对比维度小程序Web原生App标记语言WXMLHTMLXML/SwiftUI样式语言WXSSCSS原生样式系统脚本语言JavaScriptJavaScriptJava/Kotlin/Swift包大小限制主包2MB无限制通常50-200MB开发周期1-2个月2-4周第二章开发准备与环境搭建01注册小程序账号访问微信公众平台(),选择"小程序"类型注册。填写邮箱、密码等基本信息,完成邮箱验证。需要准备企业营业执照或个人身份信息进行主体认证。02获取AppID登录小程序后台,在"开发"-"开发管理"-"开发设置"中获取AppID。这是小程序的唯一标识符,用于开发调试和发布上线。同时可以配置服务器域名、业务域名等关键信息。03下载开发者工具访问微信官方开发者工具下载页面,根据操作系统(Windows/Mac/Linux)下载对应版本。安装完成后,使用微信扫码登录,即可开始创建项目。04创建第一个项目打开开发者工具,点击"+"号新建项目。填入AppID、项目名称、本地目录,选择"不使用云服务"(初学阶段),点击"新建"即可生成默认模板项目。小程序项目结构详解全局配置文件app.js-小程序逻辑入口app.json-全局配置app.wxss-全局样式sitemap.json-搜索配置页面文件组成每个页面由4个同名文件组成:.wxml-页面结构.wxss-页面样式.js-页面逻辑.json-页面配置miniprogram/├──pages/#页面目录│├──index/#首页││├──index.wxml││├──index.wxss││├──index.js││└──index.json│└──logs/#日志页│├──logs.wxml│├──logs.wxss│├──logs.js│└──logs.json├──utils/#工具函数目录│└──util.js├──app.js#小程序逻辑├──app.json#小程序配置├──app.wxss#小程序样式└──sitemap.json#搜索配置1app.json核心配置定义小程序页面路径、窗口表现、底部tab栏等全局配置项。pages数组第一项为首页,window对象设置导航栏样式。2页面配置优先级页面级.json配置会覆盖app.json中的window配置。这种设计允许不同页面拥有独特的导航栏样式和交互行为。第三章小程序基础语法与核心概念WXML标签体系WXML是微信小程序的标记语言,类似HTML但使用自定义组件标签。它支持数据绑定、列表渲染、条件渲染等特性,让页面结构更加灵活。容器组件view-块级容器,类似divscroll-view-可滚动视图swiper-滑块视图容器基础内容text-文本组件rich-text-富文本显示progress-进度条媒体组件image-图片显示video-视频播放器camera-相机组件表单组件button-按钮input-输入框picker-选择器WXSS样式特性rpx响应式单位rpx是小程序专用的响应式长度单位。规定屏幕宽度为750rpx,可根据屏幕宽度自适应。例如在iPhone6上,1rpx=0.5px,在iPhone6Plus上,1rpx=0.6px。Flex布局优先小程序推荐使用Flexbox弹性布局。通过display:flex、flex-direction、justify-content等属性,可以轻松实现复杂的响应式布局,无需考虑浮动和定位。数据绑定与事件处理机制数据绑定原理小程序采用MVVM架构,通过数据驱动视图更新。在Page的data对象中定义数据,在WXML中使用{{}}语法进行绑定。当使用setData方法更新数据时,视图会自动重新渲染。JavaScript数据定义Page({data:{message:'欢迎学习小程序',count:0,userInfo:{name:'张三',age:25},isShow:true}})WXML数据绑定{{message}}计数:{{count}}{{userI}}条件渲染内容事件系统详解bindtap冒泡事件事件会向父节点传递,适用于大多数场景。点击子元素时,父元素的事件也会触发。catchtap阻止冒泡事件不会向上冒泡,适用于需要精确控制事件触发范围的场景,如弹窗遮罩。事件传参示例性能优化提示:setData是异步操作,频繁调用会影响性能。建议批量更新数据,避免在循环中多次调用setData。页面生命周期与导航系统页面生命周期函数小程序页面从加载到卸载经历多个阶段,每个阶段都有对应的生命周期函数。合理使用这些函数可以优化性能、管理资源。1onLoad(options)页面加载时触发,只调用一次。可以获取页面参数options,进行初始化数据请求、设置页面配置等操作。适合请求页面数据、初始化变量。2onShow()页面显示/切入前台时触发。每次打开页面都会调用,包括从其他页面返回。适合刷新页面数据、重新激活定时器、更新状态。3onReady()页面初次渲染完成时触发,只调用一次。此时页面已准备就绪,可以进行canvas绘图、获取节点信息等DOM操作。4onHide()页面隐藏/切入后台时触发。适合暂停视频播放、停止定时器、保存临时数据等资源释放操作。5onUnload()页面卸载时触发。当redirectTo或navigateBack到其他页面时调用。适合清理资源、取消网络请求、移除事件监听。页面导航API对比API名称功能说明使用场景navigateTo保留当前页面,跳转到新页面多级页面跳转,支持返回redirectTo关闭当前页面,跳转到新页面不需要返回的页面切换switchTab跳转到tabBar页面,关闭其他页面切换底部导航栏页面navigateBack返回上一页或多级页面返回操作,可指定返回层数reLaunch关闭所有页面,打开指定页面重启应用,清空页面栈//跳转到商品详情页并传参wx.navigateTo({url:'/pages/detail/detail?id=123&type=product'});//在目标页面接收参数onLoad(options){console.log(options.id);//输出:123console.log(options.type);//输出:product}条件渲染与列表渲染条件渲染:wx:ifvshiddenwx:if条件渲染根据条件决定是否渲染该代码块。频繁切换时性能开销较大,因为涉及局部渲染过程。适用于运行时条件很少改变的场景。优秀及格不及格hidden属性控制组件始终会被渲染,只是简单控制显示/隐藏。适用于频繁切换的场景,性能更好。类似CSS的display:none。用户已登录内容请先登录列表渲染:wx:for使用wx:for可以遍历数组渲染重复组件。默认数组当前项变量名为item,下标为index。可以使用wx:for-item和wx:for-index自定义变量名。基础列表渲染{{index+1}}.{{}}价格:¥{{item.price}}自定义变量名第{{idx}}位用户:{{}}嵌套循环{{item.title}}

{{}}

性能关键:使用wx:key提供唯一标识符可以显著提升列表渲染性能,帮助框架追踪节点变化,实现高效的差异更新。推荐使用数据的唯一id作为key值。第四章组件体系与自定义组件开发内置组件分类scroll-view滚动容器可滚动视图区域,支持横向和纵向滚动。通过scroll-y/scroll-x属性控制滚动方向,bindscrolltoupper/bindscrolltolower监听触顶触底事件。适用于长列表、横向滚动画廊等场景。swiper轮播容器滑块视图容器,支持自动播放、循环轮播、指示点显示等功能。常用于首页Banner、商品图片展示。可配置切换时长、是否自动播放等参数,提升用户体验。button按钮组件功能强大的按钮组件,支持多种样式(主按钮、次按钮、警告按钮)和开放能力(分享、获取用户信息、客服会话)。通过open-type属性可以触发微信原生功能。form表单组件表单容器,用于收集和提交用户输入数据。内部可包含input、picker、switch等表单控件。通过bindsubmit事件获取表单数据,实现用户信息收集、订单提交等功能。自定义组件开发自定义组件可以将复杂的UI和逻辑封装成独立模块,提高代码复用性和可维护性。组件与页面结构类似,包含json、wxml、wxss、js四个文件。组件配置(component.json){"component":true,"usingComponents":{}}组件逻辑(component.js)Component({properties:{title:{type:String,value:'默认标题'}},data:{count:0},methods:{handleTap(){this.triggerEvent('custom')}}})组件间通信方式属性绑定:父组件向子组件传递数据,通过properties接收事件监听:子组件通过triggerEvent触发事件,父组件监听selectComponent:父组件直接获取子组件实例,调用方法Relations:定义组件间的关联关系,实现复杂交互使用组件//页面json中引入{"usingComponents":{"my-component":"/components/my/my"}}小程序核心API功能网络请求:wx.requestwx.request是小程序发起HTTP请求的核心API,支持GET、POST等多种请求方式。所有请求域名必须在小程序后台配置合法域名白名单,否则请求会被拦截。wx.request({url:'/products',method:'GET',data:{page:1,size:10},header:{'content-type':'application/json','Authorization':'Bearertoken123'},success(res){console.log('请求成功:',res.data);},fail(err){console.error('请求失败:',err);wx.showToast({title:'网络请求失败',icon:'none'});}});本地存储wx.setStorage:异步存储数据到本地缓存wx.setStorageSync:同步存储,会阻塞代码执行wx.getStorage:异步获取缓存数据wx.removeStorage:删除指定缓存wx.clearStorage:清空所有缓存单个key最大1MB,总容量限制10MB用户信息获取wx.getUserProfile:获取用户信息(需用户授权)wx.login:获取登录凭证code用户信息获取流程:调用wx.login获取code发送code到开发者服务器服务器调用微信接口换取openid使用wx.getUserProfile获取用户信息其他常用APIwx.showToast:消息提示框wx.showModal:模态对话框wx.showLoading:加载提示wx.navigateTo:页面跳转wx.getLocation:获取地理位置wx.chooseImage:选择图片wx.uploadFile:上传文件第五章全局配置与页面配置app.json全局配置详解app.json是小程序的全局配置文件,用于定义页面路径、窗口表现、网络超时、底部tab栏等。它是小程序的"控制中心",影响整个应用的行为和外观。{"pages":["pages/index/index","pages/cart/cart","pages/my/my"],"window":{"navigationBarTitleText":"我的小程序","navigationBarBackgroundColor":"#1D4241","navigationBarTextStyle":"white","backgroundColor":"#f8f8f8","enablePullDownRefresh":false},"tabBar":{"color":"#666666","selectedColor":"#EF9C82","list":[{"pagePath":"pages/index/index","text":"首页","iconPath":"images/home.png","selectedIconPath":"images/home-active.png"}]}}配置项说明pages:页面路径列表,数组第一项为首页。新增页面需要在此注册。window:全局默认窗口表现,包括导航栏、背景色、下拉刷新等。tabBar:底部导航栏配置,最少2个最多5个tab。networkTimeout:网络请求超时时间配置。debug:是否开启调试模式,生产环境应设为false。permission:小程序权限配置,如位置、相机等。页面配置覆盖规则每个页面可以有自己的.json配置文件,用于设置该页面独特的窗口表现。页面配置会覆盖app.json中的window配置,实现个性化定制。1默认继承全局配置如果页面不设置.json,将使用app.json的window配置2页面配置优先级更高页面.json中的配置会覆盖全局配置中的相同项3灵活定制页面样式不同页面可以有不同的导航栏颜色、标题、下拉刷新等//pages/detail/detail.json-商品详情页配置{"navigationBarTitleText":"商品详情","navigationBarBackgroundColor":"#EF9C82","enablePullDownRefresh":true,"backgroundTextStyle":"dark"}上拉触底与下拉刷新实现下拉刷新功能实现下拉刷新是常见的交互方式,用于刷新页面数据。需要在页面json中开启enablePullDownRefresh,然后在页面js中实现onPullDownRefresh生命周期函数。页面配置{"enablePullDownRefresh":true,"backgroundTextStyle":"dark","backgroundColor":"#f8f8f8"}页面逻辑Page({data:{list:[]},onPullDownRefresh(){//模拟数据请求wx.showLoading({title:'刷新中...'});

setTimeout(()=>{this.setData({list:this.getNewData()});wx.hideLoading();wx.stopPullDownRefresh();},1500);}})关键点说明必须调用wx.stopPullDownRefresh()停止下拉刷新动画backgroundTextStyle设置loading图标样式(dark/light)可以用wx.startPullDownRefresh()主动触发下拉刷新刷新时应该重置数据,而不是追加数据上拉触底加载更多上拉触底用于实现分页加载,当用户滚动到页面底部时自动加载下一页数据。通过onReachBottom生命周期函数实现,可以在app.json或页面json中配置触底距离。配置触底距离{"onReachBottomDistance":50}距离页面底部50px时触发实现加载逻辑data:{page:1,hasMore:true},onReachBottom(){if(!this.data.hasMore)return;

this.setData({page:this.data.page+1});this.loadMore();}节流防止重复data:{loading:false},onReachBottom(){if(this.data.loading)return;

this.setData({loading:true});this.loadMore().finally(()=>{this.setData({loading:false});});}性能优化建议:触底事件可能在短时间内多次触发,务必添加loading状态标记防止重复请求。同时检查是否还有更多数据(hasMore),避免无效请求。第六章数据请求与异步处理最佳实践GET与POST请求示例GET请求获取数据//获取商品列表wx.request({url:'/goods',method:'GET',data:{category:'electronics',page:1,pageSize:20,sort:'price_asc'},success(res){if(res.statusCode===200){console.log('商品数据:',res.data);}}});POST请求提交数据//提交订单wx.request({url:'/orders',method:'POST',data:{productId:123,quantity:2,addressId:456},header:{'content-type':'application/json'},success(res){wx.showToast({title:'下单成功'});}});Promise封装wx.request原生wx.request使用回调函数,容易形成"回调地狱"。通过Promise封装可以使用async/await语法,让异步代码更清晰、易维护。//utils/request.js-封装请求工具constBASE_URL='';functionrequest(options){returnnewPromise((resolve,reject)=>{wx.request({url:BASE_URL+options.url,method:options.method||'GET',data:options.data||{},header:{'content-type':'application/json','Authorization':wx.getStorageSync('token')||'',...options.header},success(res){if(res.statusCode===200){resolve(res.data);}else{reject(newError(`请求失败:${res.statusCode}`));}},fail(err){reject(err);}});});}module.exports={request};使用封装后的请求//导入封装的请求方法const{request}=require('../../utils/request');Page({asyncloadData(){try{wx.showLoading({title:'加载中...'});

constresult=awaitrequest({url:'/products',data:{page:1}});

this.setData({products:result.data});

}catch(error){wx.showToast({title:'加载失败',icon:'none'});}finally{wx.hideLoading();}}})错误处理策略统一错误提示:在封装层统一处理常见错误网络异常处理:检测网络状态,给出友好提示Token过期处理:401状态自动跳转登录超时重试机制:请求超时自动重试请求队列管理:控制并发请求数量第七章云开发基础与实战云开发能力概览微信云开发是微信团队推出的云端能力解决方案,开发者无需搭建服务器,即可使用云函数、云数据库、云存储等能力。降低后端开发和运维成本,让前端开发者也能快速实现全栈应用。云函数在云端运行的代码,使用Node.js编写。无需搭建服务器,自动弹性伸缩。适合处理业务逻辑、调用第三方API、数据库操作等。可以访问完整的微信服务端API。云数据库基于MongoDB的NoSQL文档型数据库,支持在小程序前端直接读写。提供丰富的查询能力和实时数据推送。安全规则保障数据访问权限,支持百万级数据存储。云存储提供文件存储和CDN加速服务,支持图片、视频、音频等多种格式。自动生成HTTPS访问链接,具备防盗链功能。提供10GB免费存储空间和50GB流量。开通云开发环境01开通云服务在微信开发者工具中点击"云开发"按钮,填写环境名称(如production、test),选择基础套餐(免费版或付费版)。系统会自动创建云环境,分配环境ID。02初始化云环境在app.js中初始化云开发环境。调用wx.cloud.init()方法,传入环境ID。建议在app.onLaunch生命周期中初始化,确保全局可用。App({onLaunch(){wx.cloud.init({env:'your-env-id',traceUser:true});}})03配置云函数目录在project.config.json中指定云函数根目录,通常为cloudfunctions。在该目录下创建云函数文件夹,每个云函数是一个独立的Node.js项目。云数据库操作实战集合与文档概念云数据库是文档型数据库,类似MongoDB。集合(Collection)相当于关系型数据库的表,文档(Document)相当于表中的一行数据。每个文档是一个JSON对象,可以包含任意字段,不需要预定义表结构。数据库基础操作初始化数据库constdb=wx.cloud.database();constproductsCollection=db.collection('products');添加数据(Create)productsCollection.add({data:{name:'iPhone15',price:5999,stock:100,category:'electronics',createTime:db.serverDate()}}).then(res=>{console.log('添加成功,ID:',res._id);});查询数据(Read)//查询所有商品productsCollection.get().then(res=>{console.log('商品列表:',res.data);});//条件查询productsCollection.where({price:mand.lt(3000)}).get();更新数据(Update)productsCollection.doc('record-id').update({data:{stock:95,updateTime:db.serverDate()}}).then(res=>{console.log('更新成功');});删除数据(Delete)productsCollection.doc('record-id').remove().then(res=>{console.log('删除成功');});高级查询const_=mand;productsCollection.where({price:_.gte(1000).and(_.lte(5000)),category:'electronics'}).orderBy('price','asc').limit(10).get();权限设置与安全策略1仅创建者可读写数据只有创建者本人可以读取和修改,适用于用户个人数据,如收藏夹、购物车2所有用户可读,仅创建者可写所有人可以查看数据,但只有创建者可以修改,适用于用户发布的内容、评论3所有用户可读,仅管理端可写前端用户只能读取,写入操作必须通过云函数,适用于商品信息、配置数据4仅管理端可读写前端完全无法访问,只能通过云函数操作,适用于敏感数据、订单信息云存储与文件管理文件上传流程云存储支持图片、视频、音频等各类文件上传,自动生成CDN加速链接。上传的文件存储在云端,不占用小程序包体积,适合用户头像、商品图片、文档资料等场景。选择文件使用wx.chooseImage、wx.chooseVideo等API从本地选择文件,获取临时文件路径上传到云存储调用wx.cloud.uploadFile上传文件到云端,指定云存储路径获取文件ID上传成功后获得fileID,这是文件的唯一标识和访问地址保存到数据库将fileID存储到数据库,与业务数据关联,供后续使用图片上传示例//选择图片wx.chooseImage({count:1,success:chooseResult=>{consttempFilePath=chooseResult.tempFilePaths[0];

//上传到云存储wx.cloud.uploadFile({cloudPath:`images/${Date.now()}-${Math.random()}.png`,filePath:tempFilePath,success:uploadResult=>{console.log('上传成功',uploadResult.fileID);

//保存fileID到数据库db.collection('users').doc('user-id').update({data:{avatar:uploadResult.fileID}});}});}});文件下载与删除//下载文件到本地wx.cloud.downloadFile({fileID:'cloud://xxx.png',success:res=>{console.log('临时路径:',res.tempFilePath);}});//删除云存储文件wx.cloud.deleteFile({fileList:['cloud://xxx.png'],success:res=>{console.log('删除成功',res.fileList);}});//获取临时访问链接(有效期2小时)wx.cloud.getTempFileURL({fileList:['cloud://xxx.png'],success:res=>{console.log('临时链接:',res.fileList[0].tempFileURL);}});图片展示与优化技巧使用image组件mode属性:aspectFit保持比例,widthFix自适应宽度,选择合适模式避免变形图片懒加载:设置lazy-load属性,只加载可视区域内的图片,提升页面性能控制图片尺寸:上传前压缩图片,云存储支持图片处理参数,添加?imageMogr2/thumbnail/!50p压缩使用WebP格式:WebP比JPEG体积小30%,在支持的设备上优先使用WebP格式第八章项目实战:电商小程序架构设计需求分析与功能模块我们将开发一个完整的电商小程序,涵盖商品展示、购物车、订单管理、用户中心等核心功能。通过实战项目掌握小程序开发的完整流程和最佳实践。首页模块轮播图展示促销活动分类导航快速定位热门商品推荐列表搜索框商品检索商品模块商品列表分页加载筛选排序功能商品详情页展示规格选择与库存显示购物车模块添加移除商品数量增减操作全选反选功能价格实时计算订单模块订单创建与提交订单列表查询订单状态跟踪微信支付集成用户中心用户登录授权个人信息管理收货地址管理收藏与浏览历史首页轮播图与分类导航

{{}}{{}}¥{{item.price}}页面逻辑实现Page({data:{banners:[],categories:[],products:[]},

onLoad(){this.loadBanners();this.loadCategories();this.loadProducts();},

asyncloadBanners(){constdb=wx.cloud.database();constres=awaitdb.collection('banners').where({status:'active'}).orderBy('sort','asc').get();this.setData({banners:res.data});},

onBannerTap(e){consturl=e.currentTarget.dataset.url;wx.navigateTo({url});},

onCategoryTap(e){constid=e.currentTarget.dataset.id;wx.navigateTo({url:`/pages/list/list?categoryId=${id}`});}})购物车功能实现购物车数据结构设计购物车需要存储商品信息、数量、规格等数据。可以选择本地存储(wx.setStorage)或云数据库存储。本地存储响应快但不能跨设备同步,云数据库可以多端同步但需要网络请求。添加商品到购物车//商品详情页addToCart(){constproduct={id:ductId,name:ductName,price:this.data.price,image:this.data.cover,spec:this.data.selectedSpec,quantity:this.data.buyCount,checked:true};

letcart=wx.getStorageSync('cart')||[];

//检查是否已存在constindex=cart.findIndex(item=>item.id===product.id&&item.spec===product.spec);

if(index>-1){//已存在,增加数量cart[index].quantity+=product.quantity;}else{//新商品,添加到购物车cart.push(product);}

wx.setStorageSync('cart',cart);wx.showToast({title:'已加入购物车'});}购物车页面渲染Page({data:{cartList:[],totalPrice:0,allChecked:false},

onShow(){this.loadCart();},

loadCart(){constcart=wx.getStorageSync('cart')||[];this.setData({cartList:cart});this.calculateTotal();},

calculateTotal(){lettotal=0;letallChecked=true;

this.data.cartList.forEach(item=>{if(item.checked){total+=item.price*item.quantity;}else{allChecked=false;}});

this.setData({totalPrice:total.toFixed(2),allChecked});}})购物车交互功能商品勾选与全选//单个商品勾选onCheckItem(e){constindex=e.currentTarget.dataset.index;this.data.cartList[index].checked=!this.data.cartList[index].checked;this.setData({cartList:this.data.cartList});this.calculateTotal();this.saveCart();},//全选/反选onCheckAll(){constallChecked=!this.data.allChecked;this.data.cartList.forEach(item=>{item.checked=allChecked;});this.setData({cartList:this.data.cartList,allChecked});this.calculateTotal();this.saveCart();}数量增减操作//减少数量onDecreaseCount(e){constindex=e.currentTarget.dataset.index;if(this.data.cartList[index].quantity>1){this.data.cartList[index].quantity--;this.setData({cartList:this.data.cartList});this.calculateTotal();this.saveCart();}},//增加数量onIncreaseCount(e){constindex=e.currentTarget.dataset.index;this.data.cartList[index].quantity++;this.setData({cartList:this.data.cartList});this.calculateTotal();this.saveCart();}删除商品onDeleteItem(e){constindex=e.currentTarget.dataset.index;wx.showModal({title:'确认删除',content:'确定要删除这件商品吗?',success:(res)=>{if(res.confirm){this.data.cartList.splice(index,1);this.setData({cartList:this.data.cartList});this.calculateTotal();this.saveCart();wx.showToast({title:'已删除'});}}});}搜索功能开发搜索框组件封装搜索是电商应用的核心功能。我们将封装一个可复用的搜索组件,支持实时搜索建议、搜索历史记录、热门搜索推荐等功能。搜索组件WXML

搜索

{{}}

防抖处理优化Component({data:{keyword:'',suggestions:[],showSuggestions:false,timer:null},

methods:{onInput(e){constkeyword=e.detail.value;this.setData({keyword});

//防抖处理,输入停止500ms后触发搜索clearTimeout(this.data.timer);consttimer=setTimeout(()=>{this.loadSuggestions(keyword);},500);

this.setData({timer});},

asyncloadSuggestions(keyword){if(!keyword){this.setData({showSuggestions:false});return;}

constdb=wx.cloud.database();constres=awaitdb.collection('products').where({name:db.RegExp({regexp:keyword,options:'i'})}).limit(5).get();

this.setData({suggestions:res.data,showSuggestions:true});}}})搜索历史记录管理保存搜索记录onSearch(){constkeyword=this.data.keyword.trim();if(!keyword)return;

lethistory=wx.getStorageSync('searchHistory')||[];

//去重history=history.filter(item=>item!==keyword);

//添加到开头history.unshift(keyword);

//最多保存10条if(history.length>10){history=history.slice(0,10);}

wx.setStorageSync('searchHistory',history);

//跳转搜索结果页wx.navigateTo({url:`/pages/search-result/search-result?keyword=${keyword}`});}展示历史记录

搜索历史

{{item}}

清空历史clearHistory(){wx.showModal({title:'清空历史',content:'确定要清空搜索历史吗?',success:(res)=>{if(res.confirm){wx.removeStorageSync('searchHistory');this.setData({searchHistory:[]});}}});}用户登录与微信支付集成微信登录完整流程小程序登录采用微信官方推荐的静默登录方式,通过code换取openid建立用户身份。用户首次使用时通过wx.getUserProfile获取用户信息并完善资料。1前端获取code调用wx.login获取临时登录凭证code,有效期5分钟2发送code到服务器将code发送到开发者服务器进行身份验证3服务器换取openid服务器调用微信接口,用code换取用户openid和session_key4生成自定义登录态服务器生成token返回,前端存储用于后续请求认证前端登录实现//静默登录asyncsilentLogin(){try{//获取codeconstloginRes=awaitwx.login();constcode=loginRes.code;

//发送到服务器constres=awaitwx.request({url:'/login',method:'POST',data:{code}});

//存储tokenwx.setStorageSync('token',res.data.token);wx.setStorageSync('userInfo',res.data.userInfo);

returnres.data;}catch(error){console.error('登录失败',error);}},//获取用户信息getUserInfo(){wx.getUserProfile({desc:'用于完善用户资料',success:(res)=>{console.log('用户信息:',res.userInfo);this.updateUserInfo(res.userInfo);}});}云函数登录(推荐)//云函数login/index.jsconstcloud=require('wx-server-sdk');cloud.init({env:cloud.DYNAMIC_CURRENT_ENV});exports.main=async(event,context)=>{constwxContext=cloud.getWXContext();

//获取用户openidconstopenid=wxContext.OPENID;constappid=wxContext.APPID;

//查询或创建用户constdb=cloud.database();constuserRes=awaitdb.collection('users').where({_openid:openid}).get();

if(userRes.data.length===0){//新用户,创建记录awaitdb.collection('users').add({data:{_openid:openid,createTime:newDate()}});}

return{openid,appid};};微信支付调用流程01创建订单用户提交订单后,在服务器创建订单记录,生成订单号,计算订单金额,准备支付参数02调起支付API服务器调用微信支付统一下单接口,获取prepay_id等支付参数,返回给小程序前端03前端发起支付小程序调用wx.requestPayment,传入支付参数,拉起微信支付收银台,用户完成支付04支付结果通知微信服务器向开发者服务器发送支付结果通知,服务器验证后更新订单状态,通知前端重要提示:微信支付需要企业主体认证的小程序,个人小程序无法使用。支付金额以分为单位,需要注意金额转换。支付成功后务必在服务器端验证支付结果,不能仅依赖前端回调。第九章性能优化与调试技巧性能监控工具微信开发者工具提供了完善的性能分析工具,帮助开发者发现性能瓶颈。合理使用这些工具可以显著提升小程序的运行效率和用户体验。性能面板开发者工具的"性能"面板可以记录小程序运行时的CPU、内存、网络等指标。通过时间轴分析可以找出卡顿的具体位置,优化渲染性能。Audits审计工具自动化性能审计工具,对小程序进行全面体检,给出优化建议。包括代码包大小、setData调用频率、图片优化等多个维度的分析报告。Network网络面板查看所有网络请求的详细信息,包括请求时长、数据大小、状态码等。可以发现慢接口、重复请求、资源加载问题,针对性优化。代码优化策略代码分包加载小程序主包限制2MB,通过分包可以突破限制,按需加载。将非首页功能放入分包,首次启动更快。独立分包可以单独访问,不需要下载主包。//app.json配置分包{"pages":["pages/index/index"],"subpackages":[{"root":"packageA","pages":["pages/detail/detail"]},{"root":"packageB","name":"order","pages":["pages/order/order"],"independent":true}]}setData性能优化setData是小程序最常见的性能瓶颈。避免频繁调用、一次传输大量数据、传输不必要的数据。使用局部更新语法,只更新变化的字段。//不好的做法this.setData({list:this.data.list});//好的做法-局部更新this.setData({[`list[${index}].name`]:newName});//批量更新constupdateData={};updateData[`list[0].name`]='A';updateData[`list[1].name`]='B';this.setData(updateData);图片资源优化图片是影响性能的主要因素。使用合适的图片格式(WebP优先),控制图片尺寸,启用图片懒加载,使用CDN加速。避免在包内放置大图。常见调试技巧1Console日志调试使用console.log、console.warn、console.error打印信息。开发者工具控制台支持对象展开、搜索过滤、日志级别筛选等功能。2断点调试在Sources面板打断点,逐步执行代码,查看变量值。支持条件断点、日志断点,精准定位问题。3移动调试使用真机调试功能,在手机上测试。点击"真机调试",扫码即可在真实设备上运行,查看控制台日志。4vConsole面板在真机上开启vConsole,可以查看日志、网络、存储等信息,无需连接电脑即可调试。第十章小程序发布与审核发布前准备清单功能测试测试所有页面功能是否正常检查各种网络状态下的表现验证表单输入验证逻辑测试异常情况处理多种设备型号兼容性测试内容审核确保无违规内容(色情、暴力等)检查文案无错别字隐私政策声明完整用户协议条款清晰版权信息合法合规性能优化代码包大小控制在2MB以内图片资源压缩优化启动速度控制在3秒内setData调用频率合理网络请求数量优化信息完善小程序名称、简介准确上传清晰的图标和截图填写正确的服务类目配置搜索关键词设置客服功能(如需要)审核流程与注意事项微信小程序审核通常需要1-7个工作日。审核团队会检查小程序的功能完整性、内容合规性、用户体验等方面。理解审核规则可以提高通过率,减少驳回次数。上传代码在开发者工具点击"上传",填写版本号和项目备注。代码上传后会出现在小程序后台的"开发管理"-"开发版本"中。提交审核在小程序后台选择开发版本,点击"提交审核"。填写审核信息,包括功能页面截图、测试账号(如需要)、特殊审核说明等。等待审核审核状态可在"版本管理"中查看。可以撤回审核进行修改,但会重新排队。审核加急服务需要特殊申请。审核结果处理审核通过后可以选择立即发布或定时发布。审核不通过会给出具体原因,修改后可以重新提交审核。常见驳回原因解决方案功能不完善确保所有功能页面可正常访问和使用,没有空白页或占位页类目不符选择准确的服务类目,必要时提供相关资质证明用户隐私明确告知用户数据用途,提供隐私政策,获取权限前说明原因诱导分享不能强制分享、诱导分享,分享功能应该自然融入场景内容违规删除低俗、暴力、违法内容,确保内容符合平台规范小程序推广策略获取流量的主要途径小程序推广需要多渠道组合,充分利用微信生态的流量入口。从线上到线下,从社交裂变到付费推广,制定适合自己业务的推广策略。朋友圈分享设计吸引人的分享卡片,提供分享激励(积分、优惠券),引导用户主动分享到朋友圈和微信群,形成社交裂变。微信群推广建立用户社群,定期分享优质内容。设计社群专属活动,鼓励群成员邀请好友,实现裂变增长。二维码推广生成小程序码,投放到线下门店、产品包装、宣传物料。扫码即可打开小程序,降低使用门槛。公众号关联将小程序与公众号关联,在文章中插入小程序卡片。利用公众号粉丝基础,导流到小程序。搜索优化优化小程序名称、简介、标签,提高微信搜索排名。发布高质量内容,增加曝光机会。广告投放使用微信广告平台投放朋友圈广告、公众号广告。精准定向目标用户,快速获取流量。提升用户留存的关键策略消息推送合理使用订阅消息和模板消息,在关键节点提醒用户(订单状态、活动通知)。注意推送频率,避免打扰用户。会员体系建立积分、等级、优惠券等会员权益体系。通过持续的激励机制,提升用户粘性和复购率。个性化推荐基于用户行为数据,推荐感兴趣的内容和商品。智能化推荐提升用户体验,增加使用时长。72%分享传播率优质小程序通过社交分享获得的新用户占比3.2倍裂变增长设计良好的裂变活动可带来的用户增长倍数45%次日留存率行业优秀小程序的平均次日留存率标准第十一章进阶技术与生态扩展小程序与公众号互通方案打通小程序和公众号可以形成完整的服务闭环。公众号负责内容传播和用户触达,小程序提供服务和交易能力,两者相互导流,发挥协同效应。公众号菜单跳转小程序在公众号自定义菜单中配置小程序链接,用户点击菜单直接打开小程序,无缝衔接用户体验。适合将高频服务放入小程序,从公众号快速导流。文章内嵌小程序卡片在公众号文章中插入小程序卡片或小程序码,读者点击即可跳转。适合内容导购、活动报名、工具服务等场景,提高内容转化率。小程序返回公众号小程序通过分享、提示等方式引导用户关注公众号,沉淀私域流量。使用web-view组件展示公众号文章,增强内容传播能力。UnionID统一用户体系通过UnionID打通小程序和公众号的用户身份,实现统一的会员体系、积分体系。用户在任一端的行为都可以被记录和管理,提供一致的服务体验。第三方SDK与插件接入小程序插件小程序插件是可被添加到小程序内直接使用的功能组件。开发者可以使用其他人开发的插件,也可以开发插件供他人使用。地图插件:腾讯地图、百度地图提供的定位、导航、路线规划等功能直播插件:快速集成直播能力,支持实时互动、商品讲解客服插件:智能客服、在线咨询,提升服务效率数据统计插件:用户行为分析、转化漏斗追踪//app.json中声明使用插件{"plugins":{"myPlugin":{"version":"1.0.0","provider":"wxidxxxxxxxxxx"}}}常用第三方SDK第三方SDK可以快速集成复杂功能,提升开发效率。选择成熟稳定的SDK,注意版本兼容性和文档完善度。腾讯云SDK:提供云函数、云存储、云数据库等能力即时通讯SDK:集成聊天、群组、音视频通话功能支付SDK:微信支付、其他第三方支付接入分享SDK:增强分享能力,自定义分享样式和内容统计SDK:友盟、神策等数据分析工具AI与AR能力应用AI智能识别微信提供图像识别、文字识别、语音识别等AI能力。可以实现人脸识别、身份证OCR、语音输入等功能,提升用户体验和业务效率。AR增强现实小程序支持AR能力,可以实现虚拟试穿、AR导航、3D产品展示等创新体验。利用手机摄像头叠加虚拟内容到现实场景中。第十二章小游戏开发简介小游戏与小程序的区别小游戏是小程序的一个特殊类目,专门用于游戏开发。它基于Canvas渲染,拥有更强的图形性能和游戏引擎支持,适合开发轻量级休闲游戏。对比项小程序小游戏渲染方式WXML组件渲染Canvas2D/WebGL渲染适用场景工具、电商、内容服务休闲游戏、互动娱乐性能要求中等高性能图形处理开发难度相对简单需要游戏开发经验包大小限制主包2MB,总包20MB主包4MB,总包20MB引擎支持无Cocos、Laya、白鹭等Canvas基础与动画实现Canvas是小游戏的核心,所有游戏元素都绘制在Canvas画布上。通过不断重绘画布实现动画效果,配合requestAnimationFrame保持流畅的帧率。Canvas基础绘图//获取Canvas上下文constcanvas=wx.createCanvas();constctx=canvas.getContext('2d');//绘制矩形ctx.fillStyle='#EF9C82';ctx.fillRect(50,50,100,100);//绘制圆形ctx.beginPath();ctx.arc(200,200,50,0,Math.PI*2);ctx.fillStyle='#1D4241';ctx.fill();//绘制文字ctx.font='24pxArial';ctx.fillStyle='#000';ctx.fillText('HelloGame!',100,300);//绘制图片constimage=wx.createImage();image.src='images/player.png';image.onload=()=>{ctx.drawImage(image,0,0,64,64);};游戏循环与动画letx=0;lety=0;letspeedX=2;letspeedY=2;functiongameLoop(){//清空画布ctx.clearRect(0,0,canvas.width,canvas.height);

//更新位置x+=speedX;y+=speedY;

//边界检测if(x>canvas.width-50||x<0){speedX=-speedX;}if(y>canvas.height-50||y<0){speedY=-speedY;}

//绘制ctx.fillStyle='#EF9C82';ctx.fillRect(x,y,50,50);

//下一帧requestAnimationFrame(gameLoop);}//启动游戏循环gameLoop();简单小游戏示例让我们创建一个简单的"点击方块"小游戏。屏幕上随机出现方块,玩家点击方块得分,限时60秒,比拼最高分数。创建游戏对象定义方块的位置、大小、颜色等属性,编写方块的绘制方法和随机生成逻辑处理触摸事件监听canvas的touchstart事件,判断触摸点是否在方块范围内,击中则增加分数并生成新方块添加游戏逻辑实现倒计时功能,游戏结束判断,分数统计,最高分记录保存到本地存储低代码与AI辅助开发工具uni-app跨平台框架uni-app是一个使用Vue.js开发所有前端应用的框架。开发者编写一套代码,可以发布到iOS、Android、Web、以及各种小程序平台,大幅提升开发效率。uni-app核心优势一次开发,多端运行:支持微信、支付宝、百度、字节跳动等10+个平台Vue.js语法:使用熟悉的Vue开发方式,降低学习成本丰富的组件库:uView、uni-ui等成熟组件库,快速搭建界面完善的生态:插件市场提供大量现成的功能模块原生能力扩展:支持原生插件,调用平台特有功能条件编译:针对不同平台编写差异化代码AI代码生成与智能调试AI技术正在改变软件开发方式。AI辅助工具可以根据自然语言描述生成代码,自动修复bug,提供优化建议,显著提升开发效率。GitHubCopilotAI代码补全工具,根据注释和上下文自动生成代码。支持多种编程语言,与VSCode深度集成。ChatGPT编程助手通过对话描述需求,AI生成完整代码片段。可以解释代码逻辑,优化算法,查找错误。智能调试工具自动检测代码问题,提供修复建议。分析性能瓶颈,给出优化方案,减少调试时间。低代码平台案例腾讯云微搭腾讯官方的低代