微信小程序

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

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.

【视频笔记】微信小程序相关推荐

1. 小程序源码：老人疯狂裂变引流视频推广微信小程序-多玩法安装简单

   这是一款特别受老年人喜欢的一款小程序 内的视频内容都是老年人喜爱的,也是喜欢转发的 另外该小程序的插屏广告还是定时出现的哟 如此达到高收益 另外用户支持点击跳转下一条视频,或者下拉刷新 总得来说其实没 ...

2. 短视频去水印微信小程序，免费去除视频水印

   最近不知怎么的,偶然浏览到一个挺简单漂亮的视频解析小程序帖子,没过多久又偶然浏览到一个各类短视频去水印api的github项目,挺巧的,于是就花时间把两个项目结合了一下,然后自己发布了小程序(这里顺便 ...

3. 手把手教你做短视频去水印微信小程序（2-首页）

   手把手教你做短视频去水印微信小程序系列教程(2-首页) 文章目录 手把手教你做短视频去水印微信小程序系列教程(2-首页) 前言 一.顶部banner 二.地址解析 1.整体代码 2. input框输入 ...

4. 教你如何用手机下载视频号[微信小程序]中的视频

   ** 如何下载微信视频号**[微信小程序]**中的视频 ** 事情是这样的,因为近期所在工作单位要迎接检查,老板发了几个小程序视频给我,需要我把他下下来,我最初找了一下,并不能够找到下载按钮,就打算改 ...

5. 长期稳定短视频去水印微信小程序源码

   大家好这一款小程序源码是一款去水印小程序源码 该源码里面自带了稳定接口(目前该接口已稳定运行三个月) 支持多种短视频平台去水印,另外也支持图集去水印 保存已经去好水印的作品的时候可以根据是短视频还是图 ...

6. 微信小程序：简洁界面清爽让人非常舒服的一款短视频去水印微信小程序

   总得来说这是一款以各大平台短视频去水印为主的一款小程序源码 内含支持多平台的接口 支持短视频和图集去水印 小编个人觉得界面让人看起来特别的清爽特别的舒服 没有那么多的花里胡哨的,另外小编也给它添加了多 ...

7. 全新UI简洁又不失美观的短视频去水印微信小程序源码,支持多做流量主模式

   这是一款去水印小程序源码 自带高速解析和下载接口 UI方面简洁但是又很美观实用 支持一键粘贴和自动识别粘贴功能 另外支持历史解析记录查看 PS:这个历史记录支持记录解析日期,点击每一个日期可以显示该日 ...

8. 腾讯视频嵌入微信小程序

   腾讯视频嵌入微信小程序 1.登录微信公众平台 2.设置-第三方设置 3.添加插件-搜索腾讯视频-选中-添加 4.写代码 文档地址: https://mp.weixin.qq.com/wxopen/pl ...

9. 长期稳定短视频去水印微信小程序源码下载自带稳定接口支持图集解析去水印

   大家好这一款小程序源码是一款去水印小程序源码 该源码里面自带了稳定接口(目前该接口已稳定运行三个月) 支持多种短视频平台去水印,另外也支持图集去水印 保存已经去好水印的作品的时候可以根据是短视频还是图 ...

10. 跟黑马视频学习微信小程序的笔记

    WXML模板语法 小程序中常用的事件: 小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数.例如,下面的代码将不能正常工作: 如果要获得传递的参数,可以这样做 wx:if和hidd ...

最新文章

1. httpwatch的timechart 解析
2. 让机器“自愈化”引领新科技变革
3. 2016-1-4作业
4. 怎样才能让Android平板不卡,如何让你的安卓平板从获新生
5. meta name id class 标签的区别
6. java 持久化线程_java – Spring Hibernate Envers多线程 – 会话关...
7. 【项目管理】项目管理计划
8. 7 分钟全面了解位运算
9. cisco学习笔记(2)
10. 轻量级运维工具-pssh,pscp,prsync,pslurp,pnuke
11. 大众点评_token及登录分析
12. beatmaker3 android,Hip-Hop Beat Maker app
13. Beego 使用redigo连接redis
14. c语言实现 三角函数,小型嵌入式系统的三角函数C实现
15. 五一博客连载——毕业游记录
16. u 盘安装linux系统,CentOS 7 系统安装之 U 盘安装法
17. vc.60写c语言,悟空问答如何用VC60编写简单的APP
18. Python实现PhotoShop人脸液化变形效果
19. IPv4/IPv6地址范围与网络地址/子网掩码的转换，点分十进制与数字掩码的转换
20. 解决开发qq音乐singer-detail组件时子路由跳转失败问题

热门文章

1. Vue项目首页-开发周末游组件（7-7）
2. VXGI体素全局照明
3. 双向搜索(bfs,dfs)
4. SQL协同Excel制表统计各学院一二三等奖
5. 2022-2028全球与中国锂电池隔膜市场现状及未来发展趋势
6. 互联网公司的监控运维
7. Flutter Web 支持现已进入稳定版
8. 喹啉羧酸类 DHODH 抑制剂用于治疗急性髓系白血病
9. 前台js MD5加密 后台 java MD5解密
10. K8S 多 Maser 集群架构和 Dashboard UI 的二进制部署