![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
小程序原生
文章平均质量分 71
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 · 1247 阅读 · 1 评论 -
微信小程序全栈开发实践 第三章 微信小程序开发常用的API介绍及使用 -- 3.9 网络接口简介(九)扩展wxp模块的request3方法,实现用户登录的自动融合
零、回顾在上节课我们主要介绍了观察者模式,并据此模式实现了一个event模块,这节课我们基础用户登录的自动整合,尝试在wxp模块当中扩展出一个request3这样的一个接口。一、在wxp组件中扩展实现request3接口3.7中,当我们单击手动开启登录的时候,它底部有一个面板滑出。接下来我们要实现的功能是,如果是我们用request3去调用接口的时候,如果发现用户没有登录,也就是没有token,那么我们把面板自动给它呼出来,让它滑出,滑出以后,然后用户点击按钮去登录,登录完成以原创 2022-02-08 17:12:06 · 1032 阅读 · 0 评论 -
微信小程序全栈开发实践 第三章 微信小程序开发常用的API介绍及使用 -- 3.8 网络接口简介(八)观察者模式介绍及Event模块实现
零、回顾上节课我们主要学习了EventChannel对象,这节课我们继续尝试整合用户自动登录,并着手自定义实现一个观察者模式对象。一、观察者模式观察者模式是23个经典设计模式之一,也是开发中经常使用的设计模式之一,它的作用是当一个对象被修改的时候,自动通知依赖它的对象,修改后的状态,观察者模式,又被称为发布者-订阅者模式。顾名思义,这个模式既可以订阅又可以发布,实现该模式的对象,需要有一个方法提供订阅功能,例如Subscribe、on这样的方法,通过这个方法知道谁关心这个对原创 2021-12-25 10:58:58 · 522 阅读 · 0 评论 -
微信小程序全栈开发实践 第三章 微信小程序开发常用的API介绍及使用 -- 3.7 网络接口简介(七)学习EventChannel对象
零、回顾在之前我们自定义实现picker-view组件的时候,曾经使用过一个pop-up的自定义组件,这个组件可以在底部滑入一个面板,现在我们把登录按钮放在底部滑入的面板之上,然后在完成登录以后,再将这个面板滑出。一、EventChannel现在我们使用pop-up这个自定义组件,可以实现登录面板的滑入滑出,但是现在还有另外一个问题,对于使用自动登录整合功能的页面,它避免不了会有一些代码上的侵入。对于侵入的代码,我们没有办法完全避免,但是我们可以尽量减少这种侵入,在小程原创 2021-12-14 22:37:45 · 775 阅读 · 0 评论 -
微信小程序全栈开发实践 第三章 微信小程序开发常用的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 · 811 阅读 · 0 评论 -
微信小程序全栈开发实践 第三章 微信小程序开发常用的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 · 454 阅读 · 0 评论 -
微信小程序全栈开发实践 第三章 微信小程序开发常用的API介绍及使用 -- 3.4 网络接口简介(四)Promise三个方法any、all与race的使用介绍
零、回顾在上节课我们主要介绍了Promise,这节课我们开始实践多个网络请求并发执行的处理策略,并着手将原来的登录代码模块,使用Promise改写一下。我们设想有这样一个场景,在页面启动的时候,我们需要加载多个接口,从多个接口中拉取页面初始化所需要的数据。如果我们对这些接口的调用,采用完成一个加载一个的方法的话,就是对小程序并发优势的浪费了。在Chrome浏览器中,对于同一域名下的资源加载量,最大并发数字是6,默认这个数字是6,其他浏览器稍有差别,但是一般都不会超过10个。为了优化这个问题原创 2021-12-12 21:12:34 · 1017 阅读 · 0 评论 -
微信小程序全栈开发实践 第三章 微信小程序开发常用的API介绍及使用 -- 3.3 网络接口简介(三)Promise 介绍及 6个常用方法
零、回顾上节课我们实现了登录代码的封装,并最终将登录代码模块化放在了一个文件里,这节课我们开始学习Promise,并基于Promise改造我们代码。Promise表示一个异步操作对象,它让我们可以在外部处理异步操作完成或者失败的时候的结果。Promise是ED6的一个标准内置对象,是为了解决Javasript开发中,一贯存在的回调地狱问题而推出的。微信小程序目前已经支持了包括Symbol、Set、Map、Promise在内的大部分内置对象以及相关的ES6方法。在小程序中已经原生支持Promi原创 2021-12-12 11:18:35 · 552 阅读 · 1 评论 -
微信小程序全栈开发实践 第三章 微信小程序开发常用的API介绍及使用 -- 3.2 网络接口简介(二) 将登录代码模块化封装
零、回顾上节课我们主要回顾了,wx.request这个接口,这节课我们复用原来已经实现的,微信一键登录代码在拿到登录凭证以后,来调用/user/home接口,这节课我们主要实践操作,主要分步骤实现以下四个层次的功能。1.复原代码,在登录后直接调用接口2.如果已经登录,则不需要重复登录3.在加一个接口调用,将登录逻辑剥离为一个方法4.模块化,在其他页面中也可以使用一、复原代码,在登录后直接调用接口...原创 2021-12-08 22:42:41 · 341 阅读 · 0 评论 -
微信小程序全栈开发实践 第三章 微信小程序开发常用的API介绍及使用 -- 3.1 网络接口简介(一) 如何使用wx.request接口
零、回顾上一章我们主要学习了,小程序有代表性的组件,组件是开发小程序项目的砖瓦基石,学习组件是学习小程序开发必不可少的一部分。如果说组件是小程序开发的砖瓦基石,那么接口就好比是水泥,接口可以将组件,将前端UI与后端的数据串联起来,最终组成我们想要的软件功能。从这节课开始我们主要学习网络接口,wx.request,并且基于这个基础的接口,我们尝试封装出一个自动整合用户登录的工具类方法。因为在前端的接口请求中,有些是不需要登录鉴权的,有些却是需要用户预先登录的,如果用户在没有登录的情况下,请原创 2021-12-07 22:55:06 · 1527 阅读 · 0 评论 -
微信小程序全栈开发实践 第二章 微信小程序组件介绍及使用 -- 2.11 如何实现直播功能?(一)了解 live-pusher 、 live-player 组件的主要属性和使用限制
小程序开放了直接可以用的直播组件,有使用资格的小程序账号,可以在微信公众平台 -> 功能标签下面,可以看到申请入口,但是这个组件只是面向有资质的企业账号开放的,有了申请资格以后,也需要开发者自己去主动申请才可以使用一、HTML5与小程序在实现直播功能上的对比:HTML5:WebRTC 推流、video 标签播放小程序:live-pusher 推流、liver-player 播放,支持美颜、美白、实时音视频、动态码率调整等增强功能二、关于live-pusher 、 live-p原创 2021-07-21 13:53:00 · 1558 阅读 · 0 评论 -
微信小程序全栈开发实践 第二章 微信小程序组件介绍及使用 -- 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 · 1830 阅读 · 0 评论 -
微信小程序全栈开发实践 第二章 微信小程序组件介绍及使用 -- 2.9 页面链接组件,如何自定义一个导航栏?
小程序中的导航组件functional-page-navigator 仅在插件中有效,用于跳转到插件功能页。navigator 小程序标准的导航组件小程序插件是对一些js接口、自定义组件或页面的封装,可以嵌入到小程序中去使用。插件不能独立运行,它必须嵌入到其他小程序中才能被用户使用。而使用第三方插件的时候,我们也无法看到插件的源码。插件适合用来封装功能或者是服务,提供给第三方去使用组件配置页的styleIsolation配置字段一共有3个值1. isolated 启用样式隔离原创 2021-07-16 13:30:36 · 776 阅读 · 1 评论 -
微信小程序全栈开发实践 第二章 微信小程序组件介绍及使用 -- 2.8 滑动选择器表单组件,如何基于WXS自定义一个竖向的 slider ?
一、微信开放社区的自定义竖向sliderhttps://developers.weixin.qq.com/community/develop/article/doc/0002c8ac9603d0600e09b003b56413Touch对象一共有三组属性,identifier ,它是触控点的标识符pageX、pageY是距离文档左上角的距离,是以文档以基准的,它会把滚动的距离计算进去蓝色的框相当于文档,可以向上滚动的红色的框相当于我们的可视窗口灰色的框,相当于我们桌面的窗口,原创 2021-07-15 15:34:51 · 536 阅读 · 0 评论 -
微信小程序全栈开发实践 第二章 微信小程序组件介绍及使用 -- 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 · 993 阅读 · 0 评论 -
微信小程序全栈开发实践 第二章 微信小程序组件介绍及使用 -- 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 · 1148 阅读 · 0 评论 -
微信小程序全栈开发实践 第二章 微信小程序组件介绍及使用 -- 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 · 545 阅读 · 0 评论 -
微信小程序全栈开发实践 第二章 微信小程序组件介绍及使用 -- 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 · 1565 阅读 · 0 评论 -
微信小程序全栈开发实践 第二章 微信小程序组件介绍及使用 -- 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 · 1716 阅读 · 0 评论 -
微信小程序全栈开发实践 第二章 微信小程序组件介绍及使用 -- 2.2 progress组件,以及如何自定义实现一个环形进度条?
在前端网络操作是异步的,一般都需要一个进度条,在很多应用中,我们经常可以看到环形进度条。但是小程序原生的progress组件,是一个从左到右的方形进度条,那么我们可不可以自实现一个环形进度条呢?一、原生实例代码可自定义的属性有关于颜色值的,颜色的使用需要符合微信小程序设计规范https://developers.weixin.qq.com/miniprogram/design/index.wxml<!-- 单击模拟网络异步 --><view class="gap" &原创 2021-07-12 15:27:52 · 889 阅读 · 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 · 1551 阅读 · 2 评论 -
微信小程序全栈开发实践 第一章 重新认识微信小程序、及新功能介绍
第一章 重新认识微信小程序、及新功能介绍1.1 小程序特点与web相比,首先入口不同web使用URL标识自身,依赖于搜索引擎小程序依赖于微信,线下小程序码和微信是小程序的入口主要都是基于传统的前端技术,以javaScript语言为主与APP相比,学习门槛和开发成本都比较低,可以快速上手不需要下载和安装,不想用了也不需要卸载相比H5,小程序受限微信运营规范,不想H5页面那么灵活。但它也可以做一些H5做不了的事情,比如消息订阅,直接转发消息给好友等1.2 小程序的开发能力依托于微信的宿.原创 2021-07-12 11:02:34 · 1667 阅读 · 0 评论