【视频笔记】微信小程序

微信小程序

借鉴小程序：苏体赛事，懂球帝

1. 介绍

1. 不需要安装
2. 微信小程序、支付宝小程序、百度小程序、抖音小程序等

2. 环境准备

注册账号

1. 新申请了126的邮箱:mini1136233862@126.com，密码：同学信网
2. 进入小程序注册页，密码与上同

获取APPID

1. 左侧菜单栏 – 开发 – 开发管理 – 开发设置 ：wx84899d034d4a1b31

开发工具

1. 下载
2. 可以有编码工具： ** 敲代码 + 开发者工具：预览 ** 的组合

3. 第一个微信小程序

1. 初次登录 – 扫码
2. 项目路径: 前往 / 个人 / WeChatProjects
3. 创建项目，全部使用最基础的：
   AppID：使用测试号（不使用云服务）-- 语言：JavaScript

4. 开发工具介绍

1. 界面：
   1. 菜单栏：

5. 小程序结构目录

自己的原生框架 ： mina

1. 和传统web对比：多了一个配置层
2. 文件夹pages：
   1. index文件夹：存放了首页的页面文件
   2. log文件夹：日志页面的文件
3. 文件夹utils：帮助文档
4. app.js
   1. 全局文件
   2. 入口文件
5. app.json
   1. 全局的配置文件：标题名称等
6. app.wxss
   1. 全局的样式文件
7. project.config.json
   1. appID等的配置文件
8. sitemap.json
   1. 只需要在发布时使用

6. 全局配置文件 ： app.json

pages字段

1. 当前页面中有哪些子页面，对应文件
2. 书写时无后缀
3. 在pages字段中加入新项，开发ide会自动帮你新建文件夹（vs code无此功能）
4. 第一个项即是入口页面

window字段

1. 小程序顶部
2. 属性 - 查文档

tabbar字段

1. 底部导航栏
2. 自己加
3. list数组中
   每一页就是每一项，每一项之间用逗号
   1. 每一页的路径：就是pages字段的一项
   2. 标题名称
   3. 未选中状态的图标 / 选中状态的图标 - 路径
4. 别的属性，可查文档

7. 页面配置文件 - page.json

1. 各个页面下的 局部配置文件的顶部导航栏（相当于window）
2. 上拉下拉
3. 可查文档

8. sitemap配置 - sitemap.json

是否允许被微信官方的爬虫查找，索引

9. 数据绑定前的代码编辑器技巧

1. vs code + 微信开发者工具 ：利用微信开发者工具的自动创文件功能
2. wxml / html文件中 ：
   1. text标签：相当于span。行内元素 - 不换行
   2. view标签：相当于div。默认换行
   3. 复选框：checkbox。激活属性：checked
3. js文件：
   1. 初始时不是空白，不能删除
   2. 初始化的数据：data域
4. 在vscode中安装插件 小程序开发助手
   1. 查看–扩展–“小程序开发助手”

10. 数据绑定

js文件和wxml/html文件。两个文件之间的联系

1. js文件

   1. data域，最初的数据

2. wxml/html文件

   1. 字符串 / 数字 / bool
      1. 两个{}中放js中的变量名 即： { {msg} }
   2. 对象类型object
      1. 具体属性。打点 即： { {person.name} }
   3. 在标签的属性中
      1. 要用引号包起来 即： “{ {msg} }”
   4. 在微信开发者工具控制台 的wxml中也可以看到数据
   5. 使用bool类型时，不要空格

11.语法

1. {{ 1+1 }}
2. {{ ‘1’+‘1’ }}
3. 数组：[ {},{},{} ]

4. 列表循环

格式

1. 数组：wx:for=" " — ""中为数组或者对象
   1. wx:for=" {{list}} "
2. 项：wx:for-item=" " — ""中为循环项的名称
   1. wx:for-item=" item "
3. 索引：wx:for-index=" " — ""中为循环项的索引
   1. wx:for-index=" index "

(只有一层循环时，可以省略2.和3. )
(非循环数组时–循环对象时。改一下名字)
(多层循环不可以重名)

index为专有名词？
item为专有名词？
需要在外层接一个数组名，index和item就为数组的item和index。

列表渲染，提高性能—提供key属性

1. 格式： wx:key=“”
   1. 字符串：只能是数组对象中的某个属性
      1. wx:key=“id” (id就是那个的属性)
   2. 固定写法：wx:key=“*this*”
      1. 表示item

12.block标签

写代码时能看见，渲染后看不到

