weixin_42580704-优快云博客

原创微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.10 tabBar组件（一）系统默认的tabBar组件如何开启及使用

零、回顾上节课我们主要扩展了wxp模块，最终实现了在接口调用中自动发起用户登录。并且在登录成功以后，继续接口的请求。这节课我们开始学习tabBar组件。这是一个底部的导航组件，微信小程序有一个官方的tabBar组件。但是有些时候我们需要自定义实现自己的tabBar组件，以增强用户体验。在tabBar实现方案的选择上，在小程序中有多种方式。1.使用系统默认的tabBar2.使用系统自定义的方式3.使用weui组件库4.基于组件自定义一、使用默认的系统tabBar"tabBar":

2022-02-09 16:25:08 1424 1

原创微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.9 网络接口简介（九）扩展wxp模块的request3方法，实现用户登录的自动融合

零、回顾在上节课我们主要介绍了观察者模式，并据此模式实现了一个event模块，这节课我们基础用户登录的自动整合，尝试在wxp模块当中扩展出一个request3这样的一个接口。一、在wxp组件中扩展实现request3接口3.7中，当我们单击手动开启登录的时候，它底部有一个面板滑出。接下来我们要实现的功能是，如果是我们用request3去调用接口的时候，如果发现用户没有登录，也就是没有token，那么我们把面板自动给它呼出来，让它滑出，滑出以后，然后用户点击按钮去登录，登录完成以

2022-02-08 17:12:06 1079

原创 TypeScript （二）基础语法

TypeScript 基础语法TypeScript 程序由以下几个部分组成：模块函数变量语句和表达是注释第一个 TypeScript 程序我们可以使用一下 TypeScript 程序来输出 “Hello World”：Runoob.ts 文件代码：const hello : string = "Hello World!"console.log(hello)以上代码首先通过 tsc 命令编译：tsc Runoob.ts得到如下 js 代码：Runoob.js 文件代码：v

2022-01-05 14:16:44 701

原创 TypeScript （一）安装

TypeScript 安装本文介绍 TypeScript 环境的安装。我们需要使用到 npm 工具安装，如果你还不了解 npm，可以参考我们的NPM 使用介绍。一、NPM 安装 TypeScript如果你的本地环境已经安装了 npm 工具，可以使用以下命令来安装。使用国内镜像：npm config set registry https://registry.npmmirror.com安装 typescript：npm install -g typescript安装完成后我们可以使用 t

2022-01-05 13:15:44 471

原创微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.8 网络接口简介（八）观察者模式介绍及Event模块实现

零、回顾上节课我们主要学习了EventChannel对象，这节课我们继续尝试整合用户自动登录，并着手自定义实现一个观察者模式对象。一、观察者模式观察者模式是23个经典设计模式之一，也是开发中经常使用的设计模式之一，它的作用是当一个对象被修改的时候，自动通知依赖它的对象，修改后的状态，观察者模式，又被称为发布者-订阅者模式。顾名思义，这个模式既可以订阅又可以发布，实现该模式的对象，需要有一个方法提供订阅功能，例如Subscribe、on这样的方法，通过这个方法知道谁关心这个对

2021-12-25 10:58:58 570

原创 vue解决跨域方法

什么是跨域跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。只要这3个中有一个不同就是跨域。这里列举一个经典的例子：#协议跨域http://a.baidu.com访问https://a.baidu.com；#端口跨域http://a.baidu.com:8080访问http://a.baidu.com:80；#域名跨域http://a.baidu.com访问http://b.baidu.com；现在很多公司都是采用前后端分离的方式开发。那么会出现经常和跨域

2021-12-23 15:12:05 864

原创 uniapp新建项目的方式

在H5招聘项目的时候，发现不能npm安装，发现是新建项目的时候选择了类型，为了以后更好的使用，现在新建不同的选项来看一下区别.另外，建议以后不新建项目，容易有坑，可以用以前的项目。清空内容之后再使用。快速上手一、通过HBuilderX 可视化界面1.1普通项目–基本HTML项目新建之后的目录包含index.html和css、js、img目录1.2普通项目–vue项目新建之后的目录在html中引入vue.js1.3普通项目–vue项目2.6.10新建之后的目录vu

2021-12-23 10:11:57 1630 1

原创微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.7 网络接口简介（七）学习EventChannel对象

零、回顾在之前我们自定义实现picker-view组件的时候，曾经使用过一个pop-up的自定义组件，这个组件可以在底部滑入一个面板，现在我们把登录按钮放在底部滑入的面板之上，然后在完成登录以后，再将这个面板滑出。一、EventChannel现在我们使用pop-up这个自定义组件，可以实现登录面板的滑入滑出，但是现在还有另外一个问题，对于使用自动登录整合功能的页面，它避免不了会有一些代码上的侵入。对于侵入的代码，我们没有办法完全避免，但是我们可以尽量减少这种侵入，在小程

