写在最前面

首先，自己不是一个专门搞程序开发的，之前没有html基础，没有css基础，也没有js的基础，当初就是看到别人家的一个小程序挺好的。具体谁家的，我就不在这里做广告了，然后想看看怎么弄得，去网上找资料啊，都说简单的很，好开发。不过好像需要点基础，比如HTML，css，JavaScript。还有es6，最好会点框架啥的。
自己学了10天的html和css的基础，15天的js，花了几天看了看微信小程序的开发文档，然后开始搞。我的总结就是能搞，但搞不好。

结构布局

页面布局

其实说来简单，就是调用个api。现在看来小程序的核心，也就是异步请求，回调函数。（api， sync，node.js都是在开发过程中，然后遇到，百度查的意思。）
不懂后端数据库的开发，而且小程序api请求只支持htmls，所以自己搞数据库，申请域名啥的，我觉得自己一时半会弄不来，所以。。。。好在微信小程序弄了个云开发，有些简单的功能能实现了，比如数据库，比如云函数，云存储啥的，就是不知道怎么弄个后端的客户端。搜索“智慧交通lite”，可以体验。

首页，将会带来全新的写作体验；
查询页 ；
附近站点详情页 ；

首页的js代码，html和css我就不贴了

为了页面的简洁，我把气温和设置都放到搜索框离了，因为有历史记录，在这里面调用了缓存数据，所以内容比较的多.天气用的是高德的api所以在开头引入了下。小白初次写，有的代码可能逻辑比较啰嗦，大家取其精华，多提意见。因为第一次发博文，还不是很会用，有的地方可能不是很完整，以后会改进，大家有意见，可以留言。欢迎大家留言，欢迎扫码体验。

const amapFile = require('../../utils/amap-wx.js');
var app = getApp()Page({/*** 页面的初始数据*/data: {stations:"",long:"",searchHistory:"",weatherMsg:""},/*** 生命周期函数--监听页面加载*/onLoad: function (options) { var that = thisvar myAmapFun = new amapFile.AMapWX({ key: '申请个key' });myAmapFun.getWeather({success: function (data) {console.log(data.liveData)that.setData({weatherMsg: data.liveData});},fail: function (info) {console.log(info)}})},// 点击搜索框跳转inputTap:function(){wx.navigateTo({url: '/pages/search/search',success: (result)=>{console.log(result)},fail: (err)=>{console.log(err)},});},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () { var that = thisthis.openHistorySearch()that.gerUserLocation(that)},gerUserLocation:function(that){var that = thiswx.getLocation({type: "gcj02",success: function (res) {// console.log(res)var long = res.longitude;var lat = res.latitude;that.setData({long:long})// 调用坐标获取附近站点的函数that.getData(long, lat)},})},// 获取到定位点附近的站台列表getData: function (a, b) {var that = thiswx.request({url: "************",data: {x: "",y: ""},header: {"content-type": 'application/json',},success: res => {that.setData({ stations: res.data.list })console.log(that.data.stations)}})},// 跳转到某一具体车站的信息页面stationBussInfo: function (event) {var that = thisvar station = event.currentTarget.dataset.stationconsole.log(event.currentTarget.dataset.station)wx.navigateTo({url: '/pages/station/station?station=' + station,success: (result) => {console.log(result)},fail: (err) => {console.log(err)},});},// 打开小程序没有授权定位的情况下再次授权的方法locationTap:function(){var that = thiswx.getSetting({success:(res)=>{console.log("1",res.authSetting['scope.userLocation'])if (res.authSetting['scope.userLocation'] !== undefined && res.authSetting['scope.userLocation'] !==true){ // 没有初始化，没有授权的情况下wx.showModal({title: '是否授权当前的位置',content: '请确认，否则无法定位附近的站台信息',success:(res)=>{ if (res.cancel){ console.info("暂时无法提供需要定位功能的服务")console.log(res) }else if (res.confirm){wx.openSetting({success:function(data){console.log(data)if (data.authSetting["scope.userLocation"] == true) {wx.showToast({title: '授权成功',icon: "success",duration: 5000})} else {wx.showToast({title: '授权失败',icon: "success",duration: 5000})}}})}}})} else if (res.authSetting['scope.userLocation'] == undefined) {that. gerUserLocation()}}})},// 历史搜索点击跳转historyTap: function (event) {// console.log(event)var that = this// console.log("这是event:", event)let rid = event.currentTarget.dataset.rid// console.log("这是rid:", rid)// that.searchSubmitFn(rid)wx.navigateTo({url: '/pages/detail/detail?rid=' + rid,// success: function (res) { console.log("跳转成功") },fail: function (res) { console.log(res) },})},// 获取缓存函数openHistorySearch: function () {var that = thisthis.setData({searchHistory: wx.getStorageSync('searchRecord') || [],//若无储存则为空})// console.log(that.data.searchHistory)},historyDelFn: function () {wx.clearStorageSync('searhRecord')this.setData({searchHistory: []})},getWeather:function(){wx.navigateTo({url: '../weather/weather',})},setting: function () {wx.navigateTo({url: '../admin/admin',})},onShareAppMessage: function () {return {title: "青岛公交出行，时时公交，公交到站信息，公交地铁换乘方案",desc: "青岛智慧公交",path: "/pages/index1/index1",success: function () {wx.showToast({title: '感谢分享，已成功了',icon: "seccess",duration: 2000})}}}
})

