夏之一周间

微信小程序

开发简介

  • 微信开放平台open in new window

    • 对外提供接口，供第三方的网站和APP使用
    • 包括但不限于：微信分享/微信支付/微信登录/微信收藏

  • 小程序open in new window

    • 基于微信公众号进行的开发
    • 订阅号：偏于为用户传达资讯，类似报纸杂志； 发送简单的消息
    • 服务号：偏于服务交互，类似银行、114； 提供更多服务
    • 小程序：一种新的开放能力，具有类似app的体验
    • 企业微信：企业的专业办公管理工具；

基础知识

移动端布局

  • 物理像素

    • 屏幕显示的最小颗粒，屏幕的分辨率，是厂商设置好的真实像素。如750*1334

  • 设备独立像素 & CSS像素

    • 代表计算机中可以由程序使用并控制的 虚拟像素

  • dpr：物理像素比

    • 物理像素/虚拟像素 的值，1px能显示的物理像素点个数

    • 例：iphone6 dpr 为2 实际宽750 使用时350

    • 视网膜屏幕是分辨率超过人眼识别极限的高分辨率屏幕，营销术语。

      Iphone4的dpr = 2; 人类肉眼分辨的极限

  • PPI: 一英寸显示屏上的像素点个数

  • DPI：最早指的是打印机在单位面积上打印的墨点数，墨点越多越清晰

  • 视口概念

    • 视觉视口，屏幕窗口的大小

    • 布局视口，网页的宽度

    • 完美视口 || 理想视口，让视觉视口 = 布局视口

      <!--
width:设置理想视口viewport的宽度
initial-scale:初始缩放比例，大于0的数字
maximum-scale:最大缩放比例，大于0的数字
minimum-scale:最小缩放比例，大于0的数字
user-scalable:用户是否可以缩放，yes或no(0或1)
-->
<meta name='viewport' content='width=device-width,initial-scale=1.0'>

  • flex布局

  • 第三方库实现：lib-flexible + px2rem-loader

  • rem布局

    • 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)
})

IMG_20230215_183849

创建项目

  • 通过微信开发者工具创建项目，AppID在官网查看
  • 存放路径必须为空目录
  • 创建自己的小程序（不使用云开发）
    • pages目录上右键，创建新建文件夹并重命名
    • 新文件夹右键-新建page，会自动创建页面相关的文件；
    • 项目根目录，app.json(全局配置文件)
      • 其中pages节点是一个数组，存储页面的访问路径，
      • 第一个页面路径，就是小程序默认的项目首页；
      • 修改pages数组中的路径顺序即可；
  • 创建自己的小程序（云开发）
    • cloudfunctions 云函数
    • miniprogram的pages中会生成一些默认的界面，如果不需要可以直接删除
    • 点击 云开发 按钮，进行相关内容设置
      • 云函数-- 创建云函数 -- cloudfunctions文件夹右键-- 同步云函数列表 -- 开启云函数本地调试
      • 云函数相当于创建了 Node服务，可以直接写node的代码！
      • 理念：用小程序的方法 —> 请求云函数(包装过的Node服务)，获取数据。

项目结构

  • .wxml 结构：用来描述当前页面的结构，同时提供了类似vue指令的语法；
  • .wxss 样式：用于定义样式，美化当前页面；
  • .js 逻辑：用于定义当前页面中的数据、交互逻辑、响应用户的操作；
  • .json 配置：用来定义界面的个性化配置；例：为每个页面单独配置顶部颜色、是否允许下拉刷新等。。

image-20220531173643489

小程序特点

  • 小程序要求压缩包的体积不能大于2M，否则无法通过审核
  • 没有DOM(不遵守W3C的语法规范)
  • 事件分为
    • 冒泡事件：会向父节点传递
    • 非冒泡事件

