- app.onLaunch与page.onLoad异步问题
问题:相信很多人都遇到过这个问题,通常我们会在应用启动app.onLaunch() 去发起静默登录,同时我们需要在加载页面的时候,去调用一个需要登录态的后端 API 。由于两者都是异步,往往page.onload()调用API的时候,app.onLaunch() 内调用的静态登录过程还没有完成,从而导致请求失败。 解决方案:1. 通过回调函数// on app.js App({ onLaunch() { login() // 把hasLogin设置为 true .then(() => { this.globalData.hasLogin = true; if (this.checkLoginReadyCallback) { this.checkLoginReadyCallback(); } }) // 把hasLogin设置为 false .catch(() => { this.globalData.hasLogin = false; }); }, }); // on page.js Page({ onLoad() { if (getApp().globalData.hasLogin) { // 登录已完成 fn() // do something } else { getApp().checkLoginReadyCallback = () => { fn() } } }, }); ⚠️注意:这个方法有一定的缺陷(如果启动页中有多个组件需要判断登录情况,就会产生多个异步回调,过程冗余),不建议采用。 2. 通过Object.defineProperty监听globalData中的hasLogin值 // on app.js App({ onLaunch() { login() // 把hasLogin设置为 true .then(() => { this.globalData.hasLogin = true; }) // 把hasLogin设置为 false .catch(() => { this.globalData.hasLogin = false; }); }, // 监听hasLogin属性 watch: function (fn) { var obj = this.globalData Object.defineProperty(obj, 'hasLogin', { configurable: true, enumerable: true, set: function (value) { this._hasLogin = value; fn(value); }, get: function () { return this._hasLogin } }) }, }); // on page.js Page({ onLoad() { if (getApp().globalData.hasLogin) { // 登录已完成 fn() // do something } else { getApp().watch(() => fn()) } }, }); 3. 通过beautywe的状态机插件(项目中使用该方法) // on app.js import { BtApp } from '@beautywe/core/index.js'; import status from '@beautywe/plugin-status/index.js'; import event from '@beautywe/plugin-event/index.js'; const app = new BtApp({ onLaunch() { // 发起静默登录调用 login() // 把状态机设置为 success .then(() => this.status.get('login').success()) // 把状态机设置为 fail .catch(() => this.status.get('login').fail()); }, }); // status 插件依赖于 beautywe-plugin-event app.use(event()); // 使用 status 插件 app.use(status({ statuses: [ 'login' ], })); // 使用原生的 App 方法 App(app); // on page.js Page({ onLoad() { // must 里面会进行状态的判断,例如登录中就等待,登录成功就直接返回,登录失败抛出等。 getApp().status.get('login').must().then(() => { // 进行一些需要登录态的操作... }) }, }); 具体实现 具体实现可以参考我的商城小程序项目 项目体验地址:体验 代码:代码
2021-05-20 - 优雅解决:关于app.js的onLaunch 与 页面的onLoad 的异步问题
// 常见的场景:打开小程序时要先获取用户数据,再调其他接口 // 步骤: // 1、获取openid // 2、根据openid获取用户数据 // 3、获取到用户数据后 再 调取其他接口 啥也别说,直接看代码吧: 实际开发会把很多步骤合并,我这展示就每一步详细说明 [图片] [图片] [图片] [图片] -------分割线--------------------- 以上为app.js页面------------ 页面index.js(打开小程序页面栈的第一个页面) [图片] 总结:原理就是跨页面调用而已。该方法也可以使用在扫码进入的场景。只需在目标页面加上接收数据的函数init即可。
2020-12-16 - wx-open-launch-weapp button为什么不能设置背景图片?
[图片] 按钮的其他样式都生效了,就是背景图不生效,路径是对的,直接写button就生效,但是放在wx-open-launch-weapp里面的button的背景图就是显示不了
2021-08-13 - scroll-view滚动到底部有时候不触发scrolltolower事件
1.初始页面会渲染出10条数据 2.然后快速滑动页面scroll-view触底,数组arr变为20条,页面渲染20条。正常情况可以继续滑动去触底让数组变为30条,页面渲染30条,然后继续往滑。。。 3.问题复现:要一直快速滑动页面,总会在某个节点(可能是30、40、50、60条等)的时候看到打印的数组arr是n十条的时候,页面也是n十条,也就是数组和页面数据对等,以及已经到底部的时候。卡在那不能再滑动页面去触底了(因为已经在底部了)。此时需要回滚一点点 才能继续触发触底事件
2020-07-01 - scroll-view滚动到底部有时候不触发scrolltolower事件
使用scroll-view做上拉触底加载更多的功能 已经给scroll-view设置了一个固定的高度 lower-threshold设置为0 问题: 偶尔滚动触底也不触发scrolltolower事件,这时将页面向上滚动,然后再滚动触底才会触发scrolltolower事件 scrolltolower事件有时可以触发,有时不触发,请问怎么解决?
2018-10-29 - 输入框存在多行内容时,来回切换光标,出现界面异常,placeholder文案或内容错位显示
https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html 随访周期 <view class="dayItem {{item.val === selectedTimeArea ? 'selectedTimeArea' : ''}}" wx:for="{{dayBlock}}" wx:key="val" @tap="selectTimeArea({{item.val}})" ><text>{{item.text}}</text></view> <input placeholder="更多" class="{{'input' === selectedTimeArea ? 'selectedInput' : ''}}" type="number" max="999" @input="inputTimeArea" /> <textarea wx:if="{{ !isShowSubscribe}}" value="{{followUpRemark}}" auto-height="true" maxlength="300" @input="remarkInput" placeholder="请输入标签" placeholder-style="font-size:26rpx;" ></textarea> <script> data={ dayBlock:[ { text: '7天', val: 7 }, { text: '14天', val: 14 }, { text: '21天', val: 21 }, { text: '28天', val: 28 } ] } method={ selectTimeArea(val) { this.selectedTimeArea = val } } </script> 在IOS设备正常 【出现问题手机】 Motorola edge plus、华为P20、初步怀疑安卓会出现 Android 10、Android 9.1.0 微信版本: 8.0.3、8.0.1 【操作步骤】 1、进入页面, 2、标签输入框输入多行内容 3、点击默认的随访周期, 4、再点击周期—更多(input框),‘更多’文本+光标错位显示 【期望结果】 input的光标,在input框上正常显示 [图片][图片]
2021-05-13 - 小程序云函数调用http或https请求外部数据
我们使用小程序云开发的时候,难免会遇到在云函数里做http获取https请求外部数据,然后再通过云函数返回给我们的小程序。今天就来教大家如何在云函数里做http和https请求。 老规矩,先看效果图 [图片] 通过上图,可以看到我们在云函数里成功的访问到了百度的数据。下面就来讲下实现步骤。 一,定义云函数 关于云函数如何创建,这里我就不多说了。不知道如何创建的同学可以去看下我的云开发基础视频:https://study.163.com/course/courseMain.htm?courseId=1209499804 二,使用npm安装request-promise库 使用npm命令行之前,我们需要先安装node.js,node的安装网上搜一下就行。 下面我就来讲下在小程序里使用npm安装类库的步骤。 1, 右键我们的云函数,然后点击在终端中打开 [图片] 2,在打开的终端中输入 npm install request-promise [图片] 3, request-promise安装成功的标示如下 [图片] 三,编写我们的云函数代码 [图片] 把代码给大家贴出来,代码很简单,里面也有相应的注释,我们这里以请求百度的数据为例。 [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') //引入request-promise用于做网络请求 var rp = require('request-promise'); cloud.init() // 云函数入口函数 exports.main = async (event, context) => { let url = 'https://www.baidu.com'; return await rp(url) .then(function (res) { return res }) .catch(function (err) { return '失败' }); } [代码] 到这里我就成功的在云函数里实现了http和https请求了,这里使用的是get请求,至于post请求如何使用,自己去百度下“ request-promise post请求”即可。 再来看下我们请求成功的效果图 [图片] 是不是很简单,有任何关于小程序,云开发相关的问题,都可以留言或者私信我,我看到后会及时解答的。
2019-09-23 - 内存泄漏
请问这种跳转页面传值多次来回点击就会报下面这个错,也不影响页面但是就会报错怎么解决 VM333:1 (node) warning: possible EventEmitter memory leak detected. 16 listeners added. Use emitter.setMaxListeners() to increase limit.
2018-07-17