小程序实践(地图类开发)

1.概念:

首先需要了解的

小程序是什么

小程序能做什么

小程序不能做什么

小程序为什么这么做(参考了什么)

小程序还能怎么做(优化+实用) 

应用场景

2.针对以上问题

产品定位

微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

用途:面向企业和个人

面向个人开发者开放的服务类目,会随着相关政策、法律法规以及平台规定的变化而变化,请开发者以提交时开放的类目为准,本文档仅供参考。

小程序不能做的

不支持http,  17年6月前不支持网页嵌入,目前可通过web-view嵌入

3.小程序架构

架构分为视图层,逻辑层,组件,API几个部分。视图层负责页面结构、样式和数据展示,用wxml、wxss语言编写。逻辑层负责业务逻辑,调用API等,由js编写。视图层和逻辑层类似MVVM模式,逻辑层只需对数据对象更新,就可以改变视图层的数据显示,这个很像vue,不知道底层是不是vue! 组件是视图层封装好的基础组件,如按钮、输入框等!API提供了访问手机设备、网络、服务器、微信平台接口等能力。如下图

小程序实践(地图类开发)

2.开发框架

小程序实践(地图类开发)

4.项目实践

(1).基本使用

基础demo

Wxml

<map 

id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 300px;">

</map>

 

这里 height会导致页面整个高度固定,即使换成100%也会由于父级没有指定而无法铺满,所以最优实践:会去采用查找系统高度的动态载入方式。

2.基础地图代码

// 页面加载
onLoad: function (options) {
// 2.获取并设置当前位置经纬度
var that = this;
village_LBS(that);

// 3.设置地图控件的位置及大小,通过设备宽高定位
wx.getSystemInfo({
success: (res) => {
this.setData({
controls: [{
id: 1,
iconPath: '/images/location.png',
position: {
left: 20,
top: res.windowHeight - 80,
width: 50,
height: 50
},
clickable: true
},
{
id: 2,
iconPath: '/images/camera.png',
position: {
left: res.windowWidth - 70,
top: res.windowHeight - 320,
width: 45,
height: 45
},
clickable: true
},
{
id: 3,
iconPath: '/images/watch.jpg',
position: {
left: res.windowWidth - 70,
top: res.windowHeight - 80,
width: 45,
height: 45
},
clickable: true
},
{
id: 4,
iconPath: '/images/marker.png',
position: {
left: res.windowWidth / 2 - 15,
top: res.windowHeight / 2 - 45,
width: 30,
height: 45
},
clickable: true
},
{
id: 5,
iconPath: '/images/trail.jpg',
position: {
left: res.windowWidth - 68,
top: res.windowHeight - 140,
width: 45,
height: 45
},
clickable: true
},
{
id: 6,
iconPath: '/images/voice.jpg',
position: {
left: res.windowWidth - 68,
top: res.windowHeight - 260,
width: 45,
height: 45
},
clickable: true
},
{
id: 7,
iconPath: '/images/vedio.jpg',
position: {
left: res.windowWidth - 68,
top: res.windowHeight - 200,
width: 45,
height: 45
},
clickable: true
}]
})
}
})
},

...

截图:

小程序实践(地图类开发)

3.前后端交互

function upload(type,task,user,filePath,that){
wx.uploadFile({
url: 'https://www.tehecore.com/mini/app/upload', //仅为示例,非真实的接口地址
filePath: filePath,
name: 'file',
formData: {
'user': user,
'type':type
},
success: function (res) {
console.log(res)
var data = res.data
//do something
}
})
}

注意此处如果测试:

    用http://tehecore.com/mini/app.upload

    开发者工具中可以设置 http访问的方式。(不去验证http)