【微信小程序——开发DAY5（黑马程序员课程）】

微信小程序——开发DAY5（黑马程序员课程）

  • 使用npm包
    • 注意：先安装node.js
    • 安装Vant组件库
    • 使用Vant组件库
    • 定制全局主题样式
    • API Promise化
  • 全局数据共享（又叫做：状态管理）
      • 1.安装Mobx相关的包
      • 2.删除miniprogram.npm文件，然后重构npm
      • 3.创建Mobx的Store实例
      • 4.将Store中的成员绑定到页面中
      • 5.在页面中使用Store中的成员
      • 5.将Store中的对象绑定到自定义组件组件中
      • 6.在组件中使用Store种的成员

使用npm包

注意：先安装node.js

详细教程链接: 详细安装教程

安装完后记得重启——切记

安装Vant组件库

（1）创建package.json：右击项目空白处选择在外部终端窗口打开

在这里插入图片描述
在这里插入图片描述
官方文档安装步骤连接：链接: 安装Vant组件库官方链接

（2）通过npm安装Vant组件库——按照教学视频的打开，我没有安装成功，所以我在外面使用管理者权限打开cmd，并跳转到小程序的位置，再进行安装，然后安装成功了
在这里插入图片描述
（2.1）在外面打开cmd

在这里插入图片描述
（2.2）通过npm安装Vant组件库，安装成功
在这里插入图片描述
（3）安装成功后——构建npm包
在这里插入图片描述在这里插入图片描述
（4）去除原有样式
在这里插入图片描述

使用Vant组件库

（1）引入——可以在全局或者页面的JS文件中的usingComponents节点中引入——我自己选择全局里引入
在这里插入图片描述

（2）使用组件: 官方具体使用组件文档
在这里插入图片描述

定制全局主题样式

链接: MDN官方文档使用 CSS 自定义属性（变量）
链接: 小程序自定义主题官方文档——然后点击官方配置文件
在这里插入图片描述
在这里插入图片描述

  • 在app.wxss中——使用page节点（因为整个页面的根节点就是page）编写想要修改的组件样式，即可对全局生效（当然也可以在页面中写入，进行局部使用）
    代码如下：
/**app.wxss**/
/* 定义page节点——定制全局主题样式 */
page{
  --button-danger-background-color:green;
  --button-danger-border-color:green;
  --button-info-background-color:green;

}

在这里插入图片描述

API Promise化

API Promise化，指的是通过额外的配置，将官方提供的，基于回调函数的异步API，升级改造基于Promise的异步API，从而提高代码的可读性，维护性，避免回掉地狱的问题。
（1）安装包

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

在这里插入图片描述
（2）删除miniprogram_npm文件

注释：每次下载新包时，需要删除原来项目存在miniprogram_npm文件（里面包含所有的npm包——但未包含新下载的包），——新下载的包想要添加进去就要需要删除miniprogram_npm文件，再构建新的miniprogram_npm文件
在这里插入图片描述
（3）重新构建npm包——点击工具选择构建npm包，就会生成新的miniprogram_npm文件
在这里插入图片描述
在这里插入图片描述
（4）将基于wx对象的所有异步API，进行promise化

注：将基于wx对象的所有异步API，进行promise化，将promise化后的异步API挂载到wxp对象身上，就可以通过wx.p来调用promise化后的异步API
在这里插入图片描述
代码如下：在app.js中编写

// app.js
import{promisifyAll} from 'miniprogram-api-promise'
//wx.p为自定义属性， wxp与wx.p指向同一个对象 {}
const wxp=wx.p={}
//将基于wx对象的所有异步API，进行promise化，将promise化后的异步API挂载到wxp对象身上，就可以通过wx.p来调用promise化后的异步API
promisifyAll(wx,wxp)

（5）调用promise化后的异步API
黑马程序课程接口变化链接: 所有最新接口更改连接

