小程序制作笔记-小程序代码之wx.request

制作小程序过程中，会用到读取、递交数据到服务器后台，这里就会用到 wx.request ，其实在前面的文章中已经多次出现，这里单独拎出来记录下。

以下是Sham用来读取数据库中当前登录微信对应的用户信息的代码，供参考。

首先是小程序端，在js中的 onLoad: function () {}中添加：(Sham最近才搞清楚如何在js中调用读取到的数组中的某个值，就是fmcname: res.data.fmcinfo[0].fmcname，特别记录下）

 var that = this; 
//首先读取当前微信账号对应的openid，这个前面文章中介绍过，详见：https://www.shamqu.cn/wechat-applet-learning-get-openid.html
    wx.login({
      success: function (res) {
        console.log(res.code)
        //发送请求
        wx.request({
          url: 'https://网址/user/getopenid.php', //接口地址
          data: { code: res.code },
          header: {
            'content-type': 'application/json' //默认值
          },
          success: function (res) {
            console.log(res.data)
            that.setData({
              fmc: res.data,//将表中查询出来的信息传给fmc，这个可以自己定义
            })
//然后通过将openid传值发送给后台php，读取对应的用户的信息（提前登记过的），可参考：https://www.shamqu.cn/wechat-applet-learning-user-login-with-classify.html
            var openid = res.data.openid  //将openid定义为上面读取到的数据
            wx.request({
              url: 'https://网址/user/user.php?fmcopenid=' + openid, //连接服务器从表中查询的接口   
              data: {
              },
              header: {
                'content-type': 'application/json'
              },
              success: function (res) {
                console.log(res.data)
                that.setData({
                  list: res.data.fmcinfo,//将表中查询出来的信息传给list
                  fmcname: res.data.fmcinfo[0].fmcname,  //将fmcname设置为读取到的fmcname信息，这里[0]是指读取到的数组的第一个，然后前端就可以直接通过{{fmcname}}来调用了，也可以设置数组中的其他值，可以通过console.log看到数组明细
                })
                if (res.data.fmcinfo.length
                  == 1) {
                  that.setData({
                    hasFMCInfo: true  //当读到信息时，显示当前用户信息
                  })
                }
                else {
                  that.setData({
                    hasFMCInfo: false  //不然，就显示“你还未登录，请先登录”
                  })
                }
              },
            })
          }
        })
      }
    });  

然后就是前段wxml文件代码：

  <!--工号姓名等信息-->
  <view class="userdetail">
      <!--如果数据库没有个人信息，则要求登录-->
      <view wx:if="{{!hasFMCInfo}}">
        <button class="fmcinfoup" bindtap="infologin">暂未登录，请提交个人信息 </button>
      </view>
  <!--如果数据库有个人信息，则显示个人信息-->
    <block wx:else>
      <view wx:for="{{list}}" wx:key="fmcopenid" class='fmcinfo'>             
        <view class='fmcinfod'>
          <view class="items"> 工号： </view>
          <view class="itemsd">{{item.fmcid}}</view>
        </view>
        <view class='fmcinfod'>
          <view class="items"> 姓名： </view>
          <view class="itemsd">{{item.fmcname}}</view>
        </view>
        <view class='fmcinfod'>
          <view class="items"> 电话： </view>
          <view class="itemsd">{{item.fmcphone}}</view> 
        </view>
        <view class='fmcinfod'>
          <view class="items"> 我是： </view>
          <view class="itemsd">{{item.usertype}}</view> 
        </view>
      </view>
    </block>
  </view>
</view>

顺便附上wxss代码：

.userdetail{
  width: 60%;
  height:auto;
  margin: 10px 20rpx;
}

.fmcinfod {
  display:flex;
  flex-direction: row;
  margin-top:5px;
  color:#fff;
  font-size:15px;
}
.items{
  font-size:16px;
  font-weight:bold;
}
.itemsd{
  color:#fff;
  border-bottom:1px #fff dashed;
}

最后就是后端PHP代码，文件名和路径对应上面js中的wx.request里的url:

<?php
include_once("con.php");  //链接数据库
$json = '';
$data = array();
class Fmcinfo 
{
}
//如果是通过个人信息页传值openid，则通过openid读取数据库信息并返回数据
if($fmcopenid =isset($_GET['fmcopenid'])?$_GET['fmcopenid']:''){
$sql = "SELECT * FROM fmc_user where fmcopenid='$fmcopenid'";
//又或者如果是通过人员清单页面传值fmcid工号，则通过fmcid读取数据库信息并返回数据，在前台显示对应工号的人员信息（用于通过fmcid查询）
}elseif($fmcid =isset($_GET['fmcid'])?$_GET['fmcid']:''){
$sql = "SELECT * FROM fmc_user where fmcid='$fmcid'";
//最后是如果没有传值，则显示所有人员清单，用于在前台显示用户列表，供管理员查阅
}else{
  $sql = "SELECT * FROM fmc_user";
}
$result = $con->query($sql);
if($result){
//echo "查询成功";
while ($row = mysqli_fetch_array($result,MYSQL_ASSOC))
{
$fmcinfo = new Fmcinfo();   //这里的fmcinfo，就是最后打包成json供小程序使用，并前面js中setdata里面对应res.data.fmcinfo，这个要保持一致，不然无法读取
$fmcinfo->userid= $row["userid"];
$fmcinfo->fmcopenid= $row["fmcopenid"];
$fmcinfo->fmcid= "FME{$row["fmcid"]}"; //这里添加了自动加上FME，这样在小程序中只要登记数字就行
$fmcinfo->fmcname = $row["fmcname"];
$fmcinfo->fmcphone = $row["fmcphone"];
$fmcinfo->fmcnickname = $row["fmcnickname"];
$fmcinfo->useravatar = $row["useravatar"];  
//这里通过读取到的fmcid和fmcname进行判断，通过另一个员工清单表格，读取当前用户的对应的用户类别权限
$loginSql = <<<login
select * from fmc_staff where fmcid="FME{$row["fmcid"]}" and fmcname = "{$row["fmcname"]}";
login;
$res = mysqli_query($con, $loginSql);
if($rows = mysqli_fetch_array($res)){
$fmcinfo->usertype=$rows['usertype'];
$fmcinfo->ctcommitee = $rows['ctcommitee'];
$fmcinfo->dormitory = $rows['dormitory']; 
//如果读取不到，则显示用户类别为游客，不享有使用微信小程序功能的权利
}else{
$fmcinfo->usertype='游客';
$fmcinfo->ctcommitee = '0';
$fmcinfo->dormitory = '0'; 
}
$data[]=$fmcinfo;
}
$json = json_encode($data);//把数据转换为JSON数据.
echo "{".'"fmcinfo"'.":".$json."}";
}else{
echo "查询失败";
}
?>

好了，这样就就基本上实现了用户信息展示的功能了，特此记录，以便自己不忘记，也希望能帮助到见到的人，图就不上了，可以看下前面文章中展示的个人中心页。