微信小程序&常用场景记录

逻辑层

开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到小程序销毁。 在 JavaScript 的基础上，我们增加了一些功能，以方便小程序的开发：

• 增加 App 和 Page 方法，进行程序注册和页面注册。
• 增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
• 提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
• 提供模块化能力，每个页面有独立的作用域。

整个小程序只有一个App 实例，是全部页面共享的。

const appInstance = getApp()
appInstance.XXX

在基础库2.9.2 版本上，新增类似"mixins"的behaviors 让多个页面有相同的数据字段和方法。

• app() 注册小程序
• page() 注册页面
• component 构造器构造页面 （Component 构造器的主要区别是：方法需要放在 methods: { } 里面）

与 CSS 相比，WXSS 扩展的特性有：

• 尺寸单位
• 样式导入

wxss 支持的选择器有.class #id element, element ::after ::before

禁用某类事件

<view bindtap="{{ handlerName }}">
    Click here!
</view>

页面的 this.data.handlerName 必须是一个字符串，指定事件处理函数名；如果它是个空字符串，则这个绑定会失效（可以利用这个特性来暂时禁用一些事件）。 自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项

Component({
  properties: {},
  methods: {
    onTap: function(){
      var myEventDetail = {} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

组件生命周期

最重要的生命周期是 created attached detached ，包含一个组件实例生命流程的最主要时间点.

• 组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
• 在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
• 在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

组件间的关联, 需加入relations定义段

<custom-ul>
  <custom-li> item 1 </custom-li>
  <custom-li> item 2 </custom-li>
</custom-ul>

纯数据字段 纯数据字段是一些不用于界面渲染的 data 字段，可以用于提升页面更新性能 2.8.2开始支持

_b: true, // 纯数据字段

开发第三方自定义组件

kbone

自定义 tabBar 在2.5.0之后开始支持

<template is="msgItem" data="{{...item}}"/>

• 传递的类名，不能层叠组件里的子元素样式。

小程序常用场景记录

• 微信公众号推文

• 用户短信通知

• 用户微信分享

• 小程序h5方案

• 推荐关联公众号

• ios new Date('2019-10-30') 兼容问题，需要处理成.replace(/-/g, '/')

• 小程序的h5 页面title 设置需在create 生命周期内

• 微信扫一扫h5 页，可以跳到小程序 （在小程序后台配置url）

• 小程序拉起导航 导航是跳外部的App，小程序官网有api调起

• 小程序内嵌h5 ，提供原生小程序的能力，给到h5 调用 本身已经有JSSDK可用 。

developers.weixin.qq.com/miniprogram…

如何制作一个全屏视频H5 ？

如何制作一个全屏视频H5

主要讲一下几个关键点

一、视频内联播放。

	-- 想要营造一种文字与视频混排的现象，视频不要影响其他模块 

二、视频去控件。

    -- 交互视频，不能点击快/慢进或暂停哦 

三、去控件全屏播放。

    -- 想要模拟 明星给我打电话的体验，不能看到明显的视频播放器 

四、视频自动播放。

    -- 想要释放用户操作，打开链接就自动播放 

五、黑屏问题。

   -- 开始播放时，有一段黑屏时间，不能无缝衔接 

六、其他属性和方法。

   -- 喜欢一个技术，就要了解“她”的全部，这些你也看看呗