【小程序开篇】小程序架构和配置

参赛话题：

🙊语录： 多一些不为什么的坚持 color{#0000FF}{多一些不为什么的坚持} 多一些不为什么的坚持 📝本文章收录于专栏：

🧢 初识小程序

小程序介于H5页面和APP之间的一项技术，自身也具有很大的有优势。体验比传统H5页面要好很多，相当于传统的App，使用起来更加方便，不需要在应用商店中下载安装，甚至注册登录等麻烦的操作；

小程序框架有：mpvue、wepy、uni-app 和 taro。现在uni-app 和 taro比较热门，后续会出uni-app实战的教程。

小程序的核心技术主要是三个：

页面布局：WXML，类似HTML； 页面样式：WXSS，几乎就是CSS(某些不支持，某些进行了增强，但是基本是一致的) ； 页面脚本：JavaScript+WXS(WeixinScript) ；

✓ 主要技术包括：WXML、WXSS、JavaScript（掌握）

🌽 创建项目

① 注册账号–申请APPID

，按照要求注册好账号。

② 开发者工具

PS：很多人喜欢用VSCode开发，也可以在VSCode中安装插件来开发小程序。

③ 创建小程序项目

④ 项目的目录结构

🥕 小程序双线程架构模型

双线程模型：

🍤 小程序的配置文件

project.config.json：项目配置文件, 比如项目名称、appid等； sitemap.json：小程序搜索相关的(一般不做修改) app.json：全局配置； page.json：页面配置；

① project.config.json配置文件

② 全局APP配置文件

全局配置比较多, 我们这里将几个比较重要的. 完整的查看官方文档.

"tabBar": {
          
   
    "selectedColor": "#ff8189",
    "list": [{
          
   
        "text": "首页",
        "pagePath": "pages/index/index",
        "iconPath": "assets/tabbar/home.png",
        "selectedIconPath": "assets/tabbar/home_active.png"
      },
      {
          
   
        "text": "我的",
        "pagePath": "pages/logs/logs",
        "iconPath": "assets/tabbar/profile.png",
        "selectedIconPath": "assets/tabbar/profile_active.png"
      }
    ]
  }

③ 页面page配置文件

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。