初识微信小程序学习

    前段时间闲暇之余看了一下微信小程序，由于第一次接触微信的相关东西，一脸懵的去微信公众号平台注册了下，然后看微信提供的小程序api，等等一系列步骤，上边你需要的基本都有，

微信提供了一个ide在微信公众号平台-开发工具可根据自己需求去下载，其中有个问题就是，他的这个ide有时候不能复制粘贴，不定时出现也不知道为啥，官方说好像是bug，貌似重启ide就行了。

当时想写一个test，其中需要获取：微信头像、名字，个人所在的位置 并在地图上展示出来。

地图展示采用的腾讯地图的sdk，然后你需要腾讯地图平台上去注册一下，然后请一个key，然后你需要他们sdk的那个js迁入到你的项目当中，如下图：

首先看下在微信ide上编译后的最终效果图：

 

weChat.wxml：这个后缀是.wxml貌似就是相当于html页面，还有就是以前获取微信的个人隐私信息貌似需要初始化的时候实例化一个类，然后取，现在不用了，直接用“

<open-data type='userNickName'></open-data> 这样的标签就行了，地图用的是一个map标签，首先获取到你的地理位置，然后传入到他们的sdk中返回然后展示到地图上

<page>
<view class="_userAvatarUrl">
  <view class="userinfo-avatar">
    <open-data  type="userAvatarUrl"></open-data>
  </view>
</view>
<view>
<text>微信用户：</text>
<open-data type='userNickName'></open-data>
</view>
<view>
<text>当前所在位置：</text>
<text>{{NowLocation}}</text>
</view>
<view class="page-section page-section-gap">
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14"  bindcontroltap="controltap" markers="{{markers}}" 
bindmarkertap="markertap" polyline="{{polyline}}" circles="{{circles}}" bindregiοnchange="regionchange" show-location style="width: 100%; height: 300px;">
</map>
<button type='primary' bindtap='selectedClick'>选择位置</button>
</view>
</page>

 weChat.js:

// miniprogram/pages/weChatDemo/weChat.js
var app=getApp()
//腾讯地图sdk
var QQMapWX = require('xxxx.js');
var qqmapsdk;
Page({
  data: {
    NowLocation:"",
    latitude:"",
    longitude:"",
    markers: [],
    circles: [],
     polyline: []
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    var _this=this;
    // 实例化腾讯地图 API核心类
    qqmapsdk = new QQMapWX({
      key: '' //个人申请的key
    }),
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.userLocation']) {
          wx.authorize({
            scope: 'scope.userLocation',
            success() {
             wx.getLocation({
               type: 'gcj02',// 默认为 wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
               success: function(res) {
                 _this.setData({
                   latitude: res.latitude, //纬度
                   longitude: res.longitude, //经度
                   markers:[{
                     id: "1",
                     latitude: res.latitude,
                     longitude: res.longitude,
                   }],
                  /**
                   *  现实圆形
                   circles:[{
                     latitude: res.latitude,
                     longitude: res.longitude,
                     color: '#FF0000DD',
                     fillColor: '#7cb5ec88',
                     radius: 400,
                     strokeWidth: 2
                   }],
                   */
                   polyline: [{
                     points: [{
                       latitude: res.latitude,
                       longitude: res.longitude
                     }, {
                         latitude: res.latitude,
                         longitude: res.longitude
                     }, {
                         latitude: res.latitude,
                         longitude: res.longitude
                     }],
                     color: "#FF0000DD",
                     width: 3,
                     dottedLine: true
                   }],
                   controls: [{
                     id:1,
                     position: {
                       left: 0,
                       top: 300 - 50,
                       width: 50,
                       height: 50
                     },
                     clickable: true
                   }]
                 }),
                 qqmapsdk.reverseGeocoder({
                   location: {
                     latitude: res.latitude, 
                     longitude: res.longitude
                   },
                   success: function (addressRes) {
                     var address = addressRes.result.formatted_addresses.recommend;
                     _this.setData({
                       NowLocation: address
                     })
                   }
                 })
               },
             })
            }
          })
        }
      }
    })
  },

  controltap: function (e) {
    console.log(e.controlId);
  },
  regionchange(e) {
    console.log("regiοnchange===" + e.type)
  },

  //点击merkers
  markertap(e) {
    console.log(e.markerId)

    wx.showActionSheet({
      itemList: ["A"],
      success: function (res) {
        console.log(res.tapIndex)
      },
      fail: function (res) {
        console.log(res.errMsg)
      }
    })
  },

  //点击缩放按钮动态请求数据
  controltap(e) {
    var that = this;
    console.log("scale===" + this.data.scale)
    if (e.controlId === 1) {
      // if (this.data.scale === 13) {
      that.setData({
        scale: --this.data.scale
      })
      // }
    } else {
      //  if (this.data.scale !== 13) {
      that.setData({
        scale: ++this.data.scale
      })
      // }
    }


  },
  /**
   * 当前位置
   */
  locationClick:function(){
   
  },

  selectedClick: function () {
    // 设置权限
    wx.openSetting({
      success: function (res) {
        console.log(res);

        // 选择位置
        wx.chooseLocation({
          success: function (res) {
            console.log(res);

            // 打开位置
            wx.openLocation({
              latitude: res.latitude,
              longitude: res.longitude,
              name: res.name,
              address: res.address,
            })
          },
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.mapCtx = wx.createMapContext('map')
  }

})

 

由于当时忙别的了就没

 

在看过小程序相关的内容了，现回过头在看一下那些代码有的都不知道啥意思了.....当时api中还有很多没学，只看了一点皮毛。

 

转载于:https://www.cnblogs.com/OBprogrammer/p/10683387.html