微信小程序学习笔记

Keys

云数据库查询

获取不到数据

  • 云数据库get出来是空数组，一般是因为没有打开权限，修改为”所有用户可读即可”。

image.png

  • where条件查询要添加查询的索引，如果传入的是undefined会获取该数据集合的全部记录
  • 调试！调试！调试！，如果获取到undefined注意多调试，可能是对象属性的问题，例如一般返回res，而res下还有一层data,因此获取想要的字段数据一般是res.data[0].[字段名]

异步同步问题

特别是数据库的请求是异步的这个千万注意。

解决办法：网上大致用Promise 我也没有自己研究，我的解决办法是涉及到数据库的写成一个函数然后调用函数的时候设置2秒延时执行。

1
2
3
setTimeout(()=>
          //调用数据库
          ,2000)

请求数据限制

云数据库请求记录数据有20段的限制(偶然发现获取到的数据少了一些才查到这个规则)，建议把多的数据打包成数组放在一个字段里。

网上有分页方法还没学会，但是显然是提前打包好数据更为省事。

数组值传递的时候变字符串

在查bug的时候发现数组totalIncomeKeep=[ , , ]在经过options传值后变成了totalIncomeKeep= , , ,，查了一下是字符串类型。刚开始尝试 JSON.parse()但是发现他是把将数组字符串转为数组对象。

​ 应该使用totalIncomeKeep.split(",")，传过来的字符串就是按“，”分割的，这是直接用str.split(",")就成了！

实用组件模板

1.返回前页

1
2
3
4
wx.navigateBack({
	delta:4//delta值就是往前返回几页
})

2.输入框+滑动两种输入数值方式

​ input和text同行,同时滑动块根据输入框动态改变，当输入值小于滑动范围时会提示过小(大)。

image-20220816220009337

wxml

1
2
3
4
5
6
7
8
9
10
<view wx:if='{{!changeStatus}}' class="view-contain-ti">
  <!-- 设置面积 -->
  <!-- <text class="text-ti">设置民宿面积</text> -->
  <view style="display:flex;align-items:center">
    <text>设置民宿面积(平方米):</text><input class="inputl" bindinput="usernameInput" placeholder="输入5-500的数字" value="{{inputValue}}"/>
  </view>
  <view class="intro">
    <slider bindchange="sliderchange" min="{{minValue}}" max="{{maxValue}}" block-size="20" value="{{areaValue}}" show-value />
  </view>
</view>

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
//实时获取数据
   usernameInput: function (e) {
       let value = this.validateNumber(e.detail.value);
       if(value<=500&&value>=5){
           this.setData({
               areaValue: value
           })
       }else if(value<5){
           wx.showToast({
               title: "面积设置过小！", // 提示的内容
               icon: "none", // 图标，默认success
               image: "", // 自定义图标的本地路径，image 的优先级高于 icon
               duration: 700, // 提示的延迟时间，默认1500
               mask: false, // 是否显示透明蒙层，防止触摸穿透
       })
           this.setData({
               areaValue: 5
           })
       }else if(value>500){
           wx.showToast({
               title: "面积设置过大！", // 提示的内容
               icon: "none", // 图标，默认success
               image: "", // 自定义图标的本地路径，image 的优先级高于 icon
               duration: 700, // 提示的延迟时间，默认1500
               mask: false, // 是否显示透明蒙层，防止触摸穿透
       })
           this.setData({
               areaValue: 500
           })
       }else{
           this.setData({
               areaValue: 5,
               inputValue:''
           })
       }

   },
   //数字限制
   validateNumber(val) {
       return val.replace(/\D/g, '')
   },
    /**
    * slider滑动监听事件,滑动选择面积大小
    */
   sliderchange: function (e) {
       this.setData({
           textValue: '设置民宿面积:' + e.detail.value + ' 平方米',
           areaValue: e.detail.value,
           inputValue:e.detail.value
       })
       console.log(`当前值`, this.data.areaValue)
   },

3.自定义弹窗

​ 通过wx:if控制view的显隐实现弹窗效果，可以关注一下wxss的相关样式

wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<view wx:if='{{showModal}}'> 
 <view class='mask_layer' bindtap='modal_click_Hidden' />
 <view class='modal_box'>
  <view class="title">标题</view>
  <view class='content'>
<!-- 弹窗内容-->
   <text class='modalMsg'></text>
  </view>
  <view class='btn1'>
   <view bindtap='modal_click_Hidden' class='cancel'>取消</view>
   <view bindtap='Sure' class='Sure'>确定</view>
  </view>
 </view>
</view>

wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
.mask_layer {
 width: 100%;
 height: 100%;
 position: fixed;
 z-index: 999;
 left:0;top:0;
 background: #000;
 opacity: 0.5;
 overflow: hidden;
}

.modal_box {
 width: 76%;
 overflow: hidden;
 position: fixed;
 top: 50%;
 left: 0;
 z-index: 1001;
 background: #fafafa;
 margin: -150px 12% 0 12%;
 border-radius: 3px;
}
.title {
 padding: 15px;
 text-align: center;
 background-color: gazure;
}
.content {
 overflow-y: scroll; /*超出父盒子高度可滚动*/
}
.input_show1{
  margin: 0 auto;
  width: 80%;
  margin-left: 10%;
  font-size: 32rpx;
  text-align: center;
 }

.btn1 {
 width: 100%;
 margin-top: 65rpx;
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 box-sizing: border-box;
 background-color: white;
}
.cancel {
 width: 100%;
 padding: 10px;
 text-align: center;
 color: black;
}
.Sure {
 width: 100%;
 padding: 10px;
 color: #44b549;
 background-color: white;
 border-left: 1px solid #d0d0d0;
 text-align: center;
}
.modalMsg {
 text-align: center;
 margin-top: 45rpx;
 display: block;
}

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
showCancelOrder: function() {
  this.setData({
   showModal:true
  })
 },
   //取消
 modal_click_Hidden: function () {
  this.setData({
   showModal: false,
  })
 },
 // 确定
 Sure: function () {

 },

4.数据可视化

点击后显示坐标点的信息

image-20220817224609612

​ 下载echarts的微信小程序版本：echarts-for-weixin ，地址在：https://github.com/ecomfe/echarts-for-weixin，下载后解压，只需要其中的ec-canvas文件夹。

​ 在需要引用echarts的页面json文件中，添加echarts引用（注意echarts的相对路径）：

1
2
3
4
5
6
{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  },
  "navigationBarTitleText": "详情"
}

​ 在需要引用echarts的js文件中，引入echars.js：

1
import * as echarts from '../../ec-canvas/echarts';

wxml

1
2
3
4
5
<!--wxml-->
<view class="echart_panel">
    <ec-canvas id="mychart" canvas-id="mychart-line" ec="{{ ec }}" ></ec-canvas>
