原生微信小程序需要注意的几个
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