微信小程序地图开发入门(一)

如何获取AppID, 如何创建项目, 点击这里查看官网详情

根目录下 app.js, app.json, app.wxss解释

2.1 app.js 小程序的逻辑
2.2 app.json小程序的公共设置
2.3 app.wxss 小程序的公共样式表

在app.json 配置个tab ( 类似于iOS tabbar)

{"pages":[// 文件所在目录结构// index.js logs.js setup.js"pages/index/index","pages/logs/logs","pages/setup/setup"],// 整个的window"window":{// 设置导航栏样式"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "夏小天","navigationBarTextStyle":"black"},// tabbar对象"tabBar": {"color": "#dddddd","selectedColor": "#1296db","borderStyle": "yellow","backgroundColor": "#ffffff",// 这里是个 .js数组"list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "pages/images/icon3.png","selectedIconPath": "pages/images/icon3.png"},{"pagePath": "pages/logs/logs","text": "搜索","iconPath": "pages/images/icon1.png","selectedIconPath": "pages/images/icon1.png"},{"pagePath": "pages/setup/setup","text": "设置","iconPath": "pages/images/icon2.png","selectedIconPath": "pages/images/icon2.png"}]}
}

一个页面包含的文件结构包含四个文件 .js文件.json文件 .wxml文件 wuss文件(类似于想要布局出iOS中的一个界面需要view model controller 协同工作)

.js文件功能类似于 iOS中Controller的作用起到协同的作用, 也就是页面的逻辑
.json 页面配置比如我想要配置一下logs界面的导航栏文字
.wxml 页面结构 (也就是有view btn等控件)
.wxss 页面样式表(可以配置页面控件的位置, 颜色, 圆角等等属性)

接下来用地图控件写一个简单界面

.js 进行网络请求, 解析数据, 重新赋值data

// 声明一个数组数组
var dataArray = new Array()
Page({data: {  // 标注的数组, 这个markers最终会在 .wxml中直接被使用, 初始为空, 后面会通过setData方法对他进行赋值.markers: [],// 地图上控件数组controls: [{// id号 方便找到是哪个控件id: 2000,// 图片路径iconPath: '/pages/images/tuijian.png',// 相对于地图的位置position: {left: 375 - 120,top: 50,width: 100,height: 40},// 是否可以点击clickable: true}]},// header: {'content-type': 'application/json'}onLoad: function () {var that = this// 调用网络请求, 请求停车场数据// list: [{ header: '今日热闻' }].concat(res.data.stories)// 进行一个网络请求wx.request({url: '',data: {},method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECTheader: { 'content-type': 'application/json' }, // 设置请求的 headersuccess: function(res){// successdataArray = res.data // 数据数组var markers = new Array()for (var i = 0; i < dataArray.length; i ++){var dic = dataArray[i]// console.log(dic.coordinateAmap) // 得到高德经纬度坐标点字符串// 声明一个对象, 用于放置markers的一些参数, 就是iOS中类或者结构体var info = {iconPath: "",id: 0,latitude: 31.237524,longitude: 121.5128895,width: 25,height: 25,name: ""};info.id = iinfo.width = 25info.height = 25// 通过 , 号分割字符串var arrLongLa = new Array()arrLongLa = dic.coordinateAmap.split(",")var longitude = arrLongLa[0]var latitude = arrLongLa[1]// 赋值相关信息info.latitude = latitudeinfo.longitude = longitudeinfo.name = dic.address// 状态判断if (dic.status == "空"){info.iconPath = "/pages/images/markers_icon3.png"}else if (dic.status == "忙") {info.iconPath = "/pages/images/markers_icon1.png"}else if (dic.status == "满") {info.iconPath = "/pages/images/markers_icon2.png"}else if (dic.status == "关") {}else {info.iconPath = "/pages/images/markers_icon5.png"}// 添加对象到数组markers.push(info)}console.log(markers)// 执行setData, 对markers进行赋值, 之后在 .wxml中引用that.setData({markers: markers})},fail: function() {// fail},complete: function() {// complete}})},// 地图相关动作的几个方法regionchange(e) {console.log(e.type)},// markers的点击事件markertap(e) {// 点击相应的坐标点取出相应的信息console.log(dataArray[e.markerId])console.log(e.markerId)},// control的点击事件controltap(e) {console.log(e.controlId)},
})

.json文件页面配置

{"navigationBarTitleText": "logs"
}

.wxml文件页面UI

<map id="map" longitude="121.5128895" latitude="31.237524" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 578px;">
</map>

.wxss 配置位置

这篇没有使用这个文件, 因为基于地图操作

今天这篇大致布局了一个如下如所示的界面

Good! 工作流程不太明白的可以评论, 我能解答的一定抽空回答!

微信小程序地图开发入门(一)相关推荐

【微信小程序】开发入门篇（二）
前言 ❤️ 所谓信仰,可能就是在人们一无所剩的时候仅有的那种东西 ❤️ [微信小程序]开发入门篇(二) 一.小程序的宿主环境 (1)宿主环境简介 1.1 什么是宿主环境 1.2 小程序的宿主环境 (2 ...
《微信小程序：开发入门及案例详解》—— 3.4 小结
本节书摘来自华章出版社<微信小程序:开发入门及案例详解>一书中的第3章,第3.4节,作者李骏边思,更多章节内容可以访问云栖社区"华章计算机"公众号查看. 3.4 小 ...
【微信小程序】开发入门篇（一）
前言 ❤️ 你可能认为一个人无法改变世界,但我想让你知道,这个世界也无法改变像我这样的人 ❤️ [微信小程序]开发入门篇(一) 一.小程序简介 (1)小程序与普通网页开发的区别二.第一个小程序 (1 ...
微信小程序云开发入门(图文详解)
以下内容是我第一次微信小程序云开发的一次记录,从真正的0基础入门,到基本掌握一些内容. 其中遇到的一些问题,和根据网上的一些资料,整理出来真正可用的,实测可行的源代码. 以下放出我的github源码 ...
微信小程序云开发入门（二）-数据库详解
微信小程序云开发入门(二)-数据库详解接上一篇:微信小程序云开发入门(一) 摘要: 因为微信小程序云数据库有点类似传统的关系型数据库,但又有所不同.所以刚入手的时候会有点困扰,经过一段时间的学习和摸 ...
微信小程序云开发入门（一）
微信小程序云开发入门(一) 摘要:微信小程序云开发是包含了服务器以及数据库的运行环境,而且只需要开发者进行简单的管理,关键是不用服务器进行权限验证,步骤简单不少,非常适合个人开发者和创业者使用.虽然云 ...
微信小程序云开发入门-快速获取手机号
一.前言很多时候,我们需要获取用户的手机号码,一般是由用户自己输入,然后我们需要保证手机号的准确性比较高的话,可能还需要搭配一个验证码的功能来确保一定的准确性.这样实现起来的开发成本以及用户体验感都 ...
微信小程序云开发入门-数据库插入数据（包含批量）
一.前言文章将介绍如何在微信小程序云开发中向云开发数据库插入数据(单条或批量). 写法有好几种,文章将会一一进行对比,看看每种写法之间有何优缺点,如何让代码看起来更优雅. 为了更加贴合实际的开发逻辑 ...
微信小程序云开发入门实践
云开发介绍什么是云开发 2017年微信小程序发布后,一度的开发模式是前端页面使用微信小程序的相关组件,在涉及到后台登录及业务交互的时候,需要使用自建的服务器,后台不管是PHP还是JAVA架构,都需要 ...

微信小程序地图开发入门(一)

.js 进行网络请求, 解析数据, 重新赋值data

.json文件页面配置

.wxml文件页面UI

.wxss 配置位置

微信小程序地图开发入门(一)相关推荐

最新文章

热门文章

微信小程序地图开发入门(一)

.js 进行网络请求, 解析数据, 重新赋值data

.json文件页面配置

.wxml文件 页面UI

.wxss 配置位置

微信小程序地图开发入门(一)相关推荐

最新文章

热门文章

.wxml文件页面UI