小程序项目入坑实践

zhjx922 发布于2019-08-22 18:02 / 1622人阅读

摘要：公司由于小程序原开发需求变动，产品决定重新开始设计新的小程序，人员紧张，导致我接了这个坑。输入数字一般项目可能都会碰到金额的输入限制，这里小程序组件，可利用，来控制输入只能是数值和小数点。

公司由于小程序原开发需求变动，产品决定重新开始设计新的小程序，人员紧张，导致我接了这个坑~。原开发时准备使用 mpvue 来开发，前篇文章介绍了一些关于mpvue的写法，后来在我将简易框架搭建后，发现mpvue的组件分发支持不是很友好，所以弃用，还是用原生来开发程序。

基本使用可能各大教程都已说的明明白白，这里就不啰嗦，改篇主要是记录下本人开发过程中所遇到的一些问题。

不能使用 async await语法糖

小程序还是不支持这类语法糖，本人解决办法就是在使用该语法代码中引用了regeneratorRuntime

引入图片时，请先压缩图片，小程序大小限制2M多一点

尽量少引用本地图片，能放服务器的图片还是放在服务器上，毕竟程序大小有限制，本人在没注意图片压缩时，上传代码突然报了个程序代码限制在2M内。

input输入数字

一般项目可能都会碰到金额的输入限制，这里小程序input组件，可利用type = "digit"，来控制输入只能是数值和小数点。

textarea组件键盘遮挡问题

这个可能大部分都可预见，各机型对textarea组件输入可能都有问题，本人开发遇见的是安卓机，尤其是华为，当聚焦输入时键盘挡住输入，并没有如预期页面向上滚动输入，暂时的兼容解决办法

在页面的底部增加元素，当聚焦输入时，给其高度，让页面滚动到键盘不可遮住的位置。

当我们使用组件的聚焦，失焦来处理后，发现在换行时都会触发textarea的聚焦事件，所以我们的具体代码：

// Textarea 获取键盘高度
  focusTextarea: function(e) {
    const _this = this;
    let height = e.detail.height; // 键盘高度
    _this.setData({
      pageScrollHeight: (height - 60)
    })
    this.pageScrollToBottom();
  },

// 换行时
  changTextarea: function (e) {
    this.setData({
      hasFocus: false
    })
  },

  // 失去焦点
  blurTextarea: function (e) {
    const _this = this;
    _this.setData({
      pageScrollHeight: 0,
      hasFocus: true
    })
  },

 // 页面滚动到底部
  pageScrollToBottom: function () {
    if (this.data.hasFocus) {
      wx.createSelectorQuery().select("#page-scroll").boundingClientRect(function (rect) {
        // 使页面滚动到底部
        wx.pageScrollTo({
          scrollTop: rect.height
        })
      }).exec()
    }
  },

ios9报Can"t find variable: setCssToHead 错误

这个在小程序社区里出现过，原因好像是微信小程序的wxs所引起的，原贴说是由于wxs文件使用了es6，但是本人代码特别注意了，没有使用，还是一样报出这个错误，当我把这类文件删除后，程序就可正常运行。所以本人建议：还是尽量不要使用wxs了，可到小程序完全兼容后再尝试。

总结
整个开发过程中还是流畅的，毕竟没有用小程序里面很多的API，所遇到的坑和兼容问题都不是很多，本人把项目主要代码删除了，小程序开源地址，里面只有一些程序的结构，和项目的公用代码，欢迎大家交流指点，原文地址。

云服务器 GPU云服务器 php项目小程序特点 php项目实践 python实践项目 python项目实践

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95420.html

Vert.x入坑须知（1）

摘要：轻量级，部署简单。此外，本文也不是入门文档，而是为了预防陷坑而给出的指导意见，故在阅读本文之前还请先仔细阅读的文档。可视作的一个最小部署和运行单元，简单的说，可类比为。，主，负责部署程序中其他的。严格来讲，之后，上述第一点并不完全正确。一直以来早有将这些年用Vert.x的经验整理一下的想法，奈何天生不是勤快人，直到最近扶墙老师问起，遂成此文。选择理由现在想想，我们应该算是国内用V...

Turbo 2019-08-14 17:35 评论0 收藏0
【Electron】酷家乐客户端开发实践分享 — 入坑篇

摘要：系列文章酷家乐客户端开发实践分享入坑篇酷家乐客户端开发实践分享软件自动更新酷家乐客户端开发实践分享浏览器启动客户端酷家乐客户端开发实践分享进程通信酷家乐客户端开发实践分享下载管理器不定期更新本文的初衷所使用的技术栈和前端工程师完美契合。作者：钟离，酷家乐PC客户端负责人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...

jay_tian 2019-08-02 15:16 评论0 收藏0
【Electron】酷家乐客户端开发实践分享 — 入坑篇

摘要：系列文章酷家乐客户端开发实践分享入坑篇酷家乐客户端开发实践分享软件自动更新酷家乐客户端开发实践分享浏览器启动客户端酷家乐客户端开发实践分享进程通信酷家乐客户端开发实践分享下载管理器不定期更新本文的初衷所使用的技术栈和前端工程师完美契合。作者：钟离，酷家乐PC客户端负责人原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-d...

TwIStOy 2019-08-23 18:05 评论0 收藏0
浑浑噩噩度三年，转行入坑软件测试，2年砍下大厂18K，但对此我并没有满足···

摘要：在优衣库累死累活干了个月，钱不多而且也没什么前途，日子可以说是过的浑浑噩噩，本该奋斗学习的年纪，我的生活却如此颓废，所以下定决心要找其他出路。年成长之路走来的分享年时间，从优衣库导购到现在的测试工程师。 ...

zhongmeizhi 2021-09-02 15:21 评论0 收藏0
微信小程序从入坑到放弃之坑八：textarea在苹果手机中的大Bug

摘要：顺便补充一句，微信官方提供的判断依旧不全面，最新出来的苹果手机还没有完全支持相关的坑可以在官方社区的问答中找到。首次在这里写点东西，还请各位大佬担待点。摘要：昨天的placeholder-class只是希望各位看官注意，而今天的textarea就绝对是一个超级大坑！而且如果看官手中没有苹果手机测试的话，这个可就真的是个坑了！为啥？难道要等到用户向你反馈你们产品有bug？？？.......

dantezhao 2019-08-26 13:24 评论0 收藏0