小程序项目入坑实践

2018-06-13 admin

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

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

不能使用 async await语法糖

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

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

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

input输入数字

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

textarea组件键盘遮挡问题

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

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

<!--控制textarea键盘遮挡  -->
<view style='height: {{pageScrollHeight}}px'></view>

当我们使用组件的聚焦,失焦来处理后,发现在换行时都会触发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,所遇到的坑和兼容问题都不是很多,本人把项目主要代码删除了,小程序开源地址,里面只有一些程序的结构,和项目的公用代码,欢迎大家交流指点,原文地址

[转载]原文链接:https://segmentfault.com/a/1190000015280771

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-33994.html

文章标题:小程序项目入坑实践

相关文章
百度新功能【特效搜索】演示 惊呆了小伙伴
百度搜索最近又出新玩意新功能了,可能你还没有发现,名为【百度特效搜索】已经默默上线了,有什么效果呢? 在百度搜索中根据用户搜索的关键词来出发某些动作,例如笔者搜索“打雷”关键字,在搜索结果中你会听到有打雷声, 黑洞,闪烁、翻转、跳跃,打雷,...
2015-11-12
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
在 mpvue 使用 echarts 小程序组件
具体操作 下载 echarts-for-weixin 。 把其 ec-canvas 目录移动到 mpvue 项目的 static 目录下。 对 ec-canvas/ec-canvas.js 进行小调整,考虑提 pr 到 ec-c...
2018-03-11
Ajax入门手册chm
下载地址:Ajax入门手册chm ...
2015-11-12
mpvue 小程序如何自定义tabBar,不使用navigateTo跳转,模拟redirectTo跳转
原生tabBar tabBar: { &quot;list&quot;: [ { pagePath: &quot;pages&#x2F;index&#x2F;main&quot;, iconPath: &...
2018-05-25
VuePress 快速踩坑
最近有个开源项目非常火,那就是尤小右开发的 VuePress,VuePress 可以让您非常方便的在 Markdown 文档中编写 Vue 代码,并且 VuePress 对编译后的 HTML 文件做了一些针对搜索引擎的优化。另外 VuePr...
2018-04-27
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
本文实例讲述了JS常见创建类的方法。分享给大家供大家参考,具体如下: Javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有Class。(不过,ES6引...
2017-04-05
JavaScript深入之类数组对象与
类数组对象 所谓的类数组对象: 拥有一个 length 属性和若干索引属性的对象 举个例子: var array = [&#x27;name&#x27;, &#x27;age&#x27;, &#x27;sex&#x27;]; var ...
2017-05-27
利用n 升级工具升级Node.js版本及在mac环境下的坑
一、利用n 升级Node.js 最近在用NPM安装一个nodejs工具时发现,我的nodejs的版本有些旧了。这不是大问题,只要升级就可以了,当然,重新从nodejs.org最新版本是一种方法,但我想应该有更简单的方法,那就是使用 n 这个...
2017-03-17
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
本文主要通过代码示例给大家介绍IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题;分步介绍,先给大家介绍IE7浏览器窗口大小改变事件执行多次bug,具体问题分析及解决方案请看下文。 var resizeTi...
2017-03-29
回到顶部