微信小程序学习笔记

微信小程序学习笔记

一·功能实现：将小程序中的变量保存到本地缓存中，以便下次打开小程序时获取改变后的变量值：

data:{
    i:true
}

将data中的 i 变量存储到本地

注意：key的值是唯一的，重复会覆盖原来的值

wx.setStorage({          
    key: 'kettle',     
    data: that.data.i, 
})    

存储的变量可以在不同的js中获取

取出存储在本地的 i 变量

wx.getStorage({           
    key: 'kettle',          
    success: function(res) {      ----->取出变量成功后的回调函数<br>
        that.setData({               
            i:res.data            
        })                           
     },                              
})

二·功能实现：微信小程序打开后自动获取用户的当前位置，并把位置信息显示在页面上

前端变量

{{ location }}

全局变量

data:{                            
location:"山东省济南市历下区"        -->这里最好填写一个地理位置，以便获取失败后仍然有位置信息可以显示
}

onShow:function(){  -->onshow函数页面显示时自动加载        
// 获取定位城市                       
var that = this                 
wx.getLocation({       -->wx.getLocation函数是微信自带的获取用户当前位置经纬度的函数
    type: 'wgs84',                  
    success: function (res) {           
        var latitude = res.latitude    
        var longitude = res.longitude   
        var speed = res.speed         
        var accuracy = res.accuracy   
    //将经纬度加到请求中，向百度地图发送请求，注意ak值是在百度地图开放平台注册账号创建应用后给提供的，是唯一的，看下图


        wx.request({        
            url: 'http://api.map.baidu.com/geocoder/v2/?ak=ak值&location=' + 
             res.latitude + ',' + res.longitude + '&output=json',         
            data: {},            
            header: { 'Content-Type': 'application/json' },        
            //成功后的回调函数，返回的ops.data.result.addressComponent包含当前位置的详细信息，依次取出后赋值给address
            success: function (ops) {          
                var address = ops.data.result.addressComponent.province + ops.data.result.addressComponent.city +
                ops.data.result.addressComponent.district + ops.data.result.addressComponent.street
            //修改全局变量location的值,注意这里要用that，用this会提示success回调函数中没有this方法
                that.setData({          
                    location:address        
                })                              
            },                        
            fail: function (resq) {   
                wx.showModal({          
                    title: '信息提示',    
                    content: '请求失败',  
                    showCancel: false,    
                    confirmColor: '#f37938'  
                });                      
            },                        
            complete: function () {   
            }                          
         })                         
    }                           
})                               
}