学习笔记3

一、掌握地图定位功能

.wxml

<view style='width:100%;height:100%'>

  <map longitude="{{longitude}}" latitude="{{latitude}}" scale="13" markers="{{markers}}" style='width:100%;height:100%'></map>

</view>

 

 

.js

// pages/classify/classify.js

Page({

  data: {

    markers: [{ // 绘制浮标，传入JSON支持多个

      latitude: 23.099994, // 经度

      longitude: 113.324520, //纬度

      width: 50, // 浮标宽度

      height: 50 // 浮标高度

    }],

  },

  onLoad: function () {

    console.log(this)

  },

  onReady: function () {

    // console.log(this)

    var _this = this;

    wx.getLocation({

      success:function(res){

        console.log(res);

        _this.setData({

          longitude: res.longitude,

          latitude: res.latitude,

          markers: [{

            latitude: res.latitude,

            longitude: res.longitude

          }]

        })

      }

 

      })

    

  }

})

 

 

二、获取用户个人信息和手机信息

.js

//sort.js

//獲取應用實例

var app = getApp

Page({

 

  /**

   * 页面的初始数据

   */

  data: {

    //用户个人信息

    userInfo: {

      avatarUrl: "",//用户头像

      nickName: "",//用户昵称

    },

        mobileModel: '',

        mobileePixelRatio: '',

        windowWidth: '',

        windowHeight: '',

        language: '',

        version: ''

  },

 

  /**

   *点击添加地址事件

   */

  add_address_fun: function () {

    wx.navigateTo({

      url: 'add_address/add_address',

    })

  },

 

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

    var that = this;

    /**

     * 获取用户信息

     */

    wx.getUserInfo({

      success: function (res) {

        console.log(res);

        var avatarUrl = 'userInfo.avatarUrl';

        var nickName = 'userInfo.nickName';

        that.setData({

          [avatarUrl]: res.userInfo.avatarUrl,

          [nickName]: res.userInfo.nickName,

        })

      }

    })

    var that = this;

    wx.getSystemInfo({

      success: function (res) {

        that.setData({

          mobileModel: res.model,

          mobileePixelRatio: res.pixelRatio,

          windowWidth: res.windowWidth,

          windowHeight: res.windowHeight,

          language: res.language,

          version: res.version

        })

      }

    })

  },

 

  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady: function () {

 

  },

 

  /**

   * 生命周期函数--监听页面显示

   */

  onShow: function () {

 

  },

 

  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide: function () {

 

  },

 

  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload: function () {

 

  },

 

  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh: function () {

 

  },

 

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom: function () {

 

  },

 

  /**

   * 用户点击右上角分享

   */

  onShareAppMessage: function () {

 

  }

})

 

 

.json

{

  "usingComponents": {},

  "backgroundTextStyle": "dark",

  "navigationBarBackgroundColor": "#ffffff",

  "navigationBarTitleText": "用户信息",

  "navigationBarTextStyle": "black",

  "backgroundColor": "#FFFFFF"

}

 

 

.wxml

<!--pages/mine/mine.wxml-->

<view>

  <view>

    <image class="avatar" src='{{userInfo.avatarUrl}}' style='width:50px;height:50px'></image>

    <view class="nickname">{{ userInfo.nickName }}</view>

  </view>

</view>

<text>

 

手机型号：{{mobileModel}}

手机像素比：{{mobileePixelRatio}}

窗口宽度：{{windowWidth}}

窗口高度：{{windowHeight}}

微信设置的语言：{{language}}

微信版本号：{{version}}</text>