9.2-12.25微信小程序开发经验

2024-04-25 08:32

本文主要是介绍9.2-12.25微信小程序开发经验,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

这几个月的小程序开发可谓是把我虐的不要不要的。好在还是有点收获
一丶Promise
这个在小程序中经常遇到,刚开始完全不懂这个干什么用的。后面经过了解,这是一个解决回调地狱(Callback hell)而产出的解决方法
说的回调函数,首先要了解编程中异步与同步的概念
同步:先执行A执行完在执行B,这个过程说白了就是按照顺序执行。效率很低。值得注意的是JS就是单线程,也就是所谓的同步
异步:在执行A过程中会去执行B 这样效率就提升了效率,但是会有一个问题,加入线程A执行完的结果的a1是线程B所需的参数,那么程序就需要等待A执行完B才能执行。这个是参数问题。
还有一个问题,我们在客户端能够获取到信息,都是这样一个流程,客户端发送请求(浏览器),服务器(idea)接收客户端发送过来的请求,进行处理(增删改查)然后将处理好数据在返回给客户端(浏览器) 那么这个过程,前台可能还会发送请求其他,当我们像后台发送请求,请求还没有到底前台时,后台又发送了一个请求,这个过程会异步(姚哥经常说我犯这个错误)。
所有我们不能再请求中调用另一个请求,这样会造成异步。为什么说这种是异步,我们是不是在请求里面有请求时,第二个请求时需要第一个请求完成时参数,才能进行第二个请求的运行,所以这就是异步了
不过有了promise可以解决这个问题。
Promise 是异步编程的一种解决方案
特点
对象的状态不受外界影响 (3种状态)
Pending状态(进行中)
Fulfilled状态(已成功)
Rejected状态(已失败)
一旦状态改变就不会再变 (两种状态改变:成功或失败)
Pending -> Fulfilled
Pending -> Rejected
用法
1.1创建Promise实例
var promise = new Promise(function(resolve, reject){
// … some code

if (/* 异步操作成功 */) {resolve(value);
} else {reject(error);
}

})
Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,由JavaScript引擎提供,不用自己部署。
  resolve作用是将Promise对象状态由“未完成”变为“成功”,也就是Pending -> Fulfilled,在异步操作成功时调用,并将异步操作的结果作为参数传递出去;而reject函数则是将Promise对象状态由“未完成”变为“失败”,也就是Pending -> Rejected,在异步操作失败时调用,并将异步操作的结果作为参数传递出去。
  
then
 Promise实例生成后,可用then方法分别指定两种状态回调参数。then 方法可以接受两个回调函数作为参数:

Promise对象状态改为Resolved时调用 (必选)
Promise对象状态改为Rejected时调用 (可选)

function sleep(ms) {
return new Promise(function(resolve, reject) {
setTimeout(resolve, ms);
})
}
sleep(500).then( ()=> console.log(“finished”));
这段代码定义了一个函数sleep,调用后,等待了指定参数(500)毫秒后执行then中的函数。值得注意的是,Promise新建后就会立即执行。
还有两个知识点promise.all与promise.
promise.all([pram1,pram2,parm3]):所有完成的任务,.catch获取错误信息 当有一个任务失败,表示所有任务失败,但是影响下面的任务执行,参数是一个集合,集合内的元素就是异步方法
promise.race([pram1,pram2,parm3]):只要有一个是完成的,就算整个都是完成的

 还要补充一个知识点:js的异步与同步JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。于是就有一个概念,任务队列。如果排队是因为计算量大,CPU忙不过来,倒也算了,但是很多时候CPU是闲着的,因为IO设备(输入输出设备)很慢(比如Ajax操作从网络读取数据),不得不等着结果出来,再往下执行。JavaScript语言的设计者意识到,这时主线程完全可以不管IO设备,挂起处于等待中的任务,先运行排在后面的任务。等到IO设备返回了结果,再回过头,把挂起的任务继续执行下去。于是,所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;异步任务指的是,不进入主线程、而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。**(1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。

(2)主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。
(3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
(4)主线程不断重复上面的第三步。**

只要主线程空了,就会去读取"任务队列",这就是JavaScript的运行机制。这个过程会不断重复。
“任务队列"是一个事件的队列(也可以理解成消息的队列),IO设备完成一项任务,就在"任务队列"中添加一个事件,表示相关的异步任务可以进入"执行栈"了。主线程读取"任务队列”,就是读取里面有哪些事件。

“任务队列"中的事件,除了IO设备的事件以外,还包括一些用户产生的事件(比如鼠标点击、页面滚动等等)。只要指定过回调函数,这些事件发生时就会进入"任务队列”,等待主线程读取。

所谓"回调函数"(callback),就是那些会被主线程挂起来的代码。异步任务必须指定回调函数,当主线程开始执行异步任务,就是执行对应的回调函数。

"任务队列"是一个先进先出的数据结构,排在前面的事件,优先被主线程读取。主线程的读取过程基本上是自动的,只要执行栈一清空,"任务队列"上第一位的事件就自动进入主线程。但是,由于存在后文提到的"定时器"功能,主线程首先要检查一下执行时间,某些事件只有到了规定的时间,才能返回主线程。

二丶小程序生命周期
这个知识点很重要。这个涉及到执行顺序。
需要记住几个常遇到的:
onLoad:页面加载时运行(最开始运行的),基本上主要的函数都写在这里面
onshow:页面显示时运行,角标显示就写在onshow页面中
onReady:页面初次渲染完成时运行,页面自适应高度写在这里面
onUnload:页面销毁时运行

三丶冒泡问题
先让我们来了解下冒泡含义。
含义:事件冒泡代码结构上嵌套,在直系关系中;同一个事件绑定多个元素(子元素,父元素…都绑定该事件),从子元素到父元素依次触发事件
小程序展示如下:
在这里插入图片描述
在这里插入图片描述

当我们需要在点击瑶湖区派出所这个上面加一个复制按钮。如果使用bindtap就会点击复制后,直接进入瑶湖区派出所对应的页面里面,这时我们要考虑到冒泡问题,使用了catchtap。这样不影响点击进入另外一个页面,也不影响我们复制事件的触发。
在这里插入图片描述
在这里插入图片描述
四丶获取经纬度问题
这个问题也是在增加需求时发现的。需求是,在点击上传时,需要出现一个正在校验的提示框,并且判断有哪些没有执行完。那么问题来了,在第一次点击上传时这些没有问题,在第二次点击时(间隔小于30s)就会没有反应
主要的坑就是,微信官方获取经纬度的方法,只能在30s以外触发一次
这样就行了,用户那里会等待30s,所以该如何解决这个方法?

1.首先在方法运行时候定义一个变量接收当前时间

在这里插入图片描述
2.在“正在校验”前面判断,判断这个时间减去当前时间是否小于等于30s
在这里插入图片描述
3.那么,在第一次进入时肯定 是进入这个eles中,因为if那个条件不符合啊,你想啊,刚进入时,locationtime没有获取到啊是个undefined的,只有进入了else中才是有值的,那么第二次进入的时候(30s内)他就有值了,这是就会走if里,如何大于30秒。就走下面,这样不就完美解决了30s频繁获取经纬度了吗。在这里插入图片描述

五丶清除标记值
这个问题也是在小程序的开发过程中发现的,这个是在增加需求是发生的,需求是当巡检完成一个站,需要弹出提示框提示是否继续巡检。
在这里插入图片描述
这个逻辑是,当上传时,上传成功了,就会走这个方法(mainapi)这个方法的返回值可以判断当前站是否巡检完成。大于零说明没有,小于零就巡检完成了。这时注意在上传成功的回调函数刷新页面。并且使用 wx.setStorageSync(‘flag’, number);将标识设置进去。并调用这个弹出提示框的方法
在这里插入图片描述
注意这个方法,首先获取我们设置进去的标识flag,然后进行判断。判断成功执行相应的操作。在回调函数中需要清除标识flag。 wx.removeStorageSync(‘flag’); 如果不清除会怎么? 那么会在我们巡检完一个基站时。弹出一个提示框,上面写着“是否添加设备巡检”当我们点击确实,ok添加成功,但是这个框会一直在,原因就在于,这个flag是当我们点击确实时,一直存在的。所以一定需要清除这个flag时。并且清除这个flag并不是在你点击确定或者取消时清除的。而是你执行了回调函数就要清除。

六丶不能总用一个变量
这个问题,总是出现在我的身上。
在这里插入图片描述
在这里插入图片描述
通过定位到当前设备的下标,然后在进行操作,如果共用一个变量就会出现,你输入的什么,也会带到下个变量中

七丶双重循环
要了解双重循环,先看一张图片
在这里插入图片描述

双重循环就是在一个数组中里面某个元素也是个集合
在这里插入图片描述
这是在页面上循环的写法
wx:for-item=‘变量名(随便起的)’ 它是指定循环数据当前的变量名,可以通过 {{变量名.属性}} 展示数组的元素。
如果不指定wx:for-item的变量名称,默认就是item。
wx:for-index=‘变量名(随便起)’,它是指向当前元素的下标名
如果不指定wx:for-index=‘变量名,默认就是index
还有补充一个知识点 就是当我们想要获取当前点击的节点的信息时,可以使用如下方法。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

可以通过这个获取到当前点击的下标

这篇关于9.2-12.25微信小程序开发经验的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/934174

相关文章

Python实现微信自动锁定工具

《Python实现微信自动锁定工具》在数字化办公时代,微信已成为职场沟通的重要工具,但临时离开时忘记锁屏可能导致敏感信息泄露,下面我们就来看看如何使用Python打造一个微信自动锁定工具吧... 目录引言:当微信隐私遇到自动化守护效果展示核心功能全景图技术亮点深度解析1. 无操作检测引擎2. 微信路径智能获

SpringBoot实现微信小程序支付功能

《SpringBoot实现微信小程序支付功能》小程序支付功能已成为众多应用的核心需求之一,本文主要介绍了SpringBoot实现微信小程序支付功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作... 目录一、引言二、准备工作(一)微信支付商户平台配置(二)Spring Boot项目搭建(三)配置文件

微信公众号脚本-获取热搜自动新建草稿并发布文章

《微信公众号脚本-获取热搜自动新建草稿并发布文章》本来想写一个自动化发布微信公众号的小绿书的脚本,但是微信公众号官网没有小绿书的接口,那就写一个获取热搜微信普通文章的脚本吧,:本文主要介绍微信公众... 目录介绍思路前期准备环境要求获取接口token获取热搜获取热搜数据下载热搜图片给图片加上标题文字上传图片

如何用java对接微信小程序下单后的发货接口

《如何用java对接微信小程序下单后的发货接口》:本文主要介绍在微信小程序后台实现发货通知的步骤,包括获取Access_token、使用RestTemplate调用发货接口、处理AccessTok... 目录配置参数 调用代码获取Access_token调用发货的接口类注意点总结配置参数 首先需要获取Ac

W外链微信推广短连接怎么做?

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时,首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值,还要能够激起人们的分享欲望。对于许多企业和个人来说,尤其是那些缺乏创意和写作能力的人来说,这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大,不同用户的需求和兴趣各异。因此,制作推广链接时需要精准定位目标受众,以便更有效地吸引他们点击并分享链接

uniapp设置微信小程序的交互反馈

链接:uni.showToast(OBJECT) | uni-app官网 (dcloud.net.cn) 设置操作成功的弹窗: title是我们弹窗提示的文字 showToast是我们在加载的时候进入就会弹出的提示。 2.设置失败的提示窗口和标签 icon:'error'是设置我们失败的logo 设置的文字上限是7个文字,如果需要设置的提示文字过长就需要设置icon并给

GitHub每周最火火火项目(9.2-9.8)

项目名称:polarsource / polar 项目介绍:polar 是一个开源项目,它是 Lemon Squeezy 的替代方案,并且具有更具优势的价格。该项目的目标是为开发者提供一种更好的选择,让他们能够在追求自己的热情和兴趣的同时,通过编码获得相应的报酬。通过使用 polar,开发者可以享受到更实惠的价格,同时也能够更自由地发挥自己的创造力和技能。 项目地址:https://github.

基于微信小程序与嵌入式系统的智能小车开发(详细流程)

一、项目概述 本项目旨在开发一款智能小车,结合微信小程序与嵌入式系统,提供实时图像处理与控制功能。用户可以通过微信小程序远程操控小车,并实时接收摄像头采集的图像。该项目解决了传统遥控小车在图像反馈和控制延迟方面的问题,提升了小车的智能化水平,适用于教育、科研和娱乐等多个领域。 二、系统架构 1. 系统架构设计 本项目的系统架构主要分为以下几个部分: 微信小程序:负责用户界面、控制指令的

微信小程序uniappvue3版本-控制tabbar某一个的显示与隐藏

1. 首先在pages.json中配置tabbar信息 2. 在代码根目录下添加 tabBar 代码文件 直接把微信小程序文档里面的四个文件复制到自己项目中就可以了   3. 根据自己的需求更改index.js文件 首先我这里需要判断什么时候隐藏某一个元素,需要引入接口 然后在切换tabbar时,改变tabbar当前点击的元素 import getList from '../

微信小程序(一)数据流与数据绑定

一、单向数据流和双向数据流 1、单项数据流:指的是我们先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HTML代码,然后把这段HTML代码插入到文档流里面 优点:数据跟踪方便,流向单一,追寻问题比较方便【主要体现:微信小程序】。 缺点:就是写起来不太方便,如果修改UI界面数据需要维护对应的model对象 2、双向数据流:值和UI是双向绑定的,大家都知道,只要UI里面的值发生