微信小程序+Vant-weapp搭配图表、地图的环境搭建和基本使用

环境准备

项目初始化配置

• 在本地设置中，关闭域名的校验，因为微信小程序要想上线访问的端口只能为https协议的，但在开发可以设置。
  

• 删除无用代码和文件

  1. 删除 page->log页面
  2. 将page->Index的页面无用代码全部删除

  // index.js
  Page({
    data: {
    },
    onLoad() {
   
    },
    login(){
      console.log('点击');
  
    }
  })
  
  

  3. 删除 utils->util.js
  4. 将app.js无用代码进行删除

  App({
    onLaunch() {
    }
  })
  

  5. 将app.json中配置的log页面进行删除

• 封装请求
  在utils下创建一个js文件，名字可以叫做 request.js，然后复制以下已经封装好的代码

  // 同时发送异步请求的次数
  let ajaxTimes = 0;
  export const request = (params) => {
    ajaxTimes ++;
    wx.showLoading({
      title: '加载中',
      mask: true
    })
    
    // 后台的请求地址，记得修改成你自己的地址
    const baseUrl = 'http://localhost:8888';
    
    return new Promise((resolve, reject) => {
      wx.request({
        ...params,
        url: baseUrl + params.url,
        success: (result) => {
          resolve(result.data);
        },
        fail: (err) => {
          reject(err);
        },
        complete: () => {
          ajaxTimes --;
          if(ajaxTimes === 0) {  // 所有请求都完成后再关闭提示
            wx.hideLoading();
          }
        },
      })
    })
  }
  

  这时可能会报错 ：小程序 已被代码依赖分析忽略，无法被其他模块引用。你可根据控制台中的【代码依赖分析】告警信息修改代码，或 关闭【过滤无依赖文件】功能

  只需要将这两个配置粘贴到 project.config.json =>setting里面

  "ignoreDevUnusedFiles": false,
  "ignoreUploadUnusedFiles": false,
  

  然后这样去导入和使用 例如
  

• 配置tabbar和全局的样式 在app.json (没有创建页面无需配置)，例如在这里我又创建了一个my的页面
  
  
  

  "tabBar": {
      "list": [{
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "imgs/home_no.png",
        "selectedIconPath": "imgs/home_yes.png"
      },
      {
        "pagePath": "pages/login/login",
        "text": "我的",
        "iconPath": "imgs/me_no.png",
        "selectedIconPath": "imgs/me_yes.png"
      }
    ]
    }
  

---

下载使用Vant

官网链接https://vant-contrib.gitee.io/vant-weapp/0.x/#/quickstart

• 在微信小程序初始项目创建完成后，来到项目根路径所在目录，打开终端 使用命令 npm init -y 构建一个webpack初始化项目
• 再输入 npm i vant-weapp -S --production进行下载
• 选择工具栏中的构建npm
  
  到这里vant的下载就完成了，但使用每一个组件前，都要去app.json（全局有效）或要所在页面中的index.json（只在此页面有效）中进行引入
  比如，要在全局中引入一个vant按钮组件，在官网中就会提示怎样引入
  
  这么直接引入可能会报文件找不到的错误!!!

解决方法1：模拟在官方文档中 快速上手部分按钮的引入方式，将按钮替换为对应的组件
* 例如 我想引入一个输入框，查看官网知道输入框的单词为 field，所以参照按钮推断出输入的引入方式为

使用可以直接复制官网在对应的页面

解决方式二：自己去定义路径
还是引入输入框，可以使用

根据编译器提示一步步找到对应位置

复制后放入这个位置

然后在小程序页面中复制对应组件的标签以及样式即可

• 去掉app.json中的 "style": "v2", 因为v2版本的样式可能会覆盖掉组件原本的样式

---

引入wxcharts

• 下载其js包，然后导入js包 地址 https://github.com/xiaolin3303/wx-charts/tree/master/dist

• 将下载的文件放入 utlis,可命名为 wxcharts.js

引入高德地图

注意高德地图微信小程序的key与web页面的key不能混用，需要有一个单独用于小程序的key ，这个key还没有秘钥

• 去高德地图官网下载高德地图的js包，https://lbs.amap.com/api/wx/download，将其解压后得到一个amap-wx.130.js 可放入utils包中

• 同wxchart一样，在所需的页面中，将其js包引入
  

• 在app.json中配置授权

  "permission": {
          "scope.userLocation": {
              "desc": "点击确认"
          }
      },
  

  

  <view class="map_container">
    <map class="map" name="" longitude="{{longitude}}" latitude="{{latitude}}" scale="16"  show-location="true" markers="{{markers}}">
    </map>
  </view>
  <view class="map_text">
    <text class="h1">{{textData.name}}</text>
    <text>{{textData.desc}}</text>
  </view>
  

到这里环境的搭建就基本完成了

使用

wxchart使用

1、在wxml中指定盒子 2、在js中创建对象绘制图表显示在盒子中