2021-12-14 22:37:45 853

原创微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.6 网络接口简介（六）关于Page页面隐藏代码执行及Promise对象catch处理的补充

零、回顾在上节课我们主要是基于 Promise 加 await、async关键字改写了登录模块代码，但是我们在自动登录这一块的代码仍然有问题，这节课我们看一下，如何在接口调用中实现微信用户的自动登录。一、上节课的代码遇到的两个问题1.代码只要在页面中定义，就会被隐含执行。2.关于 Promise 的catch1.1 代码只要在页面中定义，就会被隐含执行。我们在一个page界面中，给Promise类对象扩展了一个any方法。这个any方法用于实现js中尚处于草案阶段一个Promise

2021-12-13 22:32:54 863

原创微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.5 网络接口简介（五）基于Promise+await、async关键字改写登录模块

零、回顾在上节课我们主要实践练习了Promise的三个方法，包括any、all、race。现在我们对Promise变成已经有了一个大致的了解。这节课我们尝试将登录模块使用Promise编程方式进行改写。原来在lib/login.js这个模块中，函数loginWithCallback使用的是回调函数的方式通知消费者登录成功。接下来我们在本课的源码里面将尝试使用Promise的方式进行改写。一、loginWithCallback函数使用Promise改写lib/login.jsfuncti

2021-12-12 22:56:14 487

原创微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.4 网络接口简介（四）Promise三个方法any、all与race的使用介绍

零、回顾在上节课我们主要介绍了Promise，这节课我们开始实践多个网络请求并发执行的处理策略，并着手将原来的登录代码模块，使用Promise改写一下。我们设想有这样一个场景，在页面启动的时候，我们需要加载多个接口，从多个接口中拉取页面初始化所需要的数据。如果我们对这些接口的调用，采用完成一个加载一个的方法的话，就是对小程序并发优势的浪费了。在Chrome浏览器中，对于同一域名下的资源加载量，最大并发数字是6，默认这个数字是6，其他浏览器稍有差别，但是一般都不会超过10个。为了优化这个问题

2021-12-12 21:12:34 1056

原创微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.3 网络接口简介（三）Promise 介绍及 6个常用方法

零、回顾上节课我们实现了登录代码的封装，并最终将登录代码模块化放在了一个文件里，这节课我们开始学习Promise，并基于Promise改造我们代码。Promise表示一个异步操作对象，它让我们可以在外部处理异步操作完成或者失败的时候的结果。Promise是ED6的一个标准内置对象，是为了解决Javasript开发中，一贯存在的回调地狱问题而推出的。微信小程序目前已经支持了包括Symbol、Set、Map、Promise在内的大部分内置对象以及相关的ES6方法。在小程序中已经原生支持Promi

2021-12-12 11:18:35 591 1

原创微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.2 网络接口简介（二）将登录代码模块化封装

零、回顾上节课我们主要回顾了，wx.request这个接口，这节课我们复用原来已经实现的，微信一键登录代码在拿到登录凭证以后，来调用/user/home接口，这节课我们主要实践操作，主要分步骤实现以下四个层次的功能。1.复原代码，在登录后直接调用接口2.如果已经登录，则不需要重复登录3.在加一个接口调用，将登录逻辑剥离为一个方法4.模块化，在其他页面中也可以使用一、复原代码，在登录后直接调用接口...

2021-12-08 22:42:41 373

原创微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.1 网络接口简介（一）如何使用wx.request接口

零、回顾上一章我们主要学习了，小程序有代表性的组件，组件是开发小程序项目的砖瓦基石，学习组件是学习小程序开发必不可少的一部分。如果说组件是小程序开发的砖瓦基石，那么接口就好比是水泥，接口可以将组件，将前端UI与后端的数据串联起来，最终组成我们想要的软件功能。从这节课开始我们主要学习网络接口，wx.request，并且基于这个基础的接口，我们尝试封装出一个自动整合用户登录的工具类方法。因为在前端的接口请求中，有些是不需要登录鉴权的，有些却是需要用户预先登录的，如果用户在没有登录的情况下，请

2021-12-07 22:55:06 1612

原创微信小程序全栈开发实践第二章微信小程序组件介绍及使用 -- 2.11 如何实现直播功能？（一）了解 live-pusher 、 live-player 组件的主要属性和使用限制

