微信小程序开发项目实战（微课版）课件 项目4 微信小程序项目数据对接

微信小程序项目数据对接微信小程序开发[xxx]学校主讲教师：[xxx]学习目标知识与能力目标掌握微信小程序绑定数据的方法。掌握微信小程序对接数据的方法。掌握微信小程序解析显示数据的方法。素养目标培养学生严谨的行事作风。培养学生理论联系实际的能力，并提高技能、磨砺意识、活跃思维、展现个性和拓宽视野。知识导图任务分解基础掌握：掌握微信小程序页面数据绑定的基本方法。实战对接：掌握“成大通”各页面数据对接的实现方法。举一反三：了解学分银行、农产品电商等小程序的数据对接方法。任务4.1“成大通”首页数据对接实现页面数据绑定核心概念：视图与逻辑联动小程序通过数据驱动视图更新。开发者只需在JS文件中维护数据状态，视图层（WXML）会自动响应数据变化，实现单向数据流的高效渲染。基本语法：Mustache语法使用双大括号{{变量名}}包裹变量。支持简单的运算、三元表达式及字符串拼接，直接嵌入在WXML的标签内容或属性中。代码示例：JS:Page({data:{message:'HelloWorld’}})WXML:<view>{{message}}</view>→页面渲染：HelloWorld数据驱动WXML结构等价于一棵Dom树，这棵Dom树也可以通过一个JS对象来表示。数据驱动核心机制：小程序采用数据驱动模式，开发者通过调用setData方法更新逻辑层数据。自动更新：框架会自动对比新旧数据差异，将变化应用到视图层，无需开发者手动操作DOM，极大简化了开发流程。事件系统当用户主动触发操作（如点击界面按钮、长按指定区域）时，这类交互行为需反馈至逻辑层，开发者需根据操作执行对应的业务逻辑，并将处理结果呈现给用户。

此外，部分“行为反馈”并非由用户主动触发（例如视频播放过程中播放进度的实时变化），这类系统级的状态变更也需传递至逻辑层，供开发者进行相应的业务逻辑处理。在微信小程序中，把这种“用户在渲染层的行为反馈”以及“组件的部分状态反馈”抽象为渲染层传递给逻辑层的“事件”。事件系统●核心概念：用户交互或组件状态变化的反馈机制。●触发来源：用户交互（点击/滑动）与组件状态变更。●事件对象：包含type、target、detail等关键属性。●传递机制：从渲染层（Webview）向逻辑层（JsCore）通信。事件绑定与冒泡捕获●绑定方式差异bind：默认方式，允许事件冒泡传递，父元素可接收到子元素事件。catch：阻止事件冒泡，事件在当前元素终止传播，父元素无法捕获。●传播机制原理捕获阶段：事件从根节点向下传递到目标元素（capture-bind）。冒泡阶段：事件从目标元素向上冒泡回根节点（bind）。数据网络通信核心API：wx.request小程序提供了强大的网络请求能力，通过wx.requestAPI可以轻松发起HTTP/HTTPS请求，实现客户端与服务器之间的数据交互。关键特性参数配置灵活：支持method（GET/POST等）、data、header、timeout等参数设置。响应处理：通过success/fail/complete回调函数处理请求结果。安全性：必须配置合法域名，仅支持HTTPS协议，保障数据传输安全。数据网络通信：服务器接口配置1.协议要求：微信小程序为了保障数据传输的安全性，强制要求所有网络请求（wx.request）必须使用HTTPS协议，不支持HTTP协议。2.域名配置：开发者需要在微信公众平台的后台，将请求的服务器域名添加到“request合法域名”列表中。只有配置过的域名，微信小程序才能正常发起请求，否则会被拦截。数据网络通信：请求参数1.URL拼接传递将参数直接拼接在请求URL的末尾，通常用于GET请求。例如：/user?id=123&name=test2.Data参数传递将参数放在请求体（body）中，不暴露在URL上，适合传递较敏感或较大的数据。3.POST请求与JSON格式对于复杂数据结构（如嵌套对象、数组），推荐使用POST请求，并以JSON格式在请求体中传递参数，这种方式解析方便且扩展性强。数据网络通信：服务器返回数据通过wx.request发送请求后，服务器处理请求并返回HTTP包，微信小程序收到回包后会执行success()回调函数，同时会带上一个object数据。success()回调函数返回的data参数的类型是根据header[‘content-type’]决定的。数据网络通信：使用技巧设置请求超时时间处理请求前后的状态数据网络通信：排查异常的方法①检查手机网络状态以及Wi-Fi连接是否正常。②检查微信小程序是否为开发版或者体验版，因为开发版和体验版的微信小程序不会校验请求的域名。③检查对应请求的HTTPS证书是否有效，同时TLS的版本必须为1.2及以上，可以在微信开发者工具的控制台中输入showRequestInfo()函数来查看相关信息。④检查域名是否符合要求。域名不要使用IP地址或者localhost，并且不能带端口号，同时域名需要经过ICP备案。⑤检查设置的请求超时时间是否太短，请求超时时间太短会导致还没收到回包就触发fail回调。⑥检查发出的请求是否收到302状态码响应，若出现这种情况，通常是因为请求被重定向到了其他域名接口，进而导致原本的请求无法正常发起。“成大通”微信小程序后台接口部署操作系统：Windows7、Windows10、Windows11。数据库：MySQL8.0。开发语言：Python3.9.2。使用插件：Django。为了方便开发调试，本书使用的接口都是本地机器发布的接口服务，通过Django配置端口为1831，故本书中调用的接口地址均以http://localhost:1831/开头。由于在开发过程中未通过现网的域名发布HTTPS服务，需在微信开发者工具的“详情”→“本地设置”中勾选“不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书”选项。“成大通”首页数据对接绑定实现页面数据动态对接步骤：第一步：在.js文件的data中定义数据第二步：在.wxml中用{{变量}}替换静态内容第三步：在.js文件中对应函数中获取动态数据，使用setData()方法改变数据第四步：在.wxml绑定相应事件（如点击、长按等）“成大通”首页数据对接绑定第一步：在index.js文件的data中定义数据lbimg、xwdt第二步：在index.js文件中onLoad函数中获取动态数据，使用setData()方法改变lbimg、xwdt数据“成大通”首页数据解析显示第一步：在index.wxml中用{{变量}}替换静态内容第二步：需要根据动态数据传递参数的组件上添加data-*进行数据传递，index.wxml中的轮播图、新闻详情传递的data-id第三步：通过currentTarget.dataset['id']获取的id值，对index.wxml绑定的事件函数lbttz、xqtz修改相应参数科技向善在微信小程序与后端进行数据对接过程中，数据传输的稳定、规范与安全，直接关系到用户信任与服务可靠。接口设计不仅追求逻辑严谨、响应高效，更要坚守诚信合作与数据安全的底线：遵循合规接口规范，做好身份校验、权限控制与传输加密；不随意采集、不滥用用户信息，保障数据全程可管、可控、可追溯。开发者在技术之外，应当始终怀着对用户权利与隐私的敬畏之心，将安全与诚信内化为产品逻辑的基石。只有守住诚信初心、筑牢安全防线，数字技术服务才能真正可靠、可信、可依赖。诚信合作与数据安全任务4.2—任务4.7

“成大通”各功能页面数据对接实现“成大通”政策一览页面数据对接第一步：在zc.js文件的data中定义数据zcxxs第二步：在zc.js文件中onLoad函数中获取动态数据，使用setData()方法改变zcxxs数据“成大通”政策一览页面解析显示第一步：在zc.wxml中用{{变量}}替换静态内容第二步：需要根据动态数据传递参数的组件上添加data-*进行数据传递，zc.wxml中的政策详情传递的data-id第三步：通过currentTarget.dataset['id']获取的id值，对zc.wxml绑定的事件函数xqtz修改相应参数“成大通”成才活动页面数据对接第一步：在hdlb.js文件的data中定义数据hdxxs第二步：在hdlb.js文件中onLoad函数中获取动态数据，使用setData()方法改变hdxxs数据“成大通”成才活动页面解析显示第一步：在hdlb.wxml中用{{变量}}替换静态内容第二步：需要根据动态数据传递参数的组件上添加data-*进行数据传递，hdlb.wxml中的活动详情传递的data-id第三步：通过currentTarget.dataset['id']获取的id值，对hdlb.wxml绑定的事件函数hdxqtz修改相应参数“成大通”433风采页面数据对接第一步：在fc.js文件的data中定义数据fcxxs第二步：在fc.js文件中onLoad函数中获取动态数据，使用setData()方法改变fcxxs数据“成大通”433风采页面解析显示第一步：在fc.wxml中用{{变量}}替换静态内容第二步：需要根据动态数据传递参数的组件上添加data-*进行数据传递，fc.wxml中的风采详情传递的data-id第三步：通过currentTarget.dataset[‘id’]获取的id值，对fc.wxml绑定的事件函数fcxqtz修改相应参数“成大通”433认证页面数据对接第一步：在rz.js文件的data中定义数据rzxxs第二步：在rz.js文件中onLoad函数中获取动态数据，使用setData()方法改变rzxxs数据“成大通”433认证页面解析显示第一步：在rz.wxml中用{{变量}}替换静态内容第二步：需要根据动态数据传递参数的组件上添加data-*进行数据传递，rz.wxml中的认证详情传递的data-id第三步：通过currentTarget.dataset['id']获取的id值，对rz.wxml绑定的事件函数rzxqtz修改相应参数“成大通”我的433页面数据对接第一步：在cczl.js文件的data中定义数据a1、a2、a3、a4、a5、a6、a7、a8、a9、a10第二步：在cczl.js文件中onLoad函数中获取动态数据，使用setData()方法改变a1、a2、a3、a4、a5、a6、a7、a8、a9、a10数据“成大通”我的433页面解析显示第一步：在cczl.wxml中用{{变量}}替换静态内容第二步：需要根据动态数据传递参数的组件上添加data-*进行数据传递，cczl.wxml中的认证详情传递的data-lxid第三步：通过currentTarget.dataset['lxid']获取的lxid值，对cczl.wxml绑定的事件函数wdxqtz修改相应参数“成大通”433数据画像页面数据对接第一步：在hx.js文件的data中定义数据xywclqk、zywcsqk、bjwcsqk、active第二步：在hx.js文件中onLoad函数中获取动态数据，使用setData()方法改变xywclqk、zywcsqk、bjwcsqk数据第三步：在hx.js文件中onChange函数中获取栏目切换动态数据，使用setData()方法改变active数据“成大通”433数据画像页面