• 在wxml中指定图表显示的位置以及大小 ，要使用<canvas>标签，标签的id成为图表显示位置标识，class用来在wxss中写入样式，一定要指定大小,否则不会显示

  	<canvas canvas-id="columnCanvas" disable-scroll="true" class="canvas"></canvas>
  

• 在所要引入的页面的js代码中，引入wxchats的js包
  
• 在data中定义图表所需的动态变量，在onShow()中接收请求从后端带回的数据，并给data中变量赋值。在onshow（）方法中开始创建wxCharts对象 ，设置图表数据，具体可以参考这篇文章 https://www.cnblogs.com/xiaobai-y/p/9089157.html 。

总结： 在wxml中指定画布<canvas>->在wxss中指定画布显示的位置，以及大小、样式美化等.->在dara中设置与图表所需的动态数据.->在onLoad()中发送请求获取后端数据，并对data变量进行赋值。->在onShow()中渲染图形，进行显示

高德地图的使用

与上面chart的使用流程相同，值的注意的是地图信息的显示是在wxml标签属性中，js只是获取数据，并对数据进行赋值，而不进行地图渲染

• 在wxml页面中指定地图要显示的信息如位置、长宽、地图中心、标记的点等。在js中创建地图对象，然后调用方法，在成功的回调方法中为wxml中的变量进行赋值，从而显示地图信息

• 定位功能 如果我想要获取当前用户位置并在地图中描绘成一个点

  wxml 在页面中指定地图显示，留出数据的位置
  

  <view class="map_box">
    <map id="navi_map" longitude="{{longitude}}" latitude="{{latitude}}" scale="15" markers="{{markers}}"></map>
  </view>
  

  wxss部分
  
  js的data部分
  
  js的onLoad
  在这里根据不同的地理位置需求调用不同的地图对象api
  

  var myAmap= new amapFile.AMapWX({
      key:'353e57c983700f2d920ca2c709013cbe'
    })
    myAmap.getRegeo({
      success:(data)=>{
        this.setData({
          latitude:data[0].latitude,
          longitude:data[0].longitude
        })
        var marker={}
        marker.latitude=data[0].latitude,
        marker.longitude=data[0].longitude,
        marker.id=data[0].id,
        marker.width=23,
        marker.height=33
        var markArr=[]
        
        markArr.push(marker)
        this.setData({
          markers:markArr
        })
      },
      fail:()=>{
        console.log('获取地理位置坐标失败');
      }
    })
  

  上面函数的输出结果 ，data中显示的数据，数据非常的多！
  
  效果：
  

• 关键词搜索功能
  在js中传递搜索的关键词querykeywords，调用 地图对象的getPoiAround方法，在回调中会显示附近的点信息
  

• 给点绑定点击事件

在map标签中 添加属性 bindmarkertap="绑定的函数名xxx" ，在js中此函数的参数中会传递该点的id序号，然后在保存点的数组中通过id序号即可找到点的信息、对象等。实现对点的修改

vant Weapp的使用

列举一下我再使用时遇到的问题

• 引入样式不能够按照组件给定的引入方式，可能会出现找不到组件置
  

• 主要按钮在官网是蓝色，但在微信中是绿色

• 按钮组件无法指定样式 ，无论使用行内样式还是类都是无效的
  
  我的解决方式是 ，直接查看组件对的样式类，在类中进行改写改写
  

• 官网给的 Filed输入框需要通过bind:change然后在绑定的函数中event.detail获取输入框的值，每一个数数据框都要有一个对应事件
  也可以通过这种方式实现 model:value="{{ xxx }}"，即在value变量前添加model

笔记

• 要想实现页面动态标题设置，可以在其页面的onShow（）方法中 调用wx的api设置

onShow() {
        wx.setNavigationBarTitle({
            title: "个人中心"
        })  
    },

• tabBar页面的跳转 与 普通页面的跳转方式不同

tabBar的路由方式跳转
  wx.switchTab({
    url: '../xxx/xxx'
})

普通页面的路由跳转
 wx.navigateTo({
    url: '../xxx/xxxx',
})

• 小程序的提示可以使用 wx.showToast()

 wx.showToast({
      title: '请先登录',
      icon: 'error'/'success'/'loading'/不写（即只定时显示文字）
    })
    还可以在对象中指定延迟 duration  默认延迟1500

• 小程序设置data中的变量方式
  与react类似。需要使用wx.setData({data属性变量：xxx}) 方法
  
  对于对象形式的赋值，需要使用[‘a.b’]包裹

• 怎样将开发的程序分享给别人体验？

  • 首先 在创建项目时不能使用测试号开发，要使用自己注册的APPID，这样才会使用自己的账号登录进行后台管理。微信小程勋后台管理网址 https://mp.weixin.qq.com/，在登录时要选择自己appId的小程序
  • 开到这里，如果小程序没有点击上传，这里不会有任何版本
    

• 上传自己的小程序到开发管理平台，形成一个版本
  
  然后在管理平台就会看到
  

• 选择体验，然后添加体验人员的微信号码，将微信小程序体验版二维码发送给已经设定的体验人员，体验人员扫码就可使用，且码不过期
  注意一定要设定体验人员，其他人员无法扫码