> For the complete documentation index, see [llms.txt](https://jun-wang.gitbook.io/learnjava/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jun-wang.gitbook.io/learnjava/kai-fa/xiao-cheng-xu/xiao-cheng-xu-kai-fa-wen-ti-zong-jie.md).

# 小程序开发问题总结

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

**场景：**

在page1下面选择了一张图片，点击“下一步”跳转到下一个页面，下个页面需要将选择的图片展示出来。

**解决方案**

使用wx.chooseImage()方法获取图片，将本地图片链接存储到全局变量中，在下个页面通过全局变量获取本地图片链接。

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

**现象：**

在如下的回调函数中使用this.setData()时：

```javascript
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方法之前声明：

```javascript
var thisTem = this;
```

然后使用：

```javascript
thisTem.setData();
```

## 3. scroll-view实现左右滑动

**场景：**

官网的实例不全，没有给出css样式。

**解决方案**

需要在容器scroll-view上加上样式：

```css
width: 100%;
white-space: nowrap;/* 规定段落中的文本不进行换行 */
```

里面的内容必须在同一行，可以加样式

```css
display: inline-block;
```

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

* 学习动画和画布

**可用点**

* 利用bindtouchstart/bindtouchmove/bindtouchend 获取手指移动的坐标，使用动画移动狗狗。
* 点击狗狗在特定位置添加一个image。
* 使用wx.canvasToTempFilePath(OBJECT, this)保存在画布上的图片。
* canvasContext.clip方法可以裁剪内容
* canvasContext.drawImage可以绘制图像到画布
* CSS3的transform属性可以进行图片的移动(translate)，旋转(rotate)和缩放(scale)。

**小目标**

1. 点击小装饰出现在头像上—OK 
2. 手势小装饰的移动—OK
3. 手势控制小装饰的缩放—OK
4. 点击下面的图片可以添加—OK
5. 加背景框--OK
6. 加删除按钮，点击删除效果—OK
7. 用户选择的图片剪裁成方形--OK
8. 保存图片--OK
9. 保存成功页面--OK
10. 去除图片的虚线--OK
11. 加虚线框和小装饰同步变换--OK
12. 优化移动和缩放
13. （可选）手势控制小装饰的旋转
14. （进阶）阿里云搭建rest服务给小程序使用，记录用户相关信息
15. （进阶）图片资料放到服务器上
16. （可选）实现单点旋转和缩放

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

1. 垂直居中

> <https://www.zhihu.com/question/20543196>

1. 让position:absolute超出DIV溢出隐藏

> <https://www.cnblogs.com/cheney-cai/p/5949752.html>

1. JS中let、const的意义

> <https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let>
>
> <https://www.cnblogs.com/ksl666/p/5944718.html>

1. exports 和 module.exports 的区别—node.js

> <http://cnodejs.org/topic/5231a630101e574521e45ef8>

1. 解构赋值

```javascript
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, //缩放状态
      })
    }
```

> <https://segmentfault.com/q/1010000010550926>

## 6. 保存装饰后的图片

**解决方案：**

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

## 7. 更新数组中特定的值

```javascript
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. 如何在右上角三个点弹出的菜单中添加返回首页按钮

开发者不能主动添加，微信官方是在从分享点进去的页面自动添加了返回首页按钮。