微信小程序学习笔记

微信小程序学习

  1. 入门

    1. 小程序项目基本组成结构

    1. 小程序页面组成部分(每个页面都是一个单独的文件夹)

    2. 小程序代码的构成

      1. JSON配置文件

        • JSON配置文件的作用:通过不同的.json配置文件,可以对程序项目进行不同级别的配置

        • app.json

          是当前小程序的全局配置,包括所有页面路径、窗口外观 、界面表现、底部tab等

          1. pages:记录当前小程序所有页面的路径
          2. window:全局定义小程序所有页面的背景色、文字颜色等
          3. style:全局定义小程序组件使用的样式版本
          4. sitemapLocation:用来指明 sitemap.json 的位置
        • project.config.json

          • 是项目配置文件,记录我们对小程序开发工具所做的个性化配置
          1. setting:保存了编译相关的配置,例如在详情的本地设置中的配置保存在这个地方
        • sitemap.json

          用来配置小程序页面是否允许微信索引

          如果不希望所有页面被索引,可以将action设置为disallow

          如果想关闭调试器中的黄色警告,可以把project.config.json中setting中的checksitemap改为false

        • 页面的.json文件

          对本页面的窗口外观进行配置,页面中的配置项会覆盖ap.json的window中相同的配置项

    3. 认识小程序页面

      1. 创建页面的方法

        在app.json的pages数组中添加页面路径即可,pages中的第一个页面为小程序默认页面

      2. WXML模板

        WeiXin Markup Language,是小程序框架设计的一套标签语言,用来构建小程序页面的结构,作用类似于HTML。

        • WXML与HTML的区别

      3. WXSS

        WeiXin Style Sheets:是一套样式语言,用于描述WXML的组件样式,类似于CSS

        • WXSS与CSS的不同:

      4. JS逻辑交互

        小程序中的JS分为三大类

        • app.js:整个小程序项目的入口文件,通过调用App()函数来启动整个小程序
        • 页面的.js文件:页面的入口文件,通过调用Page()函数来创建并运行页面
        • 普通的.js文件:普通的功能模块文件,用来封装公共的函数或属性供页面使用

      小程序的宿主环境

      1. 宿主环境:host environment,指程序运行所必须的依赖环境

      2. 小程序的宿主环境:手机微信

        小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能,如微信扫码、支付、微信登录 、地理定位等等

      3. 小程序环境包含的内容

        • 通信模型
        • 运行机制
      • 组件
        • API
      1. 通信模型

        • 通信的主体:渲染层、逻辑层
          1. WXML模板和WXSS样式工作在渲染层
          2. JS脚本工作在逻辑层
        • 小程序中的通信模型分为两部分
      2. 渲染层和逻辑层之间的通信:由微信客户端进行转发

      3. 逻辑层和第三方服务器之间的通信:也是由微信客户端进行转发

  2. 运行机制

    1. 小程序启动过程

      1. 页面渲染过程

    2. 组件

      • 常用视图容器类组件
        1. view

        2. scroll-view

          属性scroll-y为纵向滚动、scroll-x为横向滚动。

          纵向时必须指定样式高度,横向时必须指定宽度

        3. swiper和swiper-item 轮播图和轮播图项

        • 常用基础内容组件
          1. text

            设置selectable属性之后文本可以长按选中

          2. rich-text

            通过nodes属性可以将html字符串渲染为对应的UI样式

        • 其他常用组件
          1. button

          1. image

    3. API

      1. 概述:小程序中的API是由宿主环境提供的,通这些API开发者可以方便的调用微信提供的能力,例如:获取用户信息、本地存储、支付等、
      2. 三大分类
        • 事件监听类

        • 同步API

      • 异步API
    4. 协同工作和发布

      1. 小程序开发流程

      2. 小程序版本

        1. 发布上线的整体步骤

        2. 上传代码

          上传到了后台管理--版本管理中的开发版本列表中

        3. 提交审核

          在开发版本的列表中点击“提交审核”,就可以把小程序提交给腾讯官方进行审核

        4. 发布

          在审核版本中点击“发布”

        5. 推广

      3. 运营数据

        1. 查看运营数据的两种方式
          • 在“小程序后台”查看

          • 使用“小程序数据助手”查看

  3. 模板与配置

    1. 模板语法

      • 数据绑定

        1. 基本原则

        2. 在data中定义页面的数据

          在页面对应的.js文件中,把数据定义到data对象中即可

        3. Mustacher语法

          把data中的数据绑定到页面中渲染,使用Mustache语法(双大括号)将变量包起来

          语法格式:

        4. 动态绑定内容

        1. 动态绑定属性

          1.

        2. 三元运算

      • 事件绑定

        事件是渲染层到逻辑层的通讯方式,通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理

        1. 常用事件

        2. 事件对象event的属性

          • target和currentTarget的区别

        3. bindtap的语法格式

          小程序中不存在html中的onclike()鼠标点击事件,是通过tap事件响应用户触摸行为

        1. 在事件处理函数中改变data中的数据值

          为按钮绑定触摸事件

          事件

          通过this.setData({

          ​ data中的键名 :要赋的值

          })

          通过this.data.键名,可以获取到原来的值

        2. 事件传参

          小程序中不能在绑定事件的同时为事件处理函数传递参数

         ![](https://img2022.cnblogs.com/blog/2908974/202208/2908974-20220803131105075-1533650832.png)
        
        
          ​	这样相当于调用一个名为“btnHandlr(123)”的事件处理函数
        
          1. 传递参数语法
        
            ![](https://img2022.cnblogs.com/blog/2908974/202208/2908974-20220803131114179-178108087.png)
        
        
             通过**data-参数名="{{值}}"**来传递参数,这样的值为数字
        
             **data-参数名=“值**”    这样的值为文本
        
          2. 在函数中获取参数
        
             **event.target.dataset.参数名**
        
        1. bindinput语法格式

          1. input事件响应文本框的输入事件

          2. 绑定

          3. 事件

            通过event.detail.value可以拿到文本框最新的值

      • 条件渲染

        1. wx:if

        2. 结合使用wx:if

        1. 通过元素的hidden属性可以直接设置元素的显示与隐藏

        2. wx:if 和 hidden 的对比

      • 列表渲染

        1. wx:for

        • 可以通过wx:for-index指定当前循环项索引的变量名

        • wx:for-item指定当前项的变量名

        ![](https://img2022.cnblogs.com/blog/2908974/202208/2908974-20220803131305827-562141297.png)
        
        • wx:key=" " 用来提高渲染效率
        ![](https://img2022.cnblogs.com/blog/2908974/202208/2908974-20220803131333955-103370794.png)
        
        
         没有id时可以直接用index
        
      • WXSS相比CSS扩展的特性:

        1. rpx尺寸单位

          1. rpx(responsive pixel),微信小程序独有,用来解决屏适配的尺寸单位
          2. 实现原理:
        2. @import样式导入

          在wxss中引入其它wxss,

          @import "文件名.wxss"

    2. 全局配置

      1. 小程序窗口的组成部分

      1. window节点常用配置项

      2. tabBar

        用于实现多页面的快速切换。有底部tabBar和顶部tabBar。

        注意:tabBar中只能配置最少2个、最多5个tab页签

        ​ 当渲染顶部tabBar时,不显示icon,只显示文本

      • tabBar的6个组成部分
      ![](https://img2022.cnblogs.com/blog/2908974/202208/2908974-20220803131547028-2097079325.png)
      
      • tabBar节点的配置项

      • 每个tab项的配置选项

      ![](https://img2022.cnblogs.com/blog/2908974/202208/2908974-20220803131609108-592558987.png)
      
      • 与pages、window平级新建tabBar节点

      • tab页签对应的页面必须放在Pages数组的前边 , 不能在后边

    3. 页面配置

      1. 常用配置项

    4. 数据请求

      1. 网络数据请求的限制

      2. 配置request合法域名

      1. 发起get请求

      res.data是服务器返回的真实数据对象

      1. 发起post请求

        将method改为POST

      2. 在页面刚加载时请求数据

        在页面的生命周期函数onLoad()中调用函数

      3. 跨过request合法域名校验

      4. 关于跨域和Ajax的说明

  4. 视图与逻辑

    1. 页面导航

      页面之间的跳转

      • 小程序中实现页面导航的方式

        1. 声明式导航image-20220717133849136

          • 导航到tabBar页面

            tabBar页面指被配置为tabBar的页面

          • 导航到非tabBar页面

          • 后退导航

          为了简便,如果只是后退到一上页面,则可以省略delta属性,因为其默认值为1

        2. 编程式导航

          • 跳转到tabBar页面

            调用wx.switchTab({url: ''}) 不可以传递参数

          • 跳转到非tabBar页面

            调用wx.navigateTo({url: ''})

          • 后退导航

            如果只后退一页直接调用wx.navigateBack()就可以,如果要后退多页,可以在其中指定detal参数

      导航传参

      ​ 与web时一样,路径后用?携带参数

      注:只有跳转到非tabBar页面时可以携带参数

      1. 在onLoad中接收导航传参

    2. 页面事件

      • 下拉刷新事件

        1. 启用下拉刷新

        2. 监听下拉刷新的函数

        当完成刷新之后不自动关闭,可以调用wx.stopPullDownRefresh()方法即可

      • 上拉触底事件

      ​ 配置上拉触底距离:在页面的.json配置文件中,配置onReachBottomDistance

      1. 设置上拉触底时的加载提示
      ![](https://img2022.cnblogs.com/blog/2908974/202208/2908974-20220803131959292-934810157.png)
      
      
       在加载数据前开启,加载完成后(无论成功或失败)关闭
      
    3. 生命周期

      • 分类

        1. 应用生命周期:小程序启动--运行--销毁的过程
        2. 页面生命周期:每个页面的加载--渲染--销毁的过程
      • 生命周期函数

        是由小程序提供的内置函数,伴随生命周期自动按次序执行

        分类
        1. 应用生命周期函数

          定义在app.js中

          onLaunch :当小程序初始化完成时,会触发 onLaunch(全局只触发一次)

          onShow :当小程序启动,或从后台进入前台显示,会触发 onShow

          onHide : 当小程序从前台进入后台,会触发 onHide

          onError : 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息

        2. 页面的生命周期函数

    4. WXS脚本

      1. 概述

        WXS是小程序独有的一套脚本语言,结合WXML可以构建出页面的结构

      2. WXS应用场景

        wxml中无法调用在页面的.js文件中定义的函数,但是,wxml可以调用wxs中定义的函数。因此,wxs的典型应用场景就是过滤器

      3. wxs和JS的关系

      1. 基本语法

        <view>{{m1.toUpper("ccx")}}</view>
        <wxs module="m1">
          module.exports.toUpper = function(str){
            return str.toUpperCase();
          }
        </wxs>
        
      2. 定义一个wxs文件

        创建一个扩展名为.wxs的文件

        创建一个函数,最后通过module.exports向外输出

      3. wxs的隔离性

  5. 基础加强

    • 自定义组件

      1. 创建组件

      2. 引用组件

        • 局部引用

        • 全局引用

        • 组件和页面的区别

      3. 组件隔离性

        即页面和引用的组件不会互相影响

        注意:
        更改样式隔离

      1. 组件的数据、方法和、属性

        • data数据

          在组件的.js文件的Component({})中的data节点中定义数据

        • 组件方法

          必须定义在.js文件的Component({})的methods节点中

          自定义方法也要定义在method中,建议为名字以_开头

        • properties属性

          properties是组件的对外属性,用来接收外界传递到组件中的数据

        • data和properties的区别

      2. 数据监听器

        • 用于监听和响应任何属性和数据字段的变化,从而执行特定的操作

        • 监听对象属性的变化

        • 监听对象中所有属性:‘ 对象名.** ’ :function(obj){}

          用**来代替对象中的所有属性,再用obj.属性名来接收

      3. 微信小程序中的ES6新特性,字符串模板

      ${变量名}

      用反引号`括起来的字符串,{}中为变量名

      1. 纯数据字段

        1. 什么是纯数据字段 :只用于逻辑处理,不用于页面渲染,也不传递到其他页面中

        2. 好处:有助于更新页面的性能

        3. 定义纯数据字段的方法

      2. 组件的生命周期

        1. 组件的全部生命周期函数

        1. 主要的生命周期函数

        1. 定义生命周期函数

          在components中定义lifetimes节点,在这个节点中定义生命周期函数

          lifetimes: {
          
            created(){
          
             console.log("created..")
          
            },
          
            attached(){
          
             console.log("attached..")
          
            }
          
           }
          
        2. 组件所在页面的生命周期

        1. 在组件中监听所在页面的生命周期函数

          定义在pageLifetimes节点中

      3. 插槽

        • 什么是插槽

          在自定义级的的wxml结构中,可以提供一个节点(插槽),用于承载组件使用者提供的wxml结构

        • 单个插槽

          意思在一个组件中只能使用一个slot标签进行占位

        • 多个插槽
          1. 启用多个插槽

          添加options节点,配置multipleSlots项

          1. 定义多个插槽

          name属性来区分

          1. 使用插槽

          通过slot属性来指定到不同的插槽

      4. 父子组件之间的通信

        • 父子组件之间通信的3种方式

        • 属性绑定

          用于实现父向子传值,只能传递普通类型的数据,不可以传递方法。

          在子组件的properties节点中声明变量,在父组件中使用子组件时通过属性的方式传递父组件的变量值

        • 事件绑定

        1. image-20220724105444899
          3.

        4.

        • 获取组件实例

          在父组件中调用this.selectComponent("id或class选择器"),来获取子组件的实例对象。

      5. behaviors

        • 什么是behaviors

          是小程序中用于实现组件间代码共享的特性

        • behaviors的工作方式

        • 创建behavior

          直接创建.js文件

        • 导入并使用behavior

        • behavior中所有可用的节点

    • npm包

      1. 小程序中使用npm包的限制

      1. Vant Weapp

        • Vant Weapp官网:https://vant-ui.github.io/vant-weapp

        • 安装Vant组件库

        • 使用Vant组件

          1. 引入vant的按钮,在usingComponent节点中配置

            "van-button": "@vant/weapp/button/index"
            
          2. 然后在wxml页面中使用即可

        • 使用CSS变量自定义全局样式

          在app.wxss文件中,定义CSS变量

        都有哪些可用的变量可以在Vant官网中查找

      2. API 的Promise化

      • 每次安装完新的包都要重新进行构建
    • 全局数据共享

      1. 小程序中的全局数据共享方案

      1. MobX

        运行这个命令:

        npm i --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

        来安装MobX相关包

        然后删掉miniprogram_npm文件夹,重新构建npm

        • 定义store实例对象,

          在项目的根目录下创建一个store文件夹,然后创建一个store.js

          //在这个js文件中,专门用来创建Store的实例对象
          import {observable,action} from 'mobx-miniprogram'
          
          export const store = observable({
            //数据字段
            numA: 1,
            numB: 2,
            //计算属性
            get sum(){//get修饰表示这个方法是只读的
              return this.numA + this.numB
            },
            //action函数,专业用来修改store中数据的值
            updateNumA: action(function(step){
              this.numA += step
            }),
            updateNumB: action(function(step){
              this.numB += step
            })
          })
          
        • 将Store中的成员绑定到页面中
          1. 导入需要的成员(createStoreBindings方法和store实例对象)

          2. 在onLoad:生命周期函数中进行绑定

          3. 利用绑定时的返回值在onUnload函数中进行清理

        • 在页面上使用Store中的成员

        • 将Store中的成员绑定到组件中

        • 在组件中使用Store成员

    • 分包

      1. 概念

        指把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载

      2. 分包的好处

      3. 分包前项目的构成

        所有页面和资源都打包在一起,整个项目体积大,首次启动的下载时间长

      1. 分包后项目构成

        小程序由1个主包+多个分包组成

      2. 分包的加载规则

      3. 分包的体积限制

      4. 使用分包
        • 配置方法


        在app.json中添加subPackages节点
          "subpackages": [
            //第一个分包
            {
                //分包根路径
              "root": "pkgA",
                //分包的别名
              "name": "p1",
                //分包所包含的页面
              "pages": [
                "pages/cat/cat",
                "pages/dog/dog"
              ]
            },
            //第二个分包
            {
                //分包根路径
              "root": "pkgB",
              "name": "p2",
              "pages": [
                "pages/apple/apple"
              ]
            }
          ],
        
        • 查看分包体积

        • 打包原则

        • 引用原则

      5. 独立分包
        • 可以独立于主包和其他分包而单独运行

        • 独立分包和普通分包的区别

        • 配置独立分包

          在配置分包时加上"independent" : true即可

        • 引用原则

          独立分包和普通分包以及主包之间是相互隔绝的,不能相互引用彼此的资源。例如

          主包无法引用独立分包内的私有资源

          独立分包也不能引用主包内的公共资源

      6. 分包预下载
        • 预下载分包的行为,会在进入指定的页面时触发。

          在app.json中使用preloadRule节点定义分包的预下载规则

           "preloadRule": {
               //会触发预下载的页面
              "pages/contact/contact":{
                  //在指定网络模式下进行预下载,取值为wifi或all
                "network": "wifi",
                  //要下载的分包,可以写分包的root名或name
                "packages": ["p1" ]
              }
            },
          
        • 预下载的限制

          同一个分包中的页面享有共同的预下载大小限额2M

案例

自定义tabBar

  1. 在app.json中的tabBar节点中配置"custom" : true
  2. 在项目根目录下新建custom-tab-bar文件夹,然后在其下新建index组件
  3. 编写tabBar代码
  4. 在自定义组件中使用Vant Weapp组件时,需要开启styleIsolation: ‘shared'选项
  5. 要实现tab页面的切换,需要监听绑定的change事件,在其中调用wx.switchtab方法,页面路径为this.data.list[event.detail].path。注意switchtab中url路径要以项目根路径/开头

posted @   程长新  阅读(277)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
点击右上角即可分享
微信分享提示