E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

一、准备工具,账号,项目,什么的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的软件,就不给展示了,如果没弄好,就先百度一下,整整PHP1.启动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行的就行了?phpheader(‘Content-Type:application/json; charset=utf-8’);$map = array(‘code’=0,’message’=’连接成功’);echo json_encode($map,JSON_UNESCAPED_UNICODE);# 127.0.0.1project_text1index.php?4.然后谷歌试一下,就放127.0.0.1project_text1index.php这个路径这是换成第10行后的截图看路径了吧,和我小程序上的路径一模一样,这样就是能用了四、小程序上点一下0.0终于到了最终的时候了,虽然我已经尝试了好多次了,但是这是写博客时的第一次,至少假装开心一下,点击测试按钮,查看控制台输出,这是图,看红框,成功了,获取PHP后台的值了,这样就连接上PHP后台了不得不说,PHP后台连接起来确实方便,并且挺小的,我感觉几个文件就能用,如果是小项目的话,根本就不需要什么ssm、springboot框架什么的(我是干Java的),直接连上就能用,太方便了

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序学习(七):尝试QQ小程序,并初步连接PHP后台(QQ小程序连接PHP后台接口,链式函数)(别说了,我就是喜欢傻瓜教学)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