# 小程序开发问题总结

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jun-wang.gitbook.io/learnjava/kai-fa/xiao-cheng-xu/xiao-cheng-xu-kai-fa-wen-ti-zong-jie.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.