微信小程序双标签怎么打开

微信小程序双标签怎么打开,第1张

微信小程序的双标签模式是一种方便的多任务浏览模式。通过双标签模式,你可以在同一屏幕内同时打开两个不同的小程序,实现多任务浏览和 *** 作。

要使用微信小程序双标签模式,可以按照以下步骤进行 *** 作:

1. 打则悄开微信并进入小程序界面。

2. 点击右上角的“+”号,选择第一个小程序并进入。基旅

3. 在第一个小程序中,向上滑动屏幕,并点击“添加标签页”按钮(图标为“+”和“⦁”组成),再选择要打开的第二个小程序。

4. 此时,第二个小程序就会在新的标签页中打开,你可以在同一屏幕上同时浏览和 *** 作两个小程序了。

5. 如果需要关闭某个标签页,可以点击标签页上的“×”按钮来关闭。

需要注意的是,并不是所有的微信小程序都支持双标签模式。如果你发现在某些小程序中没有“添加标签页”按钮,则该小程序可能不支持双标签模式搏盯凳。同时,在双标签模式下,你需要注意你的设备屏幕大小和分辨率,以避免 *** 作不便或界面拥挤的情况发生。

       最近在做一个小程序时遇到这样一个需求:要求在点击input框时获取用户的手机号还可以进行修改。但是我们都知道微信小程序获取手机号是通过button按钮的bindgetphonenumber属性来实现的,那么怎么能在input获得焦点时,获取用户手机号呢?

       首先,我们先来了解一下怎么通过button按钮来获取用户的手机号。在微信公众平台上,button按钮有一个open-type和bindgetphonenumber的属性:

           具体如下:

                1.wxml:

                    <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">输入手机号</button>

                2.js

                    在这里我们需要注意首先要获取用户的openid和session_key,获取方式如下:

                        app.js:

                        wx.login({

                              //获取code

                              success: (res) =>{

                                    var code = res.code//返回code

                                    this.globalData.code = code

                                    this.globalData.appId = 'wx5a9ded8ac4b1feb3'

                                    this.globalData.secret = '7ccbca95ddc8baf065194b533043a783'

                                    wx.request({

                                          url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + this.globalData.appId + '&secret=' + this.globalData.secret + '&js_code=' + code + '&grant_type=authorization_code',

                                          data: {},

                                          header: {

                                                'content-type': 'json'

                                          },

                                          success: (res) =>{

                        裂森                            var openid = res.data.openid //返回openid

                                                    this.globalData.openId = openid

                                                    this.globalData.session_key = res.data.session_key

                                                    wx.request({

                                                              url: this.globalData.req_url + '/WechatUser/dealUserMsg',

                                                              method:'post',

                                                  磨卜            header: { 'content-type': 'application/x-www-form-urlencoded' },

                                                              data:{

                                                                        openId:openid

                                                              },

                                                              success:res=>{

                                                                        console.log(res)

                                                              }

                                                    })

                                              }

                                    })

                              }

                    })

                index.js:

                     // 点击按钮获取手机号

                  getPhoneNumber(e) {

                        wx.request({

                              url: appData.req_url + '/WXCore/decrypt',

                              data:{

                   肆游亩                 openId: appData.openId,

                                    encryptedData: e.detail.encryptedData,

                                    sessionKey: appData.session_key,

                                    iv: e.detail.iv

                              },

                              header: {

                                        'content-type': 'json'

                                },

                              success: res =>{

                                    this.setData({

                                            inputShow: true

                                    })

                               if(!res.data.res){

                                      console.log('未绑定手机号')

                                }else{

                                      this.setData({

                                            phoneNumber: res.data.bindPhone

                                      })

                                }

                          }

                    })

              },

            结果如下:

                    

            点击允许,这个时候后台会对传过去的数据进行解密(具体度娘搜索微信小程序手机号码解密),就会将手机号码返回。

            ok,通过button我们成功的拿到了手机号码,那么怎么能在input框获取焦点时拿到手机号码,并且可以修改呢?

            经过a long long time的思考,终于想出了一个土办法。那就是将一个button标签和一个input框通过绝对定位重叠在一起,然后将button标签做成input框的样子,在我们第一次点击的时候成功获取到手机号以后,将button标签通过标志位隐藏,而让input标签显示,并将拿到的手机号码赋给input的value值,如此便可以实现模拟input框获得焦点时获取用户的手机号!!!

            

            虽然土,但是成功将效果实现了不是?

            最后给大家和我自己送上一份心灵鸡汤:

                    你想要的永远和你付出的成正比。

对于第一次实现小程序获取用户手机号、用户信息功能的程序猿来说,有一个着手的思路可以事耐竖半功倍。本文可纯滑以给你提供这个思路,助你快速准确完成需求。

调用wx.login,在成功回调中,拿自己小程序的appId、secret请求接口 url: ' https://api.weixin.qq.com/sns/jscode2session?appid=' + appId + '&secret=' + secret + '&js_code=' +code + '&grant_type=authorization_code',请求成功即可拿到openid和session-key

小程序的appId必须昌裤大要在微信公众平台完成微信认证(里面需要上传一些企业的一些证件和信息)才能有获取用户手机号的权限

最后拿用户的获取到的e.detail.iv、和e.detail.encryptedData(加密的手机号)和前面拿到过的session-key传给后台,交给后台解密即可

具体解密规则参考官方文档:( https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html )


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12491383.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-25
下一篇 2023-05-25

发表评论

登录后才能评论

评论列表(0条)

保存