微信小程序&常用场景记录开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到

逻辑层

开发者写的所有代码最终将会打包成一份 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调起
webview 可以打开已关联微信公众号的页面链接
小程序内嵌h5 ，提供原生小程序的能力，给到h5 调用本身已经有JSSDK可用。 developers.weixin.qq.com/miniprogram…

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

如何制作一个全屏视频H5

主要讲一下几个关键点

一、视频内联播放。

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

二、视频去控件。

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

三、去控件全屏播放。

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

四、视频自动播放。

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

五、黑屏问题。

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

六、其他属性和方法。

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

tips

（1）开发者工具1.05.2103022版本开始支持getUserProfile接口调试；
（2）开发者调用wx.login获取的登录凭证可以直接换取unionID；
（3）若开发者调用wx.authorize接口请求scope.userInfo授权，用户侧不会触发授权弹框，直接返回授权成功；
（4）若开发者调用wx.getSetting接口请求用户的授权状态，会直接读取到scope.userInfo为true；
（5）新增了获取用户信息的接口getUserProfile，需用户手动点击页面触发弹窗再授权，即开发者每次通过该接口均需用户确认；
（6）要在界面中展示用户的头像昵称信息，可以通过组件进行渲染，该组件无需用户确认，可以在界面中直接展示

常用操作：

style="padding-bottom:{{ isIphoneXClass ? '68rpx' : '20rpx' }}"
class="left-icon {{shopInfo.contactNumbers.length == 0 ? 'no-margin':''}}"
style="top:{{navH}}px"
wx:if="{{}}"
 <view class="logo-item" wx:for="{{shopInfo.shopImage}}" wx:key="index">
 bind:tap="previewImage" data-url="{{item}}"
 previewImage(e) {
    let url = e.currentTarget.dataset.url
    wx.previewImage({
      urls: this.data.shopInfo.shopImage,
      current: url
    })
}

web-view组件内嵌普通H5只支持识别小程序码 web-view组件内嵌公众号文章只支持识别小程序码和公众号二维码