小程序配置

  • 全局配置

    {
   // 项目根目录下的 app.json文件  
   // pages 将所有使用的页面配置在pages中
  "pages": [
     // 第一个页面作为首页默认显示
    "pages/shouYe/shouYe",
    "pages/qita/qita",
    "pages/wode/wode",
    "pages/home/home"
  ],
   // window 用于设置小程序的状态栏、导航条、标题、窗口背景色。
   "window": {
    "backgroundTextStyle": "light",  // 下拉 loading的样式，仅支持 dark / light
    "navigationBarBackgroundColor": "#fff", // 顶部背景颜色
    "navigationBarTitleText": "女小开的实验", // 顶部标题
    "navigationBarTextStyle": "black", // 顶部字体颜色
    "backgroundColor": "#b1b4be",   // 窗口的背景色
    "enablePullDownRefresh": true,  // 是否开启全局的下拉刷新。
  },
}

  • project.config.json

    • 配置文件，可以通过点击右上角详情，进行可视化的配置

  • sitemap.json 配置

    • 用来配置小程序及其页面是否允许被微信索引，类似于SEO

  • app.wxss

    • 样式为公共样式

  • app.js

    • 注册小程序：App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。接受一个 Object 参数，其指定小程序的生命周期回调等。

    • 可以通过 getApp 方法获取到全局唯一的 App 实例，App上的数据和函数由所有界面共享。

    • // app.js
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: {
      a:12
  }
})

// xxx.js
const b = getApp()
console.log(appInstance.globalData.a=1) // I am global data

事件open in new window

  • tap事件相当于 click点击

  • longtap事件 长按触发

  • 绑定事件方式

    • bind ：默认的冒泡事件

    • catch ：阻止事件向上冒泡。

    • capture-bind ：在捕获阶段监听事件

    • capture-catch ：中断捕获阶段和取消冒泡阶段。

      • 触摸类事件支持捕获阶段，且捕获阶段位于冒泡阶段之前

    • mut-bind ：互斥事件

      • 一个 mut-bind 触发后，如果事件冒泡到其他节点上，其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发。所有 mut-bind 是“互斥”的，只会有其中一个绑定函数被触发，并不影响 bind 和 catch 的绑定效果。
    • <!-- 直接在组件标签中写 bind+事件类型 ="事件名"  -->
<view catchlongtap="事件名">hello word！</view>

事件名(){}

  • 事件类型分类

    1. 冒泡事件

      1. 其实就是原生事件机制中的冒泡阶段的事件
      2. 语法:bind+事件名称="事件回调函数名称"
      3. bind其实就相当于Vue中的@符号,用来声明绑定事件
      4. 注意:小程序的事件回调函数声明位置与生命周期同级

    2. 非冒泡事件（阻止事件冒泡阶段）

      1. 语法:catch+事件名称="事件回调函数名称"
      2. 注意:阻止冒泡之后,当前节点的事件回调函数依旧会执行,只是后续的节点的事件不会再被触发

    3. 捕获事件

      1. 其实就是原生事件机制中的捕获阶段的事件
      2. 语法:capture-bind+":"+事件名称="事件回调函数名称"
      3. 注意:绑定事件的时候一定要加上冒号,不能省略,绑定冒泡事件时,可以简写冒号

    4. 非捕获事件（阻止事件捕获阶段）

      1. 语法:capture-catch+":"+事件名称="事件回调函数名称"

    5. 总结

      1. 如果面试遇到询问事件回调函数的触发顺序,首先要注意的是所有事件所处的事件阶段,在观察每个节点的DOM嵌套结构
      2. 优先级:事件阶段>DOM嵌套层级
      3. 除了React的合成事件外，学习到的所有事件名都是小写

  • image-20220621001040706

组件和 API

  • 组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之间；类似于HTML标签
    • 组件名和属性名都是小写;
    • 例： <button type="primary">绿色按钮</button>
  • API（应用程序编程接口），是一些预定义的函数，
    • 事件监听API
      • 特点：以on开头，监听某个事件是否触发；
      • 例：wx.onNetworkStatusChange(function callback) //当网络状态更改时触发此事件
    • 同步API
      • 特点：以Sync结尾的api；执行结果通过函数返回值获取；
      • 例：获取电池信息
    • 异步api：
      • 特点：通常需要指定回调函数接收调用的结果；大多属于异步api
      • 例:发起HTTPS网络请求

UI组件

常见组件

