前端技术前沿1

git branch -a 查看本地和远程的所有分支（）

查看本地分支 git branch

查看远程分支 git branch -r

WePY组件使用

components={
  child:Child,
  anotherchild:Child
 };

props静态传值：父给儿子传递常量数据，只能传递String字符串类型

<child title="mytitle"></child>
<组件 :动态数据='父data中的数据名'>
父子间数据独立不干扰
<组件 :动态数据.sync='父data中的数据名'> 
<组件 :twoWayTitle='父data中的数据名'> 
循环渲染WePY组件，需要用<repeat>
<repeat for="{
   {list}}" key="index" index="index" item="item">
<child  :item="item"></child>

微信小程序学习与wepy框架的使用详解

如：index.js、index.wxml、index.wxss、index.json。

.js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件,就相当于html中的css文件。

<image src="{
   {src}}"></image>

和vue的设计模式一样MVVM 数据渲染{ { data}}
判断 wx:if，wx:else
循环wx:for.
小程序事件绑定 bindtap 、catchtap
获取循环序号 data-x

<!--在wxml中-->
<view class="contents">
    <button catchtap="choose" wx:if="{
   {showBtn}}">选择</button>
    <text wx:for="{
   {arrList}}" wx:key="{
   {index}}" data-i="{
   {index}}" data-type="{
   {item}}" bindtap="selectTab" >{
   {item}}</text>
</view>
//对应的js中
 data:{
     showBtn:true,
     arrList:['apple','pear','orange']
  },
  choose(){ 
     this.setData({ 
          showBtn:false
      })
   },
   selectTab(ev){ 
       var getAttrType=ev.target.dataset.type;
       var index=ev.target.dataset.i;
    }
  onLoad(){
   },
  onShow(){
  }
本地图片选择wx.chooseImage(OBJECT)
    图片预览wx.previewImage(OBJECT)
    文件上传 wx.uploadFile(OBJECT)
    数据请求 wx.request()
wx.setStorageSync
   wx.getStorageSync
   wx.clearStorageSync

对应的本地图片选择js

//对应的本地图片选择js
wx.chooseImage({
    count: 3, // 默认9,假如传张
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths    
        wx.previewImage({  //对应的图片预览
          current: temFilePaths[0], // 当前显示图片的链接
          urls: tempFilePaths||[] // 需要预览的图片http链接列表
        })
       wx.uploadFile({ //对应的图片上传
           url: 'http://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
           filePath: tempFilePaths[0],
           name:"file",
           formData:{ //上传的同时携带别的参数
              "user":"test"
           }
        success: function(res){
           var data = res.data
            //do something
       }
    })
  }
})
//数据请求js
wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {  //注意你在这里上传图片url参数到后台后台是接收不到的，因为上面有专门上传图片的方法
     params1: '' ,
     params2: ''
  },
  header:{
      "Content-Type":"application/json"
  },
  success: function(res) {
     console.log(res.data)
  }
})
//数据储存js
wx.setStorageSync("key","value") //设置要本地存储的key值
wx.getStorageSync("key")  //获取本地存储的key
wx.clearStorageSync("key")

wepy框架安装及使用介绍

全局安装或更新WePY命令行工具 
npm install wepy-cli -g
在开发目录中生成Demo开发项目  
wepy init standard myproject
cd myproject
npm  install
wepy build --watch（启动项目）
组件名后缀 .wpy 
组件页面结构与vue结构一样
page页面实例 export default class MyPage extends wepy.page { }
Component组件实例 export default class MyPage extends wepy.component { }

循环组件 repeat

