高校新闻网——微信小程序

一、实验目标

1、综合所学知识创建完整的前端新闻小程序项目；2、能够在开发过程中熟练掌握真机预览、调试等操作。

二、实验步骤

1.创建项目

依次输入项目名称、选择目录、APPID等，注意选择不使用云服务。

2.修改添加与删除文件（及恢复文件初始化）

删除logs文件夹、utils文件夹，清空index.js、index.json、index.wxss、app.wxss文件中的内容，删除app.json文件中page属性里的"pages/logs/logs"，以及上一行的逗号，新增detail和my两个页面，新增images和utils文件夹分别用于存放图片资源和公共JS文件。

3.编写文件

（1）编译导航栏

"window": {
​
  "navigationBarTextStyle": "white",
​
  "navigationBarTitleText": "我的新闻网",
​
  "navigationBarBackgroundColor": "#328EEB"
​
 },

通过对window属性中内容进行修改，可以达到修改导航栏的作用。例如将原本白底黑字修改为蓝底白字，并修改文字内容。

（2）tabBar设计

在app.json中添加代码以启用tabBar，同时引用images中的图片素材修改未选中和选中时的样式。

"tabBar": {
​
  "color": "#000",
​
  "selectedColor": "#328EEB",
​
  "list": [
​
   {
​
    "pagePath": "pages/index/index",
​
    "iconPath": "images/index.png",
​
    "selectedIconPath": "images/index_blue.png",
​
    "text": "首页"
​
   },
​
   {
​
    "pagePath": "pages/my/my",
​
    "iconPath": "images/my.png",
​
    "selectedIconPath": "images/my_blue.png",
​
    "text":"我的"
​
   }
​
  ]

（3）页面设计

1.首页：在index.wxml中编写代码。

<!--幻灯片滚动-->
<swiper indicator-dots="true" autoplay="true" interval="5000" duration="500">
  <block wx:for="{
  {swiperImg}}" wx:key='swiper{
  {index}}'>
    <swiper-item>
      <image src="{
  {