前端技术前沿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>

image.png

<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: 页面数组--(小程序可单独有自己的配置、样式、逻辑文件,还有一个页面结构文件)

image.png

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.
    }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券