미니 프로그램 개발 실습에 대한 간략한 분석: 휴대폰 번호를 얻는 방법

미니 프로그램은 어떻게 사용자의 휴대폰 번호를 얻나요? 다음 글에서는 WeChat 애플릿 개발 시 사용자의 휴대폰 번호를 얻는 방법을 소개하겠습니다. 도움이 되길 바랍니다!

1. 배경

타사 WeChat 미니 프로그램을 사용할 때 아래 그림과 같이 WeChat 휴대폰 번호를 얻어야 하는 경우가 많습니다.

[관련 학습 권장사항: 작은프로그램 개발 튜토리얼】

이것은 어떻게 구현됩니까? 다음은 위챗 휴대폰 번호 획득 방법에 대한 기록입니다.

**참고:** WeChat 미니 프로그램 계정이 있어야 하며 이 계정은 기업의 인증을 받았습니다. (개인 미니프로그램 번호에는 휴대폰 번호 획득 기능이 적용되지 않습니다.)

그럼 휴대폰 번호 획득 프로그래밍 여정을 함께 시작하겠습니다.

2, 코드 구현 2.1 새 프로젝트

아래 그림과 같이 App.json 파일에 "PAGES/GETPHONENUMBER/GETPHONENUMBER"를 추가합니다.

2.2 비밀 준비 텍스트 구문 분석 도구 클래스

는 WeChat 애플릿에서 제공하는 인터페이스를 통해 휴대폰 번호를 얻습니다. 반환된 데이터는 암호화되어 있으므로 반환된 암호화된 데이터를 해독해야 합니다.

1) 새 터미널 만들기

WeChat 개발자 도구에서 아래와 같이 "터미널" - "새 터미널"을 클릭합니다.

2) npm init 명령 실행

//실행 npm init 후에 몇 가지 정보를 입력해야 합니다. "Enter" 키를 계속 클릭하세요.

아래 그림과 같이

3) npm install crypto-js --save , npm install js- 실행 base64 in 순서 --save

아래 그림과 같이:

4) Build npm

WeChat 개발 도구 메뉴 표시줄에서 "도구" -> "npm 빌드"를 선택합니다. 완료되었습니다.

2.3 파싱 클래스 구현

프로젝트의 utils 폴더에 새로운 WXBizDataCrypt.js 파일을 생성합니다. 코드 구현은 다음과 같습니다.

var CryptoJS = require("crypto-js");
var Base64 = require("js-base64");

//解析加密数据
function decode(sesionKey,iv,data) {
  var key = CryptoJS.enc.Base64.parse(sesionKey);
  var iv = CryptoJS.enc.Base64.parse(iv);
  var decrypt = CryptoJS.AES.decrypt(data, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  });
  return Base64.decode(CryptoJS.enc.Base64.stringify(decrypt));
}

module.exports = {
 decode
}

2.4 휴대폰 번호 코드 구현 얻기

2.4.1 getphonenumber.js 구현

참고: appId 및 secret은 자신의 애플릿의

// pages/getphonenumber/getphonenumber.js
const WXBizDataCrypt = require('../../utils/WXBizDataCrypt');

Page({

  /**
   * 页面的初始数据
   */
  data: {
    phoneNum:'',
    sessionKey:'',
    openId:'',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getSessionKey();
  },

  getPhoneNumber: function(e){
    if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
      wx.showToast({
        title: '拒绝授权，无法获取用户手机号码！',
      }) 
      return;
    }
    //解密数据获取手机号码
    this.decryptData(this.data.sessionKey,e.detail.iv,e.detail.encryptedData);
  },

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

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

  //解密数据
  decryptData: function(key,iv,encryptedData){
    var processData = WXBizDataCrypt.decode(key,iv,encryptedData);
    console.log("解密数据： ",processData);
    var jsonObj = JSON.parse(processData);
    this.setData({
      phoneNum: jsonObj['phoneNumber']
    })
  },
})

로 대체되어야 합니다.

2.4.2 getphonenumber.wxml

<!--pages/getphonenumber/getphonenumber.wxml-->
<button type="primary"  bindgetphonenumber="getPhoneNumber" open-type=&#39;getPhoneNumber&#39;>获取手机号码</button>
<text>获取到的手机号码:{{phoneNum}}</text>

구현 이 시점에서 코딩 프로세스는 완료되었습니다. 참고: 일반적인 상황에서는 jscode2session 획득이 서버 측에서 구현됩니다. 여기에서는 애플릿에서 모든 sessionKey 획득을 구현합니다. 미니 프로그램의 공식 웹사이트 링크를 참조하세요:

3. 작업 렌더링

휴대폰 번호를 얻으려면 클릭하세요:

더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요: 프로그래밍 비디오

! !

위 내용은 미니 프로그램 개발 실습에 대한 간략한 분석: 휴대폰 번호를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!