收藏
回答

小程序安卓手机打开不显示canvas?ios都可以,后台域名都配置了

	//换成本地路径
			getGoodsImgPath() {
				return new Promise((success, fail) => {
					if (this.imgSrc != '') {
						success(this.imgUrl);
					} else {
						wx.getImageInfo({
							src: this.imgUrl,
							success: res => {
								this.imgSrc = res.path
								success(res.path);
							},
							fail: res => {
								this.imgSrc = res.path
							}
						})
					}
				});
			},




			获取 access_token
			getAccessToken() {
				this.$http({
					url: this.$url.appInfo,
					methods: 'post',
					data: {
						token: uni.getStorageSync('token')
					}
				}).then(res => {
					uni.request({
						method: "GET",
						url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${res.data.appid}&secret=${res.data.secret}`,
						success: (result) => {
							let access_token = result.data.access_token
							// 获取到 access_token 后 获取二维码
							this.getQrCode(access_token)
						}
					})
				})
			},


			// 获取二维码
			getQrCode(token) {
				// 注意 access_token 参数是必须放在url后面 其余参数 要在data里面
				let path = 'pagesB/register/register'
				let mobile = uni.getStorageSync('mobile')
				uni.request({
					method: "POST",
					responseType: 'arraybuffer', // 注意一定要加 不然返回的Buffer流会乱码 导致无法转base64
					url: `https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=${token}`,
					data: {
						page: path, // 需要打开的页面路径
						scene: mobile // 这个是需要传递的参数
					},
					success: (result) => {


						// 拿到buffer流 通过wx.arrayBufferToBase64 转成base64 在页面展示
						// 如果不加请求时 responseType: 'arraybuffer' 则会转码失败
						this.bufferImg = "data:image/png;base64," + wx.arrayBufferToBase64(result.data);


						this.getGoodsImgPath().then(res => {
							this.saveAlbum(res)
						})
					},
				})
			},


			//把二维码制作在背景图片中
			saveAlbum(res) { //获取权限保存相册
				var base64url = this.bufferImg; //base64图片
				console.log(base64url, '二维码')
				var imgPath = wx.env.USER_DATA_PATH + '/invite' + 'dalaba' + '.png'; //创建名为invite的本地文件
				var imageData = base64url.replace(/^data:image\/\w+;base64,/, ""); //清除base64前缀
				var fs = wx.getFileSystemManager(); //获得文件系统管理器  用于操作临时文件 
				// console.log(imgPath)
				fs.writeFileSync(imgPath, imageData, "base64"); //文件路径  存入内容  编码格式 可以直接使用imgPath来进行操作


				//背景图片路径
				// let img = uni.getStorageSync('imageCache')
				// console.log(res, '我是图片')
				let backurl = '../../static/images/1.png'


				//设置背景图片和二维码的宽度和高度	
				uni.getSystemInfo({
					success: (res) => {


						console.log(backurl, imgPath, '地址')


						var windowWidth = res.windowWidth; //宽
						var windowHeight = res.windowHeight; //高
						const ctx = wx.createCanvasContext('myCanvas', this); //拿到canvas的id
						ctx.drawImage(backurl, 0, 0, windowWidth, windowHeight); //背景图
						ctx.drawImage(imgPath, 15, 300, 65, 65); //二维码


						ctx.draw(false, setTimeout(() => {
							wx.canvasToTempFilePath({ //把画布转化成临时文件进行保存
								width: this.windowWidth * 1.22, // 截取的画布的宽
								height: this.windowHeight * 1.22, // 截取的画布的高
								destWidth: this.windowWidth * 1.22 * 3, // 保存成的画布宽度
								destHeight: this.windowHeight * 1.22 * 3, // 保存成的画布高度
								// width: 50, // 截取的画布的宽
								// height: 50, // 截取的画布的高
								// destWidth: 100, // 保存成的画布宽度
								// destHeight: 100, // 保存成的画布高度
								fileType: 'png', // 保存成的文件类型
								quality: 1, // 图片质量
								canvasId: 'myCanvas', // 画布ID
								success: (res) => {
									this.tempFilePath = res.tempFilePath
								},
								fail() {
									uni.showToast({
										title: '保存失败,稍后再试',
										duration: 2000,
										icon: 'none'
									})
								}
							})
						}, 2000)) //调用画布绘制
					}
				})
			},


			//点击保存图片
			saveImage() {
				uni.getSetting({ //获取用户的当前设置
					success: (res) => {
						// console.log("获取权限",res);
						if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
							this.share();
						} else {
							uni.authorize({ //如果没有授权,向用户发起请求
								scope: 'scope.writePhotosAlbum',
								success: () => {
									this.share();
								},
								fail: () => {
									uni.showToast({
										title: "请打开保存相册权限,再点击保存相册分享",
										icon: "none",
										duration: 3000
									});
									setTimeout(() => {
										uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
											success: (res2) => {
												// console.log(res2.authSetting)
											}
										});
									}, 3000);
								}
							})
						}
					}
				})
			},




			//分享给朋友
			share() {
				wx.showShareImageMenu({
					path: this.tempFilePath,
					success: (res) => {
						uni.showToast({
							title: '图片保存成功~',
							duration: 2000
						})
					},
					fail: (err) => {
						uni.showToast({
							title: '图片保存失败~',
							icon: 'error',
							duration: 2000
						})
					},
				})
			},


回答关注问题邀请回答
收藏

1 个回答

  • Hlxuan.
    Hlxuan.
    2023-09-23

    小程序内不能直接请求 api.weixin.qq.com ,这个得在服务端请求。

    ----

    1、是开启了vConsole调试吧?(ios都可以)

    2、api.weixin.qq.com 是无法配置服务器域名的,你是如何配置的呢?(后台域名都配置了)

    2023-09-23
    有用
    回复 1
    • 杨威
      杨威
      2023-09-23
      我就配置了服务器的域名,现在都让后端调用了,前端调用开发者工具没问题,真机模拟也可以,就是上线获取不到了
      2023-09-23
      回复
登录 后发表内容