如何基于WAMP+.的高校新闻小程序-第15章

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

如何基于WAMP+.的高校新闻小程序-第15章

01 需求分析 新闻页面的功能需求 02 新闻页面的功能需求如下：阅读新闻全文的页面需要显示新闻标题、来源、日期、图片（可选）和内容； 允许单击按钮将当前阅读的新闻添加到本地收藏文件夹中； 您也可以点击 按钮取消采集已采集的新闻。 01 需求分析 个人中心页面的功能需求 03 个人中心页面的功能需求如下：未登录时显示登录按钮，用户点击后可显示微信头像和昵称； 登录后读取当前用户的收藏夹，并显示收藏的新闻列表； 您可以直接点击收藏夹中的新闻查看内容； 01 需求分析 02 准备工作 02 准备工作小程序准备 0102 准备工作小程序准备 011) 创建项目 02 准备工作 1) 创建项目 为了节省时间，这里我们直接把将2.1.5节中完成的小程序空白模板代码复制包并重命名，导入开发工具等待改造。 导入方法请参见2.1.5节“2 导入代码包”。 小程序准备 0102 准备小程序准备 012) 页面配置 02 准备 2) 页面配置，在app.json文件的pages属性中添加2个新的路径地址“pages//”和“pages/my/my”。 ，然后按快捷键Ctrl+S保存修改，pages文件夹中会自动生成my目录及其内部页面文件。

规划的索引页用于显示首页； 我的页面用于显示个人中心以及首页切换效果； 该页面用于显示新闻内容详细信息。 小程序准备 0102 准备小程序准备 013）图片素材 02 准备 3）图片素材 在根目录下新建文件夹，用于存放图片素材。 该项目将在列中使用两组图标文件。 图标材质如图所示。 小程序准备 0102 准备小程序准备 014) 公共 JS 文件 02 准备 4) 公共 JS 文件 在根目录下新建 utils 文件夹，用于存放公共 JS 文件 .js，将用于存放服务器接口信息，常量、公共函数等小程序准备 01// ===================// 1 服务器地址配置 // ========== ====== ===// 1-1 服务器基址（请根据实际情况修改） const = ':8000/'?// 1-2 【获取新闻列表】接口 const = + ''? // 1-3 【根据新闻id获取新闻内容】 const = + ''当前项目以本地模拟服务器效果为例。 如果开发有条件自建或租用真实服务器，以后可以将其替换为实际的IP地址或域名地址。

02 准备工作 4) 公共JS文件续然后继续在.js中添加自定义名称的常量，记录5条新闻栏目编号id和名称 mon.js 代码片段如下：小程序准备 01// 2 公共常量-新闻类型汇总 const = [ { id: 1, name: '*新消息' }, { id: 2, name: '学校新闻' }, { id: 3, name: '科研学术' }, { id: 4, name: '媒体报道' }, { id: 5, name: '通知公告' }];02 准备工作 4) 公共JS文件续接下来继续在.js中添加自定义名称的公共函数 和 ，分别用于打开新闻文本页面和弹出消息提示框。 .js 代码片段如下：小程序终端准备 01// 3 公共函数 - 跳转到新闻正文页面(id) { wx.({ url: '..//?id=' + id, })}? // 4 公共函数-弹出Toast消息提示框(msg) { wx.({ title: msg, : 3000 //持续3秒})}02 准备工作 4) 公共JS文件续. *后，您需要使用 . .js 中的语句公开变量和函数退出。 代码片段如下：小程序准备01 // 导出公共常量和函数。 = { : , : , : , : , : }02 准备工作 4) 公共 JS 文件（续） 然后需要在每个页面添加 JS 文件的顶部引用公共 JS 文件。 参考代码如下：小程序准备 01var = ('../../utils/.js') //引用公共JS文件时，请注意，这里小程序还不支持绝对路径。 对于参考，只能使用相对路径。

