騎驢去看海 發表於 2021-5-21 09:00:00

微信小程序开发--获取微信用户手机号码

<h2>背景</h2>
<p>在平时使用第三方微信小程序时,经常会有需要获取微信手机号码的情况,如下图所示:</p>
<p><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="11"><img alt="" width="316" height="256" class="cke_widget_element lazyload" src="https://img-blog.csdnimg.cn/20210517151230524.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70" data-cke-widget-data="{&amp;quot;hasCaption&amp;quot;:false,&amp;quot;src&amp;quot;:&amp;quot;https://img-blog.csdnimg.cn/20210517151230524.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70&amp;quot;,&amp;quot;alt&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;width&amp;quot;:&amp;quot;316&amp;quot;,&amp;quot;height&amp;quot;:&amp;quot;256&amp;quot;,&amp;quot;lock&amp;quot;:true,&amp;quot;align&amp;quot;:&amp;quot;none&amp;quot;,&amp;quot;classes&amp;quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" data-src="https://img-blog.csdnimg.cn/20210517151230524.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70"><span class="cke_reset cke_widget_drag_handler_container"><img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="><span class="cke_image_resizer" title="点击并拖拽以改变尺寸">​</span></span></span></p>
<p>那这种是怎样实现的呢?下面记录下获取微信手机号码的方法。</p>
<p><strong>备注</strong>:需要有一个微信小程序号,并且这个号是经过企业认证的。(获取手机号码的功能不对个人小程序号生效)</p>
<p>&nbsp;</p>
<p>那下面我们就一起开始,获取手机号码的编程之旅了。</p>
<h1>1、打开微信开发者工具新建工程</h1>
<p>在app.json文件中新增&nbsp;&nbsp;&nbsp;&nbsp;"pages/getphonenumber/getphonenumber", 如下图所示:</p>
<p><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="10"><img alt="" width="863" height="528" class="cke_widget_element lazyload" src="https://img-blog.csdnimg.cn/20210517152217598.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70" data-cke-widget-data="{&amp;quot;hasCaption&amp;quot;:false,&amp;quot;src&amp;quot;:&amp;quot;https://img-blog.csdnimg.cn/20210517152217598.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70&amp;quot;,&amp;quot;alt&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;width&amp;quot;:&amp;quot;863&amp;quot;,&amp;quot;height&amp;quot;:&amp;quot;528&amp;quot;,&amp;quot;lock&amp;quot;:true,&amp;quot;align&amp;quot;:&amp;quot;none&amp;quot;,&amp;quot;classes&amp;quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" data-src="https://img-blog.csdnimg.cn/20210517152217598.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70"><span class="cke_reset cke_widget_drag_handler_container"><img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="><span class="cke_image_resizer" title="点击并拖拽以改变尺寸">​</span></span></span></p>
<h1>2、准备密文解析工具类</h1>
<p>通过微信小程序提供的接口获取手机号码,返回的数据是加密的,所以需要对返回的加密数据进行解密。</p>
<h2>2.1 添加密文解析工具类需要用到的库</h2>
<p><strong>第一步</strong>、在微信开发者工具中,点击 "终端" ——&gt; “新建终端” 如下图所示:</p>
<p><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="9"><img alt="" width="650" height="255" class="cke_widget_element lazyload" src="https://img-blog.csdnimg.cn/20210517145747470.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70" data-cke-widget-data="{&amp;quot;hasCaption&amp;quot;:false,&amp;quot;src&amp;quot;:&amp;quot;https://img-blog.csdnimg.cn/20210517145747470.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70&amp;quot;,&amp;quot;alt&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;width&amp;quot;:&amp;quot;650&amp;quot;,&amp;quot;height&amp;quot;:&amp;quot;255&amp;quot;,&amp;quot;lock&amp;quot;:true,&amp;quot;align&amp;quot;:&amp;quot;none&amp;quot;,&amp;quot;classes&amp;quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" data-src="https://img-blog.csdnimg.cn/20210517145747470.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70"><span class="cke_reset cke_widget_drag_handler_container"><img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="><span class="cke_image_resizer" title="点击并拖拽以改变尺寸">​&nbsp;&nbsp;<span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="8"><img alt="" width="650" height="253" class="cke_widget_element lazyload" src="https://img-blog.csdnimg.cn/20210517145812774.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70" data-cke-widget-data="{&amp;quot;hasCaption&amp;quot;:false,&amp;quot;src&amp;quot;:&amp;quot;https://img-blog.csdnimg.cn/20210517145812774.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70&amp;quot;,&amp;quot;alt&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;width&amp;quot;:&amp;quot;650&amp;quot;,&amp;quot;height&amp;quot;:&amp;quot;253&amp;quot;,&amp;quot;lock&amp;quot;:true,&amp;quot;align&amp;quot;:&amp;quot;none&amp;quot;,&amp;quot;classes&amp;quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" data-src="https://img-blog.csdnimg.cn/20210517145812774.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70"><span class="cke_reset cke_widget_drag_handler_container"><img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="><span class="cke_image_resizer" title="点击并拖拽以改变尺寸">​</span></span></span></span></span></span></p>
<p><strong>第二步</strong>、执行&nbsp; npm init 指令</p>
<p>//执行npm init后需要你输入一些信息,直接一直点击 “回车”键就好</p>
<p>如下图所示:</p>
<p><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="7"><img alt="" width="641" height="246" class="cke_widget_element lazyload" src="https://img-blog.csdnimg.cn/20210517112734638.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70" data-cke-widget-data="{&amp;quot;hasCaption&amp;quot;:false,&amp;quot;src&amp;quot;:&amp;quot;https://img-blog.csdnimg.cn/20210517112734638.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70&amp;quot;,&amp;quot;alt&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;width&amp;quot;:&amp;quot;641&amp;quot;,&amp;quot;height&amp;quot;:&amp;quot;246&amp;quot;,&amp;quot;lock&amp;quot;:true,&amp;quot;align&amp;quot;:&amp;quot;none&amp;quot;,&amp;quot;classes&amp;quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" data-src="https://img-blog.csdnimg.cn/20210517112734638.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70"><span class="cke_reset cke_widget_drag_handler_container"><img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="><span class="cke_image_resizer" title="点击并拖拽以改变尺寸">​</span></span></span></p>
<p><strong>第三步</strong>、依次执行&nbsp; npm install crypto-js --save 、&nbsp;npm install js-base64 --save</p>
<p>如下图所示:</p>
<p><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="6"><img alt="" width="643" height="246" class="cke_widget_element lazyload" src="https://img-blog.csdnimg.cn/20210517112900585.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70" data-cke-widget-data="{&amp;quot;hasCaption&amp;quot;:false,&amp;quot;src&amp;quot;:&amp;quot;https://img-blog.csdnimg.cn/20210517112900585.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70&amp;quot;,&amp;quot;alt&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;width&amp;quot;:&amp;quot;643&amp;quot;,&amp;quot;height&amp;quot;:&amp;quot;246&amp;quot;,&amp;quot;lock&amp;quot;:true,&amp;quot;align&amp;quot;:&amp;quot;none&amp;quot;,&amp;quot;classes&amp;quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" data-src="https://img-blog.csdnimg.cn/20210517112900585.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70"><span class="cke_reset cke_widget_drag_handler_container"><img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="><span class="cke_image_resizer" title="点击并拖拽以改变尺寸">​</span></span></span></p>
<p><strong>第四步</strong>、在微信开发工具的菜单栏 选择 “工具” ——&gt; “构建npm” 构建完成即可</p>
<h3>2.2 解析类实现</h3>
<p>在工程的utils文件夹下新建&nbsp;WXBizDataCrypt.js文件,代码实现如下所示:</p>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="5">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> CryptoJS = require("crypto-js"<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> Base64 = require("js-base64"<span style="color: rgba(0, 0, 0, 1)">);

</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">解析加密数据</span>
<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> decode(sesionKey,iv,data) {
</span><span style="color: rgba(0, 0, 255, 1)">var</span> key =<span style="color: rgba(0, 0, 0, 1)"> CryptoJS.enc.Base64.parse(sesionKey);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> iv =<span style="color: rgba(0, 0, 0, 1)"> CryptoJS.enc.Base64.parse(iv);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> decrypt =<span style="color: rgba(0, 0, 0, 1)"> CryptoJS.AES.decrypt(data, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
});
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> Base64.decode(CryptoJS.enc.Base64.stringify(decrypt));
}

