微信小程序填坑之旅在使用template模版加载模版的时候，开发者工具会自动新建wxss，json，js，wxml文件，

1.使用模版（template）的时候，其wxss失效

在使用template模版加载模版的时候，开发者工具会自动新建wxss，json，js，wxml文件，然而在添加wxss的时候对应的wxml中的元素样式没有变化，因为根本就没有加载wxss。（讲道理这个微信开发者工具应该完善这一点的吧，没有去细查）。经查阅微信小程序----模板（template），它是把wxss全局引用解决。求大神补充其他更好的方法。

2.使用wx.getLocation获取地址返回`getLocation:fail no permission`

网上各种找答案都没有找到，后来想想会不会是建项目的时候用的测试appid权限不足的原因，重新使用自己申请的appid打开项目后，可以获取到地址的经纬度。（这个问题官网居然没说，坑）。

3.wxss问题

在wxss设置元素top值单位是rpx，而在wxml中打开时转换成了px。（这个暂时不清楚为什么）在用模拟机（iphone6）测试下拉没问题，而在真机（安卓）测试下拉出现位置不变。猜测是安卓和ios生成元素的宽高不一样，而下拉距离固定，所以下拉出现过大或过小。解决方案 1.在wxss设置元素固定高度。2.动态获取下拉高度。3.使用transform:translateY(100%)。推荐使用第三个解决方案，避免获取高度。

iphone模拟机测试

安卓真机测试

4.模版问题

1.使用模版的时候，wxss必需全局引入（官网没说），否则wxss是无效的。

// app.wxss
@import "./components/title-icon-navigate/title-icon-navigate.wxss";

2.模板拥有自己的作用域，只能使用 data 传入的数据以及模版定义文件中定义的 <wxs /> 模块。也就是说模版要有自己的data数据要定义在<wxs />文件中。

5.过滤器

参考微信小程序使用过滤器的几种方法 1.直接修改原数据（死板，业务多的时候复杂） 2.ES6 get

// page({})
data : {
  time : 1511748300571
}
 get time (){    
  return FormatUtil.getDate(this.data.time);
}

通过get方法来实现对字段显示过滤。只能操作对象对数组中的item 比较无力。 3.wxs 在wxs文件中不能使用ES6语法。

// filter.wxs
var filterPrice = function (value) {
  return parseFloat(isNaN(value) ? 0 : value).toFixed(2);
}

module.exports = {
  filterPrice: filterPrice
}
// wxml 引入
<wxs module="filter" src="../../utils/filter.wxs"></wxs>
// wxml 使用
<text class="goods-price">￥{{filter.filterPrice(goods.price)}}</text>

6.箭头函数问题

在写箭头函数的时候，函数里的this会undefined。建议函数要使用this的时候不要用箭头函数，或者在全局定义一个context赋值this，调用context来访问this。

7.自定义组件不加载app.wxss的全局样式

自定义组件不接受任何外部的wxss样式，包括app.wxss中的全局样式（这点和vue不同）。所以如需加载全局的或者指定的公共样式，还需在组件内部wxss中引入。

@import "/style/common.wxss";

如果要接受外部样式类，官网有介绍->组件模版与样式

7.page背景色的初始化定义

一开始错误的认为json中配置项background是修改page界面的背景色，然而并不是。其实在小程序中background的配置是page下面的背景色配置，如下拉刷新的时候，page界面下拉出现的界面。要配置page的背景色其实很简单，直接在page元素上定义就好。

page{
  background: #eee;
}

8.button去除原生border

小程序原生组件中的button如果要去掉border，直接border:none是不行的，因为它的border是加载after上的。应该：

button::after{
    border: none;
}

9.hidden失效问题

block标签和设置了display:flex;的标签设置hidden="{{true}}"的时候都会显示。

解决方案：1.手动添加display：none。2.在外层包裹一个view标签来hidden掉想要隐藏的内容。

10.微信小程序中遮罩层的滚动穿透问题

在数据渲染列表到view后，可能要做弹窗效果。然而打开弹窗后，页面仍然能滚动，这使体验非常差。

解决方案：添加 catchtouchmove 事件来阻止

    <view wx:if="{{alert}}" catchtouchmove="myCatchTouch">
      <template is="alert" data="{{alertData}}" />
    </view>

  myCatchTouch: function () {
    console.log('stop user scroll it!');
    return;
  },

微信小程序填坑之旅