小程序有些图片无法作为背景使用，在css里面写提示“本地资源图片无法通过wxss获取”，有些小一些的又可以，图稍微大一些就不行
background:url('../static/image.png')解决方法:
1、在<view>上40k以上的图片虽然本地可以显示，但发布后还是空白的。40k以上的还是得用cdn
2、用cdn网图
3、base64图
uni-app，api的地址为： https://uniapp.dcloud.io/api/
下载图片
uni.downloadFile(object)
uniapp上的文档地址
wx.downloadFile({
url: object.url,
header: {
"X-Requested-With": "XMLHttpRequest",
Accept: "audio/mp3",
Authorization: "Bearer " + object.accessToken
},
success(res){
object.url = res.tempFilePath;
},
fail(e){
console.log("downloadFile failed", e);
}
});上传图片，选择图片
uni.uploadFile(object)，chooseImage(object)
uniapp上的文档地址
// 上传前先获取权限
upload(){
uni.authorize({
scope: 'scope.camera',
success:(res)=> {
if (res.errMsg == 'authorize:ok') {
console.log('选择上传');
this.uploadImg();
}
},
fail:(err)=> {
uni.showToast({
icon: 'none',
title: "请先允许小程序获取相机访问权限"
})
}
})
},
uploadImg() {
uni.chooseImage({
count: 1, //数量默认9
sizeType: ['original', 'compressed'],
sourceType: ['album','camera'],
success: (chooseImageRes) => {
const tempFilePaths = chooseImageRes.tempFilePaths;
console.log(tempFilePaths);
// 假设上传成功
uni.showLoading({
title:'上传中...'
})
uni.uploadFile({
url: this.uploadParams.url,
filePath: tempFilePaths[0],
name: 'userAvatar',
formData: {
policy: this.uploadParams.policy,
Signature: this.uploadParams.Signature
},
success:res=> {
console.log(res);
let data = JSON.parse(res.data)
console.log(data.data);
if (data.status === 'OK') {
let url = data.data.location + data.data.filepath
this.imgList = [{url:url}]
this.submitFlag= true
uni.hideLoading()
} else {
uni.showToast({
title: res.message,
icon: "none",
duration: 2000
})
}
},
fail:(err)=> {
console.log(err);
},
})
}
});
},保存图片到本地手机设备
saveImageToPhotosAlbum(object)
saveImg(url){
const that = this
uni.downloadFile({
url,
success: res => {
if(res.code == '100') {
filePath: res.tempFilePath,
success: function() {
uni.showToast({
title: res.message,
icon: "none",
duration: 2000
})
},
fail: function() {}
}
}
})
}小程序图片放大预览功能
wx.previewImage(object)
uni.previewImage(object)
uniapp官方文档
previewImg() {
let urls = []
urls.push(this.url)
uni.previewImage({
current: 0,
urls: urls //urls必须是个数组
})
},扫码功能
uni.scanCode(object)
uniapp官方文档
uni.scanCode({
onlyFromCamera: false, //是否只能从相机扫码，不允许相册选择图片，非必填，默认false
scanType: [], // 扫码类型，非必传，值：二维码：qrCode，一维码:barCode，DataMatrix商品矩阵条码：datamartrix，高密度高信息含量二维码pdf417:pdf417
successs: function(res) {
console.log('条码类型：', res.scanType)
console.log('条码内容：', res.result)
console.log('扫码得出的字符集:', res.charSet)
console.log('结果为合法应用的路径信息:', res.path)
},
fail: function(res) {
console.log('接口调用失败(识别失败、用户取消等情况触发)')
},
complete: function(res) {
console.log('接口调用结束，无论成功失败都会执行')
}
})模态窗，增加自定义内容
自定义组件使用模态窗，content里要添加代码的话，必须使用html的语法，并且在标签上写css，不然v-html（支持小程序，app和h5）在小程序里（仅小程序）解析成rich-text，不解析view标签之类的代码，且不支持rpx像素单位(结构就当是最基础的html4即可)
一般支持的标签有
rich-text 支持的标签列表
调用uni-app组件库里的 uni-popup-dialog
this.$refs['model'].showModel({
title: `标题`,
content: '<div style="width:220px; padding:5px 0">内容</div>',
success: ()=>{
}
})canvas图层 层级问题，每次canvas都最高层显示，盖住了模态窗，解决方案
用canvas画了个圆环的百分比 比例对比图，类似echar里的环形进度条，画完页面别的fixed/model/tips/porp窗口都盖不住canvas，
试过官方的<cover-view>，微信小程序开发工具里可以显示，放到手机里，这个标签就无了，解决方式不太靠谱
//扯犊子说明，不好使
微信小程序文档中有提供cover-view组件，能覆盖canvas，map，video，camera等原生组件。但是也有一定的限制。比如：cover-view中只支持嵌套cover-view、cover-image，button。弊端是不可以使用input组件。最终，通过canvas转image，解决
<canvas v-if="list[0].redarImg== ''" class="canvas" canvas-id="myCanvas1"></canvas>
<image v-else :src="list[0].redarImg" style="width: 100px; height: 100px;" />
data(){
return{
list: [
{
sum: 100,
val: 30,
val1: 40,
valArr: 10,
canvas: "myCanvas2",
title: "模拟测试",
redarImg: ''
},
],
}
}
Progressbar(canvas) {
//根据后台获取到的数据计算比例
let sum = canvas.sum == 0 ? 1 : canvas.sum; // 总计
let val = parseFloat(((canvas.val / sum) * 2).toFixed(2)); //实际1
let val1 = parseFloat(((canvas.val1 / sum) * 2).toFixed(2)); //实际2
let valArr = parseFloat(((canvas.valArr / sum) * 2).toFixed(2)); //实际3
const ctx = uni.createCanvasContext('myCanvas1'); //拿到canvas对象（自己的定义的canvas-id）
// 开始绘制第一条路径 总数 红色
ctx.beginPath(); // 开始绘制路径
ctx.arc(50, 50, 45, 0, 2 * Math.PI); // arc画圆
ctx.setStrokeStyle("#f2f2f2"); // 线条颜色
ctx.setLineWidth(7); // 线条宽度
ctx.stroke(); // 绘制成线条（fill()是填充为饼图）
// 开始绘制第二条路径 成交 橘色
ctx.beginPath();
ctx.arc(50, 50, 45, -Math.PI / 2, val * Math.PI - Math.PI / 2);
ctx.setStrokeStyle("#68B881");
ctx.setLineWidth(7);
ctx.stroke();
ctx.beginPath();
ctx.arc(50, 50, 45, val * Math.PI - Math.PI / 2, (val + val1) * Math.PI - Math.PI / 2);
ctx.setStrokeStyle("#F3A21B");
ctx.setLineWidth(7);
ctx.stroke();
ctx.beginPath();
ctx.arc(50, 50, 45, (val + val1) * Math.PI - Math.PI / 2, (val + val1 + valArr) * Math.PI - Math.PI / 2);
ctx.setStrokeStyle("#4C97D9");
ctx.setLineWidth(7);
ctx.stroke();
ctx.draw(false, (()=>{
setTimeout(()=>{
this.handleCanvarToImg(canvas)
}, 500)
}));
},
handleCanvarToImg(canvas) {
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: 100,
height: 110,
canvasId: canvas.canvas,
success: function(res) {
let n = {redarImg: res.tempFilePath}
Object.assign(canvas, n)
}
})
},uniapp里的editor无法赋值 （2021/09/24）
得益与老太太们的强烈要求，早上需要做编辑框editor的内容备份功能，但是发现给editor赋值无法生效
查阅文档得知，可以在初始化的时候给setContents,
editor富文本编辑器
<editor id="editor1" class="ql-container" :read-only="false"
@ready="onEditorReady('1')"
@input="(e)=>editorInput('1', e)"
@focus="editorFocus"
@blur="editorBlur"
@statuschange="onStatusChange"
showImgToolbar></editor>
onEditorReady(index) {
let that = this
uni.createSelectorQuery().select('#editor' + index).context((res) => {
this.editorCtx = res.context
this.editorCtx.setContents({
html: that['content'+index]
})
}).exec()
},uniapp 金额正则验证
<input type='digit' @input="keyinput" v-model="qian" placeholder="0.00">
keyinput(e) {
let that = this
let price = e.detail.value.toString()
console.log('price old is1111', price)
price = price.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
price = price.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
price = price.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
price = price.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
if (price.indexOf(".") < 0 && price != "") { //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
price = parseFloat(price);
} else if (price.indexOf(".") == 0) {//首为小数点，补全
price = price.replace(/[^$#$]/g, "0.");
price = price.replace(/\.{2,}/g, ".");
}
console.log('price is', price)
that.$nextTick(function() {
//限制位数 ---暂时：'有小数点时，最大长度为7位，没有则是5位'
// that.maxLength = maxLength == -1 ? 5 : 7
that.qian = price
})
},