项目简介

微信小程序原生开发，后台系统使用destoon，api接口使用thinkphp5.实现了楼盘信息管理，多地区切换，户型展示，地图定位，在线聊天等功能。

重点难点

使用腾讯地图在小程序端实现定位楼盘坐标并显示楼盘附近的学校、医院、交通、超市等信息；原生实现在线洽谈室；小程序端多地区切换；在线预约功能；名片夹功能。

项目预览

项目总结

小程序聊天界面定位到最后一条留言

1. wx.getSystemInfo 获取屏幕高度-聊天框高度即为输入框高度。
2. scroll-view必须设置固定高度。scroll-y="true"才可滚动。
3. scroll-into-view属性值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素

微信地图

1. 常见的集中地图坐标。

   1. gcj02国测局坐标系 腾讯使用
   2. wgs84 GPS坐标
   3. 百度坐标
2. 使用接口在线转换坐标 https://lbs.qq.com/webservice_v1/guide-convert.html

3. 使用步骤

   1. 申请开发者密钥（key）
   2. 开通webserviceAPI服务：控制台 -> key管理 -> 设置（使用该功能的key）-> 勾选webserviceAPI -> 保存
   3. 下载微信小程序JavaScriptSDK
   4. 安全域名设置，在“设置” -> “开发设置”中设置request合法域名，添加https://apis.map.qq.com
4. 小程序后台开通定位权限：设置->第三方设置->第三方平台授权管理 使用插件的话则可以添加插件。

5. QQMapWX核心类

   1. search 地点搜索，搜索周边poi
   2. getSuggestion 获取输入关键字的补充与提示
   3. reverseGeocoder 提供由坐标到坐标所在位置的文字描述的转换。输入坐标返回地理位置信息和附近poi列表
   4. geocode 提供由地址描述到所述位置坐标的转换，与逆地址解析的过程正好相反
   5. direction 提供驾车，步行，骑行，公交的路线规划能力
   6. getCityList 获取全国城市列表数据
   7. getDistrictByCityId 通过城市id返回城市下的区县
   8. calculateDistance 计算一个点到多点的步行、驾车距离

6. reverseGeocoder 使用的坑

   1. poi_options 参数传递的方式：poi_options: 'page_size=5;category=' + _this.data.cate 属性必须是一个字符串 属性名和属性值用=连接，多个属性用;分隔。

   2. coord_type定义坐标系

      1. GPS坐标
      2. sogou经纬度
      3. baidu经纬度
      4. mapbar经纬度
      5. 腾讯、google、高德坐标 默认
      6. soguo墨卡托

7. wx.map自定义地图及设置标记点

   1. markers 传入数组设置标记点

其他

1. wx.makePhoneCall拨打电话
2. wx.addPhoneContact添加手机通讯录联系人
3. wxml动态加载class{{cate==item.catname?'curcate':''}}
4. 列表渲染。理解wx:key="id" 多选框的时候如果排序发生变化，根据这个key来保证选中项不会错乱。
5. css3伪类来添加下划线或者右竖划线