前端学习

前端学习

@色少6年前

10/22
20:45
前端技能

2019最新个税计算器 / 个税计算器 wepy 开发

色少 撰写 无回复

1、扫一扫

2、效果

        

 

3、官网API：https://developers.weixin.qq.com/miniprogram/dev/api/

4、wepy框架 ：https://tencent.github.io/wepy/

5、开发问题记录

(1)、在开发微信小程序组件框架时，我遇到了一个问题，微信小程序中的button组件有特定的css，背景可以用“background：none”去掉，但是边框再用“border : none”去掉就不可以了，这也是微信小程序与h5的不同之处。

但是在微信小程序中使用:after选择器就可以实现这一功能。

/*使用 button::after{ border: none; } 来去除边框*/

(2)、计算需要各个基数可以从各大城市的社保网站扒下来放进数据库，统一保存利用接口返回计算（不同城市有不同基数，如果没有按照全国返回）

(3)、获取本地location方便了解知道哪个城市返回其基数做统计。用到wepy.getSetting  获取其返回值中只会出现小程序已经向用户请求过的权限。判断是否授权并且获取经纬度，利用腾讯地图接入(定位,位置转经纬度)返回其城市。

(4)、数据请求过慢导致页面闪烁，可以在请求前利用wx.showLoading();加载load,在data里面增加参数控制不显示demo内容（load:true)隐藏页面没加载数据的静态节点。数据返回时调用wx.hideLoading(); 隐藏load图案，并且把data里面的参数设置为（load:false).一次性显示加载好的数据和静态节点。

 

 

 

2019最新个税计算器 / 个税计算器 wepy 开发

@色少6年前

10/22
20:36
前端技能

[微信小程序] 微信小程序经纬度逆解析地理位置

色少 撰写 无回复

因为需要在小程序加个定位并加载对应城市信息

然而小程序自带api目前只能获取经纬度不能逆解析，因此借用腾讯的地图服务做一次解析。

需求：微信小程序获取用户定位信息并加载对应城市信息

技术：wx.getLocation  、腾讯地图小程序api 、 微信小程序经纬度逆解析地理信息

 

首先登陆腾讯地图 点击   webservice  api   选择 逆地址解析(坐标位置描述)  

ps:注册腾讯地图授权key 是最早要做的事情

可以选择调用WebService API  或者    微信小程序JavaScript SDK 2种方式目前调用次数是一样的

 

贴出JavaScript SDK代码：

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
//加载腾讯位置服务js文件（必须）

var qqmap=require('../../utils/qqmap-wx-jssdk.min.js')

