微信小程序的那些“坑”

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

其实微信小程序的总体架构和代码风格借鉴了当下很是流行的前端框架vue.js，可是它又有本身的一套文件格式，好比wxml和wxss，它们与html和css在结构和写法上很是类似，可是机制却又不同，若是你用html和css的习惯去开发就会引发一系列的问题。笔者在实践过程当中总结了一些微信小程序开发遇到的“坑”，以避免重蹈覆辙，也给你们作一个借鉴。

1、引入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>

2、设置启动页面

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

• app.json设置

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

• 编译条件设置

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

3、背景图片

微信小程序中不能用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进行定位，也就实现了在背景图片之上的效果。