小程序开放了直接可以用的直播组件，有使用资格的小程序账号，可以在微信公众平台 -> 功能标签下面，可以看到申请入口，但是这个组件只是面向有资质的企业账号开放的，有了申请资格以后，也需要开发者自己去主动申请才可以使用一、HTML5与小程序在实现直播功能上的对比：HTML5：WebRTC 推流、video 标签播放小程序：live-pusher 推流、liver-player 播放，支持美颜、美白、实时音视频、动态码率调整等增强功能二、关于live-pusher 、 live-p

2021-07-21 13:53:00 2139

原创微信小程序全栈开发实践第二章微信小程序组件介绍及使用 -- 2.10 image组件，如何实现图片懒加载？

一、与image组件有关的技术问题1.1 什么是WebP？webp是image组件的一个boolean属性，开启这个属性之后，代表url可以设置webp这种格式的图片。 webP是一种同时提供了有损压缩与无损压缩的，并且是可逆的图片压缩的这种文件格式，这种文件格式是由谷歌推出的。image组件模式是不解析 webP这种图片格式的，它只支持网络图片资源，只有开启了webp属性之后，才可以解析 webP这种图片网址。那么我们为什么要使用 webP这种图片格式呢？它有什么优势呢？ webP

2021-07-19 19:08:44 2004

原创微信小程序全栈开发实践第二章微信小程序组件介绍及使用 -- 2.9 页面链接组件，如何自定义一个导航栏？

小程序中的导航组件functional-page-navigator 仅在插件中有效，用于跳转到插件功能页。navigator 小程序标准的导航组件小程序插件是对一些js接口、自定义组件或页面的封装，可以嵌入到小程序中去使用。插件不能独立运行，它必须嵌入到其他小程序中才能被用户使用。而使用第三方插件的时候，我们也无法看到插件的源码。插件适合用来封装功能或者是服务，提供给第三方去使用组件配置页的styleIsolation配置字段一共有3个值1. isolated 启用样式隔离

2021-07-16 13:30:36 907 1

原创微信小程序全栈开发实践第二章微信小程序组件介绍及使用 -- 2.8 滑动选择器表单组件，如何基于WXS自定义一个竖向的 slider ？

一、微信开放社区的自定义竖向sliderhttps://developers.weixin.qq.com/community/develop/article/doc/0002c8ac9603d0600e09b003b56413Touch对象一共有三组属性，identifier ，它是触控点的标识符pageX、pageY是距离文档左上角的距离，是以文档以基准的，它会把滚动的距离计算进去蓝色的框相当于文档，可以向上滚动的红色的框相当于我们的可视窗口灰色的框，相当于我们桌面的窗口，

2021-07-15 15:34:51 597

原创微信小程序全栈开发实践第二章微信小程序组件介绍及使用 -- 2.7 滚动选择器组件，使用两种方式自定义实现省、市、区三级联动的选择器

一、关于pick组件的相关问题1.1 object array 这个属性值是怎么回事？如何使用它？array: ['美国', '中国', '巴西', '日本'],objectArray: [ { id: 0, name: '美国' }, { id: 1, name: '中国' }, { id: 2, name: '巴西' }, { id: 3, name: '日本' }],对于picker组件，range属性，可以是数组，也可以是对象数组如果要

2021-07-14 18:50:50 1086

原创微信小程序全栈开发实践第二章微信小程序组件介绍及使用 -- 2.6 scroll-view组件，在小程序中如何实现滚动锚定，如何渲染一个滚动的长列表？

scroll-view 是一个可以滚动的视图区域的容器组件。一、重要属性scroll-view 的滚动属性，实现了两套功能左右或上下滚动下拉更新1.1 与滚动有关的属性：scroll-x 允许横向滚动scroll-y 允许纵向滚动纵向滚动<scroll-view scroll-y style="height: 300rpx;"> <view id="demo1" class="scroll-view-item demo-text-1"></view

2021-07-13 17:15:02 1288

原创微信小程序全栈开发实践第二章微信小程序组件介绍及使用 -- 2.5 可移动容器及可移动区域，以及如何实现侧滑删除功能

一、学习使用moveable-view与movable-area组件1.1 关于元素的定位static静态定位元素在页面流动的当前位置定位，这个时候它的top、left、right、bottom、z-index的设置都是无效的relative相对定位，相对定位的元素并没有脱离文档流，相对于元素本身它在页面流中的正常位置进行定位，这种定位不会影响其他元素movable-area，它的position样式默认是relative。absolute绝对定位，这个时候元素会被移出文

2021-07-13 13:23:27 612

原创微信小程序全栈开发实践第二章微信小程序组件介绍及使用 -- 2.4 view组件及其重要属性，flex布局中常用的样式及样式值