text 文本

  • 行内标签，相当于span ，属于行内标签；；可以设置是否能被选中；；空格和编码的显示方式；

  • <text selectable='true'>这是文本标签</text>
  • 属性名类型默认值说明
    user-selectbooleanfalse文本是否可选，该属性会使文本节点显示为 inline-block
    spacestring是否显示连续空格; ensp:英文空格 emsp:中文空格 nbsp：字体长度
    decodebooleanfalse是否解码
view 容器

  • 块级标签，相当于div，可以设置点击的相关样式属性

  • <!--  对应wxss中定制hc1样式： .hc1 { background-color : red; }   -->
<view hover-class='hc1'>独占一行的标签，类似于div</view>

  • 属性 hover-start-time、hover-stay-time 的值不能带单位；

  • 属性类型默认值说明
    hover-classstringnone指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
    hover-stop-propagationbooleanfalse指定是否阻止本节点的祖先节点出现点击态
    hover-start-timenumber50按住后多久出现点击态，单位毫秒
    hover-stay-timenumber400手指松开后点击态保留时间，单位毫秒
image 图片

  • 双标签，因为微信小程序的文件大小限制，一般使用网络地址的图片

  • image组件，默认宽度300px；高度225px；

  •  <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>
    属性类型默认值说明
    srcstring图片资源地址，支持本地/网络地址
    modestringscaleToFill支持图片剪切、缩放模式，具体配置查官网
    webpbooleanfalse默认不解析 webP 格式，只支持网络资源
    lazy-loadbooleanfalse图片懒加载，在即将进入一定范围（上下三屏）时开始加载
    binderroreventhandle当错误发生时触发，event.detail = {errMsg}
    bindloadeventhandle当图片载入完毕时触发，event.detail = {height, width}
    show-menu-by-longpressbooleanfalse长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。
button 按钮

禁用的按钮显示灰色，不可点击；

input 输入框

  • disabled禁用后，显示灰色，无法输入

  • <input value='abc'></input>    <!-- 输入的默认值 -->
<input placeholder='请输入内容'></input>  <!-- 提示文本，输入内容后消失 -->

  • image-20220531194349625

video视频

特别点：

  • 直接通过动态绑定src实现视频切换，可能会出问题
  • 使用单个video标签，实现播放多个不同的视频时，无法实现视频的预加载，可能会导致切换时的卡顿，影响体验。
    • 解决思路1：
      • 循环生成多个video，通过z-index控制显示层级 及 视频的播放与暂停
      • 当切换时，视频暂停，回来时，继续播放，视频循环播放

列表渲染

  • wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 inputopen in new window 中的输入内容，switchopen in new window 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

  1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
  2. 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略

<!-- wx:key="unique"   这里的unique 是没有西昂 -->
<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>

<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>

wxss样式

wxss 具有css大部分特性；与css书写基本一致；对css 进行了扩充和修改；

rpx单位

  • responsive pixel 响应式像素单位 ，微信小程序独有 rpx
  • 规定任何屏幕下的宽度固定为 750rpx，100vw = 750rpx
  • iphone6 下 1px=2rpx

书写样式

  • page{} 为页面最外层标签，类似于html
  • 除app.wxss外的wxss文件都只在当前界面生效，相当于vue中的 scoped

js逻辑

  • 配置 数据 、方法

  • // 在js文件中创建Page,并传入对象
let options = {
   // data配置数据，底层做了深拷贝，因此不需要使用vue中函数的形式
   data:{
      msg:'微信小程序实验',
      id:123456,
      isif:false,
      gender:'男',
      lis:['周董','杰伦','稻香']
   },
   // wxml中使用的方法可以直接配置
   addStar(){
      // 可以通过 this.data.lis 读取到数据，但只读！
      this.data.lis.push('张碧晨');   // 这样直接修改数据无效！结合setData方法修改。
      console.log(this.data.lis);
      
      // 修改数据，借助 setData方法
      this.setData({
         lis:this.data.lis
      })
   },
   goIndex(){
      // 实现界面跳转
      w.navigateTo({
         // 配置绝对路径,以项目根目录为准
         url:'/pages/index/index'
      })
   }
}
Page(options);


    <!-- 在wxml页面中使用数据，与Vue模板语法类似，但可用于 属性+标签体 -->
