uniapp——登录、分享、扫码、轮播图指示点、页面滚动、海报画版、背景音乐、自定义导航栏

目录

一、小程序的登录——wx.login/getUserProfile

二、小程序实现分享——onShareAppMessage

三、小程序、APP的扫码 ——uni.scanCode(OBJECT)

四、轮播图指示点:——uni-swiper-dot

五、小点

六、页面滚动——uni.pageScrollTo(OBJECT)

七、海报画版——painter(插件)

八、背景音乐——uni.createInnerAudioContext()

九、导航的修改


一、小程序的登录——wx.login/getUserProfile

静默登录、手动授权登录

1) 、静默登录

1、wx.login==>获取code,getUserProfile获取iv等信息

2、两个获得到的消息去调接口获取token

2) 、用户都用授权

....

二、小程序实现分享——onShareAppMessage

1、可以通过小程序自带的分享进行分享

2、可以通过button事件进行分享

3、要写onShareAppMessage(OBJECT)  【和 onLoad 等生命周期函数同级】

分享 | uni-app官网

三、小程序、APP的扫码 ——uni.scanCode(OBJECT)

调起客户端扫码界面,扫码成功后返回对应的结果。

uni.scanCode(OBJECT) | uni-app官网

四、轮播图指示点:——uni-swiper-dot

将uni-swiper-dot组件包在swiper组件的外侧,可以对指示点进行位置和样式的调整

uni-app官网

五、小点

1、uniapp中的css  window-top,H5和小程序之间的差距,距离的顶部的距离

2、数据请求过来是乱码,解决:

把数据detail.content写在里面

 3、浏览记录的逻辑:

查看当前的id以前缓存中是否有

有就把以前的删了,在把现在的id放在数组最前面

六、页面滚动——uni.pageScrollTo(OBJECT)

七、海报画版——painter(插件)

分享时生成图片

海报画板 - DCloud 插件市场

		<l-painter :board="jsonSchema" ref="painter"/>

		this.jsonSchema={
					css: {
						// 根节点若无尺寸,自动获取父级节点
						width: '750rpx'
					},
					views: [
						{
						    type: 'text',
						    text: '登鹳雀楼\n白日依山尽,黄河入海流\n欲穷千里目,更上一层楼',
						    css: {
								color:'white',
						        // 设置居中对齐
						        textAlign: 'center',
						        // 设置中划线
						        textDecoration: 'line-through'
						    }
						},
						{
							css: {
								// background: "#ff9d00",
								height: "120rpx",
								width: "120rpx",
								// borderRadius: "50%",
								display: "block"
							},
							type: 'image',
							src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
						},
					]
				}
				// 渲染
				this.$refs.painter.render(this.jsonSchema);
				// 生成图片
				this.$refs.painter.canvasToTempFilePathSync({
				  fileType: "jpg",
				  // 如果返回的是base64是无法使用 saveImageToPhotosAlbum,需要设置 pathType为url
				  pathType: 'url',
				  quality: 1,
				  success: (res) => {
				    console.log(res.tempFilePath);
				    // 非H5 保存到相册
				    uni.saveImageToPhotosAlbum({
				        filePath: res.tempFilePath,
				        success: function () {
				            console.log('save success');
				        }
				    });
				  },
				});

八、背景音乐——uni.createInnerAudioContext()

uni.createInnerAudioContext() | uni-app官网

			const innerAudioContext = uni.createInnerAudioContext();
			innerAudioContext.autoplay = true;
			innerAudioContext.src = 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3';
			innerAudioContext.onPlay(() => {
			  console.log('开始播放');
			});
			innerAudioContext.onError((res) => {
			  console.log(res.errMsg);
			  console.log(res.errCode);
			});



      this.innerAudioContext.destroy() // 销毁音频

九、导航的修改

将原生的导航栏关闭 

然后使用uview或者uniapp的组件(组件的好处是改导航栏背景颜色的时候,手机顶部全部颜色都会变)

猜你喜欢

转载自blog.csdn.net/qq_52301431/article/details/128496907
今日推荐