一、view组件及其重要属性view最主要的功能是布局1.1 相关属性属性1：hover-class 指定按下去的样式类这个属性指定按下去的类样式，让容器有一个单击效果，当hover-class="none"时，或者没有设置这个属性时，就没有单击态的效果。单击、再松开手指之后，容器组件恢复之前的状态。<view hover-class="bc_red" class="section__title">content</view>hover-class 这个属性名

2021-07-12 17:30:02 1674

原创微信小程序全栈开发实践第二章微信小程序组件介绍及使用 -- 2.3 rich-text 组件，以及如何单击预览它的节点图片并保存

一、rich-text组件nodes: [{ name: 'div', attrs: { class: 'div_class', style: 'line-height: 20px;padding:20px;' }, children: [ { type: 'text', text: '小程序实践' }, { name: 'img', attrs: { src: 'http://t.cn/A622uHwp', style: 'width

2021-07-12 16:14:42 1881

原创微信小程序全栈开发实践第二章微信小程序组件介绍及使用 -- 2.2 progress组件，以及如何自定义实现一个环形进度条？

在前端网络操作是异步的，一般都需要一个进度条，在很多应用中，我们经常可以看到环形进度条。但是小程序原生的progress组件，是一个从左到右的方形进度条，那么我们可不可以自实现一个环形进度条呢？一、原生实例代码可自定义的属性有关于颜色值的，颜色的使用需要符合微信小程序设计规范https://developers.weixin.qq.com/miniprogram/design/index.wxml<view class="gap" &

2021-07-12 15:27:52 1041 2

原创微信小程序全栈开发实践第二章微信小程序组件介绍及使用 -- 2.1 icon组件介绍，及如何自定义实现图标

一、icon组件<icon type="warn" size="93" color="#C9C9C9"></icon> size：支持两种单位，rpx与px，px数值类型，默认使用rpx是屏幕自适应单位，rpx把屏幕分为750个单位，每个单位是1/750,在iphone6机器上，屏幕宽度=350px，1rpx=0.5px，size=60rpx=30px（效果相同）color：改变的是图标所有像素的颜色，其中不包括中间镂空的部分图标中间是镂空的<icon

2021-07-12 13:19:38 1643 2

原创微信小程序全栈开发实践第一章重新认识微信小程序、及新功能介绍

第一章重新认识微信小程序、及新功能介绍1.1 小程序特点与web相比，首先入口不同web使用URL标识自身，依赖于搜索引擎小程序依赖于微信，线下小程序码和微信是小程序的入口主要都是基于传统的前端技术，以javaScript语言为主与APP相比，学习门槛和开发成本都比较低，可以快速上手不需要下载和安装，不想用了也不需要卸载相比H5，小程序受限微信运营规范，不想H5页面那么灵活。但它也可以做一些H5做不了的事情，比如消息订阅，直接转发消息给好友等1.2 小程序的开发能力依托于微信的宿.

2021-07-12 11:02:34 1750

原创【 web高级 02webpack 】webpack04

webpack性能优化优化开发体验优化输出质量量优化开发体验提升效率优化构建速度优化使⽤体验优化输出质量优化要发布到线上的代码，减少⽤户能感知到的加载时间提升代码性能，性能好，执⾏就快一、缩小文件查找范围webpack 在启动后会从配置的 Entry 出发，解析出文件中的导入语句，再递归解析，在遇到导入语句时，webpack 会做一下操作寻找对应的导入文件使用配置中的 Loader 去处理文件，例如解析 js 文件用的 babel-loader1.1

2021-04-12 10:04:46 192

原创【 web高级 02webpack 】webpack03

webpack第3节实战本地开发服务proxymockserverES6+处理babel插件转换插件 preset-envpollfillruntime按需加载React开发多页面处理最佳方案一、本地开发服务1.1 proxy 代理http://localhost:9092/api/info...

2021-04-06 15:33:39 118

原创【 web高级 02webpack 】webpack02

一、loader1.1-Less样式处理less-loader 把less语法转换成cssnpm install less less-loader --save-dev完整代码src/css/index.lesshtml{ body{ background: blue; .ele{ background-color: #fff; } } }src/index.jsimport css fr

2021-03-17 12:50:24 147

原创【 web高级 02webpack 】webpack01

本地安装npm init -y-y 的含义：yes的意思，在init的时候省去了敲回车的步骤，生成的默认的package.jsonnpm install webpack webpack-cli -Dnpm install -S -D -g 有什么区别npm install module_name -S 即 npm install module_name --save写入dependenciesnpm install module_name -D 即 n

2021-03-15 15:07:52 162