微信小程序

bindtap 点击触发事件

微信相关事件

路由方式

wx.navigatorTo当前页面跳转。不能跳转tabbar中的内容

<navigator open-type="navigatorTo">也可以进行跳转

redirectTo 重定向 navigatorback返回 relanch重新启动

switchTab 是tab按钮切换

使用less的方法

小程序中快速使用less: juejin.cn/post/685664…

微信授权

getUserProfile

选择器

developers.weixin.qq.com/ebook?actio…

模板的引用

import引入的是template语法，在data中进行参数传递

<import src="./template.wxml"></import> 
-------------------文件内容----------------------
<block wx:for="arrayObj">
  <template is="msgItem{{index+1}}" data="{{...item}}"></template>
</block>

include引入除了template和wxs外的代码，复制功能

<include src="./include.wxml"/>
----------------include文件内容--------------------
<text>include的文件</text>

wxs页面

<wxs src="./wxs1.wxs" module="wxs1"></wxs>
<view>{{wxs1.foo}}</view>

----------------wxs文件内容--------------------
var foo ='hello world from wxs1.wxs'
var bar = function(b){
  return b
}
module.exports = {
  foo: foo,
  bar: bar,
}

小程序开发中的各个事件

1. 绑定并阻止事件冒泡
   middle view点击handleTap2触发，handleTap1是不会触发

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
  </view>
</view>

2. 默认绑定绑定事件

<view bindtap="handleTap">
    Click here!
</view>

3. 互斥事件绑定
   一个 mut-bind触发，事件冒泡的过程中 mut-bind不会触发，bind和catch依旧触发

<view id="outer" mut-bind:tap="handleTap1">
  outer view
  <view id="middle" bindtap="handleTap2">
    middle view
  </view>
</view>

4. 事件的捕获阶段 capture-bind、capture-catch（会中断事件捕获和事件冒泡）下面的过程只会触发handleTap2

<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

小程序开发到优化的整个流程

双向数据绑定

1.当前路由页面

<input model:value="{{value}}" />

2.组件内部

<input model:value="{{myValue}}" />
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    myValue: String
  },
})
—---------------------父组件中使用--------------------
首先在对应父组件json文件中注册
"usingComponents": {
    "custom-component": "../components/input/input"
}
 对应的wxml文件引用
 <custom-component model:my-value="{{pageValue}}" />

节点查找

自定义组件

1.component构造器：不同的组件在生命周期中执行相同的方法函数

module.exports = Behavior({
  attached: function() {
    // 页面创建时执行
    console.info('Page loaded!')
  },
  detached: function() {
    // 页面销毁时执行
    console.info('Page unloaded!')
  }
})
-------------------a页面----------
var pageCommonBehavior = require('./page-common-behavior')
Component({
  behaviors: [pageCommonBehavior],
  data: { /* ... */ },
  methods: { /* ... */ },
})

2.组件间通信 父子组件

父组件
<component-tag-name bindmyevent="onMyEvent" />
子组件
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>
Component({
  properties: {},
  methods: {
    onTap: function(){
      var myEventDetail = {} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

父组件获取子组件实例:如下获取子组件class为my-component的实例

getChildComponent: function () {
const child = this.selectComponent('.my-component');
console.log(child)
}

声明周期

组件的生命周期 created 、attached、ready、move、 detached、error 组件在页面中的周期 show、hide、resize

和普通的h5的差异

1.promise的回调不在属于异步的任务 2.运行在自己的环境中，开发者只需要使用相关的api 3.js部分不支持。async await和 扩展运算符