Mini programa WeChat (de superficial a profundo)

1. Configuración básica del proyecto

1. Composición del proyecto

2. Análisis de archivos de configuración comunes

• project.config.json: Archivo de configuración del proyecto, como nombre del proyecto, appid, etc.; detalles de configuración
• sitemap.json: Mini programa relacionado con la búsqueda; detalles de configuración
• app.json：Configuración global
• page.json:Configuración de página;
• app.jsValores de propiedades globales compartibles

3. Cinco configuraciones globales principales de app.json

• pages:Lista de rutas de página
  • Se utiliza para especificar en qué páginas consta el miniprograma. Cada elemento corresponde a la información de ruta (incluido el nombre del archivo) de una página.
  • Todas las páginas del mini programa deben estar registradas en páginas.
• window:Visualización de ventana predeterminada global
  • El usuario especifica cómo se muestra la ventana, que también contiene muchos otros atributos.
• tabBar:Visualización de la barra de pestañas superior
• Referencia de configuración detallada

{
    
    
  "pages": [
    "pages/home/home"
  ],
  "window": {
    
    
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#f6f866",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    
    
    "color": "#777",
    "selectedColor": "#1cb9ce",
    "list": [{
    
    
        "pagePath": "pages/home/home",
        "text": "主页面”},
      {
    
    
        "pagePath": "pages/day02/day02",
        "text": "home"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

4. Configuración de página en una sola página

• Se puede especificar directamente 新建page 并回车，自动添加到pages中o directamente en las páginas.
  

• Al mismo tiempo, cada mini página del programa también puede usar .jsonarchivos para configurar el rendimiento de la ventana de esta página.

  • Los elementos de configuración de la página sobrescribirán app.json 的 windowlos mismos elementos de configuración de la página actual.
  • Consulte el sitio web oficial para conocer la configuración específica.

{
    
    
  "usingComponents": {
    
    },
  "navigationBarTitleText": "主页面",
  "backgroundTextStyle": "dark",  背景文字颜色
  "enablePullDownRefresh": true,  允许下拉刷新
  "backgroundColor":"#f70", 		背景颜色
  "onReachBottomDistance": 100     距离底部多少触发事件
}

  // 下拉刷新， 获取最新的数据
  onPullDownRefresh() {
    
    
    console.log('监听下拉刷新');
    // 停止下拉刷新
    setTimeout(() => {
    
    
      // 异步请求
      wx.stopPullDownRefresh({
    
    
        success: (res) => {
    
    
          console.log('停止', res)
        },
      })
    }, 1000)

  },
  // 监听页面滚动到底部
  onReachBottom() {
    
    
    console.log('滚动到底部多少距离时加载更多~~  100px');
    this.setData({
    
    
      listCounter: this.data.listCounter + 30
    })
  }

5. Función de la aplicación

• Las instancias de App() se pueden compartir globalmente (objetos singleton), por lo que algunos datos compartidos se pueden colocar aquí;
• Parámetros de la función de la aplicación

Función uno :

• Determine si se abre en una sesión de chat grupal, se abre en la lista de mini programas, se abre con un escaneo de WeChat o se abre en otro mini programa.
  • sceneLos parámetros de opciones y los valores de juicio en las funciones de devolución de llamada del ciclo de vida onLaunch y onShow
  • Referencia de documento

Función 2: definir datos globales de la aplicación

• app.js

 // app实例可以共享全局数据
  globalData: {
    
    
    userInfo: null,
    token: 'Afjwt-12mandak-45'
  }

• home.js

 onLoad() {
    
    
    const {
    
    
      globalData
    } = getApp() // 全局的app实例
    console.log(globalData.token);
    // 拿到token发送网络请求-页面初始化
    this.setData({
    
    
      globalData
    })
  },

Función tres: función del ciclo de vida

• En la función de ciclo de vida, complete las operaciones de inicialización después de que se inicie la aplicación.
  • Complete la operación de inicio de sesión y obtenga el token.
    

6.configuración de la barra de pestañas

• Solo se pueden configurar 最少 2 个、最多 5 个 tabpestañas en tabBar
• Al representar la barra de pestañas superior, no se muestra el icono, solo se muestra el texto.
• Para más configuraciones, consulte el sitio web oficial.
  

{
    
    
    "pages": [
        "pages/hone/hone",
        "pages/Profile/Profile",
        "pages/experience/experience",
        "pages/skill/skill",
        "pages/index/index",
        "pages/logs/logs"
    ],
    "tabBar":{
    
    
        "color": "#777",
        "selectedColor": "#1cb9ce",
        "list":[
            {
    
    "pagePath": "pages/hone/hone","text":"简历信息","iconPath": "/pages/img/icon08.png","selectedIconPath": "/pages/img/icon08.png"},
            {
    
    "pagePath": "pages/skill/skill","text":"个人技能","iconPath": "/pages/img/icon04.png","selectedIconPath": "/pages/img/icon04.png"},
            {
    
    "pagePath": "pages/experience/experience","text":"项目经历","iconPath": "/pages/img/icon02.png","selectedIconPath": "/pages/img/icon02.png"},
            {
    
    "pagePath": "pages/Profile/Profile","text":"自我评价","iconPath": "/pages/img/icon06.png","selectedIconPath": "/pages/img/icon06.png"}
        ]
    },
    "window": {
    
    
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
}

2. Sintaxis básica, eventos, unidades.

1. gramática

Consulte el sitio web oficial para obtener una explicación gramática básica.

• representación de texto

{
    
    {
    
     msg}}可以执行简单的js表达式
{
    
    {
    
    2+3}}
{
    
    {
    
    msg.length}}

• Representación condicional

wx:if=""
wx:elif=""
wx:else
hidden   // true 隐藏

• Representación de lista
• wx:key tiene diferentes métodos de escritura para diferentes tipos de matrices.
  • matriz ordinariawx:key="*this"
  • El objeto de matriz wx:key="字符串"representa el atributo único del objeto.

// 默认item就是数据 ，index是下标
wx:for="{
    
    {list}}"
wx:key="index"
	{
    
    {
    
    item}}
	{
    
    {
    
    index}}

• Representación de lista personalizada

定义item与index的名称
wx:for="{
    
    {list}}}"
wx:for-item="myitem"
wx:for-index="myidx"
{
    
    {
    
    myidx}}
{
    
    {
    
    myitem}}

2. Evento

Formato: <elemento enlazar nombre del evento="devolución de llamada">

• Ejemplo:<view bindtap="fn1"></view>
• <switch bindchange="fn2"></switch>
• Los eventos vinculantes en el mini programa se logran mediante las palabras clave vincular y capturar. Como bindtap y capture-bind:tap,
• bind es propagación de eventos 外传y capture es captura de eventos 里传. capture-bind solo se puede utilizar en forma de dos puntos.
• Si desea evitar que los eventos se burbujeen o se bloqueen, puede pasar catch来绑定事件. Como catchtap, capture-catch:tap.

bindInput     表单输入时
bindconfirm    表单输入确认
bindtap      点击时候

• Parámetros del evento

  • Parámetros personalizados data-*

注意点: <view bindtap="handleTap(100)"></view>el subprograma pensará que el nombre de la función del evento es "handleTap(100)", luego buscará la función "handleTap(100)" en lugar de "handleTap".

• parámetro de máscara
  

• forma vinculante

<input value="{
    
    {s1}}" bindinput="inputHd">
// js.js
inputHd(e){
    
    
 this.setData({
    
    s1:e.detail.value})  // 表单的值获取：e.detail.value
}

• propiedades del objeto de evento

Atributos	tipo	ilustrar
tipo	Cadena	tipo de evento
marca de tiempo	Entero	El número de milisegundos que transcurrieron entre que se abrió la página y se desencadenó el evento.
objetivo	Objeto	Una colección de algunos valores de propiedad del componente que desencadenó el evento.
objetivo actual	Objeto	Una colección de algunos valores de atributos del componente actual.
detalle	Objeto	información adicional
toca	Formación	Evento táctil, conjunto de información de puntos de contacto que actualmente permanecen en la pantalla
cambiadoToques	Formación	Evento táctil, conjunto de información del punto de contacto actualmente modificada

• Propiedades del objeto de evento target y currentTarget

Atributos	tipo	ilustrar
identificación	Cadena	La identificación del componente actual.
conjunto de datos	Objeto	Una colección de atributos personalizados que comienzan con datos del componente actual.

• la diferencia

tagetNo puede obtener los datos del conjunto de datos haciendo clic en inter, pero currentTargetpuede obtenerlos.

3. Unidad

• rpx (píxel responsivo): se puede adaptar según el ancho de la pantalla. El ancho de pantalla especificado es 750 rpx. Por ejemplo, en iPhone6, el ancho de la pantalla es 375 px y hay 750 píxeles físicos en total, luego 750 rpx = 375 px = 750 píxeles físicos, 1 rpx = 0,5 px = 1 píxel físico.
• Consulte el sitio web oficial para obtener más detalles.

3. Modificación de datos en respuesta

1. Las plantillas WXML y los estilos WXSS funcionan en la capa de representación y los scripts JS funcionan en la capa lógica.
2. La capa de representación y la capa lógica del miniprograma son administradas por dos subprocesos respectivamente, y la comunicación entre los dos subprocesos se transmitirá a través del cliente WeChat.

• Se debe llamar a la modificación de datos, this.setDataigual que reaccionar.
• setOptimización de datos

4. Componentes integrados

• Referencia de componentes incorporados

1. botón

• open-typePropiedades en el componente del botón.
  • Los usuarios de tipo abierto obtienen algunos permisos especiales y pueden vincular algunos eventos especiales.
• Obtener información del usuario de versiones antiguas

<button type="primary" bindgetuserinfo="getUserInfo" size="mini" open-type="getUserInfo">getUserInfo</button>

  getUserInfo(e) {
    
    
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    this.setData({
    
    
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },

• La nueva versión obtiene avatar de usuario y otra información.

   <button bindtap="getUserProfile"> 获取头像昵称 </button>

  getUserProfile(e) {
    
    
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
    
    
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
    
    
        this.setData({
    
    
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },

• Para un análisis detallado, consulte el sitio web oficial.

2. imagen

• El componente de imagen tiene un ancho predeterminado de 320 px y una altura de 240 px.
• la imagen admite carga diferida
• La configuración del modo es la siguiente.

modelo	valor	ilustrar
Zoom	escala para llenar	Escale la imagen sin mantener la relación de aspecto, de modo que el ancho y el alto de la imagen se estiren completamente para llenar el elemento de la imagen.
Zoom	aspectoAjuste	Escale la imagen manteniendo la relación de aspecto hasta que un lado de la imagen toque el borde.
Zoom	aspectoRellenar	Escale la imagen manteniendo la relación de aspecto hasta que la imagen llene completamente los bordes.
Zoom	anchoFijar	El ancho permanece sin cambios y la altura cambia automáticamente, manteniendo sin cambios la relación de aspecto de la imagen original.

• wx.chooseMedia obtiene visualización de imágenes local

<button bindtap="hyImageUpload">选择图片上传</button>
<!-- 选择本地图片 -->
<image src="{
    
    {imageUrl}}"></image>

 hyImageUpload(){
    
    
    wx.chooseMedia({
    
    
      camera: 'image',
    }).then(res=>{
    
    
      this.setData({
    
    
        imageUrl:res.tempFiles[0].tempFilePath
      })
    })
  }

3. entrada

• Admite enlace bidireccional

<input type="text" model:value=" {
    
    {message}}"/>

4. Propiedades comunes de los componentes.

• Atributos públicos: consulte el sitio web oficial.

  • Nombre del Atributo	tipo	describir	anotación
    identificación	Cadena	El identificador único del componente.	Mantenga toda la página única
    clase	Cadena	Clase de estilo de componente	Clases de estilo definidas en el WXSS correspondiente
    estilo	Cadena	Estilos en línea para componentes	Estilos en línea que se pueden configurar dinámicamente
    oculto	Booleano	Si el componente se muestra	Todos los componentes se muestran de forma predeterminada.
    datos-*	Cualquier	Propiedades personalizadas	Cuando se activa un evento en el componente, se enviará a la función del controlador de eventos.
    atar* / atrapar*	Controlador de eventos	Eventos componentes	Ver eventos para más detalles

5. Uso de WXS

• WXS (WeiXin Script) es un lenguaje de script para programas pequeños que, combinado con WXML, puede construir la estructura de la página.
• No se puede llamar directamente en WXML Page/Component中定义的函数.
• Pero en algunos casos, puedes usar funciones para procesar datos en WXML (similar a los filtros en Vue), en este caso se usa WXS.
• Debe usar la sintaxis es5

// 
<wxs module="format">
  function joinTgether(num) {
    
    
    return '￥' + num
  }
  // 必须模块化导出 
  module.exports={
    
    
    joinTgether:joinTgether
  }
</wxs>

<block wx:for="{
    
    {wxs}}" wx:key="*this">
  <button size="mini" type="warn">{
    
    {
    
    item}}-{
    
    {
    
    format.joinTgether(item)}}</button>
</block>

• La extracción del módulo utilsdebe colocarse en el archivo que termina en .wxs.

<button>模块抽离wxs</button>
<wxs module="format" src="/utils_wxs/format.wxs"></wxs>
<block wx:for="{
    
    {wxs}}" wx:key="*this">
  <button size="mini" type="warn">{
    
    {
    
    item}}-{
    
    {
    
    format.joinTgether(item)}}</button>
</block>

• Cada módulo tiene su propio alcance independiente. Es decir, las variables y funciones definidas en un módulo son privadas de forma predeterminada y no son visibles para otros módulos;
• Si un módulo quiere exponer sus variables y funciones privadas internas al mundo exterior, solo puede lograrlo module.exportsa través de;
• Para otros usos, consulte el sitio web oficial.

6. Componentes

6.1 Registro y uso de componentes globales y locales

• Divida la página en componentes pequeños y reutilizables, lo que hace que la organización y la gestión sean más fáciles y escalables.
• .jsonRealice declaraciones de componentes personalizados en archivos (establezca el campo del componente en verdadero para configurar este conjunto de archivos como componentes personalizados) :

• xx.jsonImporte el archivo que necesita usar

{
    
    
  "usingComponents": {
    
    
    "sel-info": "/components/selection-info/sel-info"
  }
}

• El nombre del directorio raíz del proyecto donde se encuentran las páginas y componentes personalizados no puede 以“wx-”为tener un prefijo; de lo contrario, se informará un error.
• Cuando un componente global app.json的usingComponentsdeclara un componente, todas las páginas y componentes pueden usar el componente directamente.

6.2 Estilo de componente

• El impacto de los estilos dentro de los componentes en los estilos externos.

  • Conclusión 1: el estilo de clase en el componente solo tiene efecto en los nodos en el componente wxml y no tiene efecto en la página que hace referencia al componente.
  • Conclusión 2: Los selectores de ID, selectores de atributos y selectores de etiquetas no se pueden utilizar dentro de los componentes.
    

• El impacto de los estilos externos en los estilos dentro de los componentes.

  • Conclusión 1: el estilo de la clase externa solo tendrá efecto en la clase wxml externa y no tendrá efecto dentro del componente.
  • Conclusión 2: el uso de selectores de identificación y selectores de atributos externamente no afectará los componentes internos
  • Conclusión 3: el uso de selectores de etiquetas externamente tendrá un impacto en los componentes

• Cómo hacer que las clases se afecten entre sí

  • En Component对象, puede pasar 一个optionsatributos, donde hay un atributo (aislado) en el atributo de opciones styleIsolation.
  • styleIsolation tiene tres valores:
    • isolatedIndica que el aislamiento de estilo está habilitado. Dentro y fuera de los componentes personalizados, los estilos especificados usando la clase no se afectarán entre sí (valor predeterminado);
    • apply-sharedIndica que el estilo wxss de la página afectará al componente personalizado, pero el estilo especificado en el componente personalizado wxss no afectará a la página;
    • sharedIndica que el estilo wxss de la página afectará al componente personalizado, y el estilo especificado en el componente personalizado wxss también afectará la página y otras configuraciones.

  options: {
    
    
    // styleIsolation:"isolated"  // 默认值
    styleIsolation: "apply-shared"
  },

6.3 Comunicación entre componentes

• Componente de referencia de documentación
  
  que pasa datos -properties

1. Definir subcomponentes

<view style="width: 100%;height:80px;background-color: blueviolet;">
  <button>{
    
    {
    
    title}}</button>
  <view style="background-color: brown;margin-top: 10px; color: cornsilk;"> {
    
    {
    
    content}}</view>
</view>

2. El subcomponente recibe datos y establece el valor por defecto.

 properties: {
    
    
    title: {
    
    
      type: String,
      value: '默认标题'
    },content:{
    
    
      type:String,
      value:'默认内容'
    }
  },

3. El componente principal utiliza el componente secundario y pasa el valor

<props-data />
<view class="styl">
  <props-data title="通信" content='组件通信-传递参数-动态数据' />
</view>
<props-data title="z组件传参" content='组件通信-传递参数-动态数据' />

Estilo de transferencia de componentes: clases externas

• En el objeto Componente, defina externalClassespropiedades.
• Utilice la clase en el atributo externalClasses en wxml dentro del componente
• Páselo en la página 入对应的classy establezca el estilo para esta clase. La página
  
  de eventos personalizados
  
  llama directamente al método del componente, que es equivalente a ref en vue.
  • Se puede llamar a This.selectComponent en el componente principal para obtener el objeto de instancia del componente secundario.
  • Al llamar, debe pasar un selector coincidente.
    

6.4 Uso de una única ranura

• Las ranuras de componentes también sirven para hacer que los componentes que encapsulamos sean más escalables.

• 注意slot 不支持默认值Puedes usar el selector de hermanos para resolver este problema.

1. Ranuras reservadas para subcomponentes

<view class="myslot">
  <view class="header">header</view>
  <!-- 小程序插槽不支持默认值 -->
  <view class="content">
    <slot></slot>
  </view>
  <view class="default">兄弟选择器解决默认值</view>
  <view class="footer">footer</view>
</view>

2. Estructura de paso del componente principal

<my-slot>
  <button>按钮</button>
</my-slot>
<my-slot>
  <button size="mini" type="primary">default样式</button>
</my-slot>
<my-slot>
</my-slot>

3. El selector Brother resuelve el problema del valor predeterminado

.default{
    
    
  display: none;
}
.content:empty + .default{
    
    
  display: block;
}

6.5 Uso de múltiples ranuras

1. Ranuras reservadas para subcomponentes

<view class="slot">
  <view class="t">
    <text >上插槽</text> : 
     <slot name="t"></slot>
  </view>
  <view class="c">
    <text>中间插槽</text> : 
    <slot name="c"></slot>
  </view>
  <view class="b">
    <text>下插槽</text> : 
    <slot name="b"></slot>
  </view>
</view>

2. Permite definir múltiples slots

Component({
    
    
  // 允许定义多个插槽
  options: {
    
    
    multipleSlots: true
  },
})

3. Estructura de paso del componente principal

<more-slot>
  <text slot="t">上插入</text>
  <text slot="c">中间插入</text>
  <text slot="b">下插入</text>
</more-slot>

6.6 Contaminación

• Los comportamientos son características utilizadas para compartir código entre componentes 类似于Vue中的 “mixins”.
  • Cada comportamiento puede contener un conjunto de propiedades, datos, funciones y métodos del ciclo de vida;
  • Cuando un componente hace referencia a él, sus propiedades, datos y métodos se fusionarán en el componente, y también se llamará a la función del ciclo de vida en el momento correspondiente;
  • Cada componente puede 引用多个 behavior ，behavior 也可以引用其它 behavior;
  • Referencia de documento

1. escribir una mezcla

export const counterMinxin = Behavior({
    
    
  data: {
    
    
    counter: 100
  },
  methods: {
    
    
    add() {
    
    
      //  加一修改 ，不应该使用++，这会导致counter在修改this..data.counter也在修改
      this.setData({
    
    
        counter: this.data.counter + 1
      })
    }
  }
})

2. usar

import {
    
     counterMinxin } from "../../behaviors/counter"
Component({
    
    
  behaviors: [counterMinxin],
})

6.7 Ciclo de vida de los componentes

• El ciclo de vida del componente lifetimesse declara en el campo.
• Referencia de la documentación del ciclo de vida de los componentes

Component({
    
    
  behaviors: [counterMinxin],
  lifetimes:{
    
    
    created(){
    
    
      console.log('组件被创建');
    },
    attached(){
    
    
      console.log('组件添加到dom树中');
    },
    detached(){
    
    
      console.log('组件被删除');
    }
  }
})

6.8 Escucha de datos

Enlace de referencia del documento

7. ciclo de vida

7.1 Ciclo de vida de la aplicación

Función de enlace del ciclo de vida de la aplicación

Atributos	ilustrar
en lanzamiento	Devolución de llamada del ciclo de vida: supervise la inicialización del subprograma.
en el programa	Devolución de llamada del ciclo de vida: escuche hasta que el subprograma se inicie o cambie al primer plano.
enOcultar	Devolución de llamada del ciclo de vida: supervise el subprograma para cambiar al fondo.
enError	Función de escucha de errores.

• objeto de parámetro
  • Generalmente se coloca en el primer parámetro de la función de enlace del ciclo de vida. onLaunchEl objeto de parámetro de la función de gancho es
    

7.2 Ciclo de vida de la página

• Referencia de documento

Atributos	ilustrar
en carga	Devolución de llamada del ciclo de vida: escuche la carga de la página
en el programa	Devolución de llamada del ciclo de vida: visualización de la página de monitoreo
listo	Devolución de llamada del ciclo de vida: escuche la finalización de la representación inicial de la página
enOcultar	Devolución de llamada del ciclo de vida: escucha para ocultar páginas
enDescargar	Devolución de llamada del ciclo de vida: escuche la descarga de la página
enPullDownRefresh	Supervisar las acciones desplegables del usuario
enReachBottom	Función de manejo para evento desplegable de página
onShareAppMessage	El usuario hace clic en la esquina superior derecha para volver a publicar.
onShareTimeline	El usuario hace clic en la esquina superior derecha para reenviar a Momentos
en Agregar a favoritos	El usuario hace clic en la esquina superior derecha para recoger
onPageScroll	Función de manejo para eventos de activación de desplazamiento de página
en Cambiar tamaño	Se activa cuando cambia el tamaño de la página. Para obtener más información, consulte Responder a los cambios en el área de visualización.

 // 1. 页面路径 
 pages/index/index?id=10086&name='admin'
 // 2. onLoad 获取参数
 onLoad(query){
    
    }

7.3 Ciclo de vida de los componentes

• Referencia de documento

Atributos	ilustrar
creado	组件生命周期函数 - 在组件实例刚刚被创建时执行，注意此时不能调用 setData )
attached	组件生命周期函数 - 在组件实例进入页面节点树时执行)
ready	组件生命周期函数 - 在组件布局完成后执行)
moved	组件生命周期函数 - 在组件实例被移动到节点树另一个位置时执行)
detached	组件生命周期函数 - 在组件实例被从页面节点树移除时执行)