</view>

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!--js-->
//在外部
import * as echarts from '../../components/ec-canvas/echarts';
const app = getApp();
let chart;

//在Page

onLoad:function(){
    this.initChart();
}

/**设置图表映射 */
    initChart: function (xData, yData) {
        this.ecComponent = this.selectComponent('#mychart');
        var that = this;
        var option = {
            grid: {
                containLabel: true
            },
            tooltip: {//重写图表提示内容
                show: true,
                trigger: 'axis',
                position: ['50%', '30%'],
                formatter: function (params) {
                    return params[0].axisValue + ': ' + params[0].data + '元'
                }
            },
            xAxis: {
                type: 'category',
                name:'时间',
                data: xData,//异步请求的数据
                nameTextStyle: {
                    fontSize: 10
                },
                splitLine: {
                    show: true
                }
            },
            yAxis: {
                type: 'value',
                title: '收益',
                name:'元',
                axisLabel: {
                    formatter: function (p) {//重写y坐标数值单位
                        return p;
                    }
                },
                nameTextStyle: {
                    fontSize: 15
                }
            },
            series: [{
                name: '总收益',
                data: yData,//异步请求的数据
                type: 'line',
                label: {
                    show: true
                }
            }],
            dataPointShape: true, //是否在图标上显示数据点标志
        };
        //echarts会继承父元素的宽高,所以我们一定要设置echarts组件父元素的高度。
        var myChart = that.ecComponent.init((canvas, width, height) => {
            const chart = echarts.init(canvas, null, {
                width: width,
                height: height,
            });
            //此处为折线图的点击事件，点击展示折点信息
            chart.on('click', function (handler, context) {
                var handlerValue = handler.name + ' :  ' + handler.value+'元'
                wx.showToast({
                    title: handlerValue,
                    icon: 'none',
                    duration: 1200,
                    mask: true
                })
            });
            //给echarts 设置数据及配置项（图表类型、数据量等）
            chart.setOption(option);
            return chart;
        });

    },

wxss

1
2
3
4
5
<!-- wxss -->
.echart_panel {
    width: 100%;
    height: 700rpx;
  }

5.循环渲染多选框同时根据条件显示样式

​ 设定的样式至少有五种，根据选项设定的权重来显示不同的样式（大于两种）。只在网上查到了运用三目运算符，没有多想，误以为只能设置两种。后来想到可以嵌套。！

image-20220818131332986

wxml

1
2
3
4
5
6
7
8
9
10
11
12
<view class="every_tab">
      <checkbox-group bindchange="checkboxChange3" class="select">
          <!-- 循环时外层是items 内层的单个对象是item-->
        <label class="cell" wx:for="{{items}}" wx:if="{{index>78}}" wx:key="value">
            <!-- 三目运算符嵌套 根据items数组内对象的weight属性条件来显示样式-->
          <view class="{{item.weight==1?'weight1':(item.weight==2?'weight2':(item.weight==3?'weight3':(item.weight==4?'weight4':'weight5')))}}">
            {{item.name}}
            <checkbox value="{{item.value}}" checked="{{item.checked}}" />
          </view>
        </label>
      </checkbox-group>
    </view>

wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.weigth1{
  color: black;
}
.weight2{
  color: green;
}
.weight3{
  color: aqua;
}
.weight3{
  color: blue;
}
.weight4{
  color: blueviolet;
}
.weight5{
  color: purple;
}

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
data:{
     items: [
            { value: '1', weight: 1, name: '床品每客一换' },
            { value: '2', weight: 1, name: '行李寄存' },
            { value: '3', weight: 2, name: '自助入住' },
            { value: '4', weight: 2, name: '保安' },
            { value: '5', weight: 3, name: '管家式服务' },
            { value: '6', weight: 4, name: '床品一天一换' },
},
    /*设施多选框 */
    checkboxChange(e) {
        console.log('checkbox发生change事件，携带value值为：', e.detail.value)
        const items = this.data.items
        const values = e.detail.value
        for (let i = 0, lenI = 6; i < lenI; ++i) {
            items[i].checked = false
            for (let j = 0, lenJ = values.length; j < lenJ; ++j) {//遍历
                if (items[i].value === values[j]) {
                    items[i].checked = true;
                    break;
                }
            }
        }
        this.setData({
            items
            
        })
   },

6.进度条

属性 类型 默认值 必填 说明
percent number 否 百分比0~100
show-info boolean false 否 在进度条右侧显示百分比

image-20220824003057165

wxml

1
2
3
4
<view class="progress-box">
    <text >进度：</text>
    <progress percent="{{persent}}" show-info stroke-width="3" />
</view>

wxss

1
2
3
4
.progress-box{
    width:85%;
    margin-left:70rpx;
}

7.搜索框

首页的搜索框，点击后进入搜索页面

image-20220824113910534.png

image-20220824113842731.png

Searchinput组件

首先在components文件下准备一个Searchinput组件

Searchinput.wxml

1
2
3
4
5
<view class="search_input">
    <navigator url="/pages/search/index" open-type="navigate" class="Searchinput_navigator">
        <text >搜索</text>
    </navigator>
</view>

Searchinput.wxss

1
2
3
4
5
6
7
8
9
.search_input .Searchinput_navigator {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  border-radius: 50rpx; 
  color: #666;
}

Searchinput.js

不需要修改

然后再添加一个search界面

search界面

search.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<view class="page">
  <view class="page__bd">
    <view class="weui-search-bar">
      <view class="weui-search-bar__form">
        <view class="weui-search-bar__box">
          <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
          <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />
          <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
            <icon type="clear" size="14"></icon>
          </view>
        </view>
        <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
          <icon class="weui-icon-search" type="search" size="14"></icon>
          <view class="weui-search-bar__text">搜索</view>
        </label>
      </view>
      <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
    </view>
    <view class="weui-cells searchbar-result" wx:if="{{inputVal.length > 0}}" wx:for="{{search_list1}}" wx:key="dessay_id">
      <navigator url="/pages/essays_detail/index?essay_id={{item.dessay_id}}" class="weui-cell" hover-class="weui-cell_active">
        <view class="weui-cell__bd">
          <view>{{item.dessay_title}}</view>
        </view>
      </navigator>
    </view>
  </view>
</view>

search.wxss

​ 这里需要添加weui，可以上网上(或者到仓库里)找然后修改文件路径

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/**
* Tencent is pleased to support the open source community by making
* WeUI-WXSS available.
* 
* Copyright (C) 2017 THL A29 Limited, a Tencent company.
* All rights reserved.
* 
* Licensed under the MIT License (the "License"); you may not use
* this file except in compliance with the License. You may obtain a copy of
* the License at
* 
*       http://opensource.org/licenses/MIT
* 
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

@import "base/reset.wxss";

@import "widget/weui-cell/weui-cell.wxss";

@import "./widget/weui-searchbar/weui-searchbar.wxss";
page {
  background-color: white;
  padding: 20rpx;
}
.search_row {
  height: 60rpx;
  display: flex;
}
.search_row input {
  background-color: #dedede;
  flex: 1;
  height: 100%;
  padding-left: 30rpx;
}
.search_row button {
  background-color: white;
  width: 100rpx;
  height: 100%;
  font-size: 28rpx; 
  padding: 0;
  margin: 0 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search_content {
  margin-top: 30rpx;
}
.search_content .search_item {
  background-color: white;
  font-size: 26rpx;
  padding: 15rpx 10rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

search.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
Page({

    /**
     * 页面的初始数据
     */
    data: {
      inputVal: '',
      inputShowed: false,
      search_list1: [],
    },
    showInput: function () {
      this.setData({
        inputShowed: true
      });
    },
    hideInput: function () {
      this.setData({
        inputVal: "",
        inputShowed: false
      });
    },
    clearInput: function () {
      this.setData({
        inputVal: ""
      });
    },
    inputTyping: function (e) {
      this.setData({
        inputVal: e.detail.value
      });
      //连接数据库
      const db = wx.cloud.database()
      var that = this
      db.collection('essays_detail').where({
        //使用正则查询，实现对搜索的模糊查询
        dessay_title: db.RegExp({
          regexp: e.detail.value,
          //从搜索栏中获取的value作为规则进行匹配。
          options: 'i',
          //大小写不区分
        }),
        
      }).limit(10).get({
        success: res => {
          that.setData({
            search_list1: res.data
          })
        }
      })
    }
    })

