小程序 | 基于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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

---