dashucoding记录2019.6.6

达达前端

发布于 2019-07-03 10:54:10

3240

发布于 2019-07-03 10:54:10

文章被收录于专栏：达达前端

div
{
display:flex;
flex-direction:row-reverse;
}

-webkit-， - ms-或-moz-

initial 设置该属性为它的默认值。 inherit 从父元素继承该属性。

img
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}

z-index 进行定位元素(position:absolute, position:relative, or position:fixed)。

auto 默认。堆叠顺序与父元素相等。 number 设置元素的堆叠顺序。 inherit 规定应该从父元素继承 z-index 属性的值。

属性定义及使用说明 writing-mode 属性定义了文本在水平或垂直方向上如何排布。

语法格式如下：

writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left vertical-lr：垂直方向内内容从上到下，水平方向从左到右 sideways-rl：内容垂直方向从上到下排列 sideways-lr：内容垂直方向从下到上排列

data-appointId="{{orderItem.detailList[0].appointId}}" data-id="{{orderItem.orderNo}}"

reBuy(e) {
      console.log('orderItem====reBuy--->', e)
      wx.navigateTo({
        url: `/pages/confirm-order-page?buyAgain=true&orderNo=${e.currentTarget.dataset.id}&appointId=${e.currentTarget.dataset.appointid}`
      })
    },

tortoiseGit 拉取获取推送

比较差异与上一版本比较差异

显示日志后台服务进程版本分支图版本库浏览器检查更新变基(rebase) 保存贮藏二分定位-开始解决冲突还原清理切换/检出合并创建分支创建标签导出增加添加子模块创建补丁序列应用补丁序列设置帮助

标签是只读的，通常只用来记录特定的历史时刻，如里程碑版本等，这是为了方便以后检出特定版本的代码

head,分支，标签，提交使用推送命令，可以将本地版本库中的分支推送到服务器的版本库中如果要推送标签，请勾选包含标签

启动页index页面的效果优化小程序的第一个页面index/index页面，基本上就拿来当启动页。但是如果在跳转到其他页面之前，网络还没有回调完，那么这个页面就会出现卡在白屏的问题，所以做一张漂亮的启动页会好很多。

小程序最多并发10个http连接和2个websocket连接

下载小程序代码包、加载小程序代码包、初始化小程序首页

image.png

image.png

<style type="less">
/** less **/
</style>
<script>
import wepy from 'wepy';
export default class extends wepy.app {
    config = {
            "pages":[
            "pages/index/index"
        ],
        "window":{
            "backgroundTextStyle": "light",
            "navigationBarBackgroundColor": "#fff",
            "navigationBarTitleText": "WeChat",
            "navigationBarTextStyle": "black"
        }
    };
    onLaunch() {
        console.log(this);
    }
}
</script>

<style type="less">
/** less **/
</style>
<template type="wxml">
    <view>
    </view>
    <component id="counter1" path="counter"></component>
</template>
<script>
import wepy form 'wepy';
import Counter from '../components/counter';
export default class Index extends wepy.page {

    config = {};
    components = {counter1: Counter};

    data = {};
    methods = {};

    events = {};
    onLoad() {};
    // Other properties
}
</script>

<style type="less">
/** less **/
</style>
<template type="wxml">
    <view>  </view>
</template>
<script>
import wepy form 'wepy';
export default class Com extends wepy.component {

    components = {};

    data = {};
    methods = {};

    events = {};
    // Other properties
}
</script>

wepy.component基类提供三个方法

emit，$invoke

组件的事件监听需要写在events属性下

$invoke是一个组件对另一个组件的直接调用

在Page_Index中调用组件A的某个方法：

this.$invoke('ComA', 'someMethod', 'someArgs');

npm install wepy-com-toast --save

image.png

image.png

wx.navigateTo({
        url: `/pages/product-detail-page?productId=${e.currentTarget.id}&type=${
          e.currentTarget.dataset.type
          }`
      })

// mixins/test.js
import wepy from 'wepy';

export default class TestMixin extends wepy.page {
    data = {
        foo: 'foo defined by page',
        bar: 'bar defined by testMix'
    };
    methods: {
    tap () {
      console.log('mix tap');
    }
  }
}

// pages/index.wpy
import wepy from 'wepy';
import TestMixin from './mixins/test';

export default class Index extends wepy.mixin {
    data = {
        foo: 'foo defined by index'
    };
    mixins = [TestMixin ];
    onShow() {
    console.log(this.foo); // foo defined by index.
    console.log(this.bar); // foo defined by testMix.
  }
}

// mixins/test.js
import wepy from 'wepy';

export default class TestMixin extends wepy.page {
    methods = {
    tap () {
      console.log('mix tap');
    }
  };
    onShow() {
    console.log('mix onshow');
  }
}

// pages/index.wpy
import wepy from 'wepy';
import TestMixin from './mixins/test';

export default class Index extends wepy.mixin {

    mixins = [TestMixin];
    methods = {
    tap () {
      console.log('index tap');
    }
  };
    onShow() {
    console.log('index onshow');
  }
}

在函数运行周期之外的函数里去修改数据需要手动调用$apply方法

setTimeout(() => {
    this.title = 'this is title';
    this.$apply();
}, 3000);

wx.request('xxxx').then((d) => console.log(d));

// 官方
<view data-id="{{index}}" data-title="wepy" data-other="otherparams" bindtap="tapName"> Click me! </view>
Page({
  tapName: function(event) {
    console.log(event.currentTarget.dataset.id)// output: 1
    console.log(event.currentTarget.dataset.title)// output: wepy
    console.log(event.currentTarget.dataset.other)// output: otherparams
  }
});
 
// wepy 建议传参方式
<view data-wepy-params="{{index}}-wepy-otherparams" bindtap="tapName"> Click me! </view>
 
events: {
  tapName (event, id, title, other) {
    console.log(id, title, other)// output: 1, wepy, otherparams
  }
}
 
// wepy 1.1.8以后的版本，只允许传string。
<view bindtap="tapName({{index}}, 'wepy', 'otherparams')"> Click me! </view>
 
events: {
  tapName (event, id, title, other) {
    console.log(id, title, other)// output: 1, wepy, otherparams
  }
}