【小程序商城实战-Taro3开发-课程3】taro项目结构

一、目录结构

参考Taro渐进式入门教程

├── babel.config.js             # Babel 配置
├── .eslintrc.js                # ESLint 配置
├── config                      # 编译配置目录
│   ├── dev.js                  # 开发模式配置
│   ├── index.js                # 默认配置
│   └── prod.js                 # 生产模式配置
├── package.json                # Node.js manifest
├── dist                        # 打包目录
├── project.config.json         # 小程序项目配置
├── src # 源码目录
│   ├── app.config.js           # 全局配置
│   ├── app.css                 # 全局 CSS
│   ├── app.js                  # 入口组件
│   ├── index.html              # H5 入口 HTML
│   └── pages                   # 页面组件
│       └── index
│           ├── index.config.js # 页面配置
│           ├── index.css       # 页面 CSS
│           └── index.jsx       # 页面组件，如果是 Vue 项目，此文件为 index.vue

二、入口组件及其生命周期

备注：我使用VUE框架

入口组件目录包含：组件文件app.js、配置文件app.config.js、样式文件app.scss；

入口组件的生命周期包含：

1. onLaunch()  小程序启动时被调用
2. created()     
3. onShow()    小程序启动后或者从运行后台切换到前台显示时被调用
4. onHide()      小程序切换到运行后台时被调用

## 在app.js中添加红色代码，然后在微信开发者工具的控制台查看一下控制台日志输出内容

import { createApp } from 'vue'

# 先导入taro框架的api
import { getCurrentInstance } from '@tarojs/taro'

import './app.scss'

const App = createApp({
  
  # 实现onLaunch生命周期
  onLaunch(){
    console.log(getCurrentInstance().router);
  },

  onShow (options) {},
  // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
})

export default App

三、页面组件及其生命周期

页面组件目录包含：页面组件src\pages\xxx\index.vue、页面配置src\pages\index\index.config.js、页面样式src\pages\index\index.scss；

页面组件生命周期包含【即支持小程序的生命周期，也支持React、Vue的生命周期】：

序号	vue生命周期	微信小程序页面生命周期	说明
1	beforeCreate
2	created()	onLoad(options)	页面加载时触发，一个页面只会调用一次，此时页面 DOM 尚未准备好，还不能和视图层进行交互
3		onShow()	页面显示/切入前台时触发
4	beforeMount()
5	mounted()	onReady()	页面初次渲染完成时触发，一个页面只会调用一次
6	beforeUpdate()		页面即将更新
7	updated(prevProps, prevState)		页面更新完毕
8	beforeDestroy()		页面卸载时触发
9		onHide()	页面隐藏/切入后台时触发， 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等
10	destroyed()	onUnload()	页面卸载

## 在src\pages\index\index.vue中添加红色代码，然后在微信开发者工具的控制台查看一下控制台日志输出内容

<template>  <view class="index">    <text>{{ msg }}</text>  </view></template>

<script>

import { ref } from 'vue'

import './index.scss'

export default {

  setup () {

    const msg = ref('Hello world')

    return {      msg    }

  },

  onShow () {    console.log('onShow')  },

  onReady () {    console.log('onReady')  },

  onHide () {    console.log('onHide')  },

}

</script>

四、相关背景知识

1、ESLint 是一款语法检测工具。因为 JavaScript 本身是一门灵活的动态语言，一千个 JavaScriptor 就有一千种写法。

(a)在vs code中安装ESLint插件；

(b)查看vs code右下角状态栏的ESLint是否开启状态；

2、scss文件

      参看： 世界上最成熟、最稳定、最强大的专业级CSS扩展语言

3、vue3.0新增生命周期钩子

setup函数是处于 围绕 beforeCreate 和 created 生命周期钩子运行  也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的