电商小程序(2)之个人中心

前言

：因为朋友让参加一个创青春比赛，要求做一个小程序可以用来展示成果，所以在暑假自学一下小程序。初步接触小程序，大部分是前端的内容，后端依托云开发也非常便捷，所以为了赶进度直接进入实战，最终只要自己可以仿写一个类似的就可以。看的是腾讯云课堂视频教程

个人中心之第一个云函数

1. app.js为小程序的入口

2. pages/index.js
   登陆
   bindgetuserinfo:用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效.

   3.project.config.json 中增加了字段 cloudfunctionRoot 用于指定存放云函数的目录.
   “cloudfunctionRoot”: “./cloudFn”,

   4.login/index.jx
   const cloud = require(‘wx-server-sdk’)
   // 默认配置
   cloud.init()

   云函数中调用其他云函数
   假设我们要在云函数中调用另一个云函数 sum 并返回 sum 所返回的结果：

   exports.main = (event) => {
   console.log(event)
   return {
   sum:event.a+event.b
   }

   index.js
   getUserInfo: function(e) {
   wx.cloud.callFunction({
   name:“login”,
   data:{
   a:20,
   b:30
   },
   success:res=>{
   console.log(res)
   }
   })

   5.app.js
   //初始化云开发
   wx.cloud.init()

   6.获取用户信息
   const wxInfo = cloud.getWXContext()

   7.pages/index.js个人用户登陆

 success:res=>{
        //console.log(res)
        e.detail.userInfo.openid = res.result.wxInfo.OPENID
        app.globalData.userInfo = e.detail.userInfo
        this.setData({
          userInfo: e.detail.userInfo,
          hasUserInfo: true
        })
        wx.setStorageSync('userInfo', e.detail.userInfo)
      }

错误与思考

 
 写成了：
  

2.思路梳理
pages/index.wxml通过按钮中bindgetuserinfo方法返回了一个事件e，到getUserInfo函数中

用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，
open-type="getUserInfo"时有效

然后同目录下的 index.js

getUserInfo: function(e) {
    
    wx.cloud.callFunction({
      name:"login",
      
      success:res=>{
        console.log(e)
        e.detail.userInfo.openid = res.result.wxInfo.OPENID
        app.globalData.userInfo = e.detail.userInfo
        this.setData({
          userInfo: e.detail.userInfo,
          
        })
        wx.setStorageSync('userInfo', e.detail.userInfo)
        console.log(e.detail.userInfo)
       
      }
     
    })

接收e，同时通过callFunction调用云函数login，success是调用成功后的回调函数，先补充完e的openid，然后存到userinfo，再存入storge
最后在pages/index.wxml中通过判断userInfo是否存在来显示头像。