小白开发微信小程序23--开放接口API

文章详细介绍了微信小程序中涉及用户登录和授权的相关接口,如wx.login用于获取登录凭证code,然后通过code2Session接口换取openid、session_key等信息。wx.getUserProfile替代了wx.getUserInfo用于获取用户信息,每次调用都会弹出授权窗口。此外,还展示了如何在服务器端使用这些凭证进行登录验证的示例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  1. 开放接口列表

wx.login 登录

wx.getUserInfo 获取用户信息

wx.chooseAddress 获取用户收货地址

wx.requestPayment 发起微信支付

wx.addCard 添加卡券

wx.openCard 打开卡券

.......................................................

  1. wx.getUserProfile

1、功能描述

获取用户信息。页面产生点击事件(例如 button 上 bindtap 的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo,详见 用户信息接口调整说明。

2、示例代码

页面代码

js代码

运行效果

3.wx.login

功能描述

调用接口获取登录凭证(code)。通过凭证进而换取用户登录态信息,包括用户在当前小程序的唯一标识(openid)、微信开放平台帐号下的唯一标识(unionid,若当前小程序已绑定到微信开放平台帐号)及本次登录的会话密钥(session_key)等。用户数据的加解密通讯需要依赖会话密钥完成。

小程序登录wx.login()

小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系

说明

调用 wx.login() 获取 临时登录凭证code ,并回传到开发者服务器。

调用 auth.code2Session 接口,换取 用户唯一标识 OpenID 、 用户在微信开放平台帐号下的唯一标识UnionID(若当前小程序已绑定到微信开放平台帐号) 和 会话密钥 session_key。

之后开发者服务器可以根据用户标识来生成自定义登录态,用于后续业务逻辑中前后端交互时识别用户身份

小程序登录code2Session

接口应在服务器端调用,详细说明参见服务端API。

功能描述

登录凭证校验。通过 wx.login 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程。更多使用方法详见小程序登录。

HTTPS 调用

GET https://api.weixin.qq.com/sns/jscode2session

请求数据示例

GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

返回数据示例

{

"openid":"xxxxxx",

"session_key":"xxxxx",

"unionid":"xxxxx",

"errcode":0,

"errmsg":"xxxxx"

}

示例代码

1、页面添加登录按钮

2、js代码testLogin

可以看到这个code是变化的,不能作为登录的唯一凭证,需要用到下面的code2Session,即调用 auth.code2Session 接口,换取 用户唯一标识 OpenID

3、这个code不是唯一的,不能作为登录的凭证,需要进行下一步的验证

如图所示,用usercode换取openid

打开上次“小白开发微信小程序21--网络API(ASP.NET版”代码,首先添加包引用,newtonsoft.json

在model文件夹添加类HttpHelper

HttpHelper.cs完整代码:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Text;
using System.Threading.Tasks;

namespace webapitest.Models
{
    /// <summary>
    /// http请求帮助类
    /// </summary>
    public  class HttpHelper
    {
        /// <summary>
        /// https get请求
        /// </summary>
        /// <param name="Url">请求地址</param> 
        /// <returns>System.String.</returns>
        public  string HttpsGet(string Url)
        {
            HttpWebRequest request = (HttpWebRequest)WebRequest.Create(Url); 
            HttpWebResponse response = (HttpWebResponse)request.GetResponse();
            Stream myResponseStream = response.GetResponseStream();
            StreamReader myStreamReader = new StreamReader(myResponseStream, Encoding.GetEncoding("utf-8"));
            string retString = myStreamReader.ReadToEnd();
            myStreamReader.Close();
            myResponseStream.Close(); 
            return retString;
        }
    }
}

在WebXinController中添加方法wxLogin,

完成代码:

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using webapitest.Models;

namespace webapitest.Controllers
{
    /// <summary>
    /// 微信小程序控制器
    /// </summary>
    [Route("api/[controller]")]
    [ApiController]
    public class WebXinController : ControllerBase
    {
        List<Book> booklist = null;

        private static List<Book> getBookList()
        {
            List<Book> books = new List<Book>();

            Book b1 = new Book();
            b1.id = 9032;
            b1.title = "java开发指南";
            b1.author = "杨强标";
            b1.publisher = "吉林出版公司";
            b1.image = "img01.jpg";
            books.Add(b1);

            Book b2 = new Book();
            b2.id = 7232;
            b2.title = "web项目指导";
            b2.author = "毛二平";
            b2.publisher = "山东出版公司";
            b2.image = "img02.jpg";
            books.Add(b2);

            Book b3 = new Book();
            b3.id = 6832;
            b3.title = "小程序教程";
            b3.author = "风间云";
            b3.publisher = "海南出版公司";
            b3.image = "img03.jpg";
            books.Add(b3);
            return books; 
        }

        /// <summary>
        /// 图书列表
        /// </summary>
        /// <returns></returns>
        [HttpGet("findBookList")]
        public List<Book> findBookList()
        {
            booklist = getBookList();
            return booklist; 
        }

        /// <summary>
        /// 用户登录
        /// </summary>
        /// <returns></returns>
        [HttpGet("wxLogin")]
        public string  wxLogin(string userCode)
        {
            string appid = "wxd20d97e66580e91e";
            string secret = "5100c604bcb817cd0fa0cd801fccd239";
            string jscode = userCode;
            //https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code 
            string requesturl = "https://api.weixin.qq.com/sns/jscode2session?appid=" + appid + "&secret=" + secret + "&js_code=" + jscode + "&grant_type=authorization_code";
            HttpHelper httpHelper = new HttpHelper();
            string jsonresult = httpHelper.HttpsGet(requesturl);
            JObject jsonobj = JsonConvert.DeserializeObject<JObject>(jsonresult);//序列化成json对象
            string useropenid = jsonobj.GetValue("openid").ToString();//获取指定属性的值
            string txt = useropenid; 
            return txt;
        }

    }
}

小程序页面js代码

完成代码

// pages/myapi/myapi.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        userInfo: {},//用户信息
        useropenid: "",
        usercode:""
    },
    //登录
    testLogin() {
        let that=this;
        wx.login({
            success(res) {
                if (res.code) {
                    that.setData({
                        usercode:res.code
                    });
                    console.log(res.code);
                }
            }
        })
    },
    //微信登录
    doLogin() {
        let that = this;
        wx.login({
            success(res) {
                if (res.code) {
                    const code = res.code;
                    that.setData({
                        usercode:res.code
                    });
                    wx.request({
                        url: 'https://localhost:5001/api/WebXin/wxLogin',
                        data: { "userCode": code },//传递参数
                        method: "GET",//当前请求的请求方式
                        header: {
                            'content-type': 'application/json' // 默认值
                        },
                        success(res) {
                            const tokendata = res.data;
                            if (tokendata != "error") {
                                wx.setStorageSync('token', tokendata);//存储用户token 
                                that.setData({ 
                                    useropenid: tokendata
                                });
                                wx.showToast({
                                    title: '登录成功',
                                    icon: 'success',
                                    duration: 2000
                                })
                            }
                        }
                    });
                }
            }
        })
    },




    getUserProfile() {
        wx.getUserProfile({
            desc: '用于完善会员资料',
            success: (res) => {
                this.setData({
                    userInfo: res.userInfo
                })
            }
        })
    },



    // 添加设备
    putdevice() {
        wx.showToast({
            title: '设备添加成功',
            icon: 'success',
            duration: 2000
        })
    },
    // 添加课程
    putcourse() {
        wx.showToast({
            title: '课程添加失败',
            icon: 'error',
            duration: 3000
        })
    },
    // 删除
    delbook() {
        wx.showModal({
            title: '提示',
            content: '您是否同意【最美乡村】评选结果?',
            confirmText: "赞成",
            cancelText: "反对",
            success(res) {
                if (res.confirm) {
                    wx.showToast({
                        title: '你投了赞成票',
                        icon: 'success',
                        duration: 2000
                    })
                } else if (res.cancel) {
                    wx.showToast({
                        title: '你投了反对票',
                        icon: 'error',
                        duration: 3000
                    })
                }
            }
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

点我登录

成功拉到了openid,这个openid才是小程序用户的唯一标识,这也是作为token。

帅是一个境界,相信自己的传说。

<think>好的,用户的问题是想要在微信小程序中使用JS基础模板编写点击事件来获取用户个人息。我需要一步步思考如何回答这个问题,确保符合微信小程序发规范和最新API的变化。 首先,用户提到的是“JS基础模板”,可能是指微信小程序的基本JavaScript结构,包括Page对象中的事件处理函数。接下来,用户需要的是点击事件触发获取个人息,这通常涉及到按钮的点击绑定和用户授权请求。 我记得微信小程序获取用户息的方式有过变化,之前是使用open-data组件或者getUserInfo接口,但现在可能需要用户主动触发按钮来获取。根据最新的文档,应该使用`button`组件,并将`open-type`设置为`getUserInfo`,并在回调中处理用户的息。 然后,用户点击按钮后,需要在JS文件中编写事件处理函数,例如bindGetUserInfo,这个函数会接收到用户的息。这里要注意,用户可能需要先授权,所以需要处理授权拒绝的情况,给出提示。 另外,用户的息可能包含昵称、头像等,获取到后通常需要更新到页面的data中,以便在WXML中显示。所以还需要使用setData方法来更新数据。 可能还需要考虑用户已经授权过的情况,这时候可以直接调用wx.getUserInfo,但根据现在的规则,可能还是需要用户主动触发,比如点击按钮。因此,正确的做法是始终通过按钮的点击来触发获取息。 最后,要确保代码示例正确,包括WXML中的按钮组件和JS中的事件处理函数,以及处理授权逻辑。同时提醒用户注意微的隐私政策,确保合规。 总结步骤: 1. 在WXML中添加按钮,设置open-type为getUserInfo,并绑定事件。 2. 在JS文件中编写事件处理函数,获取用户息并更新到data。 3. 处理授权拒绝的情况。 4. 更新页面数据,显示用户息。 需要检查是否有遗漏的步骤,比如用户授权的作用域,或者是否需要先在app.json中配置相关权限。另外,确保示例代码的语法正确,比如使用this.setData,以及正确获取用户息的路径,比如e.detail.userInfo。 可能还需要提到wx.getUserProfile接口,因为微调整了用户息获取方式,现在更推荐使用这个接口,但需要根据基础库版本来决定。不过用户的问题提到的是JS基础模板,可能更倾向于使用button组件的getUserInfo方式。需要确认最新的API推荐方式,避免给出过时的息。 查阅最新的微信小程序文档,发现现在获取用户个人息推荐使用wx.getUserProfile,且在2021年4月后的调整中,getUserInfo不再弹出授权窗口,必须使用按钮点击触发,并且需要用户主动点击。因此,正确的做法应该是使用button组件,结合getUserProfile方法。 但用户的问题是关于如何用JS基础模板编写点击事件,所以可能需要同时提供两种方式的示例,或者指出最新的方法。不过可能存在混淆,需要明确说明。 根据当前的情况,正确的步骤应该是: 1. 在WXML中,使用button组件,设置open-type="getUserInfo",并绑定bindgetuserinfo事件。 2. 或者在JS中使用wx.getUserProfile方法,在按钮的点击事件中调用,但需要用户主动触发。 现在可能需要使用后者,即wx.getUserProfile,因为getUserInfo可能无法获取到敏感息。例如: 在WXML中,普通按钮绑定点击事件: <button bindtap="getUserProfile">获取用户息</button> 然后在JS中: getUserProfile() { wx.getUserProfile({ desc: '用于展示用户息', success: (res) => { this.setData({ userInfo: res.userInfo }) } }) } 但是,这个接口需要在按钮的点击事件中调用,且需要用户主动点击。所以需要确保按钮的bindtap事件触发这个方法。 可能用户的问题更倾向于使用传统的getUserInfo方式,但根据最新的文档,可能需要调整。需要明确说明两种方式的区别,并给出正确的示例。 综合判断,用户的问题可能更适用于较旧的getUserInfo方法,但为了准确性,应该根据最新的微文档推荐的方式回答,即使用wx.getUserProfile方法,并通过按钮点击触发。 因此,正确的步骤是: 在WXML中创建一个按钮,绑定bindtap事件: <button bindtap="onGetUserInfo">获取用户息</button> 在JS的Page中定义事件处理函数: onGetUserInfo() { wx.getUserProfile({ desc: '需要获取您的用户息', success: (res) => { this.setData({ userInfo: res.userInfo }); console.log('用户息:', res.userInfo); }, fail: (err) => { console.error('获取失败:', err); } }); } 同时,如果用户需要获取头像昵称等,可能还需要使用button组件的open-type,但根据最新调整,使用wx.getUserProfile更合适。 因此,最终的代码示例应该包括使用wx.getUserProfile,并且提醒用户需要处理拒绝授权的情况,以及更新数据到页面。 可能还需要在页面的data中初始化userInfo为null,然后在WXML中显示相关息。 最后,确保代码示例正确无误,语法正确,比如使用箭头函数保持this的指向正确,或者使用that变量保存this。 总结:用户需要的是点击按钮获取个人息,正确的做法是使用wx.getUserProfile方法,在按钮的点击事件中调用,并在成功回调中处理数据更新。同时处理失败情况,如用户拒绝授权。</think>在微信小程序中,通过JS基础模板实现点击获取用户息的完整步骤如下: ### 一、WXML页面布局 ```html <button bindtap="getUserProfile">获取个人息</button> <view wx:if="{{userInfo}}"> <image src="{{userInfo.avatarUrl}}"></image> <text>{{userInfo.nickName}}</text> </view> ``` ### 二、JS逻辑实现 ```javascript Page({ data: { userInfo: null }, // 点击事件处理函数 getUserProfile() { wx.getUserProfile({ desc: '用于展示用户资料', // 必填声明 success: (res) => { this.setData({ userInfo: res.userInfo }) // 可将息存入全局 getApp().globalData.userInfo = res.userInfo }, fail: (err) => { console.error('获取失败:', err) wx.showToast({ title: '授权失败', icon: 'none' }) } }) } }) ``` ### 三、关键点说明 1. **授权机制**:2021年4月起必须使用`wx.getUserProfile`获取加密数据,且要求用户主动点击按钮[^1] 2. **数据绑定**:通过`setData`更新视图层数据 3. **作用域声明**:desc参数必须说明息用途 4. **错误处理**:需考虑用户拒绝授权的场景 ### 四、补充说明 - 获取手机号需要单独`<button open-type="getPhoneNumber">` - 用户头像现在默认显示灰色头像,需通过此接口获取真实头像 - 需在app.json中添加权限声明: ```json "permissions": { "openapi.userInfo": true } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hqwest

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值