小程序开发小记

为了使广大足球爱好者能有一个快捷，有效的约战平台，帮助他们解决约战难的问题， 为此我们团队开发了【Team踢么】足球约战小程序。

下面总结一下在开发中遇到的问题，因为是首次开发小程序，如有不正确的地方，欢迎指正。

页面间通信问题

• 场景: PageA 到 PageB, 在PageB中进行操作，完成后刷新PageA.

• 解决方案，一般可能会采用以下两种方式:

  • 在globalData中定义全局变量并结合onShow方法处理
  • eventbus方式的发布订阅模式

但在这里介绍另一种方式，通过hack方法直接调用通信页面的方法，此方法来自于【u3xyz大神】的这篇文章点击此处查看。该方式直接缓存需要通信的PageModel，通信时找到这个PageModel，就可以访问此页面的所有方法和属性，完美！。

class PageModel {
  constructor() {
    this.$$cache = {};
  }

  add(pageModel) {
    let pagePath = this._getPageModelPath(pageModel);

    this.$$cache[pagePath] = pageModel;
  }

  get(pagePath) {
    return this.$$cache[pagePath];
  }

  delete(pageModel) {
    try {
      delete this.$$cache[this._getPageModelPath(pageModel)];
    } catch (e) {
    }
  }

  _getPageModelPath(page) {
    // 关键点: 缓存时用路径作为key, 通过page.__route__获取页面路径
    return page.__route__;
  }
}

let pm = new PageModel();
module.exports = {
  pm: pm
};

//在app.js中引入
App({
  onLaunch: function() {
  },
  pages: pm
})

//PageA
var app = getApp();
Page({
  // 在onLoad中缓存
  onLoad: function (options) {
    app.pages.add(this);
  },
  doRefresh: function() {
  },
  // 可以在onUnload中移除缓存
  onUnload: function (opt) {
    app.pages.delete(this);
  }
})

//PageB
var app = getApp();
Page({
  doSomething: function() {
    //根据路径获取页面缓存
    app.pages.get('pages/pageA').doRefresh();
  }
})

背景图设置

项目中要求背景图平铺并且不随页面滑动，我们会设置background-attachment属性

page {
  background-image: url('https://www.xxx.com/image/background.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;    //设置fixed, 背景图不会随页面滑动
} 

但在ios真机调试过程中，却没有任何效果，原来safari中不支持background-attachment属性。没办法，只能换思路解决，使用z-index属性

.bg {
  background-image:url('https://www.xxx.com/image/background.jpg');
  background-size: cover; 
  background-repeat: no-repeat;
  position: fixed;
  z-index: -1; 
  top: 0;
  left: 0; 
  width: 100%;
  height: 100%;
} 

<!--wxml-->
<view>
  <view class="bg"></view>
  <view>
    <!--content-->
  </view>
</view>

自定义checkbox样式

小程序默认checkbox样式较为简单，项目要求checkbox样式要类似tag标签，只能采取自定义方式了。

• 利用伪类选择器checked切换样式
• 将checkbox + span写在label中，点击label同时会选中checkbox, 并利用相邻兄弟选择器(+)，修改自定义span的样式

<!--wxml-->
<label>
  <checkbox value="" checked=""/>
  <span></span>
</label>

span {
  //未选中样式
}

//首先隐藏checkbox
checkbox {
  display: none !important;
}

checkbox[checked] + span {
   //选中样式
}

但问题来了，小程序的wxss不支持相邻兄弟选择器，简直崩溃。 只能自行判断选中状态，修改span的样式

<!--wxml-->
<label>
  <checkbox value="" checked=""/>
  <span class="{{checked ? 'checked' : 'unchecked'}}"></span>
</label>

.unchecked {
  //未选中样式
}

.checked {
   //选中样式
}

其实这篇文章是在小程序上线一段时间后才总结的，有些问题都已忘却，边开发边总结才是王道，以此谨记。