开发指南

API 文档

步骤3:搭建我的页面

最近更新时间:2022-04-01 09:58:38

本文主要围绕我的页面 my 和 云函数 进行讲解,更多代码细节可参见 my 页面

操作步骤

步骤1:配置云函数

  1. 右击当前环境文件夹,单击新建 Node.js 云函数,并将文件命名为 open
  2. 在 open 云函数下,index.js 文件下编写获取 openid 的代码。
    // 云函数入口文件
    const cloud = require('wx-server-sdk')

    cloud.init()

    // 云函数入口函数
    exports.main = async (event, context) => {
    const wxContext = cloud.getWXContext()

    return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
    }
    }
    说明:

    从小程序端调用云函数时,开发者可以在云函数内使用 wx-server-sdk 提供的 getWXContext 方法获取到每次调用的上下文(appidopenid 等),无需维护复杂的鉴权机制,即可获取天然可信任的用户登录态(openid)。

  3. 然后右击 open 文件夹,单击上传并部署:云端安装依赖,即完成了云函数的编写。

步骤2:搭建登录授权功能

  1. 进入 app.js 初始化云开发。
    // app.js
    App({
    onLaunch: function () {
    if (!wx.cloud) {
    console.error('请使用 2.2.3 或以上的基础库以使用云能力');
    } else {
    wx.cloud.init({
    // env 参数说明:
    // env 参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环境的资源
    // 此处请填入环境 ID, 环境 ID 可打开云控制台查看
    // 如不填则使用默认环境(第一个创建的环境)
    env: '环境ID',
    traceUser: true,
    });
    }

    this.globalData = {};
    },
    globalData:{
    userid:''
    }
    });
  2. 进入 my.js 在页面编写我的页面代码。在这里我们写一个点击事件,在用户点击我们绑定 getUserInfo 事件的按钮之后,我们调用获取用户信息。getopenid 是通过云函数获取用户 openid 方法。并将这个值存在 app.js 里面这样我们在其他页面可以直接进行调用。
    const app = getApp();
    Page({
    /**
    * 页面的初始数据
    */

    data: {
    username:"",
    openid: '',
    },
    /**
    * 生命周期函数--监听页面加载
    */

    onLoad: function (options) {

    },
    getUserInfo(e){
    console.log(e);
    this.setData({
    username:e.detail.userInfo.nickName
    })
    },
    getopenid(){
    var that=this;
    wx.cloud.callFunction({
    name: 'open',
    success:(res)=> {
    var usid = res.result.openid
    console.log(usid)
    this.setData({
    openid:res.result.openid,
    })
    getApp().globalData. userid=res.result.openid
    },
    fail(res) {
    console.log("获取失败", res);
    }
    })
    },
    })
  3. 进入 my.wxml 页面,添加判断登录状态代码,我们可以进行判断如果没有获取到提醒用户登录,如果获取到的 openid 为空我们显示授权登录版块。
    <view class="topbanner"  wx:if="{{openid!=''}}"> 
    <view class="toplogo">
    <open-data type="userAvatarUrl"></open-data>
    </view>
    <view class="toptext">
    <open-data type="userNickName" lang="zh_CN" class="user-name"></open-data>
    <view class="user-name2">爱国、敬业、求实、创新</view>
    </view>
    </view>
    <view class="topbanner" wx:if="{{openid==''}}">
    <view class="topban1">您还未授权登录</view>
    <view class="topban1">去授权登录</view>
    <button bindtap="getopenid" type="default">登录</button>
    </view>
目录