LearnJava
  • Summary
    • Introduction
    • MyResume
  • 开发
    • 小程序
      • 小程序开发问题总结
      • 小程序bug
    • 环境搭建
      • Linux搭建git服务器
      • Linux切换JDK版本
      • Mac搭建http服务器
      • Ubuntu搭建C++开发环境
      • ProtoBuffer安装
      • Ubuntu开启Telnet
      • Linux搭建邮件服务器
    • 遇到的问题
      • Mac下eclipse问题
      • Mac下Github问题
      • Markdown解决方案实例
      • Spring问题
  • 编程语言
    • C++
      • C&C++框架汇总
      • C++Primer课后习题记录
      • C++疑问
      • C++与java的异同
      • C++内存模型
      • C++知识点
      • Make和Cmake
    • GO
      • Go语言简介
      • Go语言知识点
    • XML
      • XML知识点
  • 技术学习
    • JavaIO
      • AIO通信
      • IO和NIO
      • 阻塞式IO通信
      • 非阻塞式IO通信
    • 计算机网络
      • CDN
      • HTTPS协议入门
      • HTTP_POST请求的数据格式
      • HTTP错误码和出现场景
      • HTTP协议入门
      • TCP/IP协议入门
      • Wireshark抓包
      • 域名解析过程
    • 计算机原理
      • 整型计算
      • GPU
      • Swap内存
    • 架构学习
      • 分布式锁
      • 分布式系统的CAP理论
      • IaaS,PaaS,SaaS的区别
      • Web框架
      • 康威定律
      • 秒杀系统设计
      • 数据异构
      • 微服务架构入门
      • 协程
      • MQ推拉模式对比
      • UML图
      • 缓存穿透击穿和雪崩
    • 前端学习
      • 安装使用VUE
      • 搭建VUE项目
    • 大数据
      • Hadoop之HBASE
      • Hadoop之HDFS
      • Hadoop之MapReduce
      • Hadoop简介
    • 数据结构
      • 二叉树
      • 图
      • 跳表
      • Bitmap
    • 算法
      • 排序算法
        • 插入排序
        • 归并排序
        • 计数排序
        • 快速排序
        • 冒泡排序
        • 选择排序
      • Hash算法
      • MD5介绍
      • 一致性Hash算法
      • 数字全排列
      • MD5介绍
      • 储水量
      • 最大子序列
    • Java多线程
      • AQS原理
      • AtomicInteger原理
      • Condition
      • Fork/Join框架
      • happens-before
      • Java锁优化
      • Java线程池
      • Java中的阻塞队列
      • Java实现线程的三种方式
      • Lock
      • Lock的种类
      • ThreadLocal
      • 线程状态及其转换
    • Java设计模式
      • Builder模式
      • 代理模式
      • 工厂和抽象工厂模式
      • 观察者模式
      • 设计模式概述
      • 职责链模式
      • 装饰者模式
      • Java实现单例的5种方式
    • Java学习
      • Java拓展学习
        • JavaSPI
      • Java序列化
      • Java异常
      • Java注解
      • 学习UML图
      • Java的Lambda表达式
      • Java集合之ArrayList
      • Java集合之HashMap
      • Java集合之LinkedList
      • List⤅&Set的操作和遍历
      • JavaP反编译命令
      • Servlet学习
    • JVM学习
      • 分层编译
      • Java进程内存占用
      • JVM参数
      • JVM常用工具
      • JVM的内存模型
      • 垃圾回收机制
      • 看懂gc日志
      • 类加载机制和双亲委派模型
      • 类的反射
      • 自己动手编译OPENJDK
      • ASM字节码增强技术
      • CodeCache
      • GC耗时案例
      • JVM性能调优
    • Linux学习
      • gdb调试定位
      • Linux常用命令
      • Linux工具
      • Linux进程通信的方式
      • Linux文件系统结构
      • Linux系统知识点
      • Linux小技巧
      • Shell学习
      • Vim常用命令
    • Java设计模式
      • 设计模式概述
      • 代理模式
      • 装饰者模式
    • Mysql
      • InnoDB介绍
      • Mac_mysql问题
      • mysql之group_concat函数
      • mysql事务
      • Mysql优化
      • Mysql实用命令
      • mysql慢查询
      • mysql文件
      • mysql视图
      • mysql锁
      • mysql索引
      • mysql约束
      • 存储过程和触发器
      • mysql常用语法
    • Spring
      • SpringCloud
        • 搭建Jenkins自动部署
        • SpringCloud介绍
        • SpringCloudBus
        • SpringCloudConfig
        • SpringCloudEureka
        • SpringCloudFeign
        • SpringCloudHystrix
        • SpringCloudRibbon
        • SpringCloudSleuth
        • SpringCloudStream
        • SpringCloudZuul
      • FactoryBean理解
      • MyBatis入门介绍
      • rose框架学习
      • SpringMVC的启动流程
      • SpringBean的生命周期
      • SpringBoot入门
      • Spring入门AOP和IOC
      • SpringMVC入门笔记
      • SpringMVC集成Log4j2
      • web.xml详解
    • web中间件学习
      • Redis
        • Redis入门
        • Redis持久化
        • Redis的数据类型
        • Redis特性
      • Gremlin入门
      • Elasticsearch安装使用
      • HugeGraph入门
      • jetty介绍
      • Kafka介绍使用
      • Maven安装配置
      • Netty介绍使用
      • Netty的编解码
      • Maven的pom介绍
      • Nginx介绍
      • Nginx配置详解
      • ProtocolBuffers学习笔记
      • Resin学习
      • RESTful入门
      • RocketMQ入门
      • RPC入门
      • Thrift介绍
      • Tomcat常用配置
      • Tomcat学习
      • Tomcat实现
      • zookeeper入门
      • Zookerper选举原理
  • 文档读后感
    • 除了写代码你还会干什么
  • 效率提升
    • Java诊断工具Arthas
    • Mac下安装多版本java
    • Mac下显示git分支
    • Mac中Clion快捷键
    • Mac中Eclipse快捷键
    • MacShell常用快捷键
    • PlantUML入门
    • Windows与Linux服务器传文件
    • Sublime技巧
    • 搜索引擎检索技巧
  • 总结
    • 2017工作总结
Powered by GitBook
On this page
  • 1. 页面之间如何传递图片
  • 2. 在回调方法中无法使用this.setData()函数
  • 3. scroll-view实现左右滑动
  • 4. 实现点击小图片就会显示在头像上,可以缩放,转换和删除
  • 5. 一些小问题的解决方案
  • 6. 保存装饰后的图片
  • 7. 更新数组中特定的值
  • 8. 点击分享的页面进入首页
  • 9. 如何在右上角三个点弹出的菜单中添加返回首页按钮

Was this helpful?

  1. 开发
  2. 小程序

小程序开发问题总结

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. 点击小装饰出现在头像上—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. 垂直居中

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

  1. JS中let、const的意义

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

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

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

Previous小程序Next小程序bug

Last updated 4 years ago

Was this helpful?

https://www.zhihu.com/question/20543196
https://www.cnblogs.com/cheney-cai/p/5949752.html
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let
https://www.cnblogs.com/ksl666/p/5944718.html
http://cnodejs.org/topic/5231a630101e574521e45ef8
https://segmentfault.com/q/1010000010550926