module.exports </span>=<span style="color: rgba(0, 0, 0, 1)"> {
decode
}</span></pre>
</div>
</div>
<h2>3、getphonenumber的实现</h2>
<h3>3.1 、getphonenumber.js的实现</h3>
<p><strong>注意</strong>: appId、secret需要替换为自身小程序的</p>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="4">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> pages/getphonenumber/getphonenumber.js</span>
const WXBizDataCrypt = require('../../utils/WXBizDataCrypt'<span style="color: rgba(0, 0, 0, 1)">);

Page({

</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">*
   * 页面的初始数据
   </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
data: {
    phoneNum:</span>''<span style="color: rgba(0, 0, 0, 1)">,
    sessionKey:</span>''<span style="color: rgba(0, 0, 0, 1)">,
    openId:</span>''<span style="color: rgba(0, 0, 0, 1)">,
},

</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">*
   * 生命周期函数--监听页面加载
   </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
onLoad: </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (options) {
    </span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.getSessionKey();
},

getPhoneNumber: </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(e){
    </span><span style="color: rgba(0, 0, 255, 1)">if</span> (e.detail.errMsg == "getPhoneNumber:fail user deny"<span style="color: rgba(0, 0, 0, 1)">) {
      wx.showToast({
      title: </span>'拒绝授权,无法获取用户手机号码!'<span style="color: rgba(0, 0, 0, 1)">,
      })
      </span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)">;
    }
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">解密数据获取手机号码</span>
    <span style="color: rgba(0, 0, 255, 1)">this</span>.decryptData(<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.data.sessionKey,e.detail.iv,e.detail.encryptedData);
},

</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">获取SessionKey</span>
getSessionKey: <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(){
    wx.login({
      success:res </span>=&gt;<span style="color: rgba(0, 0, 0, 1)">{
      console.log(</span>'code:'+<span style="color: rgba(0, 0, 0, 1)">res.code);
      </span><span style="color: rgba(0, 0, 255, 1)">var</span> data =<span style="color: rgba(0, 0, 0, 1)"> {
          </span>'appid':'***********',<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">注意appId、secret需要替换为自身小程序的</span>
          'secret':'**************************'<span style="color: rgba(0, 0, 0, 1)">,
          </span>'js_code'<span style="color: rgba(0, 0, 0, 1)">:res.code,
          </span>'grant_type':'authorization_code'<span style="color: rgba(0, 0, 0, 1)">
      };

      wx.request({
          url:</span>'https://api.weixin.qq.com/sns/jscode2session'<span style="color: rgba(0, 0, 0, 1)">,
          data:data,
          method:</span>'GET'<span style="color: rgba(0, 0, 0, 1)">,
          success:res </span>=&gt;<span style="color: rgba(0, 0, 0, 1)">{
            console.log(</span>"jscode2session result: "<span style="color: rgba(0, 0, 0, 1)">,res);
            </span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.setData({
            sessionKey:res.data.session_key,
            openId: res.data.openId
            })
          },
          fail:</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(res){
            console.log(</span>"获取jscodeSession fail: "<span style="color: rgba(0, 0, 0, 1)">,res);
          }
      })
      }
    })
},

</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">解密数据</span>
decryptData: <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(key,iv,encryptedData){
    </span><span style="color: rgba(0, 0, 255, 1)">var</span> processData =<span style="color: rgba(0, 0, 0, 1)"> WXBizDataCrypt.decode(key,iv,encryptedData);
    console.log(</span>"解密数据: "<span style="color: rgba(0, 0, 0, 1)">,processData);
    </span><span style="color: rgba(0, 0, 255, 1)">var</span> jsonObj =<span style="color: rgba(0, 0, 0, 1)"> JSON.parse(processData);
    </span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.setData({
      phoneNum: jsonObj[</span>'phoneNumber'<span style="color: rgba(0, 0, 0, 1)">]
    })
},
})</span></pre>
</div>
</div>
<h3>3.2、getphonenumber.wxml 实现</h3>
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="3">
<div class="cnblogs_code">
<pre>&lt;!--pages/getphonenumber/getphonenumber.wxml--&gt;
&lt;button type="primary"bindgetphonenumber="getPhoneNumber" open-type='getPhoneNumber'&gt;获取手机号码&lt;/button&gt;
&lt;text&gt;获取到的手机号码:{{phoneNum}}&lt;/text&gt;</pre>
</div>
</div>
<p>好了,实现内容就这么多。</p>
<p><strong>备注</strong>:一般情况下 获取jscode2session 是放到服务器端去实现的,这里我把获取sessionKey全都放在小程序端去实现了。</p>
<p>参考小程序官网链接:</p>
<p>https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html</p>
<p>&nbsp;</p>
<h1>4、运行效果图</h1>
<p><strong>默认运行&nbsp; &nbsp; &nbsp; &nbsp;</strong> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</p>
<p><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="2"><img alt="" width="265" height="432" class="cke_widget_element lazyload" src="https://img-blog.csdnimg.cn/20210517152913347.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70" data-cke-widget-data="{&amp;quot;hasCaption&amp;quot;:false,&amp;quot;src&amp;quot;:&amp;quot;https://img-blog.csdnimg.cn/20210517152913347.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70&amp;quot;,&amp;quot;alt&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;width&amp;quot;:&amp;quot;265&amp;quot;,&amp;quot;height&amp;quot;:&amp;quot;432&amp;quot;,&amp;quot;lock&amp;quot;:true,&amp;quot;align&amp;quot;:&amp;quot;none&amp;quot;,&amp;quot;classes&amp;quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" data-src="https://img-blog.csdnimg.cn/20210517152913347.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70"><span class="cke_reset cke_widget_drag_handler_container"><img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="><span class="cke_image_resizer" title="点击并拖拽以改变尺寸">​&nbsp; &nbsp;</span></span></span></p>
<p>&nbsp;</p>
<p><strong><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="2"><span class="cke_reset cke_widget_drag_handler_container"><span class="cke_image_resizer" title="点击并拖拽以改变尺寸">点击“获取手机号码”&nbsp;&nbsp;</span></span></span></strong></p>
<p><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="2"><span class="cke_reset cke_widget_drag_handler_container"><span class="cke_image_resizer" title="点击并拖拽以改变尺寸"> &nbsp;<span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="1"><img alt="" width="286" height="425" class="cke_widget_element lazyload" src="https://img-blog.csdnimg.cn/20210517153043535.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70" data-cke-widget-data="{&amp;quot;hasCaption&amp;quot;:false,&amp;quot;src&amp;quot;:&amp;quot;https://img-blog.csdnimg.cn/20210517153043535.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70&amp;quot;,&amp;quot;alt&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;width&amp;quot;:&amp;quot;286&amp;quot;,&amp;quot;height&amp;quot;:&amp;quot;425&amp;quot;,&amp;quot;lock&amp;quot;:true,&amp;quot;align&amp;quot;:&amp;quot;none&amp;quot;,&amp;quot;classes&amp;quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" data-src="https://img-blog.csdnimg.cn/20210517153043535.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70"><span class="cke_reset cke_widget_drag_handler_container"><img width="15" height="15" class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="><span class="cke_image_resizer" title="点击并拖拽以改变尺寸">​&nbsp; &nbsp; &nbsp; &nbsp;</span></span></span></span></span></span></p>
<p>&nbsp;</p>
<p><strong><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="2"><span class="cke_reset cke_widget_drag_handler_container"><span class="cke_image_resizer" title="点击并拖拽以改变尺寸"><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="1"><span class="cke_reset cke_widget_drag_handler_container"><span class="cke_image_resizer" title="点击并拖拽以改变尺寸">点击 “允许”按钮</span></span></span></span></span></span></strong></p>
<p><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="2"><span class="cke_reset cke_widget_drag_handler_container"><span class="cke_image_resizer" title="点击并拖拽以改变尺寸"><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="1"><span class="cke_reset cke_widget_drag_handler_container"><span class="cke_image_resizer" title="点击并拖拽以改变尺寸"> &nbsp;<span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="0"><img alt="" width="291" height="425" class="cke_widget_element lazyload" src="https://img-blog.csdnimg.cn/20210517153157430.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70" data-cke-widget-data="{&amp;quot;hasCaption&amp;quot;:false,&amp;quot;src&amp;quot;:&amp;quot;https://img-blog.csdnimg.cn/20210517153157430.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70&amp;quot;,&amp;quot;alt&amp;quot;:&amp;quot;&amp;quot;,&amp;quot;width&amp;quot;:&amp;quot;291&amp;quot;,&amp;quot;height&amp;quot;:&amp;quot;425&amp;quot;,&amp;quot;lock&amp;quot;:true,&amp;quot;align&amp;quot;:&amp;quot;none&amp;quot;,&amp;quot;classes&amp;quot;:[]}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" data-src="https://img-blog.csdnimg.cn/20210517153157430.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4OTIxMDk=,size_16,color_FFFFFF,t_70"></span></span></span></span></span></span></span></p>
<p><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="2"><span class="cke_reset cke_widget_drag_handler_container"><span class="cke_image_resizer" title="点击并拖拽以改变尺寸"><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="1"><span class="cke_reset cke_widget_drag_handler_container"><span class="cke_image_resizer" title="点击并拖拽以改变尺寸"><span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="0"><span class="cke_reset cke_widget_drag_handler_container"><span class="cke_image_resizer" title="点击并拖拽以改变尺寸">好了,今天的文章就到这里,如果内容对你有所帮助,不要忘记点个赞哟~​</span></span></span></span></span></span></span></span></span></p><br><br>
来源:https://www.cnblogs.com/blueVictory/p/14792347.html
頁: [1]
查看完整版本: 微信小程序开发--获取微信用户手机号码