小程序 | 基于WAMP的新闻网小程序开发（体验全栈式开发微信小程序）

之前学习微信小程序开发，主要是基于JS、WXML、WXSS的前端开发，对于后端技术不精的我也是使用了微信开发者工具中的云开发功能，但是今天突发奇想，特别想体验一下全栈式开发微信小程序，学习了一下基于WAMP的新闻网小程序开发。

文章目录

微信小程序全栈式开发之基于WAMP的新闻网小程序开发主体思路如下：

前端：JavaScript、WXML、WXSS
后端：WAMP（Windows + Apache + MySQL + PHP）

在前端新闻网界面前端开发完成后，不使用微信开发者工具中自带的云开发（云数据库）等功能，而是通过使用Apache和PHP脚本程序连接本机的MySQL数据库，将物理机搭建成一个本地服务器，体验一下微信小程序的全栈式开发。

前期工作，请将要使用的前端项目源代码和后端工具资源下载下来。
前端项目源代码目录如下：
在这里插入图片描述

后端工具资源目录如下图：
在这里插入图片描述

一、前端（实现小程序界面）

将小程序项目导入到微信开发者工具，项目结构比较简单，只涉及到了两个界面index和my。

1.1 index页面

在这里插入图片描述

1.2 my页面

在这里插入图片描述

二、后端（搭建本地服务器）

2.1 安装phpStudy工具连接数据库

下载本项目涉及到的phpStudy工具，执行.exe文件，按照下面操作一步一步完成。
在这里插入图片描述

在下面这一步，可能会遇到端口被占用、浏览器Not Found等问题，如果遇到相关问题可以查看一下避免踩坑的解决方法。

打开浏览器，输入localhost查看连接MySQL是否成功。

输入用户名root和密码root，点击MySQL检测
在这里插入图片描述

2.2 使用Navicat数据库工具连接数据库

连接数据库
在这里插入图片描述
新建数据库

新建表，保存mynews

添加一条记录

新建一个用户

给news添加一个select权限

向表中导入事先准备好的新闻素材SQL数据库文件

2.3 配置phpStudy搭建本地服务器

在这里插入图片描述
自定义修改文件名

在浏览器输入127.0.0.1/mynews测试，出现下图则部署成功（注意自定义修改文件名要与浏览器中输入的内容一致）

2.4 进一步配置.php文件实现核心功能

在phpStudy文件目录中WWW下找到mynews/Application/Common/Conf/config.php
在这里插入图片描述
设置对应的数据库配置，保证成功连接数据库

再根据下图目录找到Controller中的IndexController.class.php，配置.php文件

按要求配置，即用php语言实现的程序代码

在浏览器中输入http://127.0.0.1/mynews/Index/getNewsList测试
在这里插入图片描述
在浏览器中输入http://127.0.0.1/mynews/Index/getNewsById/id/1001测试

至此，小程序后端的本地服务器已经搭建完成。

三、连接前后端

3.1 找到utils/common.js文件

不是使用小程序中的js程序访问数据，而是通过php文件中的select数据库语言访问数据，修改common.js文件中小程序原来的代码（下面是原来的代码）

//获取新闻列表
function getNewList()
{
    
    
  let list = [];
  for( var i = 0; i < news.length; i++){
    
    
    let obj = {
    
    };
    obj.id = news[i].id;
    obj.poster = news[i].poster;
    obj.content = news[i].content;
    obj.add_date = news[i].add_date;
    obj.title = news[i].title;
    list.push(obj);
  }
  return list;
}


//获取新闻内容
function getNewsDetail(newsID)
{
    
    
  let message = {
    
    
    code:'404',
    news:{
    
    }
  };
  for( var i = 0; i < news.length; i++){
    
    
    if( newsID == news[i].id ){
    
    
      message.code = '200',
      message.news = news[i];
      break;
    }
  }
  return message;
}


module.exports = {
    
    
  getNewList:getNewList,
  getNewsDetail:getNewsDetail
}

3.2 修改common.js代码向服务器发送request请求数据

在这里插入图片描述
代码如下：

//获取新闻列表接口
var getNewList = 'http://127.0.0.1/mynews/Index/getNewsList'

//根据新闻ID获取新闻内容接口
var getNewById = 'http://127.0.0.1/mynews/Index/getNewsById'

//跳转新闻浏览页面
function goToDetail(id)
{
    
    
  wx.navigateTo({
    
    
    url: '../detail/detail?id=' + id,
  })
}

module.exports = {
    
    
  getNewList:getNewList,
  getNewById:getNewById,
  // getNewsDetail:this.getNewsDetail,
  goToDetail:goToDetail
}