<view>{{msg}}</view>
<view id='{{id}}'>绑定属性渲染</view>

<view wx:if='{{isif}}'>条件渲染，类似v-if,false不显示</view>
<view wx:if='{{!isif}}'>条件渲染，类似v-if，true显示</view>
<view wx:else>条件渲染，上级都不显示时，显示该项</view>

<view wx:if='{{gender=="男"}}'>条件渲染，if 男神</view>
<view wx:elif='{{gender=="女"}}'>条件渲染，else if 女神</view>
<view wx:else>条件渲染，上级都不显示时显示 人类</view>

<!-- 循环渲染，默认 index为索引值  item为每一项  -->
<!-- 和vue一样需要设置key，不需要要括号  -->
<view wx:for="{{lis}}" wx:key='index'>{{index}} -- {{item}}</view>
<!-- 手动设置 默认的index、item别名   -->
<view wx:for="{{lis}}" wx:key='index' wx:for-item='aaaa'  wx:for-index='idx'>
   {{idx}} -- {{aaaa.b}}
</view>

<!-- bindtap 绑定tap事件，即移动端的用户点击事件   addStar是自定义事件名 -->
<button bindtap="addStar">添加明星</button>
<button bindtap="goIndex">添加明星</button>

getApp()

  • 获取到小程序全局唯一的 App 实例。

  • 注意：

    • 不要在定义于 App() 内的函数中，或调用 App 前调用 getApp() ，使用 this 就可以拿到 app 实例。
    • 通过 getApp() 获取实例之后，不要私自调用生命周期函数。
  • var appInstance = getApp()
console.log(appInstance.globalData) // I am global data

数据请求

  1. 语法:
    1. API:wx.request(配置对象)
    2. 配置对象必传url属性,默认请求方式为GET请求
    3. url属性必须完整书写,必须写清楚请求的地址,请求的路由
  2. 所需做的配置
    1. 项目准备上线
      1. 位置:登录微信公众平台->开发->开发管理->开发设置->找到服务器域名配置
      2. 将项目上线之后需要请求的域名提前配置在request域名中
    2. 项目正在开发
      1. 位置:微信开发者工具->详情->本地设置->勾选"不校验合法域名"
      2. 只要勾选该按钮,在开发过程中就不需要担心发送请求域名报错问题
  3. 注意点:
    1. 小程序必须使用 HTTPS/WSS 发起网络请求
    2. 小程序只能跟提前配置好的域名进行通信
    3. 网络接口允许与局域网 IP 通信，但要注意 不允许与本机 IP 通信
    4. 在微信开发者工具中，可以临时开启 开发环境不校验请求域名、TLS版本及 HTTPS 证书 选项，跳过85服务器域名的校验。此时，在微信开发者工具中及手机开启调试模式时，不会进行服务器域名的校验。
    5. 默认超时时间和最大超时时间都是 60s
      1. 超时时间可以在 app.json 中通过 networktimeout 配置
    6. wx.requestopen in new window、wx.uploadFileopen in new window、wx.downloadFileopen in new window 的最大并发限制是 10 个,Chrome和FireFox发送请求的最大并发限制为6个
      • 如果发送的请求数量大于最大并发限制,那么前几个请求会发送出,剩余请求会暂停发送,等待前面请求成功响应
    7. wx.connectSocketopen in new window 的最大并发限制是 5 个。
    8. 小程序进入后台运行后，如果 5s 内网络请求没有结束,会自动变为失败
    9. 只要成功接收到服务器返回，无论 statusCode 是多少，都会进入 success 回调

