小程序有巧举专门的选择图片接口，
wx.chooseImage(OBJECT)
但是这个只是返回一个图片的临时路径，并不是文件数据本身。
小程序暂时没有接口直接转base64的
所以我们需要使用canvas和canvasGetImageData（小程序版本1.9.0以后要才有）先获取图片内容，
再通过插件upng.js插件实现图片转base64（所需插件文件附件中）
1. 把upng.js和pako.min.js文件放到项目中
2. 在pages下的页面js文件中导入
var upng = require('../../utils/upng.js')
这里只需要导入npng.js ，pako.min.js是在npng,js里面调用
3. 建一个canvas
chooseImage">人脸测试
// 画布
// 生成base64位图片展示 变量imgbase64
need-to-insert-img
4. 添加js点击chooseImage事件
chooseImage: function() {
var that = this
var coss_signature = wx.getStorageSync('cos_signature')
var canvasID = "imgCanvas"
var canvas = wx.createCanvasContext(canvasID)
wx.chooseImage({
sourceType: ['album', 'camera'],
sizeType: ['original'],
count: 1,
success: function (res) {
var tempFilePaths = res.tempFilePaths
// 获取文件路径
var filePath = tempFilePaths[0]
// 1. 绘制图片至canvas
canvas.drawImage(filePath, 0, 0, 300, 200)
// 绘制完成后执行回调，API 1.7.0
canvas.draw(false, function(res){
// 2. 获取图像数据， API 1.9.0
wx.canvasGetImageData({
canvasId: canvasID,
x: 0,
y: 0,
width: 300,
height: 200,
success(res) {
// 3. png编码
let pngData = upng.encode([res.data.buffer], res.width, res.height)
/孝饥碧/ 4. base64编码
let base64 = wx.arrayBufferToBase64(pngData)
肢液 // ...
that.setData({
imgbase64: base64
})
}
})
})
}
})
}
5. 实现
need-to-insert-img
need-to-insert-img
tips
画布画的图片的长和宽是固定的，这个按照自己需求设置。
可以通过小程序的
wx.getImageInfo(OBJECT)
获取长和宽
相关链接
upng.js: https://github.com/photopea/UPNG.js
wx-cardscanner: https://github.com/zh8637688/wx-cardscanner 有时候会遇到后端需要前端获取的图片文件转换成base64，在传给后台
小程序有专门的选择图片接口，
但是这个只是返回一个图片的临时路径，并不是文件数据本身。
小程序暂时没有接口直接转base64的
所以我们需要使用canvas和canvasGetImageData（小程序版本1.9.0以后要才有）先获取图片内容，
再通过插件upng.js插件实现图片转base64（所需插件文件附件中）
1. 把upng.js和pako.min.js文件放到项目中
2. 在pages下的页面js文件中导入
var upng = require('../../utils/upng.js')
这里只需要导入npng.js ，pako.min.js是在npng,js里面调用
3. 建一个canvas
chooseImage">人脸测试
// 画布
// 生成base64位图片展示 变量imgbase64
4. 添加js点击chooseImage事件
chooseImage: function() {
var that = this
var coss_signature = wx.getStorageSync('cos_signature')
var canvasID = "imgCanvas"
var canvas = wx.createCanvasContext(canvasID)
wx.chooseImage({
sourceType: ['album', 'camera'],
sizeType: ['original'],
count: 1,
success: function (res) {
var tempFilePaths = res.tempFilePaths
// 获取文件路径
var filePath = tempFilePaths[0]
// 1. 绘制图片至canvas
canvas.drawImage(filePath, 0, 0, 300, 200)
// 绘制完成后执行回调，API 1.7.0
canvas.draw(false, function(res){
// 2. 获取图像数据， API 1.9.0
wx.canvasGetImageData({
canvasId: canvasID,
x: 0,
y: 0,
width: 300,
height: 200,
success(res) {
// 3. png编码
let pngData = upng.encode([res.data.buffer], res.width, res.height)
// 4. base64编码
let base64 = wx.arrayBufferToBase64(pngData)
// ...
that.setData({
imgbase64: base64
})
}
})
})
}
})
}
5. 实现
tips
画布画的图片的长和宽是固定的，这个按照自己需求设置。
可以通过小程序的
获取长和宽
相关链接
upng.js: https://github.com/photopea/UPNG.js
wx-cardscanner: https://github.com/zh8637688/wx-cardscanner
1、tabBar
在app.json文件中添加tabBar节点。tabBar是小程序客户端底部或顶部tab栏的实现。
（1）tabBar相关属性
color：tab上的文字默认颜色，仅支持十六进制颜色。
selectedColor：tab上的文字选中时的颜色，仅支持十六进制颜色。
backgroundColor：tab的背景色，仅支持十六进制颜色。
borderStyle：tabbar上边框的颜色， 仅支持 black / white。
position：tabBar的位置，默认值是: bottom，仅支持 bottom / top。当 position 为 top 时，不显示 icon。
custom：自定义tabBar。
"tabBar": {
"color": "#000000",
"selectedColor": "#336699",
"backgroundColor": "#ffffff",
"borderStyle": "black",
"position": "bottom"
}
（2）list
list：tab的列表。
list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。
pagePath：页面路径，必须在pages 中先定义。
text：tab 上按钮文字。
iconPath：图片神衡路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。selectedIconPath：选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。
"list": [
{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "assets/icon/home.png",
"selectedIconPath": "assets/icon/home2.png"
},
{
"text": "列表",
"pagePath": "pages/list/list",
"iconPath": "assets/icon/list.png",
"selectedIconPath": "assets/icon/list2.png"
}
]
2、页面跳转
（1）跳转普通页面
方法① navigator组件
<!-- 跳转到普通页，可以通过返回按钮返回 -->
<navigator url="../detail/detail">到详情页</navigator>
方法② navigateTo()方法
navigateTo()方法，用于跳转普通页面。
<view bindtap="gotoDetail">到详情页</view>
gotoDetail(){
//使用全局api跳转，navigateTo()方法，用于跳转普通页面
wx.navigateTo({
url: '../detail/detail',
})
}
（2）跳转tabBar页面
方法① navigator组件
如果要使用navigator组件跳转tabBar页面，需要设置open-type="switchTab"。
<!-- 跳转到tabBar页面，不可以通过返回按钮返回。因为跳转到指定的tabBar页面后，会关闭其他所有页面 -->
<navigator url="../list/list" open-type="switchTab">到列表页</navigator> 袭猛 拍瞎桥
方法② switchTab()方法
switchTab()方法，用于跳转tabBar页面。
<view bindtap="gotoList">到列表页</view>
gotoList(){
wx.switchTab({
url: '../list/list',
})
}
求蚂晌教各位，微信小程序发布产品的图片规格是多少啊？
1、微信小程序发布商品为了最佳体验效果，注意商品图尺寸，建议详情图尺寸：宽度800，高度不限，输闷薯锋出画质70%，格式:jpg.
1、目前小程序上的轮播图的图片是16:9的宽高比例,所以商手茄家在给小程序商城设计轮播图的时候，尽量按照这个尺寸来选择。如果有多张轮播图，建议几张的轮播图的尺寸大小保持一致，这样整体的视觉上看起来就非常美观、整洁。
3、目前微信小程序分享图片分享卡片的图片尺寸长宽比例是5:4，只要是这样的比例就可以了，比如50px*40px；100px*80px…设置成这样的图片大小，在分享卡片是就不会出现图片变得扭曲或者宽高被隐藏的问题出现了。另外还需要注意的是，图片尽量设置成jpg、png等常见格式.
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）