【Day05】0基础微信小程序入门-学习笔记

文章目录

  • 基础加强
    • 学习目标
    • 使用npm包
      • 1.准备项目
      • 2. 小程序对于npm的支持和限制
      • 3. Vant Weapp小程序UI组件库
      • 4. 使用Vant组件
      • 5. 定制全局主题样式
      • 6. API Promise化
    • 全局数据共享
      • 1. 简介
      • 2. MobX
        • 2.1 安装`MobX`相关包并构建`npm`
        • 2.2 创建MobX的Store实例
        • 2.3 将Store成员绑定到页面中
        • 2.4 在页面上使用Store中的成员
        • 2.5 将Store中的成员绑定到组件中
        • 2.6 在组件中使用Store中的成员
    • 分包
      • 1. 简介
      • 2. 使用分包
        • 2.1 配置方法
        • 2.2 打包原则
        • 2.3 引用原则
      • 3. 独立分包
      • 4. 分包预下载
    • 感悟

基础加强

学习目标

  • 能够知道如何安装和配置 vant-weapp 组件库
  • 能够知道如何使用 MobX 实现全局数据共享
  • 能够知道如何对小程序的 API进行 Promise

使用npm包

1.准备项目

Day05 资源我已上传,可自取

把里面的 mp_05 这个项目导入到我们的微信开发者工具

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

2. 小程序对于npm的支持和限制

小程序支持npm安装第三方包,但是有三个限制,因为小程序并未提供其运行环境。

  • 不支持依赖于**Node.js**内置库的包。
  • 不支持依赖于浏览器内置对象的包。
  • 不支持依赖于**C++插件**的包

3. Vant Weapp小程序UI组件库

小程序UI组件库,类似于elementUI组件库

使用的是MIT开源许可协议,对商业使用比较友好

官方文档:https://vant-ui.github.io/vant-weapp/0.x/#/intro

安装 Vant 组件库:

  • 通过npm安装,建议指定版本@1.3.3

  • 构建npm

  • 修改app.json

根据官方文档步骤一二四进行操作,三是关于ts的先不考虑

在这里插入图片描述

下面是具体操作:
在这里插入图片描述

初始化一个package.json文件:

在这里插入图片描述

指定版本号,安装vant:

安装卡住的话,可用参考这个博客http://t.csdnimg.cn/wFdmY,很有用

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

构建npm:

最新版本默认可用使用npm了

在这里插入图片描述

修改app.json,将下列代码删除,使用旧样式,防止组件样式混乱。

"style:"v2"

4. 使用Vant组件

app.jsonusingComponents 节点中引入需要的组件,在 wxml中直接使用组件。

比如说这个按钮组件

在这里插入图片描述

//全局app.json
"usingComponents":{"van-button":"@vant/weapp/button/index"
}
<!--页面的.wxml结构-->
<van-button type="primary">按钮</van-button>

5. 定制全局主题样式

使用CSS变量实现主题定制

CSS变量基本用法可参考MDN文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

如果你经常用到一种颜色,那就可以把它作为一个变量,无论是使用或是修改都会很方便,不需要一个一个搜然后再去修改。这个就是CSS变量(也叫自定义属性或者级联变量)。

基本用法

定义:属性名以--开头,属性值可用是任何有效的CSS值,比如

element{--main-bg-color:blue;
}

引用:用var()包裹

element{background-color:var(--main-bg-color);
}

定制全局主题样式

app.wxss中,写入CSS变量,即可对全局生效

