欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

原生微信小程序需要注意的几个

程序员文章站 2022-07-03 21:52:04
2020/7/231.在vscode里面使用sass工具开发原生小程序1.现在vscode插件市场里面找到Live Sass Compiler安装2.然后配置根目录的.vscode里面的setting.json文件{ "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".wxss", "saveP...

2020/7/23

1.在vscode里面使用sass工具开发原生小程序

1.现在vscode插件市场里面找到Live Sass Compiler安装
原生微信小程序需要注意的几个
2.然后配置根目录的.vscode里面的setting.json文件

{
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".wxss",
            "savePath": null
        }
    ],
    "liveSassCompile.settings.generateMap": false
}

3.点击下面的
原生微信小程序需要注意的几个
最后在目录下新建 .scss文件就可以愉快的书写样式了(一定要点击这个 Watch Sass)

2.关于小程序的骨架屏的生成

骨架屏的主要作用就是让用户体验更好,增加内容感知。在微信开发者工具里面可以直接生成骨架屏。点击开发者工具右下角的三个小点,就可以直接生成骨架屏.
原生微信小程序需要注意的几个
然后就会在相关的目录下生成两个文件:
原生微信小程序需要注意的几个
在 .wxml 引入就行了(根据loading进行显示隐藏)

<import src="index.skeleton.wxml"/>
<template is=""skeleton wx-if="{{loading}}"/>

在 .scss 里面进行引入

@import "./index.skeleton.wxss";

微信开发者工具生成的骨架屏不是很好,需要自己手动调节。也可以自己在现有基础上进行手写。官网地址: 微信小程序骨架屏

3.关于小程序的授权过程

1.关于需要授权的权限如下
官网地址:微信小程序授权
原生微信小程序需要注意的几个
在有用到上面相关的权限的时候,要询问用户是否授权。比如在使用扫码的时候,询问用户是否授权使用摄像头,授权过程如下:

// 点击扫码
async handleScan(){
	//1. 先获取已经授权过的权限
	let scoped = await getSetting();
	let scpoedCamera = scoped.authSetting['scoped.camera'];
	//2. scpoedCamera 会有三种情况
	//2.1 scpoedCamera === undefined 表示从未授权,这是需要吊起 authorize 进行授权
	//2.2 scpoedCamera === true 表示用户已经授权通过了,直接指定下一步的扫码操作
	//2.3 scpoedCamera === false 表示用户授权弹框点击取消,要进入授权面 openSetting  
	if(scpoedCamera === undefined){
		await authorize("scoped.camera");
	}
	if(scpoedCamera === false){
		await openSetting();
	}
	if(scpoedCamera === true){
		let scanData = await scanCode();
		console.log(scanData)
	}
}

4.单击右上角胶囊转发到朋友圈

当点击右上角的胶囊发现 转发到朋友圈 这个按钮是灰色的,微信小程序不会默认把把小程序转发到朋友圈。要调用 wx.showShareMenu 才可以进行转发:
官网地址:微信小程序分享到朋友圈

onLoad(){
	wx:showShareMenu({
		withShareMenu: true,
		menus: ['shareAppMessage', 'shareTimeline']
	})
}
/* 
右上角的菜单转发
目前还是 beta 版本只支持 android 手机
*/
onShareTimeline: function() {
      return {
            title: '测试测试测试测试测试测试',
            query: 'goodsId' + this.goodsId, //这里是query,只需要传参就行,不用写路径
            imageUrl: 'https://xxxxx.png'
      }
},

5.图片保存到相册

授权 scope.writePhotosAlbum 相关的过程如下:
官网地址: 保存图片到相册

// 保存到相册
async handleSave(){
	// 获取用户权限
	let scoped = await getSetting();
	let scopedWritePhotosAlbum = scoped.authSetting['scoped.writePhotosAlbum'];
	if(scopedWritePhotosAlbum === undefined){
		await authorize("scpoed.writePhotosAlbum");
	}
	if(scopedWritePhotosAlbum === false){
		await openSetting();
	}
	if(scopedWritePhotosAlbum === true){
		// 这边需要注意的是,必须先使用 wx:getImageInfo 先得到图片的具体信息,然后再从具体的信息里面拿这个图片信息才能下载
		wx:getImageInfo({
			src: "https://XXXX/123.png", // 要下载的图片地址
			success(res){
				wx:saveImageToPhotosAlbum({
					filePath: res.path,
					success(){
						wx:showToast({
							title: "图片保存成功",
							icon: "none"
						})
					},
					fail(err){
						wx:showToast({
							title: "图片保存失败",
							icon: "none
						})
					}
				})
			},
            fail(err) {
                    console.log(err)
            }
		})
	}
}

这边有一个很骚的操作一定要注意了:
要把图片保存到相册必须在微信小程序后台配置白名单步骤如下:
1.进入小程序后台点击左侧 开发 => 开发设置 => 服务器域名 => 点击修改(需要扫码)
2.然后进行配置 downloadFile 配置后台域名
3.然后在微信开发者工具里面 详情 => 基本信息 => appid 把这个 appid 复制重新修改下,后台配置才会起作用,这个操作也是有点骚。困扰了好几个小时,后面百度到了。
原生微信小程序需要注意的几个

本文地址:https://blog.csdn.net/HANGSOME123/article/details/107529344

相关标签: 微信小程序