1. 加类名 class=“my_class”
2. 循环时可以不用多加一层标签

13.条件渲染

wx:if

1. wx:if={{true/false}}，相当于判断语句 ， 也可以wx:elif/wx:else是一样的

hidden

1. hidden=“{{true}}”，可以隐藏标签

不频繁切换显示时，用if—本质是从页面直接移除
频繁切换时，用hidden—本质是添加样式

hidden不可与display一起使用，会覆盖掉hidden

14.事件绑定1(bind)

1. 在输入框输入时，在下方标签同步显示输入的值
2. 步骤：
3. 预备
   1. 新建页面，利用工具自动生成文件
   2. 进入js文件，删除掉多余内容，只留下一个data
   3. 在data中写一个参数num
   4. 进入wxml中，写入一个input组件
   5. 写一个view组件
4. 绑定
   1. 在wxml中的组件上，加入 bindinput=“函数”
   2. 在js中和data同一层级，写函数
   3. bindinput函数，每次input时都有响应。通过事件源对象
5. 赋值给的num
   1. 不可以用"="直接赋值
   2. 用set函数

15.事件绑定2(bind)

1. 通过"加号"，"减号"的button，控制输入框内容的+1和-1
2. 预备
   1. <button> 标签
   2. 加入手机端的点击事件， bindtap=“函数名”
   3. 不能直接传实参数 — 传参数方式，data-operation=“{{1}}”
   4. 也可以通过控制台参数e，看到，值就是：operation
   5. const? 常量
3. 不能确定时
   1. 通过控制台，使用参数e来看
4. 控制和设置
   1. 获取通过this.来获取
   2. 设置时通过set方法

16.样式 wxss，相当于css+一些新增

1. 尺寸单位:rpx 小程序独有的单位，能够自适应屏幕
   1. 屏幕中像素和px和rpx的换算计算，使用函数
2. 导入 : @import “相对路径”

17.选择题和less

1. 无通配符，不可选择全部
2. vscode 扩展中。下载easyless
   1. 配置：
      1. 在vscode的设置中（setting.json）
      2. 左下角设置-设置-右上角：打开设置，加入配置
      3. {
         “less.compile”: {
         “compress”: true, // 是否删除多余空白字符
         “sourceMap”: false, // 是否创建文件目录树，true的话会自动生成一个 .css.map 文件
         “out”: “${workspaceRoot}\src\assets\css\”, // 输出css文件目录，false为不输出
         }
         }复制代码

18.组件

1. view
   1. view相当于div + 新增
   2. 相当于button
2. text
   1. decode
3. image
   1. 图片统一用外网的图片（图片大小的原因）
   2. 土豆图床（目前已被封）/https://imgbb.com/
   3. 属性
4. swiper
   1. 轮播组
   2. 必须要搭配swiper-item，嵌套进swiper中
   3. 修改swiper的尺寸：计算（比例计算），wxss中修改
   4. 属性（可以先全删掉）
      1. 自动轮播，在标签中写
      2. 设置轮播时间
      3. 循环轮播
5. navigator
   1. 类似超链接标签。相当于块级元素，默认换行。
   2. 属性
      1. url 要跳转的路径：绝对/相对路径
      2. target 跳转到本小程序，还是别的小程序
6. rich-text
   1. 1
   2. nodes属性 nodes=“{{ }}”
      1. 接受标签字符串
      2. 接受对象数组
7. button的外观
8. button的开放能力1
9. button的开放能力2
10. icon图标
11. radio单选框
12. checkbox复选框

19.自定义组件(tabs)

1. 新建新的文件夹components。
   1. 新建文件夹tabs。右键，新建components(组件名称)。文件结构和pages相同
   2. 定义，以上
   3. 声明，某个page的json文件中
   4. 使用，直接使用声明时的标签
2. 新的文件
   1. js：最外层是component了
   2. json：引用其他组件
   3. wxml：
   4. wxss：

20.使用自定义组件

1. 初始化
   1. 声明，在所要使用它的页面的
      json文件的usingComponents中声明：
      “tabs”:“…/…/components/tabs/tabs”
   2. 使用
      在wxml中。直接<tabs>
2. 自定义组件
   1. 进入自定义组件的wxml文件中
   2. 大的view中，放两层(用打点的方式)
   3. 样式，进入wxss文件中
3. 改wxss数据为父向子传递
   1. 进入tabs.js（js文件）
   2. data块
   3. 进入wxml文件，用for循环来遍历