使用page的原因是它是根节点,每个页面都可以使用这个自定义变量;下面的变量名是vant官方文档中配置文件中按钮的背景颜色和边框颜色变量名。

 page{/* 定制警告按钮的背景颜色和边框颜色 */--button-danger-background-color:#C00000;--button-danger-border-color:#D60000;}

6. API Promise化

默认情况下,小程序官方提供的异步API都是基于回调函数实现的。容易造成回调地狱的问题,代码可读性和维护性会很差

APl Promise化,指的是通过额外的配置,将官方提供的、基于回调函数的异步 API升级改造为基于Promise 的异步 API,从而提高代码的可读性、维护性,避免回调地狱的问题

安装三方包

使用miniprogram-api-promise第三方包,安装,记得指定版本号:

npm install --save miniprogram-api-promise@1.0.4

直接npm构建一下即可

使用

//在小程序入口文件中(app.js),只需调用一次promisifyAll()方法,
//即可实现异步API的promise化
import {promisifyAll} from 'miniprogram-api-promise'const wxp = wx.p = {}
//promisifyAll所有的wx的api
promisifyAll(wx,wxp)

调用Promise化的异步API

<!--页面的wxml结构-->
<van-button type="danger" bindtap="getInfo">vant按钮</van-button>
//页面的.js文件,定义对应的tap事件处理函数
async getInfo(){//对data解构赋值,赋给resconst {data:res} = await wx.p.requset({method:'get',URL:'https://www.escook.cn/api/get',data:{name:'ruru',age:18}})console.log(res)
}

全局数据共享

1. 简介

全局数据共享是为了解决组件之间数据共享的问题。

开发中常用的数据共享方案有 Vuex、Redux、MobX

在这里插入图片描述

在小程序中,可使用**mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享**。

  • mobx-miniprogram用来**创建Store**实例对象
  • mobx-miniprogram-bindings用来把Store中的共享数据或方法,绑定到组件或者页面中使用。

2. MobX

2.1 安装MobX相关包并构建npm
npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

在这里插入图片描述

2.2 创建MobX的Store实例

根目录创建store文件夹,创建一个store.js文件

//在这个js文件中专门创建store的实例对象
import {observable,action} from 'mobx-miniprogram'//创建实例对象并导出
export const store = observable({//数据字段numA:1,numB:2,//计算属性,get指的是只读 get sum(){return this.numA + this.numB},//actions方法,用来修改store中的数据updateNum1:action(function(step){this.numA += step}),updateNum2:action(function(step){this.numB += step}),
})
2.3 将Store成员绑定到页面中

思路分三步:导入成员,onload绑定,unload清除

// pages/message/message.js
import { action } from 'mobx-miniprogram'
import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'Page({/*** 生命周期函数--监听页面加载*/onLoad: function (options) {//将字段和方法绑定到this上this.storeBindings =  createStoreBindings(this,{store,fields:['numA','numB','sum'],actions:['updateNum1']})},/*** 生命周期函数--监听页面卸载*/onUnload: function () {this.storeBindings.destoryStoreBindings()}
}
2.4 在页面上使用Store中的成员
<!--pages/message/message.wxml-->
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler1" data-step="{{1}}">
numA + 1
</van-button>
<van-button type="danger" bindtap="btnHandler1" data-step="{{-1}}">
numA - 1
</van-button>
//message.js 
btnHandler1(e){this.updateNum1(e.target.dataset.step)},

在这里插入图片描述

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

步骤三步:按需导入、behaviors数组、storeBindings接收三个属性

根目录创建一个components组件,在里面创建一个numbers文件夹,在numbers文件夹中创建一个叫numbers的组件。

在这里插入图片描述

app.json中注册一下这个组件

"usingComponents":{"van-button":"@vant/weapp/button/index","my-numbers":"./components/numbers/numbers"
}

message组件中使用这个numbers组件

<!--message.wxml-->
<my-numbers></my-numbers>

现在我们要开始绑定组件了

