微信小程序开发记录

//app.js
App({
    onLaunch: function () {
        // 登录
        wx.login({
            success: res => {
                console.log(res.code);
                // 发送 res.code 到后台换取 openId, sessionKey, unionId
                wx.request({
                    url: 'http://localhost/mi/getopenID.php',
                    data:{code: res.code},
                    success:(res)=>{
                        console.log(res.data.openid);
                        this.globalData.openID = res.data.openid;
                    }
                })
            }
        })
    }
})

// 声明CODE，获取小程序传过来的CODE
$code = $_GET["code"];

// 配置appid 此处填写你的appid
$appid = "";

//配置appscret 此处填写你的appsecret
$secret = "";

//api接口
$api = "https://api.weixin.qq.com/sns/jscode2session?appid={$appid}&secret={$secret}&js_code={$code}&grant_type=authorization_code";

//获取GET请求
function httpGet($url){
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 2);
    curl_setopt($curl, CURLOPT_TIMEOUT, 500);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 2);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, 2);
    curl_setopt($curl, CURLOPT_URL, $url);
    
    $res = curl_exec($curl);
    curl_close($curl);
    
    return $res;
}

//发送
$str = httpGet($api);

// 然后就可以看到返回的openid了，在一个json字符串中
echo $str;

// 获取用户信息
wx.getSetting({
  success: res => {
    if (res.authSetting['scope.userInfo']) {
      // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
      wx.getUserInfo({
        success: res => {
          // 可以将 res 发送给后台解码出 unionId
          this.globalData.userInfo = res.userInfo

          // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
          // 所以此处加入 callback 以防止这种情况
          if (this.userInfoReadyCallback) {
            this.userInfoReadyCallback(res)
          }
        }
      })
    }
  }
})

wx.showToast({
    title: '刷新中',
    icon: 'loading',
    duration: 2000
})

wx.showToast({
    title: '刷新成功',
    icon: 'success',
    duration: 1000
})

wx.showToast({
    title: '服务异常',
    icon: 'warn',
    duration: 1000
})

Page({
  data: {
    myData: ''
  },
  // loadMyData函数用于打印myData的值
  loadMyData () {
    console.log('获取到的数据为：' + this.data.myData)
  },
  // 生命周期函数onload用于监听页面加载
  onload: function () {
    wx.request({
      url: 'https://api',  // 某个api接口地址
      success: res => {
        console.log(res.data)
        this.setData({
          myData: res.data
        })
        console.log(this.data.myData)
      }
    })
    // 调用之前的函数
    this.loadMyData()
  }
})

...
onload: function () {
  wx.request({
    url: 'https://api',  // 某个api接口地址
    success: res => {
      console.log(res.data)
      this.setData({
        myData: res.data
      })
      console.log(this.data.myData)
      // 把使用数据的函数写在回调函数success中
      this.loadMyData()
    }
  })
}

asyncFn1(function(){
  //...
  asyncFn2(function(){
    //...
    asyncFn3(function(){
      //...
      asyncFn4(function(){
        //...
        asyncFn5(function(){
           //...
        });
      });
    });
  });
});

/**
 * requestPromise用于将wx.request改写成Promise方式
 * @param：{string} myUrl 接口地址
 * @return: Promise实例对象
 */
const requestPromise = myUrl => {
  // 返回一个Promise实例对象
  return new Promise((resolve, reject) => {
    wx.request({
      url: myUrl,
      success: res => resolve(res)
    })
  })
}
// 我把这个函数放在了utils.js中，这样在需要时可以直接引入
module.exports = requestPromise

// 引用模块
const utilApi = require('../../utils/util.js')
Page({
  ...
  // 生命周期函数onload用于监听页面加载
  onLoad: function () {
    utilApi.requestPromise("https://www.bilibili.com/index/ding.json")
    // 使用.then处理结果
    .then(res => {
      console.log(res.data)
      this.setData({
        myData: res.data
      })
      console.log(this.data.myData)
      this.loadMyData()
    })
  }
})

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="" mode="cover"></image>
      <text class="userinfo-nickname"></text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto"></text>
  </view>
</view>

// index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

<!--logs.wxml-->
<view class="container log-list">
  <block wx:for="" wx:for-item="log">
    <text class="log-item">. </text>
  </block>
</view>

// logs.js
const util = require('../../utils/util.js')

Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(log => {
        return util.formatTime(new Date(log))
      })
    })
  }
})

// utils/util.js
const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime
}

// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
    this.userInfoReadyCallback(res)
}

onLaunch: function() {
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        console.log(res)
        wx.request({
          url: that.globalData.url + 'code_to_openid',
          method:'post',
          header: { 'Content-Type': 'application/x-www-form-urlencoded' },
          data:{
            code:res.code
          },
          success(res){
            this.globalData.user_id = res.data.data.id
            this.globalData.unionid = res.data.data.unionid
            this.globalData.user_info = res.data.data
            // callback，如果 userInfoReadyCallback 定义了就执行，否则跳过，非阻塞
            if (this.userInfoReadyCallback) {
              this.userInfoReadyCallback(res)
            }
          }
        })
      }
    })
}

onLoad: function() {
    let that = this
    //查看是否有userid
    if (!app.globalData.user_id) {
      app.userInfoReadyCallback = res => {
        //判断是否阅读过引导页
        wx.request({
          url: app.globalData.url + 'checkfirst',
          method: 'POST',
          header: { "Content-Type": "application/x-www-form-urlencoded" },
          data: {
            user_id: app.globalData.user_id
          }, success(res) {
            console.log(res)
            if (res.data.resultCode == 0 || res.data.resultCode == ''){
              wx.hideTabBar()
              that.setData({
                guide_show:true
              })；
              that.getLists();
            }
          }
        })
      }
    }
}

var http = require('service/http.js')
App({
  onLaunch: function() {
    //调用API从本地缓存中获取数据
    // var that = this;
  },
  getAuthKey: function () {
    var that = this;
    return new Promise(function (resolve, reject) {
        // 调用登录接口
        wx.login({
          success: function (res) {
            if (res.code) {
              that.globalData.code = res.code;
              //调用登录接口
              wx.getUserInfo({
                withCredentials: true,
                success: function (res) {
                  that.globalData.UserRes = res;
                  that.globalData.userInfo = res.userInfo;
                  that.func.postReq('/api/v1/image/oauth', {
                    code: that.globalData.code,
                    signature: that.globalData.UserRes.signature,
                    encryptedData: that.globalData.UserRes.encryptedData,
                    rawData: that.globalData.UserRes.rawData,
                    iv: that.globalData.UserRes.iv
                  }, function (res) {
                    wx.setStorage({
                      key: "auth_key",
                      data: res.data.auth_key
                    })
                    var res = {
                      status: 200,
                      data: res.data.auth_key
                    }
                    resolve(res);
                    
                  })
                }
              })
            } else {
              console.log('获取用户登录态失败！' + res.errMsg);
              var res = {
                status: 300,
                data: '错误'
              }
              reject('error');
            }  
          }
        })
    });
  },
})

onLoad: function () {
    app.getAuthKey().then(function (res) {
      console.log(res);
      if (res.status == 200){
        var auth_key = res.data;
        app.func.req('/api/v1/image/theme-list', {
          page: 1,
          auth_key: auth_key
        }, function (res) {
          var page = that.data.pageValue + 1;
          that.setData({
            images: res.data,
            pageValue: page
          });
        });
      }else{
        console.log(res.data);
    }
});