（5.1）可以看见接口信息：
在这里插入图片描述
（5.2）将拿到的promise对象打印出来
在这里插入图片描述
（5.3）将拿到的promise对象中的data属性打印出来
在这里插入图片描述

全局数据共享（又叫做：状态管理）

作用：是为了解决组件之间数据共享的问题，开发中常用的全局数据共享方案有：Vuex,Redux,MobX等。
在小程序中可使用，mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享。其中

  • mobx-miniprogram用来创建Store实例对象
  • mobx-miniprogram-bindings（桥梁）用来把Store中的共享数据或方法，绑定到组件或页面中使用

1.安装Mobx相关的包

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

在这里插入图片描述

2.删除miniprogram.npm文件，然后重构npm

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

在这里插入图片描述

3.创建Mobx的Store实例

（1）新建一个store文件夹——里面新建一个store.js文件
在这里插入图片描述

在store.js中编写代码如下：

//在这个JS文件中，专门来创建Store的实例对象
import {action, get, observable}from 'mobx-miniprogram'

//observable方法就返回一个observable实例对象
export const sotre=observable({
   
  //定义数据
    numA:1,
    numB:2,

    //计算属性,使用get修饰为只读
    get sum (){
        return this.numA+this.numB
    },

    //action方法函数，专门来修改store中的值,使用action来包裹function
    updataNum1:action(function(step){

          this.numA+=step
    }),

    updataNum2:action(function(step){

      this.numB+=step
    })

})

在这里插入图片描述

4.将Store中的成员绑定到页面中

（1）在页面.js文件中导入需要使用的包，文件

  • 导入绑定方法
  • 导入store实例对象
    代码如下：
 //导入包的方法createStoreBindings
import{createStoreBindings}from 'mobx-miniprogram-bindings'
//导入创建了的实例额对象sotore
import {store}from '../../store/store'

（2）在页面page中的onLoad生命周期函数中进行绑定的工作
代码如下：

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //将createStoreBindings方法返回的对象使用this.storeBindings自定义属性去指向
    this.storeBindings=createStoreBindings(this,{
      store,
      fields:['numA','numB','sum'],
      actions:['updataNum1']
    })
  },

（3）在页面周期函数的onUnLoad函数中做一些清理性质的工作
代码如下：

//清理绑定的store对象
  onUnload: function () {
        this.storeBindings.detroyStoreBindings()
  },

全部代码如下：

