微信小程序项目实例-滴滴公交-查公交（源码+截图）资源-CSDN文库

共24个文件

js：6个

wxss：5个

json：4个

版权申诉

125 浏览量 2022-11-05 11:52:36 上传评论 3 收藏 19KB ZIP 举报

微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，旨在提供便捷的服务，无需下载安装即可使用。本项目实例“滴滴公交-查公交”是针对公共交通查询的一个典型应用，它集成了微信小程序的技术特性，为用户提供快速、方便的公交查询服务。在该项目中，你可以学习到以下关键知识点： 1. **微信小程序开发环境**：你需要安装并配置微信开发者工具，这是进行微信小程序开发的基础。这个工具提供了代码编辑、预览、调试和发布等功能，对于新手开发者尤其友好。 2. **WXML与WXSS**：微信小程序使用自定义的标记语言WXML（WeChat Markup Language）来构建用户界面，类似于HTML。同时，WXSS（WeChat Style Sheets）用于样式控制，类似CSS。理解这两者之间的交互是开发小程序页面的关键。 3. **JSBridge通信**：微信小程序与后台服务器的数据交互主要通过JSBridge实现，它负责调用微信API与服务器进行数据交换，如搜索地点、获取公交线路等。 4. **API使用**：在“滴滴公交-查公交”项目中，会用到地图API和位置服务API，例如获取用户当前位置、绘制地图、搜索公交站点等。这些API的调用和处理返回数据的方法是项目的核心部分。 5. **事件处理**：在小程序中，用户交互通常通过绑定事件来实现。比如点击按钮触发查询操作，滑动地图改变视角等，这需要理解和掌握事件绑定和事件处理函数的编写。 6. **数据管理**：微信小程序采用MVVM（Model-View-ViewModel）架构，使用`data`属性来管理组件状态，通过`wx.setStorageSync`和`wx.getStorageSync`进行本地数据存储。 7. **页面路由**：页面间的跳转是小程序用户体验的重要组成部分。通过`wx.navigateTo`、`wx.redirectTo`等API，可以实现在多个页面间导航。 8. **生命周期方法**：每个小程序页面都有其特定的生命周期，如`onLoad`、`onShow`、`onHide`等，开发者需要根据业务逻辑在相应的方法中编写代码。 9. **布局与样式设计**：利用WXSS提供的布局模型（如Flex布局）和样式选择器，设计符合用户体验的界面布局，使用户能够轻松找到所需功能。 10. **性能优化**：在实际开发中，还需考虑小程序的加载速度和运行效率，如合理使用缓存、减少网络请求、优化图片资源等。通过分析和实践这个“滴滴公交-查公交”项目，你将全面了解微信小程序的开发流程，从用户界面设计到后端数据交互，掌握一套完整的微信小程序开发技能。同时，源码和截图可以帮助你更直观地理解每个功能的实现细节，对学习和提升都非常有帮助。

资源推荐

资源详情

资源评论

收起资源包目录

滴滴公交-查公交.zip （24个子文件）

滴滴公交-查公交

weapp-gj-master

app.json 549B

pages

index

index.js 938B

index.wxss 94B

index.wxml 195B

line

line.wxml 742B

line.wxss 1008B

line.json 0B

line.js 1KB

logs

logs.js 266B

logs.json 54B

logs.wxml 173B

logs.wxss 106B

suggest

suggest.js 2KB

search.png 1KB

suggest.json 0B

search_location.png 2KB

suggest.wxml 931B

suggest.wxss 2KB

search_bus.png 2KB

.gitignore 5B

app.wxss 225B

app.js 862B

utils

util.js 461B

1.png 4KB

//获取应用实例 var app = getApp() Page({ data: { suggests: [] }, //事件处理函数 getSug: function(e) { wx.request({ url: 'http://222.178.203.72:19005/whst/63/=fnmfihZnzwhZnitjdihzbnl//api/transit/search/suggest', method: 'POST', header: { 'Content-Type': 'application/json' }, data: { imei:'general_app', token:'t49GcWlrGxJ0d2tGQtC9zA_MYpKZXtCpEcwSEJk1jSpUjTsOAyEMRO8ytQucZY3t25B_KiJQlAJx91hKte28p3kTFQ4QzvCTci7ZipjJxplwhSvhBp941zG-rccSjnCYwoTRPv0SfF-E-xE94pZ342SJddMoPP-hFzytXwAAAP__', lng:'116.29319741622', lat:'40.041375934019', city:1, filter:'poi,line,banner', pattern: e.detail.value }, success: function(res){ if(res.data.matches && res.data.matches.length) { console.log(res.data.matches); this.setData({suggests: res.data.matches}); } }.bind(this) }); }, onLoad: function () { console.log('onLoad') var that = this }, getRecommend: function() { wx.request({ url: 'http://222.178.203.72:19005/whst/63/_fnmfihZnzwhZnitjdihzbnl//api/transit/line/recommendation', method: 'POST', header: { 'Content-Type': 'application/json' }, data: { imei:'general_app', token:'t49GcWlrGxJ0d2tGQtC9zA_MYpKZXtCpEcwSEJk1jSpUjTsOAyEMRO8ytQucZY3t25B_KiJQlAJx91hKte28p3kTFQ4QzvCTci7ZipjJxplwhSvhBp941zG-rccSjnCYwoTRPv0SfF-E-xE94pZ342SJddMoPP-hFzytXwAAAP__', lng:'116.29319741622', lat:'40.041375934019', city:1, filter:'0,1' }, success: function(res){ console.log(res.data); } }); } })

评论收藏

内容反馈

版权申诉