路由跳转?

  1. VueRouter的作用：用于实现单页面应用(SPA)

    1. 问题:什么是单页面应用?
      1. 一个项目只有一个html文件,就是单页面应用
      2. 单页面应用就是在一个html文件上,使用原生DOM的CRUD的API对其页面结构进行修改,实现不同内容之间的切换,但是不会发送任何的请求去获取新的html文件

  2. VueRouter的路由跳转

    1. 声明式导航
      1. router-link
      2. 默认生成a标签,当用户点击该标签时,会实现路由的跳转
      3. 定义:通过标签形式,引导用户进行跳转,就可以成为声明式导航
    2. 编程式导航
      1. $router对象的API
      2. 开发者可以调用$router身上的push,replace,go,back等方法实现路由的跳转
      3. 定义:通过js调用API的形式,控制用户进行跳转,就可以成为编程式导航

  3. 小程序的路由跳转

    1. 声明式导航

      1. 组件:navigator

    2. 编程式导航

      1. wx.navigateTo(配置对象)

        1. 该跳转方式类似于push+keep-alive

        2. 保留当前页面的实例对象，跳转到应用内的某个页面

        3. 路由传参：借助events属性，绑定事件

          如果一个页面由另一个页面通过 wx.navigateToopen in new window 打开，这两个页面间将建立一条数据通道：

          • 被打开的页面可以通过 this.getOpenerEventChannel() 方法来获得一个 EventChannel 对象；
          • wx.navigateTo 的 success 回调中也包含一个 EventChannel 对象。

          这两个 EventChannel 对象间可以使用 emit 和 on 方法相互发送、监听事件。

          • 在新的界面Load声明周期中监听对应事件，得到数据

          • 在界面跳转的成功会回调中触发事件，传递数据

          • wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过 eventChannel 向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})