// pages/new_page_3/new_page_3.js
//桥梁_——mobx-miniprogram-bindings包
//导入包的方法createStoreBindings
import{createStoreBindings}from 'mobx-miniprogram-bindings'
//导入创建了的实例额对象sotore
import {store}from '../../store/store'

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //将createStoreBindings方法返回的对象使用this.storeBindings自定义属性去指向
    this.storeBindings=createStoreBindings(this,{
      store,
      fields:['numA','numB','sum'],
      actions:['updataNum1']
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */


   //清理绑定的store对象
  onUnload: function () {
        this.storeBindings.detroyStoreBindings()
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

5.在页面中使用Store中的成员

（1）编写按钮，在页面.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>

在这里插入图片描述
在页面js文件中编写事件处理函数（与生命周期函数同级编写）

 //事件处理函数
    //将按钮绑定的补偿值赋给updataNum1，实现函数的调用
    btnHandler1(e){
        //console.log(e)
        this.updataNum1(e.target.dataset.step)
    },

效果如图：
在这里插入图片描述

5.将Store中的对象绑定到自定义组件组件中

（1）导入，代码如下：

//导入————组件的数据共享——第一步
//桥梁_——mobx-miniprogram-bindings包
//导入包的方法createStoreBindings
import{storeBindingsBehavior}from 'mobx-miniprogram-bindings'
//导入创建了的实例额对象sotore
import {store}from '../../store/store'

（2）声明，代码如下：

Component({

//导入————组件的数据共享_第二步在behaviors数组中添加storeBindingsBehavior
behaviors:[storeBindingsBehavior,mybehaviors],
})

（3）传递数据，代码如下：

Component({

//第三步：
storeBinding:{

  store,
  fields:{

      //将那个属性绑定过来，赋值——左边的名字可以自定义
      numA1:'numA',
      numB1:'numB',
      sum1:'sum'


  },
  actions:{
    updataNum2:'updataNum2'
  }


},

})

全部代码：

// components/test5/test5.js
//通过require导入后通过mybehaviors常量进行接收
const mybehaviors=require('../../behaviors/my-behaviors')


//导入————组件的数据共享——第一步
//桥梁_——mobx-miniprogram-bindings包
//导入包的方法createStoreBindings
import{storeBindingsBehavior}from 'mobx-miniprogram-bindings'
//导入创建了的实例额对象sotore
import {store}from '../../store/store'



Component({

//导入————组件的数据共享_第二步
behaviors:[storeBindingsBehavior,mybehaviors],

//第三步：
storeBinding:{

  store,
  fields:{

      //将那个属性绑定过来，赋值——左边的名字可以自定义
      numA1:'numA',
      numB1:'numB',
      sum1:'sum'


  },
  actions:{
    updataNum2:'updataNum2'
  }


},




  //挂载——引用哪一个就放在behaviors数组里
  behaviors:[mybehaviors],

  /**
   * 组件的属性列表
   */
  properties: {
        count:Number
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    addCount(){
      this.setData({
        count:this.properties.count+1
      })
      //触发自定义事件，将数值同步给父组件,传第一个最新的值
      this.triggerEvent('sync',{value:this.properties.count})

    },
  }
})

6.在组件中使用Store种的成员

在自定义组件wxml中编写

<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){
      console.log(e)
      this.updataNum2(e.target.dataset.step)

    }
    }

效果如图：
——在这里浪费了一些时间，因为我定义了两个behavior:[]数组，搞半天才发现
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

音质更细腻，时尚与舒适兼备，唐麦M5耳机体验

音质更细腻，时尚与舒适兼备，唐麦M5耳机体验

在音乐的世界里&#xff0c;一款好的耳机就像是一位懂你的老朋友&#xff0c;它能够准确传达音乐的情感&#xff0c;让你沉浸在每一个音符中。所以无论是在通勤的路上&#xff0c;还是在健身的过程中&#xff0c;一款优质的蓝牙耳机总能为我们带来更加丰富的听觉体验。最近我最…
阅读更多...
数据类型知识

数据类型知识

1&#xff0c;介绍 根据数据所占的空间不同&#xff0c;把数据分为不同的数据类型 js的变量数据类型是在程序运行中&#xff0c;靠等号右边数值的值来判断的 js动态变量&#xff0c;里面的数据类型是可以变化的 2.数据类型 1.简单数据类型 程序里面&#xff0c;数字前面有…
阅读更多...
每日OJ题_BFS解决最短路③_力扣127. 单词接龙

每日OJ题_BFS解决最短路③_力扣127. 单词接龙

目录 ③力扣127. 单词接龙 解析代码 ③力扣127. 单词接龙 127. 单词接龙 难度 困难 字典 wordList 中从单词 beginWord 和 endWord 的 转换序列 是一个按下述规格形成的序列 beginWord -> s1 -> s2 -> ... -> sk&#xff1a; 每一对相邻的单词只差一个字母。…
阅读更多...
GPT人工智能在线网页版大全

GPT人工智能在线网页版大全

平民不参与内测&#xff0c;还能使用 ChatGPT 吗&#xff1f; 自去年 ChatGPT 爆红以来&#xff0c;关于它的消息铺天盖地。如果你真的想使用它&#xff0c;途径有很多。除了官方网站外国内还有许多 ChatGPT 的镜像网站&#xff0c;其中不乏免费的 3.5 版本。虽然有些网站需要…
阅读更多...
Spring Task 定时任务调度

Spring Task 定时任务调度

一、概念 Spring Task 是 Spring 框架的一个组件&#xff0c;它为任务调度提供了支持&#xff0c;使得开发者能够创建后台任务或定期执行的任务。通过 Spring Task&#xff0c;您可以方便地在 Java 应用程序中实现定时任务&#xff0c;比如每天凌晨进行数据同步、每小时执行一…
阅读更多...
EasyRecovery数据恢复软件2024免费版下载亲测可用（支持win7,win10)

