微信小程序踩坑笔记

https请求

请求必须是https

微信小程序要求请求的url必须是https协议

请求的url要在微信公众平台配置

在开发时我们很可能用到本地服务器调试

可以在开发工具的 项目–>基础配置 中设置不校验域名：

使用的url携带参数必须用encodeURI方法编码

在wx.request()方法中的url如果携带参数需编码，即将参数拼接起来组成url，然后再使用encodeURI方法。

如果不这么做，在开发工具调试的时候可能不会报错，但是到真机模拟的时候就会出错，报错码是400，即无效的请求。

swiper的高度问题

首先要想设置swiper的高度，只能在wxml中标签中使用css内联样式使用height属性。因为swiper被底层css加了样式，如果在wxss中设置则不会起效果。

<swiper style="height:500px;"></swiper>

另外在iOS系统中的swiper不支持flex-grow属性，即使在内联样式中设置了flex-grow:1;swiper也不会自动占满剩余空间，而在安卓系统中则可以生效。

所以当要在iOS系统中设置swiper占满剩余空间时需要计算出剩余空间的高度并转换成px，将其设置为swiper的高度。

中英文字体表现不一致，无法对齐的问题

先看个例子

<view><text>项目名称</text> <text>{{project.name}}</text></view>

我们想实现的效果是项目名称标签和值之间用一个空格隔开，我们当然想让两者水平对齐。

可是我们会发现，当project.name值为纯中文的时候两者可以对齐，当project.name中包含英文或数字的时候两者无法对齐。

这是因为我们第一个text为纯中文，也就是说纯中文和混杂了英文或数字的text无法水平对齐。

像这种两个text无法对齐的情况我们可以很好的解决。就是用一个text将两者都包含进来。

<view><text><text>项目名称</text> <text>{{project.name}}</text></text></view>

这样两者就是一个整体也就自然会对齐。这种方法适用范围较小，因为这样两者的样式很难控制。

再看个例子

为了看的更明显我将两者的图标设置为一样的了。这两者的css样式完全一致，可是仔细看会发现左边的图片往下偏移了一点，为了证明这一点可以用线来标明一下：

可以看到左边的图标确实往下来了一点，这并不是我们想要的。当然还要说一句，每个图标和下面的文字作为一个整体来表现的，这是硬性需求，不然可以将图标做一行，文字再做一行。

为了证明是中英文字的原因，可以看下图：

当我们在左边文字中加入数字时表现就和右边一致。

这就给了我们一个思路，我们要做的就是隐藏我们加入的那个
<text>1</text>，只要让用户看不到就行了，即：

<text>
    <text style="position:relative; left:-9999px;">1</text>
    <text>{{currentType.name}}</text>
</text>

于是改为<text style="position:relative; top:-999px;">1</text>。

同时我们还要将整个文字往左偏移以居中显示。虽然麻烦了一点，但是解决了问题。

<text>
    <text style="position:relative; left:-9999px;">1</text>
    <text style="position:relative; left:-4px;">{{currentType.name}}</text>
</text>

这种方法的适用性广一些，但是有点麻烦。

input输入框回车自动清空

因为在微信中没有document对象，所以我们想要实现input输入框回车清空就有些困难。

index.wxml

<input type="text" placeholder="添加任务..." bindconfirm="addTask" value="{{inputValue}}" />

首先我们需要一个placeholder，然后绑定回车事件，这样在回调函数中通过e.detail.value可以获取输入内容。而清空输入框即让它的value为空，在回调函数中将inputValue设置为空即可。

但是还有个问题，我发现input在真机上的placeholder在获取焦点和没获取焦点的时候表现有所不同。

这就是说我们没有点击input的时候有一个placeholder，而我们点击的瞬间这个placeholder的样式变了，具体表现为向上移动了一点，这样就会造成输入框中的placeholder向上闪了一下。

虽然这样的placeholder看起来有点难受，但是我还没有找到什么好的解决办法，暂时也只能这样了。

Android和iOS渲染效果不同

开发工具、Android和iOS由于渲染引擎不同，所以同样的页面渲染出来的效果由细微的差异。
所以一定要多在不同真机上测试，做到都能兼容。

举个例子:

index.wxml

    <view id="taskName">
        <text>任务名称</text>
        <textarea placeholder="请输入任务名称" />
    </view>

我们需要一个text和一个textarea，想要实现的效果是两者并排，但是textarea我们想让它高一些，并且两者顶部对齐。

于是我们采用flex布局让实现我们的效果，可是我们会发现即使用了

#taskName {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

textarea中的文字顶部还是会低于text中文字的顶部，所以我们会想让textarea向上偏移一些。

可是我们调整偏移距离的时候会发现，在安卓上显示的两者顶部对齐了，在iOS上两者顶部就没有对齐，反之亦然。

遇到这种情况我们只能根据实际需要来选择怎么实现。如果非要安卓和iOS上都表现完美，可以通过检测当前系统来让偏移距离动态调整。

开发工具中的表现与真机的表现有差异，需用真机测试

模块的导出和引入

以index页面引入MD5模块为例

pages/index/index.js

引入

var md5 = require("../../utils/md5.js")

使用

var safePassword = md5.encode(inputPassword)

而在utils/md5.js中

function encode(input) {
    ...
    return output
}
module.exports.encode = encode

注意一定要在md5.js中导出才能在其他地方引用

json配置文件

app.json中pages的配置，顺序很重要，第一个默认的是启动后显示的页面。

app.json

{
    pages: [
        'pages/index/index',
        ...
    ],
    tabbar: {
        color: 'white',
        ...
    },
    window: {
        navigationBarBackgroundColor: 'black',
        ...
    }
}

page.json 由于在页面中只能配置当前页window，所以默认的就是配置page的window。而不能像app.json那样配置page和tabbar等对象

index.json

{
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "登录"
}