<!--wepy结构-->
    <style type="scss">
    </style>
    <template>
        <button bindtap="showFirstComponent">按钮</button>
        <view v-if="show">
         <DemoCom></DemoCom>   <!--使用组件-->
        </view>
       <repeat for="{
   {arr}}" key="index">  <!--循环组件-->
         <DemoCom :passdata="item" /> <!--传值-->
       <repeat>
    </template> 
    <script>
      import wepy from 'wepy'
      import DemoComponent from '../components/demoComponent' //比如说这里通过路径引人了demoComponent组件
      export default class pageDemo extends wepy.page {
        config = {
               'navigationBarTitleText': '页面标题',
               'navigationBarTextStyle': '#FFFFFF', //头部背景色
               'navigationBarBackgroundColor': '#0386FF' //头部字体颜色
             };
        components = { //注册引入的组件
               DemoCom:DemoComponent
            };
        data = {     
            show:true,
            arr:[
                {name:'aa',age:'16'},
                {name:'bb',age:'17'},
                {name:'cc',age:'c18'}
              ]
        };
        methods = {
          showFirstComponent(){ //bindtap里面的事件
                this.show=!this.show; //在这里data数据的设置、获取与vueJS里面的设置、获取一样
           }
        };
        onLoad(){
        };
        onShow(){
        }
    </script>
<style> 
  .mainBgcolor{ /*全局样式全局用*/
   background:#ffffff;
   }
</style>
<script>
import wepy from 'wepy'
import 'wepy-async-function'
import { aldstat } from './utils/ald-stat'
export default class extends wepy.app {
   config={
     pages: [ //这里注册的全是pages里面建立的pages.wpy组件，页面之间跳转
      'pages/index',
      'pages/login',
      'pages/companyDetailInfo',
     ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  }
  globalData = { //全局data 全局用
    userInfo: null
  }
</script>

<child title="mytitle"></child>
// child.wpy，静态传值
props = {
    title: String
};
onLoad () {
    console.log(this.title); // mytitle
}

props动态传值是指父组件向子组件传递动态数据内容，父子组件数据完全独立互不干扰。

// parent.wpy
 <child :title="parentTitle" :syncTitle.sync="parentTitle" :twoWayTitle="parentTitle"></child>
 data = {
    parentTitle: 'p-title'
 };
// child.wpy
props = {
    // 静态传值
    title: String,
    // 父向子单向动态传值
    syncTitle: {
        type: String,
        default: 'null'
    },
    twoWayTitle: {
        type: String,
        default: 'nothing',
        twoWay: true
    }
};
onLoad () {
    console.log(this.title); // p-title
    console.log(this.syncTitle); // p-title
    console.log(this.twoWayTitle); // p-title
    this.title = 'c-title';
    console.log(this.$parent.parentTitle); // p-title.
    this.twoWayTitle = 'two-way-title';
    this.$apply();
    console.log(this.$parent.parentTitle); // two-way-title.  --- twoWay为true时，子组件props中的属性值改变时，会同时改变父组件对应的值
    this.$parent.parentTitle = 'p-title-changed';
    this.$parent.$apply();
    console.log(this.title); // 'c-title';
    console.log(this.syncTitle); // 'p-title-changed' --- 有.sync修饰符的props属性值，当在父组件中改变时，会同时改变子组件对应的值。
}

mini-program
勘探-微信小程序

app.json: 全局配置--(小程序公共设置)
app.js: 全局配置--(小程序逻辑)
app.wxss: 全局配置--(小程序公共样式)
pages: 页面数组--(小程序可单独有自己的配置、样式、逻辑文件，还有一个页面结构文件)

wx:key    指定列表中项目的唯一的标识符。

import引用目前文件定义的模板

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

微信小程序wepy框架笔记

// index.wpy
    <template>
        <view>
            <panel>
                <h1 slot="title"></h1>
            </panel>
            <counter1 :num="myNum"></counter1>
            <counter2 :num.sync="syncNum"></counter2>
            <list :item="items"></list>
        </view>
    </template>
    <script>
    import wepy from 'wepy';
    import List from '../components/list';
    import Panel from '../components/panel';
    import Counter from '../components/counter';
    export default class Index extends wepy.page {
        config = {
            "navigationBarTitleText": "test"
        };
        components = {
            panel: Panel,
            counter1: Counter,
            counter2: Counter,
            list: List
        };
        data = {
            myNum: 50,
            syncNum: 100,
            items: [1, 2, 3, 4]
        }
    }
    </script>
project
├── pages
|   ├── index
|   |   ├── index.json  index 页面配置
|   |   ├── index.js    index 页面逻辑
|   |   ├── index.wxml  index 页面结构
|   |   └── index.wxss  index 页面样式表
|   └── log
|       ├── log.json    log 页面配置
|       ├── log.wxml    log 页面逻辑
|       ├── log.js      log 页面结构
|       └── log.wxss    log 页面样式表
├── app.js              小程序逻辑
├── app.json            小程序公共设置
└── app.wxss            小程序公共样式表
project
└── src
    ├── pages
    |   ├── index.wpy    index 页面配置、结构、样式、逻辑
    |   └── log.wpy      log 页面配置、结构、样式、逻辑
    └──app.wpy           小程序配置项（全局样式配置、声明钩子等）

dist 微信开发者工具指定的目录

├── node_modules
├── src                    代码编写的目录
|   ├── components         组件文件夹（非完整页面）
|   |   ├── com_a.wpy      可复用组件 a
|   |   └── com_b.wpy      可复用组件 b
|   ├── pages              页面文件夹（完整页面）
|   |   ├── index.wpy      页面 index
|   |   └── page.wpy       页面 page
|   └── app.wpy            小程序配置项（全局样式配置、声明钩子等）
└── package.json           package 配置

支持props、data、computed、components、methods、watch（wepy中是watcher）， 但wepy中的methods仅可用于页面事件绑定，其他自定义方法都要放在外层，而VUE中所有方法均放在 methods下

wepy中props传递需要加上.sync修饰符
props后要执行this.$apply()方法才能更新

wepy支持数据双向绑定
子组件在定义props时加上twoway:true属性值即可实现子组件修改父组 件数据

推荐使用eventBus方式进行组件通信，而在wepy中是通过broadcast，emit，$invoke 三种方法实现通信

wepy仅支持小程序的生命周期：onLoad、onReady等

lang决定了其代码编译过程，src决定是否外联代码，存在src属性且有效时，会忽略内联代码

普通组件引用

<template>
    <!-- 以`<script>`脚本部分中所声明的组件ID为名命名自定义标签，从而在`<template>`模板部分中插入组件 -->
    <child></child>
</template>
<script>
    import wepy from 'wepy';
    //引入组件文件
    import Child from '../components/child';
    export default class Index extends wepy.component {
        //声明组件，分配组件id为child
        components = {
            child: Child
        };
    }
</script>

组件的循环渲染

<template>
    <!-- 注意，使用for属性，而不是使用wx:for属性 -->
    <repeat for="{
   {list}}" key="index" index="index" item="item">
        <!-- 插入<script>脚本部分所声明的child组件，同时传入item -->
        <child :item="item"></child>
    </repeat>
</template>
<template>
<repeat for="{
   {banners}}">
<child :item="item"></child>
<repeat>
</template>

computed 计算属性
watcher 监听器

data = {
      a: 1
  }
  // 计算属性aPlus，在脚本中可通过this.aPlus来引用，在模板中可通过{
   { aPlus }}来插值
  computed = {
      aPlus () {
          return this.a + 1
      }
  }
