微信原生小程序集成axios 微信小程序 原生

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 复制重新修改下，后台配置才会起作用，这个操作也是有点骚。困扰了好几个小时，后面百度到了。