前端梨白-CSDN博客

原创微信云开发——云数据库基础（增删改查）

1.云开发数据库请求，collection('goods'),goods代表你在云服务中创建的数据库表的名字①.传统方法： const testDB = wx.cloud.database().collection('goods').get({ //查询操作 // 请求成功 success(res) { console.log("查询成功", res); },

2022-04-22 21:11:47 4471 2

1.定义：分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。2. 分包的好处：对小程序进行分包的好处主要有以下两点：可以优化小程序首次启动的下载时间在多团队共同开发时可以更好的解耦协作3.分包前与分包后的区别分包前：程序项目中所有的页面和资源都被打包到了一起，导致整个项目体积过大，影响小程序首次启动的下载时间。分包后：小程序项目由 1 个主包 + 多个分包组成：主包：一般只包含项目的启动页面..

2022-04-03 11:49:25 3094 1

原创全局数据共享——MobX（微信小程序）

1. 定义：全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有：Vuex、Redux、MobX 等。而我们微信小程序常用的全局共享方案是：MobX我们可以通过上面这张图清除的看到，如果不使用MobX全局数据共享的话，如果需要调用某个组件，则需要一层一层调用，如果定义了全局数据共享，那么可以直接拿到数据，不需要一层一层调用2.全局数据共享的具体方案在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bin.

2022-04-02 21:40:30 5318 4

原创使用 npm 包 - API Promise化（微信小程序）

1. 基于回调函数的异步 API 的缺点默认情况下，小程序官方提供的异步 API 都是基于回调函数实现的，例如，网络请求的 API 需要按照如下的方式调用：缺点：容易造成回调地狱的问题，代码的可读性、维护性差！2. 什么是 API Promise 化API Promise化，指的是通过额外的配置，将官方提供的、基于回调函数的异步 API，升级改造为基于 Promise 的异步 API，从而提高代码的可读性、维护性，避免回调地狱的问题。3. 实现 API Promise 化在小程.

2022-04-02 21:06:42 697

原创 Vant Weapp的使用——微信小程序

1. Vant Weapp：是有赞前端团队开源的一套小程序 UI 组件库，助力开发者快速搭建小程序应用。它所使用的是 MIT 开源许可协议，对商业使用比较友好。官方文档地址 Vant Weapp - 轻量、可靠的小程序 UI 组件库也可以扫描二维码，通过小程序体验2. 安装 Vant 组件库在小程序项目中，安装 Vant 组件库主要分为如下 3 步：①通过 npm 安装（建议指定版本为@1.3.3）②构建 npm 包③修改 app.json详细的操作..

2022-04-02 20:31:15 3657

原创微信小程序自定义组件 - behaviors

1. 什么是 behaviorsbehaviors 是小程序中，用于实现组件间代码共享的特性，类似于 Vue.js 中的 “mixins”。2. behaviors 的工作方式每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中。每个组件可以引用多个 behavior，behavior 也可以引用其它 behavior。3. 创建 behavior调用 Behavior(Object object) 方法.

2022-04-01 22:32:10 1116

原创微信小程序自定义组件 - 父子组件之间的通信

1. 父子组件之间通信的 3 种方式①属性绑定用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据②事件绑定用于子组件向父组件传递数据，可以传递任意数据③获取组件实例父组件还可以通过 this.selectComponent() 获取子组件实例对象这样就可以直接访问子组件的任意数据和方法2. 属性绑定属性绑定用于实现父向子传值，而且只能传递普通类型的数据，无法将方法传递给子组件。父组件的示例代码如下：//父组件中定义d.

2022-04-01 22:22:44 616

原创微信小程序自定义组件——插槽

1、插槽：在自定义组件的 wxml 结构中，可以提供一个 <slot> 节点（插槽），用于承载组件使用者提供的 wxml 结构。2. 单个插槽在小程序中，默认每个自定义组件中只允许使用一个 <slot> 进行占位，这种个数上的限制叫做单个插槽。//在组件.wxml中这样定义<view> <view>这里是外部内容</view> <slot></slot></view>.

2022-04-01 21:44:15 2172 1

原创微信小程序自定义组件——数据监听器

1.概念：数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于 vue 中的 watch 侦听器。在小程序组件中，数据监听器的基本语法格式如下：Component({ observers: { '字段A,字段B':function(字段A的新值,字段B的新值){ // 要进行的操作 } },})2.用法：以一个简单的加法为例首先我们在组件UI中这样定义：&

2022-04-01 20:00:18 3055

原创微信小程序-自定义组件

一、组件的创建与引用1. 创建组件①、在项目的根目录中，鼠标右键，创建 components -> test 文件夹②、在新建的 components -> test 文件夹上，鼠标右键，点击“新建 Component”③、键入组件的名称之后回车，会自动生成组件对应的 4 个文件，后缀名分别为 .js，.json， .wxml 和 .wxss注意：为了保证目录结构的清晰，建议把不同的组件，存放到单独目录中，例如：...

2022-04-01 12:50:31 2781 1

原创微信小程序-生命周期

1.概念：生命周期（Life Cycle）是指一个对象从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。例如：张三出生，表示这个人生命周期的开始张三离世，表示这个人生命周期的结束中间张三的一生，就是张三的生命周期我们可以把每个小程序运行的过程，也概括为生命周期：小程序的启动，表示生命周期的开始小程序的关闭，表示生命周期的结束中间小程序运行的过程，就是小程序的生命周期2. 生命周期的分类在小程序中，生命周期分为两类，分别是：① 应用生..

2022-03-22 21:41:22 129

原创微信小程序-WXS脚本

1.概述：WXS（WeiXin Script）是小程序独有的一套脚本语言，结合 WXML，可以构建出页面的结构。2. wxs 的应用场景wxml 中无法调用在页面的 .js 中定义的函数，但是，wxml 中可以调用 wxs 中定义的函数。因此，小程序中 wxs 的典型应用场景就是“过滤器”。3. wxs 和 JavaScript 的关系虽然 wxs 的语法类似于 JavaScript，但是 wxs 和 JavaScript 是完全不同的两种语言：①wxs 有自己的数据类型numb

2022-03-22 21:34:38 1909

原创微信小程序页面事件 - 下拉刷新与上拉触底

一、下拉刷新1.概念：下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。2. 启用下拉刷新启用下拉刷新有两种方式：①全局开启下拉刷新在 app.json 的 window 节点中，将 enablePullDownRefresh 设置为 true②局部开启下拉刷新在页面的 .json 配置文件中，将 enablePullDownRefresh 设置为 true在实际开发中，推荐使用第 2 种方式，为需要的页面单独开启下

2022-03-22 21:13:52 7269

原创小程序中实现页面导航的两种方式

一、声明式导航概念：在页面上声明一个 <navigator> 导航组件、通过点击 <navigator> 组件实现页面跳转1. 导航到 tabBar 页面tabBar 页面指的是被配置为 tabBar 的页面。在使用 <navigator> 组件跳转到指定的 tabBar 页面时，需要指定 url 属性和 open-type 属性，其中：①、url 表示要跳转的页面的地址，必须以 / 开头②、open-type 表示跳转的方...

2022-03-22 20:35:49 1053

原创关于微信小程序开发中的全局配置

1. 全局配置文件及常用的配置项小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下：① pages记录当前小程序所有页面的存放路径② window全局设置小程序窗口的外观③ tabBar设置小程序底部的 tabBar 效果④ style是否启用新版的组件样式2. 小程序窗口的组成部分3.全局配置 - window4.全局配置 - tabBar①ba...

2022-03-22 20:07:15 698

原创微信小程序tap事件中target与currentTarget的区别

target 是触发该事件的源头组件，而 currentTarget 则是当前事件所绑定的组件。举例如下：点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层 view 的 tap 事件处理函数。此时，对于外层的 view 来说：e.target 指向的是触发事件的源头组件，因此，e.target 是内部的按钮组件e.currentTarget 指向的是当前正在触发事件的那个组件，因此，e.currentTarget 是当前的 view 组件扩展：事件传参微信小程序.

2022-03-19 17:09:30 2291

原创 WXML模板语法——数据绑定、事件绑定、条件渲染、列表渲染

一、数据绑定1.Mustanche语法的格式应用场景：①绑定内容：<view>{{变量}}</view>②绑定属性：<image src="{{imgSrc}}"></image>Page({ data: { imgSrc:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" },})③三元运算

2022-03-19 16:46:18 931

原创微信小程序开发中WXML、WXSS与HTML、CSS的区别

微信小程序的开发与web网页开发的区别：1.页面结构web网页开发使用的页面结构是HTML,而小程序开发使用的却是WXML，两者的区别有：①：标签名称不同HTML中有（div、span、img、a）等标签WXML中不存在这些标签，它有自己独特的标签如：（view、text、image、navigator），其作用与上面HTML标签对应相似，使用如下：HTML的使用<div> <div></div> <span>

2022-03-17 11:07:08 4285

原创小程序的启动过程和页面渲染过程

一.小程序启动过程1.当我们第一次打开一个小程序时，首先会将小程序的代码包下载到本地2.下载完成后就会开始解析app.json的全局配置文件3.然后就会执行app.js小程序入口文件，调用APP()函数，创建实例4.执行完后就开始渲染页面了，这样一个小程序的启动过程就完成了二.页面渲染的过程1.当app.js文件执行完成后，会进去到page页面中执行页面文件，首先执行.json配置文件2.然后加载页面的.WXML和.WXSS文件3.最后当这些样式文件加载完成后就会执行页面中的

2022-03-16 22:57:37 1591

原创媒体标签的使用

1.音频媒体标签属性audio,可加入controls,使标签具有控件功能的音频媒体标签，代码如下：<audio src="" controls></audio>2.视频媒体标签属性video,加入onerror事件后具有当视频的媒体数据加载期间发生错误时执行某个方法事件的视频媒体标签。<video onerror="" controls></video>...

2022-03-11 11:10:03 620

原创楼赛第 31 期（Web 前端挑战）【功能实现】卡片化标签页

题目给出静态代码，运行如下图，无法实现卡片之间的切换，需要自己补全js代码完善如下：// 实现选项卡功能function init() { // TODO 待补充代码 var btns = document.querySelector(".tabs").querySelectorAll("div") var items = document.querySelector("#content").querySelectorAll("div") for(var i=0;i&lt..

2022-02-28 19:05:01 401

原创同步任务和异步任务

1.执行过程：①同步任务由JavaScript主线程次序执行②异步任务委托给宿主环境执行③已完成的异步任务对应的回调函数会被加入到任务队列中等待执行④JavaScript主线程的执行栈被清空后，会读取任务队列中的回调函数，次序执行⑤JavaScript主线程不断重复上面的第四步2.EventLoop（事件循环）：JavaScript主线程从“任务队列”中读取异步任务的回调函数，放到执行栈中依次执行这个过程是循环的，所以整个机制称为：EventLoop3.例题（经典面试题）i

2022-01-20 23:21:13 710

原创 vue导航

两种导航方式：声明式导航、编程式导航1.声明式导航：点击链接实现导航的方式，例如：<a></a>、<router-link></router-link>等等2.编程式导航：①this.$router.push('hash地址')跳转至指定hash地址，并增加一条历史记录②this.$route.replace('hash地址')跳转到指定的hash地址，并替代当前的历史记录③this.$route.go(数值n)可以在浏览历史中

2022-01-18 20:14:26 2018

原创 vue——路由

1.前端路由工作原理：①用户点击了页面上的路由链接②导致了URL地址栏中的Hash值发生了变化③前端路由监听到了到Hash地址的变化④前端路由把把当前Hash地址对应的组件渲染到浏览器2.路由的安装以及配置①在终端中输入下面命令：npm i [email protected] -S②在src源代码目录下新建router/index.js路由模块，并初始化如下代码：//1/导入Vue和VueRouter的包import Vue from "vue";import Vu

2022-01-18 19:58:22 470

原创 vue——自定义指令

1.vue中的自定义指令包括：私有自定义指令、全局自定义指令2.私有自定义指令：在每个vue组件中，可以在directive节点下声明私有指令，示例：//定义：directives:{ color:{ //color是自定义的，在组件标签中填写相对应的名称 bind(el){ //存在一个对象，写法：bind(el,binding)，el代表当前指令所绑定到那个DOM对象 el.style.color='r

2022-01-17 21:09:38 190

原创 vue——插槽

1.概念：插槽是vue为组件的封装者提供的能力，允许开发者在封装组件时，把不确定的，希望由用户指定的部分定义为插槽2.声明、使用：//在Left组件中<template> <div> <slot></slot> </div></template>//在App组件中<template> <div> <Left>

2022-01-17 20:57:32 184

原创 vue——动态组件、keep-alive

1.在vue的实例中，提供了一个内置的<component>组件，专门用来实现动态组件的渲染，可以使组件在使用时不必写死。具体用法：//以在App组件中使用Left组件为例//1.原来的组件使用，直接在App的<template></template>中以标签形式使用<template> <Left></Left></template>//2.使用动态组件后，改为下面所示<template&

2022-01-17 20:42:20 214

原创 vue基础——ref的引用

1.ref引用：用来辅助开发者在不依赖于jQuery的情况下，获取DOM元素或组件的引用，每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象2.使用ref引用页面上的DOM元素，则可以按照如下的方式进行操作：//使用ref属性，为对应的DOM添加引用名称<h3 ref="myh3">MyRef 组件</h3><button @click="getRef">获取

2022-01-16 22:39:18 1278

原创 vue基础——数据共享

组件间的数据共享方式较为常用的有父子关系，以及兄弟关系①父组件向子组件传输数据：需要属于自定义属性首先在子组件中通过props定义一个自定义的属性，然后在父组件中引用，如下面代码：//父组件<Son :msg="message" :user="userinfo"></Son>data(){ return { message: 'hello vue.js', userinfo:{ name:'zs',age:20} }

2022-01-16 22:20:52 400

原创 vue的生命周期

在运行vue项目中，其生命周期可分为三个阶段，具体如下图所示：其生命周期图示为，具体每个函数已给出注释：当然也可以通过官网进行查看，官方网址：https://cn.vuejs.org/v2/guide/instance.html#...

2022-01-14 20:12:15 113

原创 vue中的样式冲突

1.样式冲突问题：默认情况下，写在vue组件中的样式会全局生效，因此很容易造成多个组件之间样式冲突问题2.造成的原因：①单页面应用程序中，所有组件的DOM结构都是基于唯一的index.html页面进行呈现的②每个组件中的样式都会影响整个index.html页面中的DOM元素3.解决办法：在style标签中加上一个scoped属性，它可以自动给样式标签生成自定义属性用法：<style lang="less" scoped></style>4.deep属性：

2022-01-14 20:05:30 3682

原创 vue项目中的props自定义属性

1.这是一个自定义属性，在封装通用组件的时候，合理地使用props可以极大的提高组件的复用性2.语法：可以定义为数组类型的：export default { props:['init']}也可以定义为对象类型：export default { // props 是"自定义属性"，允许使用者通过自定义属性，为当前组件指定初始值 // 自定义属性的名字，是封装者自定义的（只要名称合法即可） // props 中的数据，可以直接在模板结构中被使用 // 注意：pro

2022-01-13 20:19:02 1479 1

原创 vue——cli项目解析

1.项目中包含node_modules文件：这是系统配置好的文件、public文件：包含一个html页面，用于接收渲染、以及最重要的src文件：该文件中包含main.js、components、App.vue等文件2.vue项目运行流程：在项目中，vue要做的事是通过main.js把App.vue渲染到index.html的指定区域，其中App.vue用来编写待渲染的模板结构、index.html中需要预留一个el区域、main.js把App.vue渲染到了index.html所预留的区域中3.Vu

2022-01-13 20:12:36 206

空空如也

空空如也