EasyRecovery数据恢复软件2024免费版下载亲测可用（支持win7,win10)

EasyRecovery数据恢复软件是由全球著名的数据恢复公司Ontrack出品的一款专业级数据文件恢复工具。它支持恢复多种存储介质上的数据&#xff0c;包括硬盘、光盘、U盘/移动硬盘、数码相机以及Raid文件恢复等&#xff0c;能恢复的文件类型也相当丰富&#xff0c;包括文档、表格、图…
阅读更多...
基于Springboot+Vue的Java项目-校园周边美食探索及分享平台系统开发实战(附演示视频+源码+LW)

基于Springboot+Vue的Java项目-校园周边美食探索及分享平台系统开发实战(附演示视频+源码+LW)

大家好&#xff01;我是程序员一帆&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &am…
阅读更多...
项目：仿muduo库One-Thread-One-Loop式并发服务器

项目：仿muduo库One-Thread-One-Loop式并发服务器

文章目录 写在前面开源仓库和项目上线其他文档说明 项目背景HTTP服务器Reactor模型Reactor模型的分类 项目介绍模式设计模块划分Server模块 模块分析 补充知识Linux提供的定时器时间轮的思想通用类型any类型 Server模块Buffer模块Socket模块Channel模块Poller模块EventLoop模块…
阅读更多...
项目——boost搜索引擎

项目——boost搜索引擎

今天我们来写一个boost搜索引擎&#xff01; &#xff08;后续如果有更新&#xff0c;这个博客也会更新&#xff09; gitee连接:boost搜索引擎: boost搜索引擎 首先我们要介绍一下我们这个项目&#xff0c;我们项目的目的是通过我们的搜索引擎能够通过关键字查找到对应的网页…
阅读更多...
Open3D (C++) 点云投影至主成分空间

Open3D (C++) 点云投影至主成分空间

目录 一、算法原理二、代码实现三、结果展示四、相关连接Open3D (C++) 点云投影至主成分空间由CSDN点云侠原创，爬虫自重。如果你不是在点云侠的博客中看到该文章，那么此处便是不要脸的爬虫。 一、算法原理 p r o j
阅读更多...
【数据结构】树与二叉树、树与森林部分习题与算法设计例题

【数据结构】树与二叉树、树与森林部分习题与算法设计例题

目录 【数据结构】树与二叉树部分习题与算法设计例题一、单选题二、算法设计题判断二叉树是否为完全二叉树求二叉树的最小深度 以及 二叉树树高 树与二叉树知识点文章: 【数据结构】树与二叉树&#xff08;递归法先序、中序、后序、层次遍历二叉树、二叉树的建立以及求树高的方…
阅读更多...
【MySQL数据库 | 第二十四篇】Limit语句的性能问题和调优策略

【MySQL数据库 | 第二十四篇】Limit语句的性能问题和调优策略

前言&#xff1a; MySQL作为最流行的关系型数据库管理系统之一&#xff0c;被广泛应用于各种规模和类型的应用程序中。其强大的功能和灵活的查询语言使得开发人员能够高效地执行各种数据操作和分析。 然而&#xff0c;在处理大量数据或复杂查询时&#xff0c;一些开发人员可能…
阅读更多...
研究生，该学单片机还是plc。？

研究生，该学单片机还是plc。？