//预加载内容
getLocation () {

  //调用腾讯地图sdk 添加腾讯地图key

   var demo = new qqmap({
     key: '*****-SY7PH-*****-*****-*****-SMFTK'
    });
  //加载腾讯位置服务js文件（必须）

    //此声明最好不要写在 wx.getLocation方法内，this指代不同

    var that = this;
    wx.getLocation({
      type: 'gcj02',  //编码方式，
      success: function (res) {
        var latitude = res.latitude   // wx.getLocation 获取当前的地理位置、速度   latitude(维度)  longitude（经度）
        var longitude = res.longitude
        demo.reverseGeocoder({  
                //腾讯地图api 逆解析方法 首先设计经纬度
          location: {
            latitude: res.latitude,
            longitude: res.longitude
          },
　　　　　　　　　　//逆解析成功回调函数
          success: function (res) {
            getApp().globalData.cityname = res.result.address_component.city;   //全局变量存放城市   res.result.address_component.city 获取解析之后地址中的城市 33            
　　　　　　　　　 console.log("onLoad");

　　　　　　　　　　//wx.request 发起网络请求，类似于ajax
            wx.request({
              url: 'https://www.xxxxxxxxxx.com/home/index/xcx_index',  //填写对应服务器地址
              data: {
                // cityid: getApp().globalData.cityid,     //我这里需要提交的参数，这里我是把获取的城市发给后台，然后后台给我对应城市的数据json文件
                cityna: getApp().globalData.cityna,
                district: res.result.address_component.city,
              },
              header: {
                "Content-Type": "applicatiSon/x-www-form-urlencoded"
              },
              method: "POST",
              success: function (res) {
                console.log(res.data.data);  
　　　　　　　　　　　　　　//解析回调函数得到的json文件并一层一层的解析然后数据绑定到页面上
                that.setData({
                  // 轮播图图片
                  imgurls: res.data.data.pics 58                 });
                getApp().globalData.cityid = res.data.data.datacompany.cityid;
                // this.data.pic_array_dq2[e.detail.value].name
              }
            });
　　·　　　　　　　　// 成功后提醒
            wx.showModal({
              title: '定位成功',
              content: '当前城市：' + getApp().globalData.cityname,
            });
           
          },
          fail: function (res) {
　　　　　　　　　　//失败的回调函数
            // console.log(res);
          },
          complete: function (res) {
　　　　　　　　　　//完成之后的回调函数，不管是否成功
            console.log("逆解析状态码："+res.status);  //res.status  获取状态码，为0代表解析成功，但是我们要考虑失败的兼容，可能用户并不愿意同意获取地理位置，所以不为0 的时候也要加载内容给个默认地址
            if (res.status!=0){
              wx.request({
                url: 'https://www.cyzs97.com/home/index/xcx_index',
                data: {
                  // cityid: getApp().globalData.cityid,
                  cityna: getApp().globalData.cityna,
                  district:"",
                },
                header: {
                  "Content-Type": "applicatiSon/x-www-form-urlencoded"
                },
                method: "POST",
                success: function (res) {
                  console.log(res.data.data);
                  that.setData({
                    // 轮播图图片
                    imgurls: res.data.data.pics,   99                   });
                  getApp().globalData.cityid = res.data.data.datacompany.cityid;
                  // this.data.pic_array_dq2[e.detail.value].name
                }
              });
　　　　　　　　　　　　//提示用户失败可开启定位服务
              wx.showModal({
                title: '定位失败',
                content: '定位失败，未授权获取当前位置或服务错误' ,
              });
            }
            console.log("定位获取的：" + getApp().globalData.cityname);
          }
        });
      }
    });
       
    },

调用配合授权一并调用

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
    getLocation(){
        var that = this ;
          wepy.getSetting({
            success: (res) => {
              if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {//非初始化进入该页面,且未授权
                wepy.showModal({
                  title: '是否授权当前位置',
                  content: '需要获取您的地理位置，请确认授权，否则无法获取您所需数据',
                  success: function (res) {
                    if (res.cancel) {
                      that.isshowCIty = false;
                      wepy.showToast({
                        title: '授权失败',
                        icon: 'success',
                        duration: 1000
                      })
                    } else if (res.confirm) {
                      wepy.openSetting({
                        success: function (dataAu) {
                          if (dataAu.authSetting["scope.userLocation"] == true) {
                            wepy.showToast({
                              title: '授权成功',
                              icon: 'success',
                              duration: 1000
                            })
                            //再次授权，调用getLocationt的API
                            that.getLocation();
                          } else {
                            wepy.showToast({
                              title: '授权失败',
                              icon: 'success',
                              duration: 1000
                            })
                          }
                        }
                      })
                    }
                  }
                })
              } else if (res.authSetting['scope.userLocation'] == undefined) {//初始化进入
                that.getLocation();
              }
              else { //授权后默认加载
                that.getLocation();
              }
            }
          })
      },

当然最重要的不能忘记，需要配置服务器，只需安全域名设置，需要在微信公众平台添加域名地址 https://apis.map.qq.com
还有如果是WebService API 记得配置授权里面配置白名单添加你服务器的ip地址~~~切记~

[微信小程序] 微信小程序经纬度逆解析地理位置