02 准备工作 服务器端准备工作 0202 准备工作 服务器端准备工作 021）服务器部署 02 准备工作 1）服务器部署 本例中我们使用PC安装第三方免费的v8.1包来模拟服务器效果。 该软件包的下载、安装及启动步骤请参见第五章“5.1.3 临时服务器部署”。 启动后的效果如图所示。 服务器端准备 0202 准备工作 服务器端准备 022）数据库部署 02 准备工作 2）数据库部署 套件中已经一键安装和配置 MySQL 数据库。 这里我们可以使用第三方免费的MySQL来管理MySQL数据库。 。 服务器端准备 0202 准备工作2）数据库部署（续） 提前制作一些新闻数据。 服务器端准备 0202 准备工作 2）数据库部署（续） **行是字段名，共7个，介绍如下： id：新闻编号，每条新闻的编号不重复；：新闻类型编号，例如3表示“科学研究”“学术”，5指“通知、公告”等；：新闻标题；：新闻文字内容；：新闻来源，例如投稿单位为“美术学院”；：新闻添加日期；：新闻海报图片的URL地址如何基于WAMP+.的高校新闻小程序-第15章，如果不可用，则省略填充。

服务器端准备 0202 准备工作2）数据库部署（续） 将数据导入MySQL数据表。 服务器端准备 0202 准备工作 服务器端准备 023) .0 框架安装和部署 02 准备工作 3) .0 框架安装和部署 第 5 章学习网络 API 时，示例和阶段案例都是从头开始手写 PHP 文件制作的。 接口模式。 但随着数据量的增加微信小程序开发零基础入门，接口的需求增加，逻辑处理变得更加复杂，我们不妨考虑使用基于PHP的框架来帮助我们提高效率。 这里选择了国内开源框架.0（简称：TP6）来辅助完成本案例。 服务器端准备 0202 准备工作3）.0框架安装部署续..0需要PHP版本>=7.1.0支持，请检查套件中的PHP版本是否满足要求（默认版本即可）。 需要注意的是，从6.0版本开始，不再允许直接下载，必须使用方法下载更新。 服务器端准备 0202 准备3).0框架安装部署续是 PHP 的依赖管理工具。 操作系统开发需要安装从官方地址下载的安装文件/-Setup.exe； Mac OS X 或 Linux 可以运行以下命令安装：服务器端准备 -sS / | phpmv .phar /usr/local/bin/ 注：使用不方便的开发也可以直接使用本书提供的源码包。

02 准备工作3).0框架安装部署续安装完成后，使用命令提示符切换到Web根目录WWW，运行以下命令并回车即可下载.0框架代码包： 服务器端准备 - /think 末尾的“tp” tp是自定义的代码包名称，开发可以自行更改。 例如，在本例中，它将被重命名为“”代码包。 02 准备工作3).0框架安装部署续现在只需要*后一步来测试.0是否安装成功。 使用命令提示符切换到Web根目录WWW中的TP6框架代码包目录，然后执行以下命令并回车： 服务器端准备 02php think run02 准备3).0框架安装部署续。 然后在浏览器中访问“:8000/”。 如果看到欢迎页面，则说明安装成功。 效果如图所示。 服务器端准备 0202 准备工作 服务器端准备 024) 界面制作02 准备工作 4) 界面制作PHP开发工具比较流行，比如等等，但是目前的内容比较简单，也可以直接使用文字之类如，或者++编辑器工具用来打开和编写，由开发自由选择。

服务器端准备 0202 准备4）接口制作续首先，连接数据库。 根目录中有一个名为“..env”的文件。 这是一个环境变量配置示例文件，可以直接重命名为“.env”来使用。 更改名称后，请在.env 文件中配置数据库连接参数。 代码如下： 服务端准备 = true?[APP] = Asia/?[]TYPE = = = = = = = = true?[LANG] = zh-cn02 准备工作 4）界面制作续。 其实这里只修改了第8-11行的内容。 其他的都包含在示例代码中。 解释如下： ：主机名，本地使用； ：数据库名称，此处使用。 MySQL中创建的数据库；：数据库的用户名，默认为root，开发也可以添加其他用户；：数据库的密码：root用户的默认密码也是root，开发可以自行修改； 另外，第12行指的是端口号。 MySQL默认端口号是3306，这里保持不变。

服务器端准备 0202 准备 4）界面制作续..0也采用了MVC模式，可以高效处理逻辑，所以找到根目录下的app目录，在其中添加一个model文件夹，用于存放模型文件。 目前只有一张数据表，因此只需新建一个模型文件即可。 注意，文件名必须与数据表同名，但首字母必须大写。 /app/model/News.php文件内容如下： 服务端准备02

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