杂项：自定义弹窗，开发小技巧，使用一像素边框样式

本文为一些杂项的聚合；

一：微信小程序自定义弹窗

作者：孤岛里的猫大王，来自原文地址 
首先wxml代码：

<view class="myToast" hidden="{{nullHouse}}">暂无有关信息</view>
<view bindtap="clickArea">点击此处</view>　　
注：hidden属性用于切换比较频繁的地方。

wxss代码设置弹窗样式:

.myToast{
  width:240rpx;
  height:130rpx;
  line-height: 130rpx;
  margin:80rpx 35%;
  border-radius:20rpx;
  background-color: rgb(114,113,113);
  color:rgb(255,255,255);
  font-size: 36rpx;
  text-align: center;
  position: absolute;
  z-index: 100;
  opacity: 0.85;
}

js:

Page({
 data:{
    nullHouse:true,  //先设置隐藏
        },
 onLoad:function(options){
     // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
 clickArea:function(){
   var that = this;
   this.setData({
    nullHouse:false, //弹窗显示
    }) 
   setTimeout(function(){
    that.data.nullHouse = true, //1秒之后弹窗隐藏
     },1000)
  },
})

注：setTimeout()函数是异步的，当计算机执行到setTimeout时，此任务先暂停并保存，继续执行后续未完成的任务，当条件满足时，再将setTimeout的执行任务放回任务队列的后面，等待执行。

二：开发小技巧

1、js里面如何获取data里面定义的值：this.data.参数名，例如在data里面定义了一个num = 1,我要得到一个num,应该这样写this.data.num；

2、将内容存为全局的：在app.js，里面定义一个变量a，在存的页面 getApp().globalData.a = 你要存的信息;

3、取全局变量：也是一样的getApp().globalData.a

4、如果是渲染层报错：可能原因是：xml页面里面调用了方法，或者{{}}没有配对。

5、跳转页面代码：

① wx.navigateTo({url:"跳转的路径"}); 例如：wx.navigateTo({url:"../shopcar/shopcar"});这个自带返回上一页的功能，但是只能最多打开五个页面。 
②wx.redirectTo({url:"跳转的路径"});会关闭当前页面再跳转到另外一个页面

6、返回上一个页面：wx.navigateBack({delta: 1})；delta：后面接返回的页面层数

三：自用样式解决方案:使用一像素边框

作者：haoranw，原文地址 
import 'common.scss' 
在需要1px边框的元素样式的开头添加@include px-border(#color,(some_position));。 其中color为边框颜色，some_position中填入需要边框的方位（不填则默认为所有方向）， 
例如：@include px-border(#000,(top,right));,将会生成上方和右方的黑色边框；@include px-border(#000);，将在四周生成黑色边框。 
使用任何你喜欢的构建工具或编辑器插件将.scss产出为.wxss。 
common.scss：

// 1px border
@mixin px-border($color,$border:all) {
    position: relative;
    &:after {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        @if $border == all {
            border: 1px solid $color;
        }
        @else {
             @each $member in $border{
                border-#{$member}: 1px solid $color;
            };
        }
        width: 200%;
        height: 200%;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        @media (-webkit-min-device-pixel-ratio:2.5) {
            width: 300%;
            height: 300%;
            -webkit-transform: scale(.33333);
            transform: scale(.33333);
        }
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        box-sizing: border-box;
    }
}