8.分类栏

image-20220824115856124.png

在component文件夹下准备Cater组件：

Cater.wxml

1
2
3
4
5
6
7
<view>
<scroll-view class="tab-list" scroll-x scroll-with-animation>
<view wx:for="{{tabs}}" wx:key="id" class="tab-item {{item.isActive ? 'active':''}}" 
    data-index="{{index}}" bindtap="handleItemTap">{{item.name}}</view>
</scroll-view>
<slot></slot>    
</view>

Cater.wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.tab-list {
  width: 100%;
  height: 88rpx;
  border-bottom: 1rpx solid #e5e5e5;
  display: inline-block;
  white-space: nowrap;
   
  }
   
  .tab-item {
  width: 188rpx;
  height: 85rpx;
  display: inline-block;
  line-height: 85rpx;
  vertical-align: middle;
  text-align: center;
  }
   
  .active {
  color: red;
  border-bottom: 5rpx solid red;
  }

Cater.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
Component({
    properties:{
      tabs:{
        type:Array,
        value:[]
      }
    },
    data: { 
        
    }, 
    //组件.js存放事件回到函数在methods中
    methods:{  
      handleItemTap(e){
        /* 1  
        1 绑定点击事件 
        2 获取被点击的索引
        3 获取原数组
        4 对数组循环 
          1 给每一个循环性 选中属性 改为 false 
          2 给 当前的索引的 项添加激活选中效果就可以了
        */ 
        // 2 获取索引 
        const {index}=e.currentTarget.dataset; 
        // 传递事件给父组件
        this.triggerEvent("itemChange",{index});
        // 3 获取data中的数组
        // 解构 对 复杂类型进行结构 复制了一份 变量引用而已
        let {tabs}=this.data;
        // 4 循环数组 
        tabs.forEach((v,i) =>i===index?v.isActive=true:v.isActive=false )
        this.setData({
          tabs
        })
      },
    }
  })

然后在需要添加分类栏的界面：

index.json

先引入Cater组件

1
2
3
4
5
6
7
8
9
10
{
  "usingComponents": {  
    "Cater":"../../components/Cater/Cater"
  },
  "navigationBarTitleText": "首页", 
  "enablePullDownRefresh":true, 
  "onReachBottomDistance":50, 
  "backgroundColor": "#efefef", 
  "backgroundTextStyle": "dark"
}

index.wxml

1
2
3
4
5
<!-- 分类栏 -->
        <Cater tabs="{{tabs}}" binditemChange="handleItemChange"></Cater>
		<!-- 以下根据点击分类呈现相应的内容显示在block中-->
        	<block wx:if="{{tabs[0].isActive}}"></block>
			<block wx:if="{{tabs[1].isActive}}"></block>

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
data: {
    tabs: [{   
      id: 1,
      name: "推荐",
      isActive:true
    }, 
    {
      id: 2,
      name: "文创", 
      isActive:false
    },  
    {
      id: 3,
      name: "时装",
      isActive:false
    }, 
    {
      id: 4,
      name: "节目",
      isActive:false
    }
  ]
  },
handleItemChange(e){
        const {index}=e.detail;
        let {tabs}=this.data;
        // 4 循环数组
        tabs.forEach((v,i) =>i===index?v.isActive=true:v.isActive=false )
        this.setData({
          tabs
        })
  },

9.地图颜色块图例

颜色快图例.png

wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 图例 -->
  <view class="btm_tool"> 
    <view class="tool_item">
    <view class="label1">111</view><view >1级</view>
    </view>
    <view class="tool_item">
    <view class="label2">111</view><view >2级</view>
    </view>
    <view class="tool_item">
    <view class="label3">111</view><view >3级</view>
    </view>
    <view class="tool_item">
    <view class="label4">111</view><view >4级</view>
    </view>
    <view class="tool_item">
    <view class="label5">111</view><view >5级</view>
    </view>
  </view>

wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.btm_tool {
  border-top: 1rpx #ccc;
  position: fixed;
  left: 0;
  bottom: 20rpx;
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  z-index:200;
}
.btm_tool .tool_item {
  flex: 6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  font-size: 20px;
}

10.收藏功能

​ 在文章详情页点击“收藏”，就会在收藏夹”喜爱“界面出现文章的入口。

image-20220824115856124.png

image-20220824115546637.png

image-20220824115827795.png

在需要添加收藏功能的页面：

wxml

1
2
3
4
5
<view class="tool_item">
            <view class="iconfont {{isCollect?'icon-shoucang1':'icon-shoucang'}}" bindtap="handleCollect"></view>
            <view>收藏</view>
</view>

wxss

