• 小程序学习

    小程序

    一、小程序和网页区别

    在这里插入图片描述

    二、微信小程序注册和使用

    1.获取appid

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    在真机上查看项目。
    在这里插入图片描述

    2.工具使用

    添加编译模式

    在这里插入图片描述
    修改每次编译启动的页面
    在这里插入图片描述

    真机调试

    在这里插入图片描述

    清除缓存

    修改变量没有生效
    在这里插入图片描述

    详情页面

    在这里插入图片描述

    上传代码

    点击上传按钮，会先提交到开发版本中，再审核，再发布线上版本
    在这里插入图片描述

    3.代码目录

    • pages 各个页面
    • utils：功能代码
    • eslintrc ：eslint检查配置文件
    • app.js ： 入口文件
    • app.json ：当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
    • app.wxss ： 相当于css样式
    • project.config.json : 整个项目的配置文件。体现在详情中，给ide开发工具用的
    • project.private.config.json ： 项目私人配置，不会读取出来
    • sitemap.json ：类似于seo ，可以在搜索时用到

    在这里插入图片描述

    页面目录

    小程序官方建议：页面都放在pages中 ，每个页面以单独的文件夹存在
    在这里插入图片描述

    app.json

    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    window下的配置
    在这里插入图片描述

    stiemapLocation：指定sitemap.json文件，此文件用于加载微信搜索
    在这里插入图片描述

    project.config.json

    开发工具配置文件
    在这里插入图片描述

    sitemap.json

    用来配置小程序及其页面是否允许被微信索引，就是是否可以搜索到。默认的配置是允许所有页面被索引。
    在这里插入图片描述
    在这里插入图片描述

    4.创建项目

    1.先创建home文件夹，在文件夹内创建 page，自动生成4个文件。app.json-pages自动添加页面。
    2.在pages中添加文件目录，会自动创建文件夹。
    在这里插入图片描述
    在这里插入图片描述

    pages中设置首页

    两个方法

    1. 在 pages 中，谁在第一个，谁就是首页
    2. 在app.json 添加新的节点 entryPagePath 添加文件目录
      在这里插入图片描述
      在这里插入图片描述

    5.发布版本

    在这里插入图片描述
    在这里插入图片描述
    审核是微信官方审核，一般是3-7天

    三、基础语法和原理

    1.语法区别

    标签语法

    在这里插入图片描述

    样式语法

    新增rpx 自适应
    在这里插入图片描述

    js语法

    在这里插入图片描述

    2.宿主环境

    在这里插入图片描述

    通信主体

    在这里插入图片描述

    工作方式

    在这里插入图片描述

    运行机制

    在这里插入图片描述

    3.npm

    在这里插入图片描述

    4.支持vant库

    在这里插入图片描述

    需要先初始化库

    初始化项目，获取package.json 等文件，对一些包进行管理。在通过命令安装vant库

    npm init -y

    • 1

    使用组件库

    构建npm后，再app.json 配置组件库
    在这里插入图片描述

    四、组件语法

    1.视图容器

    view

    在这里插入图片描述在这里插入图片描述

    scroll-view

    scroll-view 需要设置高度，滚动条会按默认宽度，如需显示在整个容器中，需要设置宽度

    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述

    swiper和swiper-item

    在这里插入图片描述
    swiper默认高度150px
    在这里插入图片描述

    写法和常用属性
    在这里插入图片描述

    2.基础内容

    text

    显示文本内容，类似span
    user-select ：用户可以长按复制
    在这里插入图片描述

    rich-text

    富文本内容，通过node节点可以写html的代码

    3.表单组件

    button

    type：三种类型
    size：按钮大小，只有默认和mini。mini会把按钮变成行内元素
    loading：会显示加载的样式，并且不能点击
    disable:是否禁用
    plain：镂空效果

    在这里插入图片描述

    4.媒体组件

    image

    默认宽320高240，src输入地址，mode调整图片
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    5.导航

    navigator-声明式导航

    在这里插入图片描述
    在这里插入图片描述
    不写opentype属性，默认跳转普通页面
    在这里插入图片描述

    声明式导航传参和编程式导航传参

    只适合在普通页面传参
    在这里插入图片描述
    声明式普通页面传参
    在这里插入图片描述

    编程式导航传参
    在这里插入图片描述

    接收参数：会把传的参数封装在onLoad的options中。
    在这里插入图片描述
    接收并设置
    在这里插入图片描述

    后退导航-声明式

    在这里插入图片描述

    delta数字，表示返回几层
    在这里插入图片描述

    编程式导航

    通过代码方法跳转tabbar页面
    在这里插入图片描述
    通过代码跳转到普通页面
    在这里插入图片描述

    在这里插入图片描述

    不同的跳转方法不同
    在这里插入图片描述

    后退导航-编程式

    在这里插入图片描述
    在这里插入图片描述

    6.自定义组件

    创建组件文件

    在这里插入图片描述

    使用自定义组件

    在全局或局部页面使用

    在页面使用，页面的json文件中有usingComponents{}。写入自定义的组件名，可以与导入的组件名称不一样，最好名字一致。配置组件路径。

    在这里插入图片描述

    全局使用自定义组件。在app.json 文件中,使用方法与页面相同
    在这里插入图片描述

    全局页面和局部页面使用场景

    在这里插入图片描述

    组件和页面的区别

    看json 文件，组件需要添加component:true的属性。
    看js入口方法，组件是component,页面是page

    在这里插入图片描述

    组件的数据、方法、属性

    页面的方法和生命函数同级，组件的方法写在method中
    在这里插入图片描述

    定义属性
    properties用来接受外部传入的值
    在这里插入图片描述

    data和properties的区别
    data适用于存储组件私有数据
    properties适用于存储外界传给组件的数据
    在这里插入图片描述

    数据监听器

    数据监听器用于监听和响应属性或数据字段的变化，从而执行特定的操作。
    在组件中用observers属性
    小程序 数据监听器只有在组件中有，页面中没有，需要自己写
    vue2的数据监听器是watcher，原理是object.defineproperty
    vue3的监听原理是proxy
    在这里插入图片描述

    监听数据
    可以监听多个数据变化，也可以监听单个数据变化
    在这里插入图片描述

    监听对象
    在这里插入图片描述
    监听单个或多个属性
    在这里插入图片描述
    监听所有属性
    在这里插入图片描述

    7.组件生命周期

    在这里插入图片描述

    重要函数

    在这里插入图片描述
    生命周期函数写在lifetimes中
    在这里插入图片描述
    组件moved函数，需要数据复用，应该配上id，才能确定数据移动
    组件error函数，抛出异常，组件onerror函数也会捕获异常，所以组件也可以不写，避免重复捕获异常

    组件在页面的生命周期

    在这里插入图片描述
    在这里插入图片描述

    8.组件插槽

    组件定义好插槽，在页面中使用组件和插槽显示内容。根据插槽指定的位置，页面插入的内容显示在指定位置
    单个插槽直接写slot在对应的位置

    多个插槽

    启动多个插槽，需要在options的multipleSlots开启true
    在组件中slot加上name属性，在页面引用的时候加上slot和指定的插槽name
    在这里插入图片描述

    9.父子组件通信

    1.属性绑定2.事件绑定3，获取组件实例
    在这里插入图片描述

    1.属性绑定

    父到子传值用属性绑定
    用于父组件向子组件的指定属性设置数据，仅能设置JsoN兼容的数据（只能传递数据，不能传递方法）

    单项数据流

    由父到子再传到孙，一层一层传递，不能跨级

    2.事件绑定

    子到父传值用事件绑定，可以传递 任意数据，包括数组和方法

    事件绑定4个核心
    在这里插入图片描述

    1. 在父组件js中定义一个自定义函数，传递给子组件
      在这里插入图片描述

    2. 在父组件wxml，通过bind:自定义名称="父组件自定义函数"给子组件绑定函数
      在这里插入图片描述

    3. 在子组件wxml 绑定一个函数调用父组件函数
      在这里插入图片描述

    4. 在子组件js中用this.triggerEvent("父组件自定义名称",{参数数据})给父组件传值
      在这里插入图片描述

    5. 父组件通过e.detail获取传递过来的值
      在这里插入图片描述

    3.获取组件实例

    在父组件使用this.selectComponent("id或class选择器")，获取子组件的实例对象。
    使用场景：在父组件中获取子组件数据
    如何获取：
    在父组件wxml中，使用子组件，给子组件配置id选择器或class选择器。
    在父组件js中，使用this.selectComponent("id或class选择器")获取整个子组件实例，从而得到子组件的数据。

    在这里插入图片描述

    五、WXML语法

    1.数据绑定

    和vue绑定一样，在page中的data中设置数据
    在这里插入图片描述
    在这里插入图片描述
    取出各个类型的数据
    在这里插入图片描述

    2.事件绑定

    在这里插入图片描述
    在这里插入图片描述

    自定义事件写在page中，和data平级
    在这里插入图片描述
    在这里插入图片描述

    触发事件函数，会接收event对象
    在这里插入图片描述
    在这里插入图片描述

    事件冒泡 target是当前点击的按钮。currenttarget是事件绑定的组件
    在这里插入图片描述

    3.修改data中的数据

    通过调用this.setDate({})，传入一个对象。把改的数据写入
    在这里插入图片描述

    4.事件函数传参

    传参：通过自定义属性data-属性名,会把数据传到 event对象下的target的dataset里。通过对应的属性名获取到传入参数。event.target.dataset

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    5.表单传参

    input传参

    绑定函数，在event.detail中可以查看value值。对应输入的值
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    6.if条件渲染

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    hidden 属性 dom会渲染出来，但是不会显示
    在这里插入图片描述

    7.for列表渲染

    在这里插入图片描述

    在这里插入图片描述

    1 使用数组中某个属性
    在这里插入图片描述

    在这里插入图片描述

    2 使用 item 本身 需要用*this
    在这里插入图片描述

    在这里插入图片描述

    六、WXSS

    1.wxss

    在这里插入图片描述

    2.rpx 小程序自适应屏幕

    在这里插入图片描述

    3.@import 样式导入

    在这里插入图片描述

    4.app.wxss

    全局样式和局部样式
    在app.wxss中写样式，全局都能使用且不用导入。
    局部样式如果与全局样式名字相同，局部样式有的会覆盖全局样式，局部样式没有的会继续使用全局样式。
    在这里插入图片描述

    5.全局配置和页面配置样式

    在app.json文件中
    app.json 中的部分配置，也支持对单个页面进行配置，可以在页面对应的 .json 文件来对本页面的表现进行配置。

    页面中配置项在当前页面会覆盖 app.json 中相同的配置项（样式相关的配置项属于 app.json 中的 window 属性，但这里不需要额外指定 window 字段）

    七、WXS

    1.wxs

    应用场景：作为过滤器对数据处理，渲染到页面上，源数据不变。
    不支持es6及以上的语法

    每个 wxs 模块均有一个内置的 module 对象。
    在这里插入图片描述
    在这里插入图片描述

    2.遵循commonjs模块化规范

    引用和转载 模块化知识连接

    在这里插入图片描述

    3.内嵌wxs

    在wxml中写
    在这里插入图片描述
    在这里插入图片描述

    4.外联wxs

    定义wxs文件，用<wxs src=''>导入
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    5.注意事项

    在这里插入图片描述

    八、全局配置

    1.tabBar

    tabBar配置在app.json下
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    2.全局下拉刷新

    在app.json 页面中配置
    在这里插入图片描述
    在这里插入图片描述
    下拉刷新样式
    在这里插入图片描述

    配置下拉刷新

    一般不在全局中配置，最好是哪个页面使用用哪个页面配置
    backgroundtextstyle是下拉三个点的颜色
    在这里插入图片描述

    api实现下拉刷新

    使用wx.startPullDownRefresh(),注意使用此api 需要现在本页面json文件中开启下拉刷新。下拉有的不会弹回去，需要api停止
    在这里插入图片描述

    下拉刷新监听用户下拉动作

    用户下拉后可以触发此函数
    在这里插入图片描述
    一般在此函数中处理下拉后的操作
    在这里插入图片描述

    3.上拉触底

    在页面js中设置，通过onReachBottom函数监听上拉触底操作
    在这里插入图片描述
    在这里插入图片描述

    最好在全局配置文件中设置到底距离，页面json文件也可以设置。数值类型是数字。默认是50
    在这里插入图片描述

    九、API

    1.数据请求

    请求的域名需要在小程序管理后台先配置合法域名网址
    在这里插入图片描述
    在这里插入图片描述

    跳过request域名验证

    临时开启不校验域名
    在这里插入图片描述
    在这里插入图片描述

    跨域和ajax和发起网络请求

    在这里插入图片描述

    2.wx.request

    get和post请求，一般在onload 页面生命周期中
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    3.小程序API promise化

    什么需要promise化
    如何把一个异步请求 promise化：

    1. 写一个function 函数
    2. 在函数中 new 一个promise 对象，并返回
    3. promise对象中写一个回调函数(resolve,reject)=>{}
    4. 在回调函数中写你的异步请求，成功的结果用resolve返回，失败的结果用reject返回
    5. 在需要调用的函数中，通过调用function函数.then(res) 获取对应的成功返回的信息

    在这里插入图片描述
    在函数中使用promise对象，处理成功和错误
    在这里插入图片描述
    或者用catch捕获异常
    在这里插入图片描述

    第二种使用promise对象的方法:使用 async/await 处理 promise对象

    1. 写一个function 函数
    2. 在函数中 new 一个promise 对象，并返回
    3. promise对象中写一个回调函数(resolve,reject)=>{}
    4. 在回调函数中写你的异步请求，成功的结果用resolve返回，失败的结果用reject返回
    5. 对需要调用promise对象的函数外层 添加 async
    6. 创建一个对象接收 promise对象返回的信息，并写上await
      在这里插入图片描述
      使用try catch 捕获异常
      在这里插入图片描述

    十、生命周期

    在这里插入图片描述

    1.小程序生命周期

    在这里插入图片描述
    整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取 App 上的数据或调用开发者注册在 App 上的函数。
    在这里插入图片描述

    2.页面生命周期

    tabbar页面不回收，没有onunload 函数执行，普通页面有
    在这里插入图片描述

  • 相关阅读:
    性能测试浅谈
    【Git】window下大小写不敏感问题处理
    百面算法工程师 | 分类和聚类
    Spring Cloud Stream的配置及使用——以RabbitMQ为例
    VUE实现Office文档在线编辑，支持doc/docx、xls/xlsx、ppt/pptx、pdf等
    （WebFlux）004、WebFilter踩坑记录
    【Leetcode】200.岛屿数量
    那些被人误解的IT专业，网络安全：谢邀，不是黑客
    低代码平台：何以为企业信息安全保驾护航？
    队列的使用以及模拟实现(C++版本)
  • 原文地址：https://blog.csdn.net/sam80000/article/details/125206612