八 . API解析

8.1网络请求

• 网络请求: wx.request(Object object)
• 官网参考

  wx.request({
    
    
      url: "api",
      data: {
    
    
        page: 1
      },
      success: res => {
    
    
        console.log(res);
      },
      fail: err => {
    
    }
    })

• 封装

//0. 封装成函数
export function hyRequest(options) {
    
    
  return new Promise((resolve, reject) => {
    
    
    wx.request({
    
    
      ...options,
      success: res => {
    
    
        resolve(res.data)
      },
      fail: reject
    })
  })
}

//0. 类的方法封装
class hyService {
    
    
  request(options) {
    
    
    return new Promise((resolve, reject) => {
    
    
      wx.request({
    
    
        ...options,
        success: res => {
    
    
          resolve(res.data)
        },
        fail: reject
      })
    })
  }
  get(options) {
    
    
    return this.request({
    
     ...options, method: 'GET'})
  }
  post(options) {
    
    
    return this.request({
    
    
      ...options,
      method: 'POST'
    })
  }
}
export const serviceResponse = new hyService()
// 1. 导入
import {
    
    hyRequest} from '../../service/request'
// 2. 使用封装调用api
  hyRequest({
    
    url:"http://123.207.32.32:1888/api/city/all"}).then(res=>{
    
    
      console.log(res);
    })

