小程序学习（七）：尝试QQ小程序，并初步连接PHP后台（QQ小程序连接PHP后台接口，链式函数）（别说了，我就是喜欢傻瓜教学）

一、准备工具，账号，项目，什么的

1.安装QQ小程序开发工具

这个是下载地址 下载QQ小程序开发工具

我的是win10，64位，就下的红箭头那版，我一开始下过绿箭头那版，结果只有测试模式，我也没找到编辑器在哪，就只好在下了另外一个

2.申请开发者账号，获取APPID

这个按照网上的步骤一步步做就好了，没什么好说的，就放个网址 在这申请

3.创建一个空白项目

要输入APPID，微信开发工具还可以测试号ID来着，QQ我没找到

二、开始在QQ开发工具进行操作

1.开始尝试连接后台啦，先封装一个方法，之后连接后台调用该方法

放图
这个工具类放哪都行，我只是习惯这么放
这个是代码，如果还有不清楚的地方可以看看文档

var ip = "http://127.0.0.1/";    //这个是本机IP，localhost也行，不过我习惯这个了
/**
 * 固有方法:封装_连接后台方法
 * 备注:如果之后放到服务器上，就只要换上面的那个ip就可以了
 * url:这个是连接的接口的路径，之后引用方法的时候会当做参数填入
 * data:这个是传入的参数，以后肯定会用到的，
 * resolve是连接成功返回的函数，reject是连接失败的函数
 */
const req = function(url,data){
    return new Promise((resolve,reject) =>{
        qq.request({
            url: ip+url,
            data:data,
            dataType : 'json',
            method:'POST',
            header: {
                'content-type': 'application/x-www-form-urlencoded'
            },
            success:resolve,
            fail:reject
        })
    })
};
/**
 * 导出方法
 * 介绍：这个是用来暴露方法的，这样一会在app.js中就可以引用这个方法了
 */
module.exports = {
  req: req,
}

2.在app.js进行配置（我不知道叫配置好不好，就这样叫吧）

先放图

这些省略的地方，都是新建的时候就有的，我就给省略了，我只写了第5行了46向下的部分
这个是引用那个工具包的路径，

var HTTP = require('utils/service/request.js');//创建时间：2019.08.03

这是引用连接的方法，其中的req就是我放的第一个代码片段中的那个req了

/**
 * 注册全局函数
  * 创建时间：2019.08.03
  */
 func:{
   req:HTTP.req,//连接后台方法
 }

3.功能页面引用调用方法

放图

其中页面上的HTML代码我改了，全注释了，然后放了一个button，一会放HTML的代码
其中注释的那些都不重要，不是重点我就给注释了，我先放一个总的代码，如果想看里面的内容的话，也可以看看，然后我在放js方法的部分代码，细说一下

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

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: qq.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function () {
    qq.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 版本的兼容处理
      qq.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
    })
  },
  /**
   * _方法：测试
   * 创建时间：2019.08.03
   */
  _ceshi(){
    const that = this;
    const data = {
      
    }
    app.func.req('project_text1/index.php',data).then(res => {
      console.log('后台数据',res);
    }).catch(err =>{
      console.log('获取数据失败，失败原因',err);
    });
  }
})

这个是js连接后台方法的代码，我详细说一下有什么东西

 /**
   * _方法：测试
   * 创建时间：2019.08.03
   */
  _ceshi(){
    const that = this;	//这个就是讲this提取到that中，如果外层变了，也能找到需要的最外层
    const data = {		//就是连接后台，啥逻辑都没有，所以这个理论里面就没放数据
      
    }
    //单引号里面的是路径，我一会写到PHP的时候，就可以看到了
    //data就是传的数据，虽然啥也没有
    //因为第一个代码块那里已经用resolve和reject配好了，所以这里.then和.catch就是连接后台成功和失败了
    app.func.req('project_text1/index.php',data).then(res => {//然后res和err就是返回数据，前面的单引就是单纯的字符串
      console.log('后台数据',res);
    }).catch(err =>{
      console.log('获取数据失败，失败原因',err);
    });
  }

然后在这是HTML的图片

和代码，只有这个管用，别的都注释了，就这个 _ceshi方法 连接到js，测试是否能连接后台的

<view>
  <button bindtap='_ceshi'>测试按钮</button>
</view>

三、PHP端的操作

0.这里我已经配置好了本机跑PHP的软件和写PHP的软件，就不给展示了，如果没弄好，就先百度一下，整整PHP

1.启动phpStudy，使得PHP先可以运行

注：这里有说是要配置Apache、MySQL什么的，其实不用那么麻烦，网上很多一个软件问题全解决的东西
比如说这个phpStudy 20180211 官方版
还有这个WampServer 3.0.6 官方版
还有这个Visual NMP 7.0.31 (x64)
我目前用的是第一个
这个是启动后的截图

2.打开 sublime_text3

我这里是这个软件，别的写PHP的也可以，不过我是第一次写，还没用过别的，不知道什么样的好用

3.放一下我代码截图

看到左边的文件名了吗，我在小程序端就是按照这个写的，
当然也可以在右边的黑框里右键，复制文件路径，然后把www及之前的改为127.0.0.1

这里面那些注释的都没用，我先把有用的代码放上来，因为我是第一次写PHP，所以很多地方都不会，上面那些注释的东西都是我尝试的，
第2行是返回的类型什么的，我一会在我PHP学习的博客中细说
第4行的那个是我尝试着建立一个集合，结果第8行的就行，我第4行反而整成两个集合了
然后除了15行其他的都是尝试打印返回什么的，第10行也能用，并且可以避免乱码，但是我没乱码，就用11行的那个了，我估计这return也能用，一会试试
刚刚尝试了一下，还是用第10行的那个吧，突然乱码了，换成第10行的就行了

<?php
	header('Content-Type:application/json; charset=utf-8');
	$map = array('code'=>0,'message'=>'连接成功');
	echo json_encode($map,JSON_UNESCAPED_UNICODE);
	# 127.0.0.1\project_text1\index.php
?>

4.然后谷歌试一下，就放127.0.0.1\project_text1\index.php这个路径

这是换成第10行后的截图

看路径了吧，和我小程序上的路径一模一样，这样就是能用了

四、小程序上点一下

0.0终于到了最终的时候了，虽然我已经尝试了好多次了，但是这是写博客时的第一次，至少假装开心一下，

点击测试按钮，查看控制台输出，这是图，
看红框，成功了，获取PHP后台的值了，这样就连接上PHP后台了

不得不说，PHP后台连接起来确实方便，并且挺小的，我感觉几个文件就能用，如果是小项目的话，根本就不需要什么ssm、springboot框架什么的（我是干Java的），直接连上就能用，太方便了