data = {
      num: 1
  }
  // 监听器函数名必须跟需要被监听的data对象中的数值属性num同名，
  // 其参数中的newValue为数值属性改变后的新值，oldValue为改变前的旧值
  watch = {
      num (newValue, oldValue) {
          console.log(`num value: ${oldValue} -> ${newValue}`)
      }
  }
  // 每当被监听的数值属性num改变一次，对应的同名监听器函数num()就被自动调用执行一次
  onLoad () {
      setInterval(() => {
          this.num++;
          this.$apply();
      }, 1000)
  }

emit emit与broadcast正好相反，事件发起组件的所有祖先组件会依次接收到emit事件。

比如，想在页面Page_Index中调用组件ComA的某个方法：
this.$invoke('ComA', 'someMethod', 'someArgs');
1
如果想在组件ComA中调用组件ComG的某个方法：
this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');
.default: 绑定小程序冒泡型事件，如bindtap，.default后缀可省略不写；
.stop: 绑定小程序捕获型事，如catchtap；
.user: 绑定用户自定义组件事件，通过$emit触发。
// index.wpy
<template>
    <child @childFn.user="parentFn"></child>
</template>
<script>
    import wepy from 'wepy'
    import Child from '../components/child'
    export default class Index extends wepy.page {
        components = {
            child: Child
        }
        methods = {
            parentFn (num, evt) {
                console.log('parent received emit event, number is: ' + num)
            }
        }
    }
</script>
// child.wpy
<template>
    <view @tap="tap">Click me</view>
</template>
<script>
    import wepy from 'wepy'
    export default class Child extends wepy.component {
        methods = {
            tap () {
                console.log('child is clicked')
                this.$emit('childFn', 100)
            }
        }
    }
</script>
// mixins/test.js
import wepy from 'wepy';
export default class TestMixin extends wepy.mixin {
    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.page {
    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.
    }
}

请点赞！因为你的鼓励是我写作的最大动力！

吹逼交流群：711613774