1.模拟器和真机的差异

在开发的过程中,在模拟器上表现得好好的,在真机上却出问题的例子数不胜数。譬如动画的使用,cover-view上面使用定位,在模拟器好好的,在真机却错乱等等等等。
造成这些错乱主要是pc端和移动端不同的内核导致的。
避坑方式:
开发过程中,要时不时地用真机也看一下效果。

2.view对本地图片的引用

平时我们写页面,经常会用一个标签,然后把图片写到该标签里面,直接引用,譬如下面这个例子:

<view class="icon"></view>
.icon{
color: #1d1d1d;
background-image: url(../image/doll_user_bg.png);
width:50rpx;
height:50rpx;
}

一眼看过去感觉没毛病,但是事实上你在模拟器或者真机上会发现,图片出不来。原因出在了相对路径的引用上。
避坑的方法:
(1)直接在标签的属性上添加图片的路径

    <view class='icon' style="background-image: url('../image/doll_user_bg.png');"></view>

(2)使用绝对路径

.icon{
color: #1d1d1d;
background-image: url(https://webtest.yystatic.com/project/yyDoll/mobile/image/doll_user_bg.png);
width:50rpx;
height:50rpx;
}

(3)直接使用image标签代替view标签

<image src='../image/doll_user_bg.png'></image>

3.cover-view的样式

由于小程序里面video标签的层级是最高的无法覆盖。所以cvoer-view应运而生。它就是用于盖在video标签上面,进行对video标签的周遭加以装饰的利器。
然而,当我满心欢喜地以为这个标签很好用的时候,我遇到了很多奇奇怪怪的坑。
例如在cover-view上面使用相对定位,当video标签大小发生变化的时候,cover-view上面的元素就乱七八糟。 又譬如圆角的不起效等等。 具体的问题大家可以在开发者社区看看。developers.weixin.qq.com/search?acti…
避坑方法:尽量在cover-view上不使用定位,其他的bug只能等官方优化,大家谨慎使用。

4.开发小程序的授权登录和公司账号互联

如果只是一般的授权登录还是挺简单的,但是如果你要把你公司的账号体系和微信互联起来,这个流程就不简单了。

我说一下我这边的流程是怎样的,首先我要向公司申请账号互联的appid,然后要经过多个部门的捆绑和审核,然后在公司开发者账号下绑定小程序appid。然后等账号那边的同事把账号打通,然后才实现了账号互联的授权登录。
不同公司可能流程不大一样,写在这里只是作为步骤的记录,免得以后再踩坑。

5.文字围绕

当你在cover-view上面要是实现图文混排的文字围绕时,你会发现平时的一些方法都失效了。

<cover-view><cover-image src="img.gif" />文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</cover-view>

最常用的图片浮动,没有效果。使用定位,使用缩进,使用css3的属性等等,弄出来的效果放到真机上都无法正常显示图文混排的文字围绕。 目前暂时没有找到解决方法,有试过在cover-view实现的童鞋,求代码。

6.webview和小程序的通讯

刚开始看到小程序能内嵌webview的时候,内心是十分激动的。因为一些用小程序难以实现或者一些需要经常动态更改的页面,可以通过webview内嵌达到自己想要的效果。但是当我使用后,我发现坑爹了。webview和小程序竟然没有比较完善的通讯机制。 小程序和webview的通讯,例如一些参数的传递,目前仅仅是支持url的参数传递。例如:

<web-view src="https://mp.weixin.qq.com?password=12212&name=sasa&ticket=215328736dsadaadasdadaswuqsahkshakskahskahsakhsakshkasha327428749827487284729847382dsakhdlahdlahskjhdlkhlkadhldkhal"></web-view>

如果你内嵌的webview页面是需要登录态的,你只能在url上面把那些账号密码,ticket什么的全传到参数上。很那个对不对。我在想如果有一天我要把一个复杂的form表单数据传过去那种酸爽。希望微信的童鞋能把通讯机制完善起来。

7.input组件的文字居中问题

input组件的宽度使用百分比,设置placeholder的文本text-align:canter,这时文字并不会正常居中。
原来input设置百分比, placeholder就不支持设置 text-align样式了,想实现居中,就只能把input的长度写死。

8.发送模板消息的限制

如果用户在你小程序进行了某些操作,例如支付或者消耗了你们的虚拟的产品时,你可能需要发消息告诉用户提醒用户或者告知用户。这个时候就需要使用到模板消息了。
当你想下发消息的时候你会发现,只有2种情况下你才能下发消息。
1.支付
当用户在小程序内完成过支付行为,可允许开发者向用户在7天内推送有限条数的模板消息(1次支付可下发3条,多次支付下发条数独立,互相不影响)
2.提交表单
当用户在小程序内发生过提交表单行为且该表单声明为要发模板消息的,开发者需要向用户提供服务时,可允许开发者向用户在7天内推送有限条数的模板消息(1次提交表单可下发1条,多次提交下发条数独立,相互不影响)
注:目前只有这2种情况才能下发消息,而且是有条数限制的,谨记了。

9.其他一些偶发的bug和小tips

在开发小程序的时候,还会偶发一些小bug,举例一下:
1.longpress 有时有效,有时候失灵
2.canvas的drawImage频繁调动会导致页面卡顿,卡...卡...顿....
3.getUserInfo的方法有时候会获取不到用户信息,建议可以使用轮询,获取到信息后再停止
4.小程序如果想使用一些特殊字体,可以先把字体转成base64,再引入使用
5.如果想做直播相关的需求,不要使用video标签,请使用live-player,可以做到更好的低时延
6.开发小程序之前需要去看看小程序是否已经开放该品类,否则后面会被封(不要问我为什么知道=_=!!)

作者:wulong381
链接:https://juejin.im/post/5b0b9e86f265da08ed7a0c1f
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

微信小程序开发填坑的更多相关文章

  1. 微信小程序开发填坑指南V1

    近期用了一星期的时间,开发了一个小程序.小程序名称是:小特Jarvis,取自钢铁侠的管家. 后台采用C#编写,WebAPI接口.其实开发时间并不多,小程序本身提供的API,相比公众号的API来说,已经 ...

  2. 微信小程序开发常见坑

    前段时间稍微涉猎了微信小程序开发,踩了一些坑,在此总结出来,希望能为小伙伴们提供一点帮助. 页面跳转 对于页面跳转,可能习惯性想到wx.navigateTo,但是在跳转到目标页面是一个tab时,此接口 ...

  3. 微信小程序开发踩坑记

    前言 微信小程序自去年公测以来,我司也申请了一个帐号开发,春节前后开始开发,现在终于告一个段落了.谨以此文记录下踩过的坑. 坑1:scroll-view与onPullDownRefresh冲突 由于有 ...

  4. 微信小程序t填坑之旅一(接入)

    一.小程序简介 小程序是什么? 首先"程序"这两个字我们不陌生.看看你手机上的各个软件,那就是程序.平时的程序是直接跑在我们原生的操作系统上面的.小程序是间接跑在原生系统上的.因为 ...

  5. 微信小程序开发踩坑日记

    2017.12.29  踩坑记录 引用图片名称不要使用中文,尽量使用中文命名,IDE中图片显示无异样,手机上图片可能出现不显示的情况. 2018.1.5  踩坑记录 微信小程序设置元素满屏,横向直接w ...

  6. 微信小程序开发踩坑与总结 -

    原文链接:https://segmentfault.com/a/1190000008516296 前段时间把公司小程序项目开发完成了,所以来写写自己开发过程中碰到的问题和解决方法,以及用到的提高效率的 ...

  7. 微信小程序开发-踩坑

    异步请求处理 详情描述: 微信小程序的wx.request({})请求时异步处理,以下代码 wx.reuest({ url:"https://XXXA", method:" ...

  8. 踩一踩微信小程序开发的坑---tabBar

    最近忙于开发视频直播的项目,小程序学习也放置了两三个星期了,web开发者工具更新到新版,发现上个版本做的demo不显示了

  9. [转]微信小程序开发踩坑记录

    本文转自:http://www.cnblogs.com/NKnife/p/6283605.html 1.由于小程序wx.request()方法是异步的,在app.js执行ajax后,各分页加载app. ...

随机推荐

  1. Sublime Text 支持GBK , 解决中文乱码问题

    Sublime Text 是一款既简洁又强大的文本编辑器,其默认采用UTF8编码,这就造成了许多采用GBK编码的文件里的中文显示为乱码. 有一个专门解决这个问题的插件:ConvertToUTF8 要安 ...

  2. AngularJS表格神器“ui-grid”的应用

    HTML:  (代码仅用于解释得更清楚,并未完全展示) <!doctype html> <html ng-app="app"> <head> & ...

  3. 《Android进阶之光》--RxJava结合Retrofit访问网络

    1)配置 dependencies{ ... compile 'io.reactivex:rxjava:1.2.0' compile 'io.reactivex:rxandroid:1.2.1' co ...

  4. 树莓派(Raspbian系统)中使用pyinstaller封装Python代码为可执行程序

    一.前言 将做好的Python软件运行在树莓派上时,不想公开源码,就需要对文件进行封装(或称打包),本文主要介绍使用pyinstaller封装Python代码为可执行程序. Python是一个脚本语言 ...

  5. update date and keep time

    select TO_CHAR((date '2010-01-02' + (sysdate-trunc(sysdate))),'YYYY-MM-DD HH:mi:ss') from dual;

  6. 4826: [Hnoi2017]影魔

    4826: [Hnoi2017]影魔 https://lydsy.com/JudgeOnline/problem.php?id=4826 分析: 莫队+单调栈+st表. 考虑如何O(1)加入一个点,删 ...

  7. Linux 下 make 命令 及 make 笔记

    Linux 下 make 命令是系统管理员和程序员用的最频繁的命令之一.管理员用它通过命令行来编译和安装很多开源的工具,程序员用它来管理他们大型复杂的项目编译问题.本文我们将用一些实例来讨论 make ...

  8. Editplus中添加System.out.println()快捷键

    首先,找到自己电脑Editplus的安装路径,在所属文件夹中找到JAVA.ACP文件: 然后,在文件的末尾加上如下代码: #T=syso System.out.println("^!&quo ...

  9. unity8个入门代码

    01,基本碰撞检测代码 function OnCollisionEnter(theCollision:Collision){ if(theCollision.gameObject.name==&quo ...

  10. 喵哈哈村的魔法考试 Round 16 (Div.2) 比赛题解

    A 实际上我们for一遍就好. 坑点就是会爆int #include<bits/stdc++.h> using namespace std; const int maxn = 1e5+7; ...