8.2 展示弹窗效果

• 具体配置参考

8.3 获取设备|位置信息

• 获取当前设备的信息，用于手机信息或者进行一些适配工作wx.getSystemInfo(Object object)
• 官网参考

• 获取用户的位置信息，以方便给用户提供相关的服务wx.getLocation(Object object)

reqInfo() {
    
    
    // 获取设备信息
    // 我们需要经常获取当前设备的信息，用于手机信息或者进行一些适配工作
    wx.getSystemInfo({
    
    
      success: arr => {
    
    
        console.log(arr);
      }
    }),
    wx.getLocation({
    
    
      success:err=>{
    
    
        console.log(err);
      }
    })
  }

• 注意获取位置信息需要相关权限
• 配置参考

 "permission": {
    
    
    "scope.userLocation": {
    
    
      "desc": "位置信息将用于小程序位置接口的效果展示"
    }
  }

8.4 Storage存储

• 同步存取数据的方法：
  • wx.setStorageSync(string key, any data)
  • wx.getStorageSync(string key)
  • wx.removeStorageSync(string key)
  • wx.clearStorageSync()
• 异步存储数据的方法：
  • wx.setStorage(Object object)
  • wx.getStorage(Object object)
  • wx.removeStorage(Object object)
  • wx.clearStorage(Object object)