1
2
3
4
5
6
7
8
9
10
11
.tool_item {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.tool_item .icon-shoucang1 {
  color: orange;
}

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
  data: {
        // 是否被收藏
        isCollect:false,
    },
// 点击收藏图标
    handleCollect(){
      let isCollect=false;
      // 1 获取缓存中的收藏数组
      let collect=wx.getStorageSync("collect")||[];
      // 2 判断文章是否被收藏过
      let index=collect.findIndex(v=>v.dessay_id===this.EssaysInfo.dessay_id)
      // 3 当index!=-1 表示已经收藏过了
      if(index!==-1){
        // 已经收藏过了 在数组中删除
        collect.splice(index,1);
        isCollect=false;
        // 弹窗提示
        wx.showToast({
          title: '取消成功',
          icon: 'success',
          mask: true
        });
      }else{
        // 没有收藏过 添加
        collect.push(this.EssaysInfo);
        isCollect=true;
        // 弹窗提示
        wx.showToast({
          title: '收藏成功',
          icon: 'success',
          mask: true
          
        });
      }
      // 4 把数组存入到缓存中
      wx.setStorageSync("collect",collect);
      // 5 修改data中的属性 isCollect
      this.setData({
        isCollect
      })
    },

然后在收藏夹界面：

wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<view>
    <navigator class="essays_item"
                wx:for="{{collect}}"
                wx:key="essay_id"
                url="/pages/essays_detail/index?essay_id={{item.dessay_id}}">
                    <!-- 左侧图片 -->
                    <view class="essays_img_wrap">
                        <image mode="widthFix" src="{{item.dessay_img}}"/>
                    </view>
                    <!-- 右侧标题 -->
                    <view class="essays_info_wrap">
                        <view class="essays_title">{{item.dessay_title}}</view>
                        <view class="essays_src">{{item.dessay_src}}</view>
                    </view>
    </navigator>
</view>

wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* pages/like/index.wxss */
page {
  background-color: #f3f4f6;
}
.essays_item {
  display: flex;
  border-bottom: 1px solid #ccc;
}
.essays_item .essays_img_wrap {
  width: 70%;
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300rpx;
}
.essays_item .essays_img_wrap image {
  width: 70%;
}
.essays_item .essays_info_wrap {
  flex: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.essays_item .essays_info_wrap .essays_title {
  font-family: cursive;
  font-size: 45rpx;
  font-weight: bold;
  color: #000;
}
.essays_item .essays_info_wrap .essays_src {
  color: #dedede;
}

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// pages/like/index.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        collect:[]
    },
    onShow(){
        const collect= wx.getStorageSync("collect")||[];
        this.setData({
            collect
        });
    }
    
})

图标还需要引入一下

app.wxss

1
@import "./styles/iconfont.wxss";

