小白开发微信小程序之路（1）开端

最新推荐文章于 2023-08-22 17:09:51 发布

努力敲代码的小方

最新推荐文章于 2023-08-22 17:09:51 发布

阅读量207

点赞数

分类专栏：小白开发微信小程序之路

本文链接：https://blog.csdn.net/weixin_45941945/article/details/114900113

版权

小白开发微信小程序之路专栏收录该内容

2 篇文章 0 订阅

订阅专栏

开端

选择的是B站上的黑马程序员的课程
使用平台是微信开发者工具，下载地址是微信开发者下载
很多基本信息都可以在这个网站上学习到

基础知识

MINA指的就是原生框架
WXML 写标签
WXSS 写样式
JavaScript 写逻辑
pages ydmin

全局配置文件

接下来依次介绍app.json中的三个字段

page字段

可以在app.json的pages处直接添加字段并保存，将会自动生成相应的文件夹，
注意这个必须要在微信开发者工具中进行这个操作，在其他软件（如vscode）中直接添加字段是不会自动帮你新建相应文件夹的
在这里插入图片描述

在pages数组中的第一个则是默认的起始页

window字段

定义小程序所有界面的顶部背景颜色，文字颜色定义等
在这里插入图片描述

配置文件在微信开发者工具中写
自己的标签样式逻辑在Vscode中写

tabbar字段

底部导航栏，list中的每一个元素就是底部导航栏的一个界面

  "tabBar": {
    "list": [{
      "pagePath": "pagePath",//跳转路径
      "text": "text",//名称（ex：购物车、我的）
      "iconPath": "iconPath",//未被选中时的图标
      "selectedIconPath": "selectedIconPath"//被选中时的图标
    }]
  }

注意此处用到的icon文件需放置在与pages同层地址处，图标可以在阿里图标上找
tabbar的属性：
在这里插入图片描述
注意这些属性都是同一级别的，比如说要为添加color，是要在list同一级别添加的

app.json

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/img/img",
    "pages/mine/mine",
    "pages/search/search",
    "pages/demo01/demo01"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "enablePullDownRefresh": true,
    "backgroundColor": "#1158FF",
    "navigationBarBackgroundColor": "#0094ff",
    "navigationBarTitleText": "我的应用",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icon/_home.png",
        "selectedIconPath": "icon/home.png"
      },
      {
        "pagePath": "pages/img/img",
        "text": "图片",
        "iconPath": "icon/_img.png",
        "selectedIconPath": "icon/img.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "个人中心",
        "iconPath": "icon/_my.png",
        "selectedIconPath": "icon/my.png"
      },
      {
        "pagePath": "pages/search/search",
        "text": "搜索",
        "iconPath": "icon/_search.png",
        "selectedIconPath": "icon/search.png"
      }
    ],
    "color": "#AA00FF",
    "selectedColor": "#00FFFF",
    "backgroundColor": "#0000FF",
    "position": "top"
  },
       
  "sitemapLocation": "sitemap62.json"
}