• 具体使用参考

8.5 页面跳转

• 通过navigator组件 和 通过wx的API跳转
• 路由跳转参考配置
  
  页面跳转 - navigateTo
注意 跳转的页面是tarBar内的页面，需要使用wx.switchTab({})

 navigateTo() {
    
    
    // 跳转的页面是tarBar内的页面，需要使用wx.switchTab({}) 
    wx.navigateTo({
    
    
      // url: '/navPage/navigateTo/index',
      // 传参
      url: '/navPage/navigateTo/index?name=admin',
    })
  }

• 接受页面跳转的参数

Page({
    
    
  // options接受路径参数
  onLoad(options) {
    
    
    console.log(options);
  },
})

8.6 回退页面传参

• 主页面

Page({
    
    
  navigateTo() {
    
    
    // 方式二
    wx.navigateTo({
    
    
      url: '/navPage/navigateTo/index?name=admin',
      events: {
    
    
        backEvent(data) {
    
    
          console.log('接受跳转的参数', data);
        }
      }
    })
  }
})

• 跳转的页面

Page({
    
    
  up() {
    
    
    wx.navigateBack()
    // //  传递数据给上一级
    // const pages = getCurrentPages()
    // //读取最后一个页面,的实例
    // const prePage = pages[pages.length - 2]
    // // 设置上一个页面的数据
    // prePage.setData({
    
    
    //   message: 'admin'
    // })
    // console.log(pages);

    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('backEvent', {
    
    
      name: 'admin',
      pad: 'password'
    })
  },
  // 回退过多可以直接在onLoad里面设置
  onUnload() {
    
    
    const pages = getCurrentPages()
    const prePage = pages[pages.length - 2]
    prePage.setData({
    
    
      message: 'admin',
      username: 'password'
    })
  },
})