//test.js
Page({
  onLoad: function(option){
    console.log(option.query)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    // 监听 acceptDataFromOpenerPage 事件，获取上一页面通过 eventChannel 传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
})

      2. wx.redirectTo(配置对象)

        1. 该跳转方法类似于replace，销毁当前页面的实例对象，跳转到应用内的某个页面
        2. redirectTo不会影响到页面栈的层数

      3. 注意：

        • url属性可以写相对路径,相对于当前文件所在的目录
        • url属性可以写绝对路径,绝对路径参考于当前项目根路径
        • url中不要输入文件的后缀名,只需要输入文件的名称即可
        • 小程序中页面栈最多十层,旧版最多五层(相当于keep-alive的max属性写为10)
        • 如果小程序页面栈已经达到十层,此时在使用wx.navigateTo进行跳转,将会失去效果,不会跳转

生命周期

  1. 页面的生命周期一共有5个
  2. 生命周期阶段划分
    1. 进入阶段
      1. onLoad
        1. 当页面开始加载时触发
        2. 类似于Vue的created生命周期
        3. 小总结:如果有些事情在每次创建组件时都要执行,就放在onLoad里面
      2. onShow(任何情况下都会执行)
        1. 当页面开始显示时触发
        2. 类似于Vue的activated生命周期
        3. 小总结:如果有些事情每次进入页面都要执行,就放在onShow里面
      3. onReady
        1. 当页面初次渲染完成时触发
        2. 类似于Vue的mounted生命周期(挂载结束)
        3. 问题:区分挂载和渲染
          1. 挂载->将真实DOM插入到html上
          2. 渲染->将html上的内容绘制到浏览器上
        4. 小总结:如果有些事情在首次渲染组件时都要执行,就放在onReady里面
    2. 离开阶段
      1. onHide
        1. 当页面隐藏时触发
        2. 类似于Vue的deactivated生命周期
        3. 当用户使用wx.navigateTo方法离开当前页面时,当前页面会被缓存隐藏起来,所以会触发onHide生命周期
        4. 当回到之前缓存的页面时,该页面只会执行onShow生命周期
      2. onUnload
        1. 当页面卸载时触发
        2. 当用户使用wx.redirectTo方法离开当前页面时,当前页面会被销毁掉,所以会触发onUnload生命周期
        3. 当重新显示某个页面时,该页面会执行进入阶段的所有生命周期,重新初始化页面
    3. 生命周期图注意点
      1. 根据官网所示生命周期图,在onLoad和onShow执行之后,才会将默认的data数据发送给视图层进行渲染
      2. 实际调试效果是在onLoad中就已经可以看到页面展示的默认数据
      3. 最终,个人认为实际调试效果与官网生命周期图不相符,可能是debugger问题,开发依旧以官网的生命周期图为准

用户授权

  1. image-20220621142818163

  2. 首次登录用户授权

    1. 早期

      1. API:wx.getUserInfo({})
      2. 在小程序早期时,只要调用该API就会弹出授权窗口,找用户获取个人信息

    2. 中期 ——2.21.0

      1. 于21/4/10左右,开始正式废弃,开始使用最新版本
        1. 注意:想要测试该功能,需要将基础库版本调至2.15.0以下
      2. 流程:
        1. 使用button组件，添加标签属性open-type="getUserInfo",实现授权弹窗
        2. 给button组件绑定事件监听,事件名:getuserinfo
        3. 在事件回调函数中,可以通过形参中的detail属性获取到用户相关数据(如果res.detail.userInfo有值就说明用户授权成功)
        4. 将res.detail中的userInfo对象更新到data中
        5. 在wxml中,使用data中的userInfo对象数据进行动态渲染

    3. API: wx.getUserProfile({}) 2.10~2.21

      1. 给页面上的某个组件绑定tap事件

      2. 在事件的回调函数中,调用wx.getUserProfile方法,获取到用户个人信息

      3. 将数据更新到data中进行展示

      4. 注意点:

        1. 该API必须在用户触发tap事件的回调函数中调用才能执行,否则无效
        2. 该API必须在2.15.0版本及以上才能使用
        3. 配置对象中的desc属性必传,否则该API无效
        4. 每次调用该API都会弹出授权窗口,再加上wx.getUserInfo方法已经废弃,所以如果想要实现二次登录免授权功能,就需要在授权成功之后,将用户信息存储到Storage(本地存储)中,在二次登录的时候,读取出来使用

  3. 用户二次登录免授权(又称为静默登录)

    1. 需求:当用户进入首页时,自动获取用户信息,并进行展示
    2. 拆解:
      1. 当用户进入首页时: 触发首页进入阶段的所有生命周期->onLoad
      2. 自动获取用户信息
        1. 使用js的API获取用户信息
        2. API:wx.getUserInfo({})
        3. 注意:该API必须在用户已经经过首次授权逻辑之后才能使用,否则无效
      3. 在页面上进行展示
        1. 将数据更新到data中,wxml就会自动展示最新数据

  4. 奇特的组件

    1. 组件名:open-data
    2. 这个组件很鸡肋,能看不能用,该组件可以显示用户的部分个人信息,但是开发者无法从该组件上提取到数据
    3. 据官网所示,open-data的权限即将被收回,也就是说后面小程序开发,该组件将无法使用

  5. 最新 2.21.0~

网页跳小程序open in new window

小程序跳转小程序

  1. 从当前小程序跳转到另外一个小程序

    1. API:wx.navigateToMiniProgram

    2. 文档位置:API->跳转

    3. 该API需要传递另外一个小程序的appid,才可以实现跳转

      image-20220621182525150

使用插件

  1. 前往fuwu.weixin.qq.com寻找自己想要的插件(开发者资源)

  2. 进入插件详情页面->点击添加插件

  3. 进入微信公众平台后台,可以在设置->第三方设置

  4. 由于当前学习的插件是定位以及城市选择器,所以需要使用到定位功能

    1. 需要申请开启定位功能
      1. 微信公众平台后台->开发->开发工具,点击腾讯位置服务
      2. 扫码授权之后,会自动跳转到腾讯位置服务官网,点击进入控制台(第一次需要注册账号)
      3. 控制台->左侧导航->应用管理->我的应用中,添加新的key值

  5. 在小程序中引入插件

    1. 在app.json中添加一个plugins配置项,用于声明当前项目使用到的插件

      {
  "plugins": {
   "citySelector": {
     "version": "1.0.0",
     "provider": "wx63ffb7b7894e99ae"
   }
 }
}

    2. 在app.json中添加一个permission配置项,用于申请获取用户定位信息

      {
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序定位"
    }
  }
}

  6. 使用插件

    1. 通过某个按钮的点击事件,用于跳转到对应的插件页面

      1.     const key = 'BZ7BZ-QQWCU-DHWV2-BFJJG-B2JZF-KSBT3'; // 使用在腾讯位置服务申请的key
    const referer = '七月入栈'; // 调用插件的app的名称
    const hotCitys = '上海,北京,深圳,泉州'; // 用户自定义的的热门城市

    wx.navigateTo({
      url: `plugin://citySelector/index?key=${key}&referer=${referer}&hotCitys=${hotCitys}`,
    })

    7.获取当前用户选择的城市信息

    ​ 1.引入组件

    const citySelector = requirePlugin('citySelector');

    ​ 1.在当前页面的onShow中,调用该组件的getCity方法获取到用户的选择结果

    const selectedCity = citySelector.getCity();

