重生之制作短视频小程序第一课总结

一、小程序目录结构

                由app.js，app.json，app.wxss，pages文件夹组成

二、样式文件

        2.1 样式导入：分离到各自独立的文件中，让 HTML 文件大小大幅减少了，从而让页面结构更容易被程序员和网络爬虫读懂 对搜索引擎友好，让搜索引擎给页面评分更高，有利于页面搜索引擎排名。

        2.2 获取全局实例：

1. 资源重用：全局实例可以避免重复创建相同的实例，从而节约资源。
2. 代码一致性：全局实例能够保持代码逻辑的一致性，因为所有调用都使用同一个实例。
3. 方便维护：全局实例便于管理和维护，因为问题或错误只可能发生在单一的实例中

补充：

2.3 页面跳转：允许用户根据需求在不同的页面间自由导航，从而提升用户体验

三、小程序的事件触发

        通过行为进行人机交互；获取数据e.currentTarget.dataset.xxxx

四、小程序的模块化 

        抽离通用方法作为通用函数，构建utils-common类  可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口

五.细说数据绑定

5.1 先在js里面data:{key:value(a:"sw")}在去wxml里面写{{key}}

 5.2 组件属性：可以将数据写到组件属性里面去

六、列表渲染

for循环 <view wx:for>， <block wx:for>  
        在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

        使用 wx:for-item 可以指定数组当前元素的变量名，

        使用 wx:for-index 可以指定数组当前下标的变量名：

七、条件渲染

        <view wx:if="{{condition}}"> True </view>(判断单个组件)
        <block wx:if="{{true}}">
                  <view> view1 </view>
                  <view> view2 </view>
        </block>（判断多个组件）

八、为页面定义通用模板
        8.1 定义模板使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段
        8.2使用模板 使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入

九、wxs模块

        wxs：是一种用于微信小程序的脚本语言，具有数据绑定和逻辑处理的功能，并且可以在WXML中调用；适合在无法直接使用JavaScript的场合下使用；在WXML中，无法调用页面.js中的函数，但可以使用WXS中定义的函数；WXS文件相当于一个独立的模块，能够通过module.exports导出供其他文件使用。

（模板和模块区别：做模板是template页面级元素，模块是js代码；js代码块可以在页面中被引入使用；定义*.wxs文件，module.expotrs暴露接口属性，然后引入<wxs src="" module=""/>）

补充：若有不足，欢迎指出和补充！！！！