// components/numbers/numbers.js
import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
Component({behaviors:[storeBindingsBehavior], // 通过storeBindingsBehavior 来实现自动绑定storeBindings:{store,fields:{numA:()=>store.numA,numB:(store)=>store.numB,sum:'sum'},actions:{//指向store中的updateNum2updateNum2:'updateNum2'}}
})
2.6 在组件中使用Store中的成员
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler2" data-step="{{1}}">
numB + 1
</van-button><van-button type="danger" bindtap="btnHandler2" data-step="{{-1}}">
numB - 1
</van-button>
//组件的方法列表
methods:{btnHandler2(e){this.updateNum2(e.target.datatset.step)}
}

分包

1. 简介

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

分包的好处

  • 优化小程序首次启动的下载时间
  • 多团队共同开发时可更好的解耦协作

分包前项目构成

在这里插入图片描述

分包后项目构成

在这里插入图片描述

分包的加载规则

  • 当小程序启动时,默认下载主包并启动主包内页面。tabBar页面需要放到主包中
  • 当用户进入分包内某页面时,客户端下载对应分包,下载完成后再进行展示。

分包的体积限制

整个小程序所有分包大小不超过16M(主包+所有分包)。单个分包/主包的大小不超过2M

2. 使用分包

2.1 配置方法

在这里插入图片描述

还要再app.json中的subpackages节点中声明分包的结构。里面包含几个对象,就是代表有几个分包。

下面有两个对象,也就是证明这个项目有两个分包。

在这里插入图片描述

查看分包的体积

在这里插入图片描述

2.2 打包原则
  • 小程序会按 subpackages 的配置进行分包,subpackages 之外的目录将被打包到主包中。
  • 主包也可以有自己的 pages(即最外层的pages字段)。
  • tabBar 页面必须在主包内。
  • 分包之间不能互相嵌套。
2.3 引用原则
  • 主包无法引用分包内的私有资源
  • 分包之间不能相互引用私有资源
  • 分包可以引用主包内的公共资源

3. 独立分包

本质也是主包,可独立于主包和其它分包而单独运行。

在这里插入图片描述

独立分包和普通分包的区别:是否依赖于主包才能运行。普通分包依赖于主包,独立分包可独立运行。

开发者可用按需将某些具有一定功能独立性的页面配置到独立分包中(比如说登录注册页面)。这样可以很大程度上提升分包页面的启动速度

一个小程序可以有多个独立分包。

独立分包和普通分包的配置区别就是有没有如下代码:

//app.json
{	"root":"moduleA","pages":["pages/pear","pages/pineapple"],"independent":true  //通过此节点,声明当前分包为‘独立分包’。
}

独立分包和普通包以及主包之间相互隔绝,不能相互引用彼此的资源!独立分包不能引用主包内的公共资源!

4. 分包预下载

在进入小程序的某个页面时,由框架自动下载可能需要的分包,从而提升进入后续分包页面时的启动速度。

预下载分包的行为,会在进入指定的页面时触发。在app.json中,使用preloadRule节点定义分包的预下载规则

