uni-app 小程序开发记录

2,411 阅读5分钟

2020.09.01

uni-app 全局引入scss

使用uni-app项目内置的uni.scss,这个文件(项目根目录)里面的scss样式可以全局使用,不需要单个页面import.scss文件

2020.09.02

授权API地址

wxml都有,但是页面无渲染

注: 17:34:51.509 1. 可以通过微信开发者工具切换pages.json中condition配置的页面,或者关闭微信开发者工具,然后再从HBuilderX中启动指定页面 17:34:51.535 2. 如果出现微信开发者工具启动后白屏的问题,检查是否启动多个微信开发者工具,如果是则关闭所有打开的微信开发者工具,然后再重新运行 17:34:51.560 3. 运行模式下不压缩代码且含有sourcemap,体积较大;若要正式发布,请点击发行菜单进行发布

单个checkbox怎么获取是否选中

<checkbox 
    @click="isChecked = !isChecked"
    :checked="isChecked"
    color="#09BB07" 
    style="margin-right: 16px;"
></checkbox>

原先使用@change="checkboxChange" ,无效,@change用于<checkbox-group >.

2020.09.03

uni-app 添加 permission 失败解决方案

具体开发方法如下:

  1. 原生开发中在 app.json 里面增加 permission 属性配置:
 "permission" : {
        "scope.userLocation" : {
            "desc" : "需要获取当前位置"
        }
    }
  1. uni-app开发中刚开始以为直接在pages.json 里面增加 permission 属性配置就可以了,结果失败,

查询之后发现需要在mainfest.json中设置:

vscode编译器中,添加配置

 "mp-weixin" : {
    "appid" : "XXX",
    "setting" : {
        "urlCheck" : true,
        "minified" : true,
        "es6" : true
    },
    "uniStatistics" : {
        "enable" : true
    },
    "permission" : {
        "scope.userLocation" : {
            "desc" : "需要获取当前位置"
        }
    }
}

在HBuilderX编辑器中,如下图,选中:

uni.redirectTo 跳转 白屏

进入页面判断是否登录,未登录uni.relaunch到登录页面,页面白屏啦

又是那种需要重新运行~

uni.redirectTo()跳转,会执行两次被打开页面的onLoad,屏幕出现两次跳转的现象

换成 uni.reLauncht跳转,页面也会

 uni.reLaunch({
     url: '/pages/login/index'
  });

2020.09.04

button open-type="getUserInfo'的一些问题

点击不弹框

问题:用button标签写的授权逻辑,在华为手机上点击没有出现弹框,直接执行同意授权部分的逻辑

解决:清缓存

需要点击两次按钮才触发

tap反应有点慢

wx.getSetting和wx.getWeRunData 哪个判断应该在前

小程序获取所以的StorageSync数据

2020.09.05

组件wxss中不允许使用某些选择器,包括标记名选择器,ID选择器和属性选择器

[/__pageframe__/mainframe.wxml] Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.(.<URL>:1)

2020.09.07

微信小程序 对应的服务器证书无效

勾选上不校验.

uni.request

const request = (options) => {
	return uni.request(options).then(res => {

		if (options.loading) {
			uni.showLoading();
		}

		function hideLoading(loading) {
			if (options.loading == true) {
				uni.hideLoading();
			}
		}

		console.log(res, 'requ')
		if (res[0]) {
			
			throw new Error(res[0]);
		} else {
			return res[1]
		}
	})
}

export default request;
  1. if (res[0])返回的数据结构[{}]

  2. if (res[0]){}else{}返回的数据结构[null,{}]

uni-app编译报caniuse-lite is outdated的处理方案

caniuse-lite is outdated

style传递是多个对象的时候:style="[styleObject]"

<LmButtonCom btnText="保存记录" 
  @handleevent="handleSaveSubmit" 
  :style-object="{
      background: 'linear-gradient(296deg, #3F98FF 0%, #3FBAFF 100%)',
      boxShadow:'none',
      width:'240px',
      opacity: !checked?'0.5':'1'
    }"
/>
<template>
    <view class="customize_button" @tap="$emit('handleevent')" :style="[styleObject]">
        <slot name='btn_icon'></slot>
        {{btnText}}
    </view>
</template>

wx.getSetting

