微信小程序的那些“坑”

微信小程序借助微信这个宇宙APP的平台，一经面世便如火如荼地在各行各业蔓延开来，很多企业都利用小程序作为一种有效的宣传手段，而微信官方又开放了小程序的API供开发者们进行开发，于是在广大的程序猿中又掀起了一场微信小程序的开发浪潮。

其实微信小程序的整体架构和代码风格借鉴了当下非常流行的前端框架vue.js，但是它又有自己的一套文件格式，比如wxml和wxss，它们与html和css在结构和写法上非常相似，但是机制却又不一样，如果你用html和css的习惯去开发就会引起一系列的问题。笔者在实践过程中总结了一些微信小程序开发遇到的“坑”，以免重蹈覆辙，也给大家做一个借鉴。

一、引入fontawesome图标

在做微信小程序的时候难免会要用到一些icon，这时如果你想用fontawesome图标库里的图标的话，就不能用传统的方式去引入font0-awesome中的图标了，以下是在微信小程序中引入font-awesome图标的方法：

• 下载font-awesome字体包
• 打开Transfonter网站，上传字体fontawesome-webfont.ttf(或者其他字体)，选择base64编码，点“convert”
• convert完毕后点download下载转换后的文件，解压下载包中有stylesheet.css文件如下

注意：src后的那一串编码就是字体文件转化的base64编码，把这个src拷贝到font-awesome.css对应的src中。因为font-awesome.css的src其实就是引用的我们所转换的字体文件，我们只是把字体文件转换为base64编码直接写进文件里了。

• 我们将修改后的font-awesome.css中的内容拷贝到app.wxss中，就可以愉快地使用font-awesome中的各种图标了，例如：

<text class="fa fa-flag"></text>

二、设置启动页面

在微信小程序中你可能需要写不止一个页面，但是当你所写的页面嵌套层次很深的时候，你在边写边调试页面就需要点击很多次才可以从首页进入到你所写的页面，这时候我们希望启动的时候就是我们所写的页面，有两种方法实现：

• app.json设置

在app.json文件中，pages数组，设置在第一个的页面就是默认启动页面，所以你只需要调整你当前开发的页面顺序就好了。

• 编译条件设置

在编译的地方设置，你只需要设置页面的路径，勾选上“使用以上条件编译”，如果页面需要参数，那可以把参数也传上。这样启动的就是你设置的页面。

三、背景图片

微信小程序中不能用CSS的方法来加载本地图片，比如background-url，除非你把本地图片base64化，否则只能够用image组件。如果你想将图片作为背景，而且上面还排列其他的一些组件的话，就需要采用“定位”的技术了：
xwml:

<view class="container">
    <image class="bgImg" src="/images/xxx.png"></image>
    <other-widget class="other-wigdget"></other-widget>  <!-- other widget希望是放在背景图片之上的 -->
</view>

wxss:

.container{
    position: relative;
}
.other-widget{
    position: absolute;
}

如果不采用定位的方法，other-widget就会按照块级元素排列在image的下边，但是如果我们采用绝对定位使other-widget脱离文档流，它就会相对于container进行定位，也就实现了在背景图片之上的效果。