{"preloadRule":{ //分包预下载的规则"pages/contact/contact":{  //触发预下载的页面路径//network表示在指定的网络环境进行预下载。可选值为all、wifi,默认为wifi。"network":"all",//packages 进入页面下载哪些包,可通过root或name指定"packages":["pkgA"]}}
}

分包预下载限制

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

在这里插入图片描述

感悟

学习起来和Vue有很多相似之处呢。基础知识到这里就全部结束了,要及时复习喔,多加练习,下一步就着手小项目了。

掌握学习目标,代码多加练习

如有错误请指正
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/400132.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ppt中添加页码(幻灯片编号)及问题解决方案

在幻灯片母版中&#xff0c;选择插入 幻灯片编号 右下角显示幻灯片编号 问题一&#xff1a;母版中没有显示编号 原因可能是母版版式中没有设置显示&#xff0c;勾选即可。 问题二&#xff1a;子母版中没有显示幻灯片 将母版中的编号复制到子母版中。 问题三&#xff1a;应用…

股指期货套期保值中的展期管理有哪些?

在复杂的金融市场环境中&#xff0c;展期作为一种重要的风险管理工具&#xff0c;被广泛应用于期货交易中&#xff0c;特别是当投资者需要对长期资产进行套期保值时。展期的核心思想在于&#xff0c;通过连续替换高流动性的近月期货合约来替代流动性较差的远月合约&#xff0c;…

神经发育过程中结构性大脑不对成的大规模分析

摘要 目前&#xff0c;只有少数研究评估了儿童期和青春期两个大脑半球之前的结构差异&#xff0c;而且现有的研究结果缺乏一致性&#xff0c;或者局限于特定的脑区、特定的大脑特征或相对较窄的年龄范围。在这里&#xff0c;本研究考察了大脑不对称性与年龄和性别之间的关系&a…

Java SE--IO流

一.File类型 如果我们想在程序中操作或者描述一个文件夹或文件&#xff0c;可以使用File类型 File类型在java.io包下 File可以新建&#xff0c;删除&#xff0c;移动&#xff0c;修改&#xff0c;重命名文件夹&#xff0c;也可以对文件或者文件夹的属性进行访问&#xff1b;…

进阶!haproxy高级功能与配置

文章目录 前言基于cookie的会话保持IP透传四层IP透传未开启状态开启透传状态 七层IP透传 自定义错误界面重定向HAProxy 四层负载之数据库HAProxy https 前言 本文主要介绍HAProxy高级配置及使用案例 文章相关连接如下&#xff1a; 如果想深入了解haproxy算法的相关知识&…

EXCEL数据清洗步骤

1.合并的单元格&#xff1a; 用Ctrlg查找空值&#xff0c;拆分单元格&#xff0c;ctrl enter填充 2.空值空行&#xff1a; 辅助列counta&#xff0c;筛选出空值行 3.重复值&#xff1a; 条件格式——突出显示单元格规则——重复值 数据——数据工具——删除重复值 4.脏数据…

[算法2] 第二集 二叉树中的深度搜索

深度优先遍历&#xff08;DFS&#xff0c;全称为 Depth First Traversal&#xff09;&#xff0c;是我们树或者图这样的数据结构中常⽤的 ⼀种遍历算法。这个算法会尽可能深的搜索树或者图的分支&#xff0c;直到⼀条路径上的所有节点都被遍历 完毕&#xff0c;然后再回溯到上…

Steinberg SpectraLayers Pro for Mac:专业音频频谱编辑的巅峰之作

Steinberg SpectraLayers Pro for Mac是一款专为音频专业人士设计的专业音频频谱编辑器&#xff0c;它以其强大的频谱编辑功能和直观的操作界面&#xff0c;在音频处理领域树立了新的标杆。该软件不仅为音频编辑工作带来了前所未有的精确度和灵活性&#xff0c;还极大地提升了音…

WPF 数据模板DataTemplate、控件模板ControlTemplate、Style、ItemsPreseter

一言蔽之&#xff0c;Template就是“外衣”—— ControlTemplate是控件的外衣&#xff0c; DataTemplate是数据的外衣。 DataTemplate 它定义了一个数据对象的可视化结构 DataTemplate常用的地方有3处&#xff0c;分别是&#xff1a; ContentControl的ContentTemplate属性&…

CODEXGRAPH:突破代码与AI的壁垒,开启智能编程新时代

CODEXGRAPH&#xff1a;突破代码与AI的壁垒&#xff0c;开启智能编程新时代 CODEXGRAPH论文阅读1. 概述2. 相关研究代码库级别的任务检索增强代码生成&#xff08;RACG&#xff09; 3. CODEXGRAPH系统设计代码图数据库的构建与图数据库的交互 4. 实验设计与结果CrossCodeEvalSW…

数据结构---单链表实现

单链表是什么 我的理解是“特殊的数组”&#xff0c;通过访问地址来连接起来 1怎么创建链表 ----通过结构体&#xff08;成员有存入数据的data和指向下一个节点的地址的指针&#xff08;结构体指针&#xff09;next 初始架构---DataType 对应存入数据类型&#xff0c;此处的N…

数字引领风尚·智能改变生活“青岛电博会”路演活动(济南站)

2024CICE中国国际消费电子博览会路演活动&#xff08;济南站&#xff09;成功举行 数字引领风尚&#xff0c;智能改变生活。 8月7日&#xff0c;50余家行业协会、企业嘉宾、展商代表等云集2024中国国际消费电子博览会路演活动&#xff08;济南站&#xff09;现场&#xff0c;共…

瑞萨电子并购Altium 引领行业创新与发展

公开资料显示&#xff0c;2023 年 6 月&#xff0c;瑞萨电子曾宣布在 Altium 的 Altium 365 云平台上实现了所有 PCB 设计的标准化开发。瑞萨电子一直与 Altium 合作&#xff0c;将其所有产品的 ECAD 库发布到 Altium Public Vault。借助 Altium365 上的制造商零件搜索等功能&a…

Wireshark分析工具

简单用例 首先打开软件,左上角点文件,选中要分析的文件列表。 导入用tcpdump抓的包后进行分析,这里要输入过滤条件,对网络包进行一定的过滤处理。(这里172网段是阿里云的地址,用自己写的python2脚本对阿里云进行压测。) 这里输入过滤条件 tcp.port == 80 ,语法含义是…

Java虚拟机:类的加载机制

大家好&#xff0c;我是栗筝i&#xff0c;这篇文章是我的 “栗筝i 的 Java 技术栈” 专栏的第 034 篇文章&#xff0c;在 “栗筝i 的 Java 技术栈” 这个专栏中我会持续为大家更新 Java 技术相关全套技术栈内容。专栏的主要目标是已经有一定 Java 开发经验&#xff0c;并希望进…

【ARM CoreLink 系列 5.1 -- CI-700 各种 Node 组件详细介绍】

请阅读【ARM CoreLink 文章专栏导读】 文章目录 CI-700 组件(Components)RN-I( I/O-coherent Request Node) 和 RN-D(I/O coherent Request Node with DVM)HN-F(Fully coherent Home Node)IO coherent Home Node (HN-I)IO coherent Home Node with Debug Trace Controller (H…

43.【C语言】指针(重难点)(F)

目录 15.二级指针 *定义 *演示 16.三级以及多级指针 *三级指针的定义 *多级指针的定义 17.指针数组 *定义 *代码 18.指针数组模拟二维数组 往期推荐 15.二级指针 *定义 之前讲的指针全是一级指针 int a 1; int *pa &a;//一级指针 如果写成 int a 1; int *pa &a…

机器学习——线性回归(sklearn)

目录 一、认识线性回归 1. 介绍 2. 多元线性回归的基本原理&#xff08;LinearRegression&#xff09; 二、多重共线性 1. 介绍 2. 多重共线性详细解释 三、岭回归&#xff08;解决多重共线性问题&#xff09; 1. 模型推导 2. 选取最佳的正则化参数取值 四、Lasso&am…

景联文科技:破解数据标注行业痛点,引领高质量AI数据服务

数据标注行业是人工智能和机器学习领域中一个非常重要的组成部分。随着AI技术的发展&#xff0c;对高质量标注数据的需求也在不断增长。 数据标注市场的痛点 1. 团队管理 在众包和转包模式下&#xff0c;管理大量的标注人员是一项挑战。 需要确保标注人员的专业性、稳定性和…

Pod的调度机制

文章目录 一、Pod调度概述二、Pod调度策略实现方式三、kube-scheduler调度1、kube-scheduler调度的流程2、过滤阶段3、打分阶段4、kube-scheduler 调度示例4.1、创建 Deployment 资源清单4.2、应用Deployment4.3、查看被kube-scheduler自动调度的Pod 四、nodeName调度1、创建Po…