Person Record

# 1. 原生开发遗忘点

  1. 捕获先于冒泡执行

  2. capture-catch关键字将中断捕获阶段和取消冒泡阶段。

  3. :host 选择器指组件和slot中的内容

  4. 小程序中插槽内容的顺序由父组件写的顺序决定，vue 中的插槽内容由子组件内部决定

  5. 小程序的动态类

class=“test-{{test}}”

  1. template中用到是wxss需在主要的入口wxss文件中通过@import引入，要wxss后缀， 应用写好的template通过imort标签 src输入路径，不需要wxml后缀

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

  3. pages数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

  4. url 用的都是想对路径

// 走onUnload钩子 不走onHide钩子
wx.redirectTo({
  url: '../posts/posts',
})
// 当前页面不走onUnload钩子 走onHide钩子，跳转到的页面走onLoad钩子
wx.navigateTo({
  url: '../posts/posts',
})
wx.navigateTo({
  url: `../posts/posts?type=${type}`,
})

switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。switch首次跳转的页面先走onLoad，其它切换走onShow onHide钩子。

  1. 事件不能绑定到template标签上，因为该标签编译后不存在，相当于占位符。

  2. target:触发事件的源组件。currentTarget:事件绑定的当前组件。

  3. onLoad 一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。如果在onLoad方法中，不是异步的去执行一个数据绑定，则不需要使用this.setData方法，只需要对this.data赋值即可实现数据绑定。

  4. removeStorage 清除单个，clearStorage清除所有缓存。

  5. 如果采用同步的话，数据量大用异步，数据量小用同步

  6. 每次进入页面都会执行onShow方法

  7. 调试技巧：在调试窗口ctrl+p快速找到文件并且在sm文件里面打断点

  8. 模板中的路径用绝对路径比较好

18.tabbar出现的顺序跟app.json中的list顺序关联

  1. 在开发者工具的app.json中pages数组直接定义页面可以快速的新建对应的文件。

  2. text标签要设置文本溢出

在单行要添加display:block样式，多行要添加display:-webkit-box样式， 限定行数溢出隐藏的关键 css 代码

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
  1. 触发事件 this.triggerEvent，监听事件bind，自定义组件可以绑定自定义事件和原生事件
backgroundAudioManager.onEnded(() => {
  this.triggerEvent('musicEnd')
})

<x-progress bind:musicEnd="onNext"></x-progress>
<x-lyric isLyricShow="{{isLyricShow}}" bind:tap="toggleLyricShow"></x-lyric>

  1. 组件里面的跳转路径都从根路径开始写可以保证每个页面跳转都正确（建议不用相对路径）

  2. ctrl+alt+q 快速新建页面的所有钩子

  1. ws:key可以自动获取循环数组对象里面的property,如下,url 为 item 里面的一个属性
<block wx:for="{{swiperUrls}}" wx:key="url">
  <swiper-item class="swiper-item">
    <image src="{{item.url}}" mode="widthFix" class="swiper-img" />
  </swiper-item>
</block>
  1. 小程序云函数的参数 evnet 里默认包含 userInfo,包含内容如下：
const {
  userInfo: { appId, openId },
} = event

  1. 小程序中所有的自定义属性都是data-开头

  2. 小程序中类似 Vue 利用 ref 选中组件用 selectComponent，selectComponent为小程序自带方法，可以获取 dom 元素，示例代码如下

<x-progress bind:musicEnd="onNext" bind:timeUpdate="timeUpdate"></x-progress>

// update 为另外一个组件中定义好的方法
timeUpdate(event) {
  this.selectComponent('.xlyric').update(event.detail.currentTime)
},
  1. 小程序自带方法还有createSelectorQuery
getMovableDistance() {
  const query = this.createSelectorQuery()
  query.select('.movable-area').boundingClientRect()
  query.select('.movable-view').boundingClientRect()

  query.exec(rect => {
    movableAreaWidth = rect[0].width
    movableViewWidth = rect[1].width
  })
}

  1. 小程序中不同的组件间传值通过app.js中定义全局属性

  2. 小程序定义在 components 文件夹中的组件自带样式隔离，类似 Vue 中的 scoped，使用外部样式的 3 种方式

  • 可配置externalClasses选项传入外部定义的样式类名
properties: {},
externalClasses: ['iconfont', 'icon-sousuo'],
  • 配置 options
options: {
    styleIsolation: 'apply-shared',
  },
  • 组件内定义同样的样式文件通过@import引入

  1. dom 显示隐藏由hidden/wx:if控制，结果同 Vue 中的v-show/v-if

  2. 使用多个slot需要配置 multipleSlots,如下,渲染 dom 的顺序由组件内定义的slot顺序决定

options: {
    styleIsolation: 'apply-shared',
    multipleSlots: true,
  }

  1. 小程序可以修改 properties中定义的值

  2. 小程序原生组件绑定事件 bind 后面不需要冒号，否则绑定不上，如textarea

  3. 小程序绑定事件 catch/bind 的区别，·catch不冒泡，bind冒泡

  4. 获取页面栈用getCurrentPages，如下

const curPages = getCurrentPages()
const prev = curPages[curPages.length - 2]
prev.onPullDownRefresh()
  1. 小程序实现分享功能必须用button按钮
<button open-type="share"></button>

  1. 小程序背景图片不能使用本地图片，只能使用网络图片或者本地图片转成 base64

  2. createSelectorQuery或者DOM元素，selectComponent获取自定义组件实例

2. 小程序云开发 →