4. 激活选中
   1. 在view的属性中绑定一个点击事件，名为handleItemTap
   2. 在js文件的methods块中写
   3. 给所有的选项都设为false，然后给当前的设为true
   4. 获取索引：console.log(e)，然后点击，看控制台
   5. 拿到“索引”，用forEach方法
   6. 严谨写法
5. 父向子传递数据
   1. 把标题的内容都写死了
   2. 防止别的页面用到这个组件
   3. 页面向组件传递数据，通过标签属性的方式
6. 子向父传递数据
   1. 点击事件时，数据只是复制了一遍，但是另外的数据没改变
7. slot（插槽）
   1. 点击不同的标题显示不同的内容，相当于占位符
   2. 在子页面中加入点击事件
8. 组件的其他知识
   1. 文档
9. 应用生命周期
   1. 1

21.

MyMiniProgram

选一个模板

nba 还行
赛事窗 还行

参考 教程后面

1.准备工作

无关代码删去

1. 全局文件中
   1. app.json中
      1. pages中只留下index
      2. 改掉小程序标题
   2. pages文件夹。
      1. 删掉logs
   3. app.js
      1. 全删掉
      2. 输入 wx-app。
2. index文件夹
   1. wxml中全删掉，加一个 <view>首页 </view>
   2. wxss 全删掉
   3. js文件全删掉，加一个 wx-page
   4. 加小标题：index.json文件夹中。将app.json中文件夹加入
3. 删掉utils
4. 新增文件夹
   1. styles：存放公共样式
   2. components：存放组件
   3. lib：存放第三方库
   4. utils：自己的帮助库
   5. request：自己的接口帮助库
5. 新增文件夹
   1. 新的页面—即是需要用到的页面
   2. 在app.json，pages中
   3. pages/名字/index
6. 字体图标
7. 阿里巴巴矢量图标库 iconfont
   1. 加入项目，通过类的方式，使用：fontclass
   2. 查看在线链接。打开网址，全选，复制
   3. 在styles文件夹新建wxss文件:iconfont.wxss
   4. 粘贴
8. 使用
   1. <text class=“类名”>

2.tabbar

1. 新增文件夹icons
2. 在app.json中新增 tabbar
   1. list数组
      1. pagePath：在Pages中复制
      2. text：文字
      3. iconPath：icons文件夹中的图片的相对路径
      4. selectedIconPath：icons文件夹中的图片
   2. 别的属性
      1. color：灰色
      2. selectedColor：和logo一个颜色
      3. backgroundColor：背景颜色，白色

3.全局样式

1. 不能识别通配符 * {}。只能通过一个一个名字来手写
2. 最外层：page，里面可以放很多别的标签
   1. 主题颜色，
      1. 提前定义一个变量（less中知识/原生的变量）
      2. 定义：–变量名：颜色
      3. 使用:
         1. 进入某个子页面的css文件中
         2. color:var(–变量名)
   2. 定义统一的字体大小
      1. font-size:28rpx;
3. 小程序标题的背景颜色(app.json文件)
   1. window字段
   2. navigationBarTextStyle
4. 首页的页面效果

   1. 搜索框

      1. component文件夹下新建searchInput文件夹，然后右键，新建component
      2. 多了四个文件
      3. 使用/引入
         1. 声明：在要用该组件的子页面的json文件中声明
         2. 写法留意一下（）
         3. 使用，在wxml中直接加标签
      4. 样式
         1. wxss后缀改为less
         2. 在less文件中写代码
         3. 会自动生成一个wxss文件
      5. 点击跳转的效果

   2. 图片轮播(如何用自己的服务器做图片的api，get/等)

      1. 图片。使用WebService来获取:api
      2. swiper在view标签内
         1. 图片地址：暂时用本地图片代替
         2. 发送异步请求
         3. 回调函数
      3. 把获取到的东西，渲染成图片
         1. swiper+swiper-item
      4. 样式
         1. 看原图的尺寸：1024 × 683
         2. 让高度自适应，宽度100%
         3. 图片标签的mode属性
         4. 进入less
            1. 1
            2. 让swpier标签等于图片大小（固定值）
         5. swiper标签内部
            1. 自动轮播：autoplay
            2. 指示器：indicator-dots=“true”
            3. 循环轮播：circular=“true”
            4. 指示器颜色

4.优化http请求

5.分类导航

6.楼层（json数组）

7.分类页面

8.列表页面

1. 静态页面
   1. 问题，套太多层view。导致布局动不了奇怪
2. 动态页面
3. 下拉刷新
4. 上拉加载下一页
5. 列表页面

9.