九 .登录流程

• Referencia de configuración
  
  openid : identificación única del usuario
  session_key : es la clave para cifrar y firmar los datos del usuario . Para garantizar la seguridad de los datos de la aplicación, el servidor del desarrollador no debe enviar la clave de sesión al subprograma ni debe proporcionar esta clave al mundo exterior.

// app.js
App({
    
    
  onLaunch() {
    
    
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    // 登录
    wx.login({
    
    
      success: res => {
    
    
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        const code = res.code
        wx.request({
    
    
          url: 'url',
          data: {
    
    
            code
          },
          method: 'POST',
          success: res => {
    
    
            const token = res.data.token
            wx.setStorageSync('token', token)
          }
        })
      }
    })
  },
})

• Artículo de referencia
  • Desarrollo del subprograma WeChat (tutorial súper detallado estilo niñera)
  • codificador por qué

10. Predescarga del subpaquete

• El miniprograma requiere que el tamaño del paquete comprimido no pueda ser superior a 2 M; de lo contrario, no se podrá compilar ni publicar;
• En proyectos reales, cuando el tamaño es superior a 2 M, es necesario publicarlo y cargarlo a través del mecanismo de subcontratación;
• La subcontratación del miniprograma puede optimizar el tiempo de descarga del primer lanzamiento del miniprograma, porque el tamaño del paquete principal es más pequeño después de la subcontratación, lo que mejora efectivamente la experiencia del usuario;
• Divida el pequeño programa en diferentes subpaquetes y empaquetelos en diferentes subpaquetes durante la construcción. Los usuarios pueden cargarlos según sea necesario cuando los usen, lo que mejora el rendimiento del programa;
• Referencia para instrucciones específicas de subcontratación
• La descarga previa del subpaquete se app.json 增加 preloadRulecontrola mediante la configuración

	"subPackages": [
		{
    
    
			"root": "pagesMember",
			"pages": [
				{
    
    
					"path": "setting/setting",
					"style": {
    
    
						"navigationBarTitleText": "设置"
					}
				}
			]
		}
	],
	// 预下载
	"preloadRule": {
    
    
		"pages/my/my": {
    
       // 进入my主页 自动预下载pagesMember包
			"network": "all",
			"packages": [
				"pagesMember"
			]
		}
	}

• 注意Las páginas del mismo paquete comparten un límite de tamaño previo a la descarga común de 2 M. El límite se verificará al empaquetar la herramienta.