IDE项目与工程

chanchaw大约 4 分钟mini

文件结构与配置

入口

miniprogram\app.js 是小程序的入口文件，不可修改该文件的名称（文件名称必须是app），并且两个文件 app.js 和 app.json 必须有

项目配置文件

项目根目录下有两个配置文件 project.config.json 和 project.private.config.json ，前者保存与最终编译结果有关的设置，后者一般保存开发者独有的配置（一个项目多人协作开发），所以后者应该纳入文件 .gitignore 中配置项：

导航栏文本在 app.json # window.navigationBarTitleText
导航栏背景色 app.json # window.navigationBarBackgroundColor

文件结构以及创建视图

小程序类似 vue 项目，一个视图为一个目录，共有4个文件： list.js - 页面逻辑 list.wxml - 页面结构 list.json - 页面配置 list.wxss - 页面样式有两种快速创建视图组件的方法

在项目 pages 目录下创建名称为 list 的目录，在目录右键菜单创建文件填写 list，注意不要填写后缀名，立即回车，IDE 会自动创建该名称的4个文件
在 miniprogram\app.json # pages 下新增一行代码 pages/list/list，IDE 也会自动创建该目录以及其下的4个文件

项目公共组件推荐放在根目录下的 component 下，页面专用的组件就放在页面的目录下，一般不管是公共组件还是页面专用组件都是用一个文件夹存放本组件的所有文件。公共组件要做全局注册，在文件 app.json 中的 usingComponents 中进行注册，此后可在任意页面使用。页面专用的组件注册在页面专有的 json 文件中的 usingComponents 下，注册后只有本页面可以使用

制作视图的两种方式

视图主逻辑文件 *.js 或者 *.ts 可以使用 Page 方法制作一个页面，也可以使用 Component 方法制作。不同的是后者有如下要求：

*.json 文件中必须有代码 { "usingComponents": {}}
视图中按钮的点击方法等必须放在 Component.methods 属性下
生命周期的钩子函数、事件监听方法也必须放在 methods 方法下
Page 方法构建的页面只有在钩子函数 onLoad 中能接受 URL 参数，而使用 Component 方法创建的页面也可以通过 properties 接受URL参数在业务逻辑代码中可通过 this.data.参数key 获取参数数据，或者 this.properties.参数key 获取参数
只有 Component 方法有 observers 属性，从而可以监听数据变动，而 Page 方法没有

成员角色

小程序提供两种不同成员角色：项目成员和体验成员。前者是开发、运营小程序的角色，后者是用户角色。

视图与渲染

尺寸单位rpx

为解决不同品牌型号手机屏幕的适配问题，微信小程序退出了 rpx 单位，它是小程序新增的自适应单位，它可以根据不同设备的屏幕宽度进行自适应缩放，规定任何手机的屏幕宽度都是 750 rpx

渲染模式

2024年9月4日 12:39:15 拥有两种渲染模式：Skyline 和 WebView。目前前者还不稳定，新创建的项目已经默认使用前者，如果要使用后者，像下图一样删除3个选项即可

事件

事件冒泡

使用 bind 绑定的事件会触发事件冒泡，如果想要阻止事件冒泡，可以使用 catch 来绑定事件。

传参方式：data-

在组件上通过 data- 的方式定义需要传递的数据，减号后面跟传递的属性名称，例如 <button data-id=11> 表示多个按钮中当前按钮的ID是11

<button type="primary" bind:tap="handleTap" size="mini" data-id="11" data-name="张三">点击我</button>
<button type="primary" bind:tap="handleTap" size="mini" data-id="12" data-name="李四">12</button>

  handleTap(e){
    console.log(e.currentTarget.dataset)
  },

// 打印效果
{id: "12", name: "李四"}

传参方式：mark

通过 mark 标记也可以进行事件传参例如 <button mark:id = "11">，其实类似 data- 的方法

集成第三方

sass

在配置文件 project.config.json 中设置如下属性，表示支持 typescript 和 sass

  "setting": {
    "useCompilerPlugins": [
      "typescript",
      "sass"
    ],
  }

设置完毕后记得修改视图的 wxss 文件为 *.scss，同样的不管是全局 wxss 和是视图的 wxss 都可以修改为 scss

IDE项目与工程

# 文件结构与配置

# 入口

# 项目配置文件

# 文件结构以及创建视图

# 制作视图的两种方式

# 成员角色

# 视图与渲染

# 尺寸单位rpx

# 渲染模式

# 事件

# 事件冒泡

# 传参方式：data-

# 传参方式：mark

# 集成第三方

# sass