绝对0基础，手撸一个公交时时到站查询的，快速上手，简单实用。不用数据库，无需后端基础。相关推荐

呆呆带你手撸一个思维导图-基础篇
希沃ENOW大前端公司官网:CVTE(广州视源股份) 团队:CVTE旗下未来教育希沃软件平台中心enow团队「本文作者:」前言你盼世界,我盼望你无bug.Hello 大家好,我是霖呆呆! 哈哈 ...
php 六边形属性图能力数值图,详解基于 Canvas 手撸一个六边形能力图
一.前言六边形能力图如下,由 6 个六边形组成,每一个顶点代表其在某一方面的能力.这篇文章我们就来看看如何基于 canvas 去绘制这么一个六边形能力图.当然,你也可以基于其他开源的 js 方案来 ...
使用Node.js手撸一个建静态Web服务器，内部CV指南
文章里有全部代码,也可以积分下载操作步骤如上图文章结束话说这个键盘真漂亮~~ 文章目录使用Node.js手撸一个建静态Web服务器一.动静态服务器的概念 1.1 静态Web服务器概念 1.2 ...
Goroutine 并发调度模型深度解析之手撸一个高性能 goroutine 池
文章目录 1 前言 2 Goroutine & Scheduler 2.1 线程那些事儿 2.1.1 用户级线程模型 2.1.2 内核级线程模型 2.1.3 两级线程模型 2.2 G-P-M ...
很多小伙伴不太了解ORM框架的底层原理，这不，冰河带你10分钟手撸一个极简版ORM框架（赶快收藏吧）
大家好,我是冰河~~ 最近很多小伙伴对ORM框架的实现很感兴趣,不少读者在冰河的微信上问:冰河,你知道ORM框架是如何实现的吗?比如像MyBatis和Hibernate这种ORM框架,它们是如何实现的 ...
.Net Core手撸一个基于Token的权限认证
说明权限认证是确定用户身份的过程.可确定用户是否有访问资源的权力今天给大家分享一下类似JWT这种基于token的鉴权机制基于token的鉴权机制,它不需要在服务端去保留用户的认证信息或者会话信息 ...
javascript实现图片轮播_手撸一个简易版轮播图(上)
手撸一个简易版轮播图实现原理,通过控制 swiper-warpper 容器的定位来达到切换图片的效果. 页面布局简易版轮播图 < > 页面样式 .container{width: 60 ...
手撸一个在线学习在线教育小程序
最近有小伙伴找小孟开发了一个在线教育的小程序项目. 一,小程序介绍微信小程序,它的简称是小程序,其英文名称叫做Mini Program,是一种不需要在手机应用商店里面下载就可以在微信平台当中立即使用 ...
第二篇-用Flutter手撸一个抖音国内版，看看有多炫
前言继上一篇使用Flutter开发的抖音国际版后再次撸一个国内版抖音,大部分功能已完成,主要是Flutter开发APP速度很爽, 先看下图项目主要结构介绍这次主要的改动在api.dart 及 ...

绝对0基础，手撸一个公交时时到站查询的，快速上手，简单实用。不用数据库，无需后端基础。

0基础，自己动手撸的一个时时公交到站查询的小程序。

写在最前面

结构布局

页面布局

首页的js代码，html和css我就不贴了

绝对0基础，手撸一个公交时时到站查询的，快速上手，简单实用。不用数据库，无需后端基础。相关推荐

最新文章

热门文章