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

news2024/11/15 7:47:34

文章目录

  • 基础加强
    • 学习目标
    • 使用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.json 的 usingComponents 节点中引入需要的组件，在 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解构赋值，赋给res
    const {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中的updateNum2
      updateNum2:'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.coloradmin.cn/o/2034563.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

SpringBoot统一功能

SpringBoot统一功能

目录 前言1&#xff1a;首先要明白&#xff0c;什么是统一功能&#xff1f; 前言2&#xff1a;统一功能包括哪些呢&#xff1f;展开说说&#xff1f; 一、拦截器&#xff08;interceptor&#xff09; 1、介绍 2、如何使用拦截器 3、拦截器的在程序内部的执行流程是啥呢&a…
阅读更多...
MySQL关键字—using和on

MySQL关键字—using和on

文章目录 1. MySQL关键字—using和on1.1 using关键字的概念 2. using和on的区别2.1 USING 子句2.2 ON 子句 3. 示例对比3.1 建表&#xff1a;3.2 准备数据3.3 结果 1. MySQL关键字—using和on 1.1 using关键字的概念 连接查询时如果是同名字段作为连接条件&#xff0c;using可…
阅读更多...
ctfhub Bypass disable_function（完结）0

ctfhub Bypass disable_function（完结）0

LD_PRELOAD url 蚁剑连接 选择插件 点击开始 查看到此文件名编辑连接拼接到url后面重新连接 点击开启终端 在终端执行命令 ls / /readfile ShellShock url CTFHub 环境实例 | 提示信息 蚁剑连接 写入shell.php <?phpeval($_REQUEST[ant]);putenv("PHP_test() { :…
阅读更多...
四款AI写作免费工具，让文案工作更轻松

四款AI写作免费工具，让文案工作更轻松

作为一名文案编辑&#xff0c;我算是跟文字打了几年的交道了。最近&#xff0c;AI写作这股风潮真是吹得热火朝天&#xff0c;我也忍不住尝了尝鲜&#xff0c;试了试几款神器。说实话&#xff0c;这体验还挺有意思的&#xff0c;感觉就像是在文字的世界里开了一场高科技的派对。…
阅读更多...
Redis：概念、部署、配置、优化

Redis：概念、部署、配置、优化

目录 关系型数据库与非关系型数据库 关系型数据库 非关系型数据库 非关系型数据库存在的原因 Redis 概念 优点 Redis部署流程 初步设置 安装 初始化 初始化时指定的参数说明 Redis配置文件 修改监听地址 Redis远程连接 远程连接 测试服务端状态 redis-benchm…
阅读更多...
智慧景区系统：科技赋能旅游新体验

智慧景区系统：科技赋能旅游新体验

随着信息技术的飞速发展&#xff0c;旅游业正经历着前所未有的变革&#xff0c;智慧景区系统作为这一变革的先锋&#xff0c;正以其独特的魅力重塑着游客的旅行方式。智慧景区系统&#xff0c;顾名思义&#xff0c;是运用物联网、大数据、云计算、人工智能等现代信息技术&#…
阅读更多...
Git客户端 TortoiseGit下载

Git客户端 TortoiseGit下载

1.概述 使用TortoiseGit比直接使用git客户端和命令来实现代码管理更为方便&#xff0c;本文贴出了软件的下载地址和基本配置信息 2.TortoiseGit安装与配置 TortoiseGit是TortoiseSVN的Git版本&#xff0c;是一个在Windows系统下使用的Git版本控制客户端。它提供了图形用户界…
阅读更多...
MIT线性代数P5

MIT线性代数P5

置换矩阵 置换矩阵是行重新排列的单位矩阵。 置换矩阵用P表示&#xff0c; 性质&#xff1a; n阶置换矩阵共有n!个
阅读更多...
37.x86游戏实战-XXX遍历怪物数组

37.x86游戏实战-XXX遍历怪物数组

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 工具下载&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1rEEJnt85npn7N38Ai0_F2Q?pwd6tw3 提…
阅读更多...
0812|TCP和UDP跨主机通信

0812|TCP和UDP跨主机通信

思维导图 TCP实现跨主机通信 服务器端 #include<myhead.h> #define SER_PORT 6666 //端口号 #define SER_IP "192.168.0.108" //服务器IP int main(int argc, const char *argv[]) {//创建套接字文件int sfd socket(AF_INET,SOCK_STREAM,0);if(sfd -1){pe…
阅读更多...
进阶！haproxy高级功能与配置

进阶！haproxy高级功能与配置

文章目录 前言基于cookie的会话保持IP透传四层IP透传未开启状态开启透传状态 七层IP透传 自定义错误界面重定向HAProxy 四层负载之数据库HAProxy https 前言 本文主要介绍HAProxy高级配置及使用案例 文章相关连接如下&#xff1a; 如果想深入了解haproxy算法的相关知识&…
阅读更多...
基于Python+Django+Vue+Mysql前后端分离的图书管理系统

基于Python+Django+Vue+Mysql前后端分离的图书管理系统

利用空闲休息时间开始自己写了一套图书管理系统。现将源码开源&#xff0c;项目遇到问题 PythonDjangoVue图书管理系统开发全流程 大家好&#xff0c;我是程序员科科&#xff0c;这是我开源的基于PythonDjangoVue的图书管理系统 希望可以帮助想学前后端分离的同学 项目中遇…
阅读更多...
积极创新模式，推动智慧场馆建设

积极创新模式，推动智慧场馆建设

智慧场馆是指基于信息技术应用的场馆建设模式&#xff0c;利用物联网、云计算、大数据分析等技术手段&#xff0c;实现场馆资源的管理优化、运营效率的提升以及用户体验的改善。智慧场馆在我国得到了广泛的政策支持和推动&#xff0c;政府出台了一系列鼓励智慧场馆建设的政策措…
阅读更多...
Java SIP Client

Java SIP Client

采用JAIN SIP API实现一个SIP客户端实现向SIP服务器注册。SIP服务器可以为FreeSWITCH也可以为满足GB28181的SIP平台。话不多说直接看注册流程图&#xff1a; 代码实现&#xff1a; 创建maven工程添加依赖 <dependencies><dependency><groupId>javax.sip</…
阅读更多...
Apple Maps现在可在Firefox和Mac版Edge浏览器中使用

Apple Maps现在可在Firefox和Mac版Edge浏览器中使用

Apple Maps最初只能在 Windows 版 Safari、Chrome 浏览器和 Edge 浏览器上运行&#xff0c;现在已在其他浏览器上运行&#xff0c;包括 Mac 版 Firefox 和 Edge。经过十多年的等待&#xff0c;Apple Maps于今年 7 月推出了新版地图应用的测试版&#xff0c;但只能在有限的浏览器…
阅读更多...
哈希表 - 三数之和

哈希表 - 三数之和

15. 三数之和 方法一&#xff1a;排序双指针 /*** param {number[]} nums* return {number[][]}*/ var threeSum function(nums) {const res [], len nums.length;// 将数组排序nums.sort((a, b) > a - b)for (let i 0; i < len; i) {let l i 1, r len - 1, iNum…
阅读更多...
什么是令牌桶算法？工作原理是什么？使用它有哪些优点和注意事项？

什么是令牌桶算法？工作原理是什么？使用它有哪些优点和注意事项？

大家好&#xff0c;我是鸭鸭&#xff01; 此答案节选自鸭鸭最近弄的面试刷题神器面试鸭 &#xff0c;更多大厂常问面试题&#xff0c;可以点击下面的小程序进行阅读哈&#xff01; 目前这个面试刷题小程序刚出&#xff0c;有网页和小程序双端可以使用&#xff01; 回归面试题…
阅读更多...
网络初学者必备：100个基础知识全掌握

网络初学者必备：100个基础知识全掌握

网络安全学习路线 如果你对网络安全入门感兴趣&#xff0c;那么你需要的话可以点击这里网络安全重磅福利&#xff1a;入门&进阶全套282G学习资源包免费分享&#xff01; 或者扫描下方csdn官方合作二维码获取哦&#xff01; 1 什么是链接? 链接是指两个设备之间的连接。…
阅读更多...
OpenCV 基本使用

OpenCV 基本使用

OpenCV 基本使用 参考教程&#xff1a; GitHub - gaoxiang12/slambook2: edition 2 of the slambook 1. 安装 OpenCV 1.1 下载 OpenCV 参考教程&#xff1a; 无法定位软件包libjasper-dev的解决办法-CSDN博客 视觉slam14讲ch5 opencv安装 ubuntu20.04_libvtk5-dev-CSDN博…
阅读更多...
机器学习——聚类算法K-Means

机器学习——聚类算法K-Means

目录 一、初识聚类 1. 认识聚类算法 2. 聚类的流程 3. 簇内误差平方和 Inertia越小模型越好吗&#xff1f; 二、KMeans介绍 1. 重要参数n_clusters 2. 模型评估指标 &#xff08;1&#xff09;真实标签己知的时候 &#xff08;2&#xff09;真实标签未知的时候 三、s…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023