【临时抱佛脚之实习日志】将js与php建立联系，用js形成微信小程序的前后端交互

最新推荐文章于 2024-05-05 21:19:27 发布

rosediver

最新推荐文章于 2024-05-05 21:19:27 发布

阅读量310

点赞数

文章标签： javascript 微信小程序开发语言

本文链接：https://blog.csdn.net/rosediver/article/details/131451364

版权

本文介绍了在没有相关经验的情况下，如何在物联网专业背景下学习并应用JS、PHP进行微信小程序的开发，特别是JS与PHP之间的数据交互，涉及HTTP请求、JSON编码以及前后端安全。同时，文章提到了在遇到错误时如何解决问题，并概述了微信小程序的结构和组件如wxml、wxss的作用。

摘要由CSDN通过智能技术生成

受不了了这破班一天也上不下去了，我一个学物联网的，js，php和wxml一个没学过，连选修的数据库都没选我在这给人家写小程序，也不怕人家告我诈骗。

将js与php建立联系

为什么二者要建立联系？

首先，js和PHP作用几乎相同，那为什么要分别使用两种语言呢？

因为安全，PHP和后端（数据库）交互，js和前端（wxml，wxss）交互，然后js和PHP互相请求数据，这样可以保护数据，提高安全性。

如何建立联系？

参考:如何在JavaScript中获取PHP返回的数组数据-PHP问题-PHP中文网

怎样实现js调用php文件-PHP问题-PHP中文网

编写PHP文件时，需要使用echo语句将生成的内容输出，以便JS能够获取到数据。

<?php
  $arr = array('name'=>'rosediver','age'=>17);
  echo json_encode($arr);
?>

在JS中调用PHP文件时，需要指定请求方式（GET或POST）、URL地址和传递的参数等信息。

export class Http {
  //异步HTTP请求
  static request(url, method, data, backMethod = null) {
    wx.request({
      url: url,
      method: method,//方法
      data: data,
      success: res => {
        if(backMethod){backMethod(res);}
        return res;
      }
    })
  }

在PHP文件中，需要使用$_POST、$_GET等变量获取JS传递过来的参数值。

$_GET['target']

在调用PHP文件时，需要等待服务器响应，因此在JS中需要定义回调函数来接收服务器响应后的处理结果。

const promisic = function (func) {
  return function (params = {}) {
    return new Promise((resolve, reject) => {
      //Promise用来封装一个异步操作并可以获取其成功/失败的结果值
      const args = Object.assign(params, {
        success: (res) => {
          resolve(res);
        },
        fail: (error) => {
          reject(error);
        }
      });
      func(args);
    });
  };
};

注：get是正常传输，即数据会在url显示出来。post是私密传输，用于传输一些比较私密的数据如password，不会显示出来。

微信小程序的结构

由于js需要依托wxml运行，而我负责的购物车板块又在app.json下，因此我需要先读懂微信小程序（公司给的学习代码）。具体参考：微信小程序-04-详解介绍.json 配置文件_app.json里custom是什么_肖朋伟的博客-CSDN博客

开启 custom 后，低版本客户端需要做好兼容。注：.json文件

"custom": true,

先运行一下代码

可以看到什么都没有就出了一大堆错误，没有关系心平气和，一个一个解决

错误：[ appservice 生成错误] config/index.js: file: config/index.js
unknown: Missing semicolon. (1:7)

解决方法您猜怎么着？export写成aexport了，点进去报的错是应为“;”。ts(1005)，因此遇到这个可能是关键字写错了。

请教过同学以后发现那些bug不用修复，挺好的。

看完代码发现，app.json将小程序分为四个模块：首页，分类，购物车和个人中心。我负责的是购物车的展示页面。

购物车要展示加入购物车的商品，首先要获取数据，再将获取数据传入即可。这里主要讲述传输数据的流程.

首先定义配置变量

export const config = {
  /** 是否使用mock代替api返回 */
  useMock: true,
};

然后获取mock数据，再转化成正常数据。

function mockFetchCartGroupData(params) 
function fetchCartGroupData(params)

最后再在wxml上输出。

最开始会发现什么都没有，是因为加了“购物车空态”，作用是隐藏数据界面

<cart-empty wx:else bind:handleClick="onGotoHome" />
<t-toast id="t-toast" />
<t-dialog id="t-dialog" />

用js形成微信小程序的前后端交互

微信小程序的前端开发，需要掌握js，wxml和wxss，其中wxml和wxss类似于html和css。不过我也没学过就是了，6

三者的区别和作用

.wxml	小程序页面视图
.wxss	小程序页面视图修饰
.js	小程序逻辑层

至于json，这个是其作用配置导航栏的文字、背景颜色、页面底部tabbar等的内容，完全属于页面设计，据说已经做好了我们不负责这块，当然，其实wxss也不太需要我们编写。所以接下来主要学习js和wxml。至于为什么非要学习wxml，当然是因为js不能单独运行，需要依托于xxml才能运行啊。

当然，前端不用我负责，我只需要负责把后端的数据上传上去就可以了。后端上传数据的流程是：PHP脚本获取数据库数据，js向PHP发送请求接收数据，将数据转化成mock。

PHP脚本获取数据库数据

参考上期：【临时抱佛脚之实习日志】编写php脚本调用数据库内数据，解读js封装内容_rosediver的博客-CSDN博客

js向PHP发送请求接收数据

const { Http } = require("./request");

Http.asyncRequest('FuTest.php','get','trade_info');

var xhr = new XMLHttpRequest();//创建对象
xhr.onreadystatechange = function(){
  if (xhr.readyState == 4&& xhr.status==200){
    var data = JSON.parse(xhr.responseText);//将json格式数据转化为js对象并存储在data中
    console.log(data.id);
    console.log(data,userid);
  }
}
xhr.open('get','FuTest.php',true);//设置请求方式，地址和异步标识
xhr.send();//发送请求