微信小程序全栈式开发：基于 WAMP 的新闻网小程序实战

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

微信小程序全栈式开发：基于 WAMP 的新闻网小程序实战

目录

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

新闻网界面前端开发完成后，我们不使用微信开发工具自带的云开发（云数据库）等功能，而是使用PHP脚本程序连接本地MySQL数据库，将物理机搭建成本地服务器微信小程序全栈式开发：基于 WAMP 的新闻网小程序实战，体验微信小程序全栈开发。

前期工作请下载您要使用的前端项目源码和后端工具资源。

前端项目源码目录如下：

后端工具资源目录如下：

1.前端（实现小程序界面）

将小程序项目导入微信开发工具，项目结构比较简单，只涉及两个接口：index、my。

1.1 索引页

1.2 我的页面

2. 后端（搭建本地服务器） 2.1 安装连接数据库的工具

下载本项目所涉及的工具，执行.exe文件，按照下面的步骤一步步完成。

在接下来的步骤中，您可能会遇到端口占用、浏览器未找到等问题，如果遇到相关问题，可以查看解决方案，避免陷阱。

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

输入用户名root、密码root，点击MySQL

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

连接到数据库

创建新数据库

创建新表并保存

添加记录

创建新用户

添加新闻权限

将准备好的新闻素材SQL数据库文件导入到表中

2.3 配置并搭建本地服务器

自定义文件名

在浏览器输入127.0.0.1/test，如果出现如下图则表示部署成功（注意自定义修改的文件名要和浏览器输入的内容一致）

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

在文件目录WWW中查找///Conf/.php

设置相应的数据库配置，保证成功连接数据库

然后在下面的目录中找到.class.php并配置.php文件

按需求配置端微信小程序开发，即用PHP语言实现的程序代码

在浏览器中输入测试

在浏览器中输入测试

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

3.连接前后端3.1找到utils/.js文件

不再使用小程序中的js程序来访问数据，而是在php文件中通过数据库语言来访问数据，修改.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 修改.js代码，向服务器发送请求数据

代码如下：

//获取新闻列表接口
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
}

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等