PLC门槛相对较低&#xff0c;但是在深入学习和应用时&#xff0c;仍然有很高的技术要求。我这里有一套单片机入门教程&#xff0c;不仅包含了详细的视频 讲解&#xff0c;项目实战。如果你渴望学习单片机&#xff0c;不妨点个关注&#xff0c;给个评论222&#xff0c;私信22&am…
阅读更多...
仿真服务器介绍及应用

仿真服务器介绍及应用

仿真服务器是一种高性能的计算设备&#xff0c;专门用于运行复杂的仿真软件和处理大量的计算任务。 仿真服务器通常具备以下特点&#xff1a; 1. 高性能硬件配置&#xff1a;为了满足仿真软件对计算能力的要求&#xff0c;仿真服务器通常配备高性能的CPU、大量的内存以及高速的…
阅读更多...
Zookeeper与Kafka消息队列

Zookeeper与Kafka消息队列

目录 一、Zookeeper 1、zookeeper简介 2、zookeeper的特点 3、zookeeper的工作模式跟工作机制 3.1 工作模式&#xff1a; 3.2工作机制&#xff1a;​编辑 4、zookeeper应用场景及选举机制 4.1 应用场景&#xff1a; 4.2 选举机制&#xff1a; 4.2.1第一次启动选举机制…
阅读更多...
[阅读笔记1][GPT-3]Language Models are Few-Shot Learners

[阅读笔记1][GPT-3]Language Models are Few-Shot Learners

首先讲一下GPT3这篇论文&#xff0c;文章标题是语言模型是小样本学习者&#xff0c;openai于2020年发表的。 这篇是在GPT2的基础上写的&#xff0c;由于GPT2还存在一些局限&#xff0c;这篇对之前的GPT2进行了一些完善。GPT2提出了多任务学习&#xff0c;也就是可以零样本地用在…
阅读更多...
ABAP MESSAGE 常用的类型

ABAP MESSAGE 常用的类型

类型文本描述A终止处理终止&#xff0c;用户必须重启事务X退出与消息类型A 类似&#xff0c;但带有程序崩溃 MESSAGE_TYPE_XE错误处理受到干扰&#xff0c;用户必须修正输入条目,左下角提示!W警告处理受到干扰&#xff0c;用户可以修正输入条目,左下角提示!I信息处理受到干扰&a…
阅读更多...
数字的字面表示：正负数、进位制、数学浮点数与科学计数法

数字的字面表示：正负数、进位制、数学浮点数与科学计数法

示例&#xff1a; /*** brief how about plain-number? show you here.* author wenxuanpei* email 15873152445163.com(query for any question here)*/ #define _CRT_SECURE_NO_WARNINGS//support c-library in Microsoft-Visual-Studio #include <stdio.h>static…
阅读更多...
【代码随想录】【动态规划】day43：● 1049. 最后一块石头的重量 II ● 494. 目标和 ● 474.一和零

【代码随想录】【动态规划】day43：● 1049. 最后一块石头的重量 II ● 494. 目标和 ● 474.一和零

最后一块石头的重量 与分割等和子集类似 思路&#xff1a;尽量分割成两个sum值相近的数组1和2&#xff0c;求其中一个数组为sum(stone)//2时的一种情况 dp[j]:容量&#xff08;这里说容量更形象&#xff0c;其实就是重量&#xff09;为j的背包&#xff0c;最多可以背最大重量…
阅读更多...
DFS专题：力扣岛屿问题（持续更新）

DFS专题：力扣岛屿问题（持续更新）

DFS专题&#xff1a;力扣岛屿问题 一、岛屿数量 题目链接: 200.岛屿数量 题目描述 代码思路 使用for对每一个网格点进行判断&#xff0c;如果遇到未搜索过的’1’&#xff0c;则使岛屿数加一&#xff0c;并利用dfs将与其相连的‘1’都进行标记&#xff0c;确保每次搜索到1都…
阅读更多...
最新文章

Copyright @ 2022~2023