iconfont.wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@font-face {
  font-family: "iconfont"; /* Project id 3280754 */
  src: url('//at.alicdn.com/t/font_3280754_152au8amv0n.woff2?t=1650717301641') format('woff2'),
       url('//at.alicdn.com/t/font_3280754_152au8amv0n.woff?t=1650717301641') format('woff'),
       url('//at.alicdn.com/t/font_3280754_152au8amv0n.ttf?t=1650717301641') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-shoucang:before {
  content: "\e8b9";
}

.icon-shoucang1:before {
  content: "\e8c6";
}

11.循环渲染板块

image.png

1
2
3
4
5
6
7
8
9
10
<view class="box1" wx:for="{{achievement}}"  wx:key="item">
        <view class="success_img_wrap">
        <image mode="widthFix" src="{{item.img}}"/>
        </view>
        <view class="success_info_wrap" >
            <view class="success_title">
                 {{item.title}}
            </view>
        </view>
    </view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.box1 {
    display: flex;
    border-bottom: 1px solid #ccc;
}

.success_img_wrap {
    width: 60%;
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 250rpx;
}

.success_img_wrap image {
    width: 50%;
}

.success_info_wrap {
    flex: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.success_title {
    font-family: cursive;
    font-size: 40rpx;
    font-weight: bold;
    color: #000;
}

地图相关

获取中心点坐标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//监听拖动地图，拖动结束根据中心点更新页面

 mapChange: function (e) {
  let self = this;
  if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')){
	self.mapCtx.getCenterLocation({
	success: function (res) {
	self.setData({
	nearList:[]，
    latitude: res.latitude,
	longitude: res.longitude,
	})
	self.nearby_search();
	}
  })
 }

微信小程序——打开地图 选择位置 完整功能实现代码(定位，检索周边，可移动选点，可搜索，腾讯地图API)

源码：

CSDN: 微信小程序——打开地图选择位置信息完整功能实现代码(定位，可移动选点，可搜索，腾讯地图API)_微信小程序打开地图标点收藏-HTML5代码类资源-CSDN下载

github: https://github.com/mcky1928/map

效果：

img

wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!--pages/shopMap/shopMap.wxml-->
<!--绑定点击事件-->
<!--绑定输入事件-->
<view wx:if="{{addListShow}}">
<view class="top">
  <view class="back iconfont icon-fanhui" bindtap="back1"></view>
  <view class="search-box {{addListShow?'search-box1':''}}">
    <view class="region" bindtap="chooseCity">{{currentRegion.district}}</view>
    <view class="shu"></view>
    <input bindinput="getsuggest" placeholder="请输入您的店铺地址"></input>
  </view>
</view>
<!--关键词输入提示列表渲染-->
<view class="add-list-box">
<scroll-view class="add-list" scroll-y>
  <view class="add-item" wx:for="{{suggestion}}" wx:key="index">
    <!--绑定回填事件-->
    <view bindtap="backfill" id="{{index}}" data-name="{{item.title}}">
      <!--根据需求渲染相应数据-->
      <!--渲染地址title-->
      <view class="title">{{item.title}}</view>
      <!--渲染详细地址-->
      <view class="add">{{item.addr}}</view>
    </view>
  </view>
</scroll-view>
</view>
</view>
 
 
<view wx:if="{{!addListShow && !chooseCity}}">
<!--地图容器-->
<map id="myMap"
   style="width:100%;height:300px;"
   longitude="{{longitude}}"
   latitude="{{latitude}}" scale="17" bindregionchange="mapChange">
   <cover-view class="top">
      <cover-view class="back" bindtap="back1">
        <cover-image src="../../images/back.png"></cover-image>
      </cover-view>
      <cover-view class="search-box">
        <cover-view class="region" bindtap="chooseCity">{{currentRegion.district}}</cover-view>
        <cover-view class="shu"></cover-view>
        <cover-view class="placeholder" bindtap="showAddList">请输入您的店铺地址</cover-view>
      </cover-view>
   </cover-view>
   <cover-view class="map-prompt">您可拖动地图, 标记店铺准确位置</cover-view>
   <cover-image class="current-site-icon" src="../../images/my_marker.png"></cover-image>
   <cover-view class="reload" bindtap="reload">
      <cover-view class="center1">
        <cover-view class="center2"></cover-view>
      </cover-view>
   </cover-view>
</map>
 
<scroll-view class="near-list" scroll-y>
  <!--绑定回填事件-->
  <view class="near-item" wx:for="{{nearList}}" wx:key="index">
    <view class="current-site iconfont icon-location" wx:if="{{index == selectedId }}"></view>
    <!--根据需求渲染相应数据-->
    <view bindtap="chooseCenter" id="{{index}}" data-name="{{item.title}}">
      <!--渲染地址title-->
      <view class="title {{ index == selectedId?'title1':'' }}">{{item.title}}</view>
      <!--渲染详细地址-->
      <view class="add {{ index == selectedId?'add1':'' }}">{{item.addr}}</view>
    </view>
  </view>
</scroll-view>
<view class="bottom-box">
  <button bindtap="selectedOk">确认地址</button>
</view>
</view>
 
<view class="region-box" wx:if="{{chooseCity}}">
  <view class="region-top">
    <view class="region-back iconfont icon-fanhui" bindtap="back2"></view>
    <view class="title">选择城市</view>
  </view>
  <view class="region-tabs">
    <text class="tab" bindtap="showProvince">{{currentProvince}}</text>
    <text class="tab" bindtap="showCity" wx:if="{{!regionShow.province}}" bindtap="showCity">{{currentCity}}</text>
    <text class="tab" bindtap="showDistrict" wx:if="{{regionShow.district}}" bindtap="showDistrict">{{currentDistrict}}</text>
  </view>
  <scroll-view scroll-y style="height:1050rpx;">
    <view class="region-list" wx:if="{{regionShow.province}}">
      <view class="region-item" wx:for="{{regionData.province}}" wx:key="index">
        <view data-id="{{item.id}}" data-name="{{item.fullname}}" bindtap="selectProvince">
          <text>{{item.fullname}}</text>
        </view>
      </view>
    </view>
    <view class="region-list" wx:if="{{regionShow.city}}">
      <view class="region-item" wx:for="{{regionData.city}}" wx:key="index">
        <view data-id="{{item.id}}" data-name="{{item.fullname}}" bindtap="selectCity">
          <text>{{item.fullname}}</text>
        </view>
      </view>
    </view>
    <view class="region-list" wx:if="{{regionShow.district}}">
      <view class="region-item" wx:for="{{regionData.district}}" wx:key="index">
        <view data-id="{{item.id}}" data-name="{{item.fullname}}" data-latitude="{{item.location.lat}}" data-longitude="{{item.location.lng}}" bindtap="selectDistrict">
          <text>{{item.fullname}}</text>
        </view>
      </view>
    </view>
  </scroll-view>
</view>

wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
/* pages/shopMap/shopMap.wxss */
@import "../../lib/css/iconfont.wxss";
 
.top {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  position: fixed;
  top: 0;
  left: 0;
  padding: 30rpx 20rpx;
  z-index: 999;
  overflow: hidden;
}
.back {
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  color: #666;
  text-align: center;
  background: rgb(255,255,255);
  font-size: 50rpx;
  border-radius: 50%;
  float: left;
}
.back cover-image{
  width: 50rpx;
  height: 50rpx;
  display: inline-block;
  margin-top: 15rpx;
}
.search-box {
  width: 610rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  background: rgb(255,255,255);
  margin-left: 20rpx;
  float: left;
  overflow: hidden;
}
.search-box1 {
  border: 1px solid #ccc;
  border-radius: 10rpx;
  background: #eee;
}
.search-box .region {
  width: 199rpx;
  line-height: 80rpx;
  font-size: 30rpx;
  color: #282828;
  text-align: center;
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-box .shu {
  width: 1rpx;
  height: 80rpx;
  background:#ccc;
  float: left;
}
.search-box input {
  width: 380rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 30rpx;
  color: #282828;
  padding: 10rpx 20rpx;
  box-sizing: border-box;
  float: left;
}
.search-box .placeholder{
  width: 380rpx;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 30rpx;
  color: #ccc;
  padding: 0 20rpx;
  box-sizing: border-box;
  float: left;
}
.add-list-box {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 998;
  padding-top: 150rpx;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
}
.add-list {
  width: 100%;
  height: 1000rpx;
}
.add-item {
  line-height: 40rpx;
  padding: 30rpx 50rpx;
  text-align: left;
  border-top: 1px solid #eee;
}
.add-item .title {
  color: #282828;
  font-size: 32rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.add-item .add {
  color: #707070;
  font-size: 24rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.current-site-icon {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.near-list {
  height: 650rpx;
  padding-bottom: 100rpx;
  box-sizing: border-box;
}
.near-item {
  line-height: 40rpx;
  padding: 30rpx 50rpx 30rpx 90rpx;
  text-align: left;
  border-bottom: 1px solid #eee;
  position: relative;
}
.current-site {
  font-size: 40rpx;
  color: #3095F9;
  position: absolute;
  top: 40rpx;
  left: 30rpx;
}
.near-item .title {
  color: #282828;
  font-size: 32rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.near-item .add {
  color: #707070;
  font-size: 24rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.near-item .title1 {
  color: #3095F9;
}
.near-item .add1 {
  color: #3095F9;
}
.bottom-box {
  width: 100%;
  padding: 20rpx;
  background: #fff;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 88;
  overflow: hidden;
}
.bottom-box button{
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  border: none;
  background: #3095F9;
  color: #fff;
  font-size: 36rpx;
}
 
.region-box {
  width: 100%;
  height: 100%;
  background: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
}
.region-box .region-top {
  position: relative;
  font-size: 40rpx;
  color: #282828;
  font-weight: bold;
  line-height: 100rpx;
  text-align: center;
}
.region-box .region-back {
  width: 80rpx;
  height: 80rpx;
  font-size: 50rpx;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
}
.region-box .region-tabs{
  line-height: 60rpx;
  font-size: 20rpx;
}
.region-tabs .tab {
  min-width: 100rpx;
  max-width: 200rpx;
  line-height: 40rpx;
  font-size: 20rpx;
  color: #3095F9;
  text-align: center;
  border: 1rpx solid #3095F9;
  border-radius: 20rpx;
  display: inline-block;
  margin: 20rpx 0 20rpx 20rpx;
  padding: 3rpx 20rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.region-list .region-item{
  font-size: 30rpx;
  color: #282828;
  line-height: 80rpx;
  padding: 10rpx 30rpx;
  border-top: 1rpx solid #eee;
}
 
.map-prompt {
  width: 420rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 24rpx;
  color: #707070;
  text-align: center;
  background: #fff;
  border-radius: 10rpx;
  box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
  position: absolute;
  bottom: 40rpx;
  left: 50%;
  transform: translate(-50%,0);
}
.reload {
  width: 80rpx;
  height: 80rpx;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 10rpx rgba(0,0,0,0.1);
  position: absolute;
  bottom: 30rpx;
  right: 30rpx;
}
.reload .center1 {
  width: 30rpx;
  height: 30rpx;
  border: 1rpx solid #3095F9;
  border-radius: 50%;
  margin: 24rpx auto;
}
.reload .center2 {
  width: 25rpx;
  height: 25rpx;
  background: #3095F9;
  border-radius: 50%;
  margin: 3rpx auto;
}

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
var QQMapWX = require('../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js');
var qqmapsdk;
Page({
  data: {
    addListShow: false,
    chooseCity: false,
    regionShow: {
      province: false,
      city: false,
      district: true
    },
    regionData: {}, 
    currentRegion: {
      province: '选择城市',
      city: '选择城市',
      district: '选择城市',
    },
    currentProvince: '选择城市',
    currentCity: '选择城市',
    currentDistrict: '选择城市',
    latitude: '',
    longitude: '',
    centerData: {},
    nearList: [],
    suggestion: [],
    selectedId: 0,
    defaultKeyword: '房产小区',
    keyword: ''
  },
  onLoad: function () {
    let self =this;
    self.mapCtx = wx.createMapContext('myMap')
    // 实例化API核心类
    qqmapsdk = new QQMapWX({
      key: 'W57BZ-JDB6X-XPA4H-Z76MI-73FF2-24BT4'
    });
    wx.showLoading({
      title: '加载中'
    });
    //定位
    wx.getLocation({
      type: 'wgs84',
      success(res) {
        //console.log(res)
        const latitude = res.latitude
        const longitude = res.longitude
        const speed = res.speed
        const accuracy = res.accuracy
        //你地址解析
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: latitude,
            longitude: longitude
          },
          success: function (res) {
            //console.log(res)
            self.setData({
              latitude: latitude,
              longitude: longitude,
              currentRegion: res.result.address_component,
              keyword: self.data.defaultKeyword
            })
            // 调用接口
            self.nearby_search();
          },
        });
      },
      fail(err) {
        //console.log(err)
        wx.hideLoading({});
        wx.showToast({
          title: '定位失败',
          icon: 'none',
          duration: 1500
        })
        setTimeout(function () {
          wx.navigateBack({
            delta: 1
          })
        }, 1500)
      }
    })
  },
  onReady: function () {
    
  },
  //监听拖动地图，拖动结束根据中心点更新页面
  mapChange: function (e) {
    let self = this;
    if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')){
      self.mapCtx.getCenterLocation({
        success: function (res) {
          //console.log(res)
          self.setData({
            nearList:[],
            latitude: res.latitude,
            longitude: res.longitude,
          })
          self.nearby_search();
        }
      })
    }
    
  },
  //重新定位
  reload: function () {
    this.onLoad();
  },
  //整理目前选择省市区的省市区列表
  getRegionData: function () {
    let self = this;
    //调用获取城市列表接口
    qqmapsdk.getCityList({
      success: function (res) {//成功后的回调
        //console.log(res)
        let provinceArr = res.result[0];
        let cityArr = [];
        let districtArr = [];
        for (var i = 0; i < provinceArr.length; i++) {
          var name = provinceArr[i].fullname;
          if (self.data.currentRegion.province == name) {
            if (name == '北京市' || name == '天津市' || name == '上海市' || name == '重庆市') {
              cityArr.push(provinceArr[i])
            } else {
              qqmapsdk.getDistrictByCityId({
                // 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
                id: provinceArr[i].id,
                success: function (res) {//成功后的回调
                  //console.log(res);
                  cityArr = res.result[0];
                  self.setData({
                    regionData: {
                      province: provinceArr,
                      city: cityArr,
                      district: districtArr
                    }
                  })
                },
                fail: function (error) {
                  //console.error(error);
                },
                complete: function (res) {
                  //console.log(res);
                }
              });
            }
          }
        }
        for (var i = 0; i < res.result[1].length; i++) {
          var name = res.result[1][i].fullname;
          if (self.data.currentRegion.city == name) {
            qqmapsdk.getDistrictByCityId({
              // 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
              id: res.result[1][i].id,
              success: function (res) {//成功后的回调
                //console.log(res);
                districtArr = res.result[0];
                self.setData({
                  regionData: {
                    province: provinceArr,
                    city: cityArr,
                    district: districtArr
                  }
                })
              },
              fail: function (error) {
                //console.error(error);
              },
              complete: function (res) {
                //console.log(res);
              }
            });
          }
        }
      },
      fail: function (error) {
        //console.error(error);
      },
      complete: function (res) {
        //console.log(res);
      }
    });
  },
  onShow: function () {
    let self = this;
  },
  //地图标记点
  addMarker: function (data) {
    //console.log(data)
    //console.log(data.title)
    var mks = [];
    mks.push({ // 获取返回结果，放到mks数组中
      title: data.title,
      id: data.id, 
      addr: data.addr,
      province: data.province,
      city: data.city,
      district: data.district,
      latitude: data.latitude,
      longitude: data.longitude,
      iconPath: "/images/my_marker.png", //图标路径
      width: 25,
      height: 25
    })
    this.setData({ //设置markers属性，将搜索结果显示在地图中
      markers: mks,
      currentRegion: {
        province: data.province,
        city: data.city,
        district: data.district,
      }
    })
    wx.hideLoading({});
  },
  //点击选择搜索结果
  backfill: function (e) {
    var id = e.currentTarget.id;
    let name = e.currentTarget.dataset.name;
    for (var i = 0; i < this.data.suggestion.length; i++) {
      if (i == id) {
        //console.log(this.data.suggestion[i])
        this.setData({
          centerData: this.data.suggestion[i],
          addListShow: false,
          latitude: this.data.suggestion[i].latitude,
          longitude: this.data.suggestion[i].longitude
        }); 
        this.nearby_search();
        return;
        //console.log(this.data.centerData)
      }
    }
  },
  //点击选择地图下方列表某项
  chooseCenter: function (e) {
    var id = e.currentTarget.id;
    let name = e.currentTarget.dataset.name;
    for (var i = 0; i < this.data.nearList.length; i++) {
      if (i == id) {
        this.setData({
          selectedId: id,
          centerData: this.data.nearList[i],
          latitude: this.data.nearList[i].latitude,
          longitude: this.data.nearList[i].longitude,
        });
        this.addMarker(this.data.nearList[id]);
        return;
        //console.log(this.data.centerData)
      }
    }
  },
  //显示搜索列表
  showAddList: function () {
    this.setData({
      addListShow: true
    })
  },
  // 根据关键词搜索附近位置
  nearby_search: function () {
    var self = this;
    wx.hideLoading();
    wx.showLoading({
      title: '加载中'
    });
    // 调用接口
    qqmapsdk.search({
      keyword: self.data.keyword,  //搜索关键词
      //boundary: 'nearby(' + self.data.latitude + ', ' + self.data.longitude + ', 1000, 16)',
      location: self.data.latitude + ',' + self.data.longitude,
      page_size: 20,
      page_index: 1,
      success: function (res) { //搜索成功后的回调
        //console.log(res.data)
        var sug = [];
        for (var i = 0; i < res.data.length; i++) {
          sug.push({ // 获取返回结果，放到sug数组中
            title: res.data[i].title,
            id: res.data[i].id,
            addr: res.data[i].address,
            province: res.data[i].ad_info.province,
            city: res.data[i].ad_info.city,
            district: res.data[i].ad_info.district,
            latitude: res.data[i].location.lat,
            longitude: res.data[i].location.lng
          });
        }
        self.setData({
          selectedId: 0,
          centerData: sug[0],
          nearList: sug, 
          suggestion: sug
        })
        self.addMarker(sug[0]);
      },
      fail: function (res) {
        //console.log(res);
      },
      complete: function (res) {
        //console.log(res);
      }
    });
  },
  //根据关键词搜索匹配位置
  getsuggest: function (e) {
    var _this = this;
    var keyword = e.detail.value;
    _this.setData({
      addListShow: true
    })
    //调用关键词提示接口
    qqmapsdk.getSuggestion({
      //获取输入框值并设置keyword参数
      keyword: keyword, //用户输入的关键词，可设置固定值,如keyword:'KFC'
      location: _this.data.latitude + ',' + _this.data.longitude,
      page_size: 20,
      page_index: 1,
      //region:'北京', //设置城市名，限制关键词所示的地域范围，非必填参数
      success: function (res) {//搜索成功后的回调
        //console.log(res);
        var sug = [];
        for (var i = 0; i < res.data.length; i++) {
          sug.push({ // 获取返回结果，放到sug数组中
            title: res.data[i].title,
            id: res.data[i].id,
            addr: res.data[i].address,
            province: res.data[i].province,
            city: res.data[i].city,
            district: res.data[i].district,
            latitude: res.data[i].location.lat,
            longitude: res.data[i].location.lng
          });
        }
        _this.setData({ //设置suggestion属性，将关键词搜索结果以列表形式展示
          suggestion: sug,
          nearList: sug,
          keyword: keyword
        });
      },
      fail: function (error) {
        //console.error(error);
      },
      complete: function (res) {
        //console.log(res);
      }
    });
  },
  //打开选择省市区页面
  chooseCity: function () {
    let self = this;
    self.getRegionData();
    self.setData({
      chooseCity: true,
      regionShow: {
        province: false,
        city: false,
        district: true
      },
      currentProvince: self.data.currentRegion.province,
      currentCity: self.data.currentRegion.city,
      currentDistrict: self.data.currentRegion.district,
    })
  },
  //选择省
  showProvince: function () {
    this.setData({
      regionShow: {
        province: true,
        city: false,
        district: false
      }
    })
  },
  //选择城市
  showCity: function () {
    this.setData({
      regionShow: {
        province: false,
        city: true,
        district: false
      }
    })
  },
  //选择地区
  showDistrict: function () {
    this.setData({
      regionShow: {
        province: false,
        city: false,
        district: true
      }
    })
  },
  //选择省之后操作
  selectProvince: function (e) {
    //console.log(e)
    let self = this;
    let id = e.currentTarget.dataset.id;
    let name = e.currentTarget.dataset.name;
    self.setData({
      currentProvince: name,
      currentCity: '请选择城市',
    })
    if (name == '北京市' || name == '天津市' || name == '上海市' || name == '重庆市'){
      var provinceArr = self.data.regionData.province;
      var cityArr = [];
      for (var i = 0; i < provinceArr.length;i++){
        if(provinceArr[i].fullname == name){
          cityArr.push(provinceArr[i])
          self.setData({
            regionData: {
              province: self.data.regionData.province,
              city: cityArr,
              district: self.data.regionData.district
            }
          })
          self.showCity();
          return;
        }
      }
    }else{
      let bj = self.data.regionShow;
      self.getById(id, name, bj)
    }
  },
  //选择城市之后操作
  selectCity: function (e) {
    let self = this;
    let id = e.currentTarget.dataset.id;
    let name = e.currentTarget.dataset.name;
    self.setData({
      currentCity: name,
      currentDistrict: '请选择城市',
    })
    let bj = self.data.regionShow;
    self.getById(id, name, bj)
  },
  //选择区县之后操作
  selectDistrict: function (e) {
    let self = this;
    let id = e.currentTarget.dataset.id;
    let name = e.currentTarget.dataset.name;
    let latitude = e.currentTarget.dataset.latitude;
    let longitude = e.currentTarget.dataset.longitude;
    self.setData({
      currentDistrict: name,
      latitude: latitude,
      longitude: longitude,
      currentRegion: {
        province: self.data.currentProvince,
        city: self.data.currentCity,
        district: name
      }, 
      chooseCity: false,
      keyword: self.data.defaultKeyword
    })
    self.nearby_search();
  },
  //根据选择省市加载市区列表
  getById: function (id,name,bj) {
    let self = this;
    qqmapsdk.getDistrictByCityId({
      // 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
      id: id, //对应接口getCityList返回数据的Id，如：北京是'110000'
      success: function (res) {//成功后的回调
        //console.log(res);
        if(bj.province){
          self.setData({
            regionData: {
              province: self.data.regionData.province,
              city: res.result[0],
              district: self.data.regionData.district
            }
          })
          self.showCity();
        } else if (bj.city) {
          self.setData({
            regionData: {
              province: self.data.regionData.province,
              city: self.data.regionData.city,
              district: res.result[0]
            }
          })
          self.showDistrict();
        } else {
          self.setData({
            chooseCity: false,
          })
        }
      },
      fail: function (error) {
        //console.error(error);
      },
      complete: function (res) {
        //console.log(res);
      }
    });
  },
  //返回上一页或关闭搜索页面
  back1: function () {
    if (this.data.addListShow) {
      this.setData({
        addListShow: false
      })
    }else {
      wx.navigateBack({
        delta: 1
      })
    }
  },
  //关闭选择省市区页面
  back2: function () {
    this.setData({
      chooseCity: false
    })
  },
  //确认选择地址
  selectedOk: function () {
    let pages = getCurrentPages(); //获取当前页面js里面的pages里的所有信息。
    let prevPage = pages[pages.length - 2]; 
    //console.log(this.data.centerData)
    prevPage.setData({
      storeAddress: this.data.centerData.title
    })
    wx.navigateBack({
      delta: 1
    })
  }
})

引用的阿里图标 iconfont.wxss 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
@font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_1120834_hvoztl864h6.eot?t=1554258412999'); /* IE9 */
  src: url('//at.alicdn.com/t/font_1120834_hvoztl864h6.eot?t=1554258412999#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAgQAAsAAAAADnAAAAfAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEIAqOMIwEATYCJAMoCxYABCAFhG0HgRsbZQxRlG9SkOzjMG74SoiyxOJKUQ6m+GaJv3j4fr//rb3Puf7FEE2iUTWqZhKe6QwJGo1EowRIJKYTkmfym3/ctJ8wScURvVFxQm2q0AnUsDdqSBIoEnSiYcrKRJQyE0dmdpyI9Ofv92oXzfKu7buc91//yqZV86fheECRDT6QAB0gzH3LdJLMDLxi+q3XExhtJwJdlIxTAERFeQEpT8yEDiA+uZrSGnpRG3NsFe9Bo8+38D0AvDM/H/9AZSCkpqAHXXs8ygiG/hRvpFGdFFUCiPq0uG5EwQFAvQo/xUo+AuDHu51mzK5eAdakI1vxN0iJp8Wz4py4MD4mfjf+qLOTmNFp8bDG9EAZ67+8Kg06rYZoIX8OKl8HBn4CMULhZ8oIPT/TRgh+Zo1Q+ckZIfkpxOsQjAGpDgRqkGpB0Aj4vtAzqmPWAPuBPAqUbajwksmvUtgK2i/nCnlmmenJyRnJKXwkgcNBUhGELiVJqQ6cXSlIMsI/LqELKyMlRRfk4geiUCymjkSUVFhkXItj0KoAi4hB0agqHFZQOkMkHRQOj78WFm6LjLoZy90etVyxCO+qXYEO1u/e0ajmRjRnR0x6PZK9NWwg8PUXe2GrKLrxxIGp26OVXCJVJeb2ssOUklNECiXdrbyjMdxlFfGMRub71Mq1FEcL5dES+gZsFa9sDYs1gDVWSaUKrOWxKG4rBHR6lgcnrT9TAF2PoAqIy1ULOAI2n61i8ZT7wiOhjrM8pbLFKOhmbATEo1gydithAOr5Cn7DBxyISlQgb2ReNX0cXUQfptfoi5Upu4jFslivLqRmoMWy/PzRjFEQYEpWM5ljBjOVTqxm0LJ8a2l7YkGQ5tzq1y1m5DMYvPYzR3ZcvGnH7NpP7TulmWKsKwepVbweuT24OWKuOkLZVc141Ud8CubgC1hK+j4KZYwPRlXp9oUTQf7o1kQoKRArS9GFw6pAlmpfuBkEIuiM+5TMA9HENH9EydBfD35B5a7HazFjHUEs25M69vr2tIeo3cqkLokTV7fTjarVQTp95VqGchVjtbVrfMRiRYXamfhqn29AYDdFN6wsUUn3BjI0UCPZPcXOsZLqHOz4CJnnczRi2qKr51fQGCiw7yFmq+fDbR+FyyETyEVyIXOppB6efqBjFoyAgBn1PZ0yiCAg2SojcAZC3M0gZJLHtXV8gRjw6FJdnYCfATo7rblkCXxaRzvxW8X6aYs/WzxNg2OBtbA1KtI6rba6umtXIaw17wEGjyrvLx21fWyR3UIwCLNlayoYCFHdudbDSwfqr5BuGp2DBseytA/2Ablhl8MNg8v5DnOtxz7YaKfb+jfJRah0SYMSfnzS1uRJNp7+zAPGYGWwKR1UVOb7pyV++93DQzJ061b//AkP69eu2LZMte0enJH38yulMbh6Zf3OHUdc1CztT78iX+1pP/cptEybqSjf3dcC99HL0MdkRtmylTJRc0W/lt2K8kztstCnlt4ytHj4fHkNrNU395oJddSPKOaVVOlDclHf4E0zPydz1PvkRzXwfHnxcBn6prmXPuu2tvzlhHOV0zqjveWi/k2n2yqDvTn45o+maGwQQIc2c/CtnoF8yrwv/QzEsqP8D1JLEdtWzFp/acT8BW98cnTKxTf/rhnZrNVVw2i0HMesIzt21q9cHTQqR/z0USZSga+6/3J5heAH5ck1k/e6GwOVgVDaOK0SXtKASls89/8v5KIfvp3TPXFXj+VytEoXNUZbe5eM23eCU8YVl+SralR+BLaodg7THLQe1LTRJvKBctEy6zLf04u6/gPJ8WCFunQ0d1/i7MQ+Tb0fSh1Ds69ep6m1a4d6oaG55EBd/4utvUtHr1Br49KHTb37vLXadZp6pYJh8yV6M3kbgWvT1qVnrsvIzMgwmeD3kulwqAOewbSh0HQNZ9yN63gaTJ+Yd3r/gXuUe5Xgj/K1XCX4abQb7VPmBdODJguxPzMHrOOuy85ewAGLZ6amfc9Zm3MXRc/lnJPsXdznHri6wc/yv3s3kQ1Yb/SWk1jIJLZ/82Y/K4NFLgBmfgWYXS5NtCEA5ZTFrDNf0boZyaUCeFxHfoPvbk2V3EIBlMwTRP8Zfu43PoFtx5HtfNhPZbSkDfzfJ/23rPhxp/+3xj6jKiiv72WSIThqEDmn1Q9F2fG7YAIv1TPGS8CXphvGlnGsMK94U7dwXW7i8CRc56LU2YaK3o7SWnkANSYHUat3Bo32k548WeVCE3XAPnMJCksOorTgCyqW3AcAqHyNGut9h1pLQUOjO5F1zsmuMCeOcGE6D2YU6icLzQbSjnOVJ9FKrccIr1Xn8lKmU4W53GaXsEJcHgxJMTvmquMA9wSi0uPBhbiLtAkl5GaY1UoKHS6yDTN4xCaPx9G/rAyPO1BsIG0g0QUuGB2PGmwkpDeZ08yAZIcX90gMfX89DMHLSseVMuqbUwXj4mZeu1AFsfIcpVK+Pdeofcl2m4BQyYNanFB4XUg2Wyg5aTFW5icJOeK3aoMx8BAzlfA69FeGs+F5+eL2hbatTf0TjUFvO0ZGiRpNtNFFH0OMMdm4ButMMZmneEm9WUfat/XaK3ojVtKg85hJe3ejbrLXpCOT2hKNHi8SVlZ0Px+LTDFhdsLpxbrhOrvJa94ErOuiQwEAAAAA') format('woff2'),
  url('//at.alicdn.com/t/font_1120834_hvoztl864h6.woff?t=1554258412999') format('woff'),
  url('//at.alicdn.com/t/font_1120834_hvoztl864h6.ttf?t=1554258412999') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('//at.alicdn.com/t/font_1120834_hvoztl864h6.svg?t=1554258412999#iconfont') format('svg'); /* iOS 4.1- */
}
 
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
.icon-iconfontzhizuobiaozhun16:before {
  content: "\e60f";
}
 
.icon-location:before {
  content: "\e619";
}
 
.icon-dayuhao:before {
  content: "\e600";
}
 
.icon-jizuobiaotu:before {
  content: "\e613";
}
 
.icon-dayuhao1:before {
  content: "\e65c";
}
 
.icon-zuobiao:before {
  content: "\e657";
}
 
.icon-zhengque:before {
  content: "\e64a";
}
 
.icon-fanhui:before {
  content: "\e60d";
}
 
.icon-iconfront-:before {
  content: "\e620";
}

用到的图片

back.png(wxml39行)和my_marker.png(wxml48行)

img img

可参考 WebService API | 腾讯位置服务