强制更新

​ 前言:小程序的启动一共分两种,分别是热启动和冷启动

​ 冷启动:根据小程序机制,首次开启的时候,小程序需要初始化渲染

​ 热启动:根据小程序机制,如果用户离开当前小程序不超过5分钟(期间用户的内存足够),再次进入小程序,小程序会保持离开之前的状态,不会关闭

​ 1.获取全局唯一的更新管理器实例

let updateManager = wx.getUpdateManager();

​ 2.绑定checkforupdate事件监听

​ 1.他会不断向微信官方服务器发送请求,检测当前小程序版本是否为最新版本

​ 2.如果出现比本地更新的版本,会自动下载

updateManager.onCheckForUpdate(function (res) {
      // 请求完新版本信息的回调
    //res中的hasUpdate可以知道是否需要更新
      if (res.hasUpdate) {
          //弹窗提示用户
      }
    })

​ 3.绑定updateReady事件,监听小程序更新是否下载完成

 updateManager.onUpdateReady(function () {
     //调用该API实现更新包安装,强制更新
     updateManager.applyUpdate()
    })

​ 注意:一般来说不会直接调用updateManager.applyUpdate(),因为这个代码会直接关闭小程序,并开始更新的安装操作,为了防止用户正在做某些大事,我们一般会友好的弹出窗口提示用户有最新版本,咨询是否更新

背景音乐

image-20220622194828735

image-20220622194924395

技巧

封装函数

  • 代码封装思想：
    • 暴露的内容是个函数，通过形参传入动态变化的数据
// 新建reqjs文件  封装发请求函数
export default function(data={},method="GET"){
  return new Promise((resolve,reject)=>{
      wx.request({
          url:url,
          data,
          method,
          success:(res)=>{
               resolve(res)
          }
       })	
   })
}


// 在其他页面引入并调用
import req from './req.js'

类似template

不显示在页面上的标签

image-20220623002613606

其他

wxss目前支持的选择器

*标签选择器 *id选择器 *class选择器

*伪类选择器 *：nth-of-typr() 等常用的css3选择器

* data-* 属性选择器：//自定义属性，使用属性选择器时，属性必须data-开头；wxcss也是data-开头；

。。。。。。

@import 导入外联样式表

语法格式： @import “wxss样式表的相对路径”;

（外联语句应写在对应页面的 .wxss中）

全局样式与局部样式

**全局样式：**定义在app.wxss中的样式为全局样式，作用于每一个页面；

**局部样式：**在page的 .wxss文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖app.wxss中相同的样式；

注意：当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式效果；

在app.json配置文件中，主要的配置节点是：

l pages 数组：配置小程序的页面路径；

l window 对象：用于设置小程序的状态栏、导航栏、标题、窗口背景色；

l tabBar 对象：配置小程序的tap栏效果；

tabBar配置Tab栏

（在json文件中与window平级）

tabar是移动端常见的页面效果，用于实现多页面的快速切换；

小程序中通常分为顶部top和底部top

如果是顶部tab栏，不显示icon；底部tab栏，显示icon；

注意：tabBar中，最少设置2项，最多5项tab页签；

tabBar的组成部分：

backgroundColor：导航条背景颜色；

iconPath：未选中时的图片路径；

selectedlconPath：选中时的图片路径；

color：未选中时文字的颜色（默认）；

selectedColor：选中时tab栏文字的颜色；

borderStyle：tabBar上边框的颜色；

生命周期函数

生命周期函数：有小程序框架提供的内置函数，会伴随生命周期，自动按次序执行；

注意：生命周期强调的是时间段，生命周期函数强调的是时间点；

Last Updated:
Contributors: 夏之一周, -