01 小程序入门与vscode开发加装插件

1.小程序目录

小程序框架的目标是通过尽可能简单的，高效的方式使得开发者可以在微信中开发具有原生app体验的服务

小程序框架提供了自己的视图层描述语言：wxml和wxss以及javasript（逻辑文件），并在视图层和逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑

1.1小程序文件结构与传统web对比

结构传统web 微信小程序

结构 HTML WXML

样式 CSS WXSS

逻辑 JavaScript JavaScript

配置无 JSON

因此传统web是三层架构，而小程序是4层架构

其中本处讲的框架是小程序概念

1.2 小程序项目目录

utils是自动生成的帮助文件，可以删除

app.js是本项目的入口文件，可以修改，不能删除

app.json 是本项目默认全局配置

app.wxss是本项目的默认全局配置

project.config.json：跟微信开发平台的详情里面一样，可以修改appid

sitemap.json 是配置小程序及其页面是否可以供微信搜索的，也就是在发布时候使用

1.3 小程序配置文件学习

1.3.1 全局配置文件app.json

pages字段

如果想创建新页面，小技巧是在pages中新建

"pages/新建名字/新建名字",

同时，如果想这个新建放在最首页，就把其放在"pages/index/index",

"pages": [
    "pages/index/index",    # 没有后缀名
    "pages/message/message",
    "pages/order/order",
    "pages/wode/wode",
    "pages/note/note"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "复鸿车管",
    "navigationBarTextStyle": "black"

  },
  "tabBar": {
    "color": "#bfbfbf",
    "selectedColor": "#d81e06",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首 页"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消 息"
      },
      {
        "pagePath": "pages/order/order",
        "text": "订单"
      },
      {
        "pagePath": "pages/wode/wode",
        "text": "我 的"
      }
    ],
    "position": "bottom"
  },
  "sitemapLocation": "sitemap63.json"
}

windows字段

含义是全局窗口展现

"window": {

"backgroundTextStyle": "light",

"navigationBarBackgroundColor": "#000", # 导航栏

"navigationBarTitleText": "复鸿车管",# 导航栏

"navigationBarTextStyle": "black"# 导航栏导航栏文字标题颜色，仅支持 black / white

小技巧：微信小程序下拉刷新 backgroundTextStyle与enablePullDownRefresh true

"backgroundTextStyle": "dark", "enablePullDownRefresh": true

小技巧：微信小程序下拉刷新时背景颜色 "backgroundColor":"#fff777"

tabbar字段相当于标签页的效果

"tabBar": {
    "color": "#bfbfbf",
    "selectedColor": "#d81e06",
    "list": [
      {
        "pagePath": "pages/index/index", # pages路径
        "text": "首 页"  # 标题

        “iconPath”：“图标路径” # 未选中

       “selectedIconPath”：“图标路径”  # 选中
      },
      {
        "pagePath": "pages/message/message",
        "text": "消 息"
      },
      {
        "pagePath": "pages/order/order",
        "text": "订单"
      },
      {
        "pagePath": "pages/wode/wode",
        "text": "我 的"
      }
    ],
    "position": "bottom"
  },

小技巧：微信tabbar字体颜色位置设置

color HexColor 是 tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor HexColor 是 tab 上的文字选中时的颜色，仅支持十六进制颜色

backgroundColor HexColor 是 tab 的背景色，仅支持十六进制颜色

position string 否 bottom tabBar 的位置，仅支持 bottom / top "position": "top"

1.3.2 页面配置文件pages文件下面的.json配置

此处讲的pages.json文件是独立定义的每个页面的一些属性，例如顶部颜色，是否允许下拉刷新等等

页面json的配置只能设置app.json中windows配置项的内容，页面中配置项会覆盖app.json的window中相同的配置项

img.JSON文件中

{

"usingComponents": {},

^{"navigationBarBackgroundColor": "#fff000",}

^{"navigationBarTitleText": "我的语文"}

}写完后，则单独img页面导航栏背景发生变化，还有下拉下拉背景等设置

1.3.3 sitemap.json配置

sitemap.json在小程序目录中，就是让其进行在微信小程序和页面在微信中搜索

配置示例

示例1

{
  "rules":[{
    "action": "allow",
    "page": "path/to/page",
    "params": ["a", "b"],
    "matching": "exact"
  }, {
    "action": "disallow",
    "page": "path/to/page"
  }]
}