前言 好久没写博客了,由于公司业务需要,最近接触uiapp比较多,一直想着输出一些相关的文章.正好最近时间富余,有机会来一波输出了. 问题描述 在使用 uni-app 开发项目时,会遇到需要在 onLaunch 中请求接口返回结果,并且此结果在项目各个页面的 onLoad 中都有可能使用到的需求,比如微信小程序在 onLaunch 中进行登录后取得 openid 并获得 token,项目各页面需要带上该 token 请求其他接口. 问题原因 在onLaunch 中的请求是异步的,也就是说在执行

场景如下:现有一个方法需要等待其他N个异步函数执行完毕后执行,callback麻烦的头大,翻了一波API原来小程序已经支持 async函数,那一切就好办了. 废话不多说,直接开始撸... 第一步:打开增强编译 第二部:直接撸代码,这里写了个

把微信小程序异步API转化为Promise.用Promise处理异步操作有多方便,谁用谁知道. 微信官方没有给出Promise API来处理异步操作,而官方API异步的又非常多,这使得多异步编程会层层回调,代码一复杂,回调起来就想砸电脑. 于是写了一个通用工具,把微信官方的异步API转化为Promise,方便处理(多)异步操作. 你可以这样用: 准备转化后的方法并暴露出 // /utils/wx-promise.js import toPromise from '/module/to-promi

目录 1,前言 2,代码实现 3,使用 3.1,初始化 3.2,发送消息 3.3,接收消息 1,前言 最近在做IOT的项目,里面有个小程序要用到webSocket,借这个机会,封装了一个uniapp小程序适用的Socket类,具体实现如下. 2,代码实现 class webSocketClass { constructor(url, interval) { this.url = url this.data = null this.isCreate = false // WebSocket 是否创

注:本项目的图片资源来源于后端接口,所以使用的是v-for. 关键词:uniapp 小程序 flex布局 v-for 4栏展示 自适应 <view style="display: flex; flex-direction: row;flex-wrap: wrap;margin: 0 5%;"> <view style="width: 25%;margin-bottom: 16upx;" v-for='(items,indexs) in item.t

uniapp小程序迁移到TS 我一直在做的小程序就是 山科小站 也已经做了两年了,目前是用uniapp构建的,在这期间也重构好几次了,这次在鹅厂实习感觉受益良多,这又得来一次很大的重构,虽然小程序功能都是比较简单的功能,但是这好不容易实习学到的东西得学以致用,那就继续在小程序上动手吧哈哈.这次实习收获最大倒不是怎么迁移到TS,而是一些组件设计的概念以及目录结构设计上的东西,不过这都是在之后重写组件的时候要做的东西了.回到正题,小程序是用uniapp写的,毕竟还是比较熟悉Vue语法的,这次迁移首先

直接看问题: 然后看打印的结果: 根据上面两图可以看出,代码上先执行的网络请求,再执行打印的变量,但是从下面打印的结果来看,先出结果的是执行打印变量的函数(aafn函数),再打印出网络请求success的回调里返回的数据和赋值后的变量的值: 为什么先执行的aafn,并且打印的值没有赋值上? 因为wx.request是一个异步的请求,所以数据请求的同时,可以继续向下执行函数.所以这里值还没有赋值上就开始打印了变量的值: 这种情况,怎么解决呢? 方法一:  嵌套 在wx.request的succes

在微信小程序中众所周知在js里面得方法都是异步执行,我最近再做项目得时候也遇到了这个问题,再方法里面调用另一个方法里面的接口数据,第一次是调取不到的, 因为两个方法是同时开始执行得,所以怎么都取不到值,在网上看了各个大神的方法,基本上都是用promise的方法解决的,我原本也想用这个方法解决,别人告诉我说 是不是也可以用回调函数解决了,于是试了一下,刚开始一直在报错,我以为这种方法不能用,又试了几次之后发现是我自己的方法写错了(原谅我是小白,对回调函数不是 特别熟悉,所以试了很久)后来终于成功了

微信小程序为了提高用户体验,提供的api大部分都是异步操作,除了数据缓存操作里面有一些同步操作.是提高了用户体验,但是在开发的时候, 就有点坑了,例如我要写一个公共方法,发起网络请求,去后台去一些数据,成功之后,再做一些操作,但是由于wx.request是异步请求,就会 导致,网络请求还没结束,就会执行后面的代码,从而引起异常,怎么解决这种异步导致的问题呢,当然是promise了.看例子: 公共common.js里封装了一个得到用户实体的方法: //发起请求,得到用户实体 function Ge

信小程序(与js)通过requirejs引用外部js文件 var modelSearch = require('../../utils/modelSearch.js') 这是一个构建数据请求筛选条件的库文件 需要在modelSearch中暴露出函数 使用导出函数对象将函数导出到接收对象 module.exports.GetWhereAndOrderBy = GetWhereAndOrderBy; module.exports.whereOptionAll = whereOptionAll; mo

在同一开放平台账号下的移动应用及小程序无需关联即可完成跳转,非同一开放平台账号下的小程序需与移动应用(APP)成功关联后才支持跳转. 可在“管理中心-移动应用-应用详情-关联小程序信息”,为通过审核的移动应用发起关联小程序操作. 唤起 App打开下程序他有两种方式: 1,通过App分享小程序卡片 到微信,然后在微信上点击小程序卡片打开小程序,这是小程序也可以打开App 第一步:你需要到微信开放平台 将你的app 关联上你的小程序! 第二步:你工程中需要导入有 wechatOpenSDK 第三步:

Lilishop B2B2C商城系统 官方公众号 & 开源不易,如有帮助请点Star 所有jar包均可从maven中央仓库下载,无二次封装jar包,全端开源,无后门,无监控. 介绍 官网:https://pickmall.cn Lilishop 是一款Java开发,基于SpringBoot的B2B2C多用户商城,前端使用 Vue.uniapp-app开发 系统全端全部代码开源 商城展示端包含 PC.H5.小程序.APP. 商城包含 会员模块.第三方登录模块.第三方支付模块.楼层装修模块.订单模块

前言 本文基于 HBuilderX 3.1.22 + 微信开发者工具 1.05.2106300为主要内容进行说明. 文档版本:1.0.0 更新时间:2021-09-03 15:32 一.准备 uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.Web(响应式).以及各种小程序(微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝).快应用等多个平台. 1.1 软件安装 创建uni-app有两种,一个是通过 HBuilderX 可视化界

目录 1,前言 2,实现代码 1,前言 这次项目中做了一个图片上传,要求是大于2MB的就压缩成2MB一下的再上传,我这边利用了uniapp的文件接口,使用canvas做了一个压缩上传的功能,目前已上线,使用无问题. 2,实现代码 定义canvas <canvas canvas-id="imgCanvas" class="imgCanvas" /> canvas样式 .imgCanvas{ position: absolute; top: -100%; w

发现小程序一个bug, 在小程序插件中使用wx.createSelectorQuery()获取不到节点信息,需要在后面加入in(this) 例如: const query = wx.createSelectorQuery().in(this) query.selectAll('#id-selector').boundingClientRect() query.exec(function (res) { console.log(res) }) 这时候res里面就能获取到节点信息了

在小程序开发中,默认底部导航栏很难满足实际需求,好在官方给出了自定义形式,效果如下: 话不多说,直接上代码 1.组件 custom-tarbar.vue文件 <template> <view class="tarbar"> <view class=".tarbar-list" :style="{ background: tabBar.backgroundColor, color: tabBar.color, 'border-t

通过设置navigationStyle, 即自定义导航实现背景全屏 参考文章:  微信小程序 自定义头部导航栏 navigationStyle 代码部分 在page.json中, 加入 "navigationStyle": "custom" , 这是全局的, 单页面的还不知道怎么搞 "globalStyle": { "navigationBarTextStyle": "black", "navig

1.授权按钮: <view> <button class='login-btn' type='primary' @click="bindGetUserInfo"> 授权登录 </button> </view> 2.事件方法: <script> export default { data() { return { nickName: null, //昵称 avatarUrl: null, //头像 isCanUse: uni.g

注:处理异步加载需要模拟浏览器登陆,然后用import json,用loads解析 例如:

实现一个计时器/秒 其实就是要求对某字段每秒执行一次更新 这里用到了官方给的定时器 官方API 每秒刷新一次,所以用setInterval()方法 下面给出关键代码: 由于无关代码过多,这里尽可能贴出相关代码,但不能独立运行,关键方法已注释,使用相当简单 /** * 是否已经呼出 * 控制状态和定时器 */ var help = false; /** * 分 */ var sec = 0; /** * 秒 */ var min = 0; /** * 定时器id * 关闭时要用 */ var ti

效果图 这一节介绍,登录回调 以及 喜欢列表 的实现. 登录回调:这里是指在获取登录完成之后,再进行下一步的操作. 比如效果图中我的页面,默认是未登录状态,积分和喜欢列表的数量都没有获取到. 而登录成功之后不仅将用户信息刷新,同时将积分和喜欢列表的数量刷新. 登录回调 我这里实现的回调层级有点多,这也是回调的一个弊端,当回调层级很多代码就会很难理解. 一个简单的回调例子: // 1.获取网络数据 _getDataFromServer(userInfo, callBack){ ... callBa