export function checkLocationAuthorized(alertAuthoried, callback = null) {
	// 获取位置信息
	uni.getSetting({
		success: (res) => {
			if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {
				//非初始化进入该页面,且未授权
				if (!alertAuthoried) {
					callback ? callback(3) : null;
					return
				}
				uni.showModal({
					title: "\"打卡小助手\"需要获取你的地理位置",
					content: '你的位置信息将用于小程序位置接口的效果展示',
					success: function (res) {
						if (res.cancel) {//取消
							callback ? callback(3) : null;
						} else if (res.confirm) {//确定
							//进入设置页面的弹框
							uni.openSetting({
								success: (dataAu) => {
									if (dataAu.authSetting["scope.userLocation"] == true) {
										callback ? callback(1) : null;
									} else {
										callback ? callback(3) : null;
									}
								}
							})
						}

					}
				})
			} else if (res.authSetting['scope.userLocation'] == undefined) {
				callback ? callback(2) : null;
			} else {//授权后默认加载
				callback ? callback(1) : null;
			}
		}
	})
}

[openSetting:fail can only be invoked by user TAP gesture](小程序-openSetting:fail can only be invoked by user TAP gesture)

2020.09.08

小程序语音文件 需要uploadFile吗

recorderManager.start({
    format: "mp3"
});

拿到的是mp3格式的文件,那么小程序支持上传音频文件吗或者支持上传MP3的文件吗? 需要的

uni-app 框架登录

2020.09.09

uni.request 请求中uni.showToast无效

在uni.request中 做 showLoading hideLoading showToast 提示。你们有遇到什么问题吗

文档有说明:showToast 和 showLoading 是底层同一个(按的小程序的设计),所以 .showToast 和 showLoading 会相互覆盖,而 hideLoading 也会关闭 showToast 。

但是我都把showLoading和hideLoading都注释了,showToast还是显示为空

  1. hideLoading之后showToast 空的弹框, 解决,做了个定时器
  2. 现在的问题,hideLoading的时候也会出现一个空的弹框?这个怎么回事啊,咋解决呢

原来是因为调用接口的时候做了showToast的处理,但是catch返回的数据传递的不对.

··· const request = (options) => { let openId = uni.getStorageSync('userInfo').openId; let unionId = uni.getStorageSync('userInfo').unionId; let accessToken = uni.getStorageSync('tokenInfo').accessToken; let contentType = options.contentType; if (typeof (contentType) == 'undefined' || contentType == null) { contentType = 'application/json; charset=UTF-8'; };

let optionsData={
	...options,
	header: {
		'content-Type': contentType,
		'openId': openId,
		'unionId': unionId,
		'accessToken': accessToken,
	},
}
if (optionsData.loading == true) {
	uni.showLoading();
}

function RequestHideLoading() {
	if (optionsData.loading == true) {
		uni.hideLoading();
	}
}

function RequestShowToast(title) {
	setTimeout(() => {
		uni.showToast({
			title: title,
			icon: 'none',
			duration: 3000
		})
	}, 200);
}

return uni.request(optionsData).then(res => {
	RequestHideLoading();
	console.log(res, 'requ')
	if (res[0]) {
		console.log(0);
		RequestShowToast(res[0].errMsg)
		throw new Error(res[0]);
	} else {
		console.log(1);
		if (res[1].statusCode!==200){
			RequestShowToast(res[1].data.error)
		}
		return res[1].data
	}
})

}

export default request; ···

uni-app 获取上一个页面的路径

uni-app 获取返回页面的路径

2002.09.10

uni-app mp-weixin plugins 失败

必须设置"usingComponents":true,

2002.09.11

关于测试号获取微信小程序formId

微信开发工具报:the formId is no longer available in develop or trial version of this mini program

uni-app 小程序 订阅消息推送 fromId获取不到

小程序 uploadFile的图片预览回显是不是必须downFile

不是

uni-app 上传图片返回地址回显不出

通--过wx.uploadFil上传图片得到的地址http://tmp/wx1f6eecfda038a21e.o6zAJs9zyx85gfzaictAO8nwwJns.fCf2I3vbize879c98c60542d82df85ad71348100d501.png,传给后台,结果回显不出.

不能直接使用uploadFile的文件,要使用后端返回的图片url.

2020.09.19

小程序跳转快速点击,出现跳转两次问题

做stop的限制

进入小程序强制跳转授权页面,审核不通过的概率增大

在app.vue里做了登录跳转的判断,在home.vue里也做了登录跳转的判断,在一些手机下,会出现两个login页面,但是有的手机不会.

手机型号微信版本
iQQO7.0.16
荣耀107.0.18
iPhone 77.0.15