豆瓣电影评分(微信小程序)——Day2

项目准备工作

1.新建项目

APPID是自己申请的，在微信公众平台可复制，也可使用测试号。

2.删除多余页面，构建如下目录结构（app.json中的页面需要手动删除）

3.修改app.json为豆瓣主题色
app.json

{
  "pages": [
    "pages/home/home",
    "pages/list/list",
    "pages/my/my"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#42bd56",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

主题色如下图所示：

4.小程序中使用的图标在iconfont官网下载，[下载链接](https://www.iconfont.cn/)

1. 将需要使用的图标加入购物车
2. 批量下载至本地（down.zip）
3. 解压该文将，将字体文件（包括eot,svg,ttf,woff）移动到新建的font文件夹中
4. 复制iconfont.css文件中所有内容到app.wxss中，修改url（增加了./font/*，【需修改多处】）

url('./font/iconfont.woff?t=1598342865255') format('woff')

5.在home.wxml中测试

<view class="iconfont icon-fangdajing"></view>

出现放大镜图标，则说明图标使用正确。

6.为小程序增加tabBar
所用图片放在image文件夹中，同样在iconfont网站中下载
app.json

{
  "pages": [
    "pages/home/home",
    "pages/list/list",
    "pages/my/my"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#42bd56",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath":"./image/home.png",
        "selectedIconPath":"./image/home1.png"
      },
      {
        "pagePath": "pages/list/list",
        "text": "详情",
        "iconPath":"./image/cat.png",
        "selectedIconPath":"./image/cat1.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath":"./image/my.png",
        "selectedIconPath":"./image/my1.png"
      }
    ]
  }
}

增加成功如图所示：

emmmm。。。先写到这吧……