L
L
LearnJava
Search…
小程序开发问题总结

1. 页面之间如何传递图片

场景:
在page1下面选择了一张图片,点击“下一步”跳转到下一个页面,下个页面需要将选择的图片展示出来。
解决方案
使用wx.chooseImage()方法获取图片,将本地图片链接存储到全局变量中,在下个页面通过全局变量获取本地图片链接。

2. 在回调方法中无法使用this.setData()函数

现象:
在如下的回调函数中使用this.setData()时:
chooseImage: function() {
wx.chooseImage({
success: function(res) {
if(res.tempFilePaths.length > 0) {
this.setData({
});
}else{
wx.showToast({
title: '获取图片失败!',
})
}
},
fail: function(){
wx.showToast({
title: '获取图片失败!',
})
}
})
},
会报错:
this.setData is not a function
解决办法:
在调用wx.chooseImage方法之前声明:
var thisTem = this;
然后使用:
thisTem.setData();

3. scroll-view实现左右滑动

场景:
官网的实例不全,没有给出css样式。
解决方案
需要在容器scroll-view上加上样式:
width: 100%;
white-space: nowrap;/* 规定段落中的文本不进行换行 */
里面的内容必须在同一行,可以加样式
display: inline-block;

4. 实现点击小图片就会显示在头像上,可以缩放,转换和删除

  • 学习动画和画布
可用点
  • 利用bindtouchstart/bindtouchmove/bindtouchend 获取手指移动的坐标,使用动画移动狗狗。
  • 点击狗狗在特定位置添加一个image。
  • 使用wx.canvasToTempFilePath(OBJECT, this)保存在画布上的图片。
  • canvasContext.clip方法可以裁剪内容
  • canvasContext.drawImage可以绘制图像到画布
  • CSS3的transform属性可以进行图片的移动(translate),旋转(rotate)和缩放(scale)。
小目标
  1. 1.
    点击小装饰出现在头像上—OK
  2. 2.
    手势小装饰的移动—OK
  3. 3.
    手势控制小装饰的缩放—OK
  4. 4.
    点击下面的图片可以添加—OK
  5. 5.
    加背景框--OK
  6. 6.
    加删除按钮,点击删除效果—OK
  7. 7.
    用户选择的图片剪裁成方形--OK
  8. 8.
    保存图片--OK
  9. 9.
    保存成功页面--OK
  10. 10.
    去除图片的虚线--OK
  11. 11.
    加虚线框和小装饰同步变换--OK
  12. 12.
    优化移动和缩放
  13. 13.
    (可选)手势控制小装饰的旋转
  14. 14.
    (进阶)阿里云搭建rest服务给小程序使用,记录用户相关信息
  15. 15.
    (进阶)图片资料放到服务器上
  16. 16.
    (可选)实现单点旋转和缩放

5. 一些小问题的解决方案

  1. 1.
    垂直居中
  1. 1.
    让position:absolute超出DIV溢出隐藏
  1. 1.
    JS中let、const的意义
  1. 1.
    exports 和 module.exports 的区别—node.js
  1. 1.
    解构赋值
if (e.touches.length === 1) {
let {clientX, clientY} = e.touches[0]; //这个啥意思
this.startX = clientX;
this.startY = clientY;
this.touchStartEvent = e.touches;
} else {
let xMove = e.touches[1].clientX - e.touches[0].clientX;
let yMove = e.touches[1].clientY - e.touches[0].clientY;
let distance = Math.sqrt(xMove * xMove + yMove * yMove);
this.setData({
'stv.distance': distance,
'stv.zoom': true, //缩放状态
})
}

6. 保存装饰后的图片

解决方案:
装饰好后,将各个图片的坐标和大小获取到,依次画到画布上,再保存起来。

7. 更新数组中特定的值

let showDogsItem = 'showDogs[' + id + '].partTouchData'
this.setData({
[showDogsItem]: partTouchData
})

8. 点击分享的页面进入首页

//分享按钮逻辑
onShareAppMessage: function (res) {
if (res.from === 'button') {
// 来自页面内转发按钮
console.log(res.target)
}
return {
title: '时代见证者荣誉证书',
path: 'pages/page4/page4?share=share'
}
},
//在onload做判断
onLoad: function(options) {
if(options.share == 'share'){
wx.redirectTo({
url: '../page1/page1'
})
return;
}
...
}

9. 如何在右上角三个点弹出的菜单中添加返回首页按钮

开发者不能主动添加,微信官方是在从分享点进去的页面自动添加了返回首页按钮。
Copy link
On this page
1. 页面之间如何传递图片
2. 在回调方法中无法使用this.setData()函数
3. scroll-view实现左右滑动
4. 实现点击小图片就会显示在头像上,可以缩放,转换和删除
5. 一些小问题的解决方案
6. 保存装饰后的图片
7. 更新数组中特定的值
8. 点击分享的页面进入首页
9. 如何在右上角三个点弹出的菜单中添加返回首页按钮