微信小程序入门指南

什么是 flex 布局？

物理像素

设备独立像素 & css 像素

dpr 比 & DPI & PPI

viewport 适配

• 1 为什么做 viewport 适配
  
  • a) 手机厂商在生产手机的时候大部分手机默认页面宽度为 980px
  • b) 手机实际视口宽度都要小于 980px，如: iphone6 为 375px
  • c) 开发需求： 需要将 980 的页面完全显示在手机屏幕上且没有滚动条
• 2 实现：
  

  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  

rem 适配

• 1 为什么做 rem 适配
  
  • a) 机型太多，不同的机型屏幕大小不一样
  • b) 需求： 一套设计稿的内容在不同的机型上呈现的效果一致，根据屏幕大小不 同的变化，页面中的内容也相应变化
• 2 实现：
  

  function remRefresh() {
      let clientWidth = document.documentElement.clientWidth;
      // 将屏幕等分 10 份
      let rem = clientWidth / 10;
      document.documentElement.style.fontSize = rem + 'px';
      document.body.style.fontSize = '12px';
  }
  window.addEventListener('pageshow', () => {
      remRefresh()
  })
  // 函数防抖
  let timeoutId;
  window.addEventListener('resize', () => {
      timeoutId && clearTimeout(timeoutId);
      timeoutId = setTimeout(() =>{
  	remRefresh()
      }, 300)
  })
  
  

第三方库实现

lib-flexible + px2rem-loader

全局配置： app.json

App

Page

修改数据

this.setData({message: ‘修改之后的数据’}, callback)

事件分类

• 冒泡事件
  
  • a) 定义：冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
  • b) 冒泡事件列表：地址连接
• 非冒泡事件：
  
  • a) 定义：当一个组件上的事件被触发后，该事件不会向父节点传递。
  • b) 非冒泡事件：表单事件和自定义事件通常是非冒泡事件

绑定事件

• bind 绑定
  
  • 事件绑定不会阻止冒泡事件向上冒泡

  <view bindtap="handleTap" class='start_container'>
   <text class='start'>开启小程序之旅</text>
  </view>
  
  

• catch 绑定
  
  • 事件绑定可以阻止冒泡事件向上冒泡

  <view catchtap="handleTap" class='start_container'>
   <text class='start'>开启小程序之旅</text>
  </view>
  
  

向事件对象传参

语法说明

注意事项

语法说明

wx:if VS hidden

对应阶段说明

• onLoad(Object query)
  
  • 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
• onShow()
  
  • 页面显示/切入前台时触发
  • 会执行多次
• onReady()
  

  -页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

• onHide()
  
  • 页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。
• onUnload()
  
  • 页面卸载时触发。如 wx.redirectTo 或 wx.navigateBack 到其他页面时。

界面交互

路由跳转

网络请求

本地存储

1. 除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用
2. 单个 key 允许存储的最大数据长度为 1MB
3. 所有数据存储上限为 10MB

媒体

首次登陆获取

为什么要分包

分包形式

• 常规分包
  

  1. 开发者通过在 app.json subpackages 字段声明项目分包结构
  2. 特点：
    a) 加载小程序的时候先加载主包，当需要访问分包的页面时候才加载分包内容
    b) 分包的页面可以访问主包的文件，数据，图片等资源
    c) 主包：
    i. 主包来源： 除了分包以外的内容都会被打包到主包中
    ii. 通常放置启动页/tabBar 页面
  

• 独立分包
  

  1. 设置 independent 为 true
  2. 特点:
    a) 独立分包可单独访问分包的内容，不需要下载主包
    b) 独立分包不能依赖主包或者其他包的内容
  3. 使用场景
    a) 通常某些页面和当前小程序的其他页面关联不大的时候可进行独立分包
    b) 如：临时加的广告页 || 活动页
  

• 分包预下载
  

  1. 配置
    a) app.json 中设置 preloadRule 选项
    b) key(页面路径): {packages: [预下载的包名 || 预下载的包的根路径])}
  
  2. 特点:
    a) 在加载当前包的时候可以设置预下载其他的包
    b) 缩短用户等待时间，提高用户体验
  

分享实现

自定义分享内容

设置体验权限