Introducción a los applets

Descargar e instalar herramientas de desarrollo de subprogramas

https://servicewechat.com/wxa-dev-logic/download_redirect?type=win32_x64&from=mpwiki&download_version=1062208010&version_type=1

Mini Programa Documentación Oficial

https://mp.weixin.qq.com/

Crear un proyecto de applet

Introducción al archivo del proyecto (crear una nueva página en la carpeta de páginas)

1. Componentes

texto
área de vista de texto
botón botón
formulario de entrada
imagen imagen

main.wxml

<view class="title">小程序的单纯</view>
<view>赏金猎人</view>
<text>你好</text>
<text>喝杯二锅头</text>
<text>交个朋友</text>
<view>{
    
    {
    
    msg}}</view>
<input  placeholder="搜索"></input>
<image class="img" src="/images/pic.jpeg"></image>

2. Sintaxis de la plantilla

Representación de texto: { {}}
Representación condicional: wx:if (similar a v-if de vue), wx:elif, wx:else
Representación de lista: wx:for, wx:key
Lista personalizada: wx:for-
import, include

<view class="title">文本渲染</view>
<view>{
    
    {
    
    msg}}</view>

<view class="title">条件渲染</view>
<view wx:if="{
    
    {isLog}}">欢迎回来</view>

<view class="title">多重条件渲染</view>
<view wx:if="{
    
    {score>90}}">苹果电脑</view>
<view wx:elif="{
    
    {score>80}}">小米电脑</view>
<view wx:elif="{
    
    {score>70}}">苹果2斤</view>
<view wx:else>七匹狼伺候</view>

<view class="title">遍历</view>
<view wx:for="{
    
    {list}}" wx:key="item">
{
    
    {
    
    index+1}}--{
    
    {
    
    item}}
</view>

<view class="title">自定义遍历</view>
<view wx:for="{
    
    {list}}" wx:for-item="myitem" wx:for-index="myind" wx:key="myind">
{
    
    {
    
    myind+1}}--{
    
    {
    
    myitem}}
</view>

<view class="title">模板</view>
<import src="/template/test"></import>
<template is="user" data="{
    
    {...userInfo}}"></template>
<template is="user" data="{
    
    {...userInfo2}}"></template>

<view class="title">include导入非template</view>
<!-- include 相当于拷贝，就是不拷贝template内容 -->
<include src="/template/test"></include>
<view>import只能导入模板template，include只能拷贝非template的内容</view>

El wxml debajo de la plantilla de archivo js

correr

3. Evento (paso de parámetros de eventos)

bindtap toque/haga clic en
cambios de valor de bindchange
bindconfirm confirme
el cambio de entrada de bindinput
showToast Método integrado de WeChat: aviso emergente

 showMsg(e){
    
    
    wx.showToast({
    
    
      title: e.target.dataset.msg,
    })
  }

data-msg="" paso de parámetro de evento

<view class="title">事件</view>
<button size="mini" type="primary" bindtap="tapHd">按钮</button>

<view class="title">事件-传参</view>
<button type="primary" size="mini" bindtap="showMsg" data-msg="我每天很开心">按钮1</button>
<button type="warn" size="mini" bindtap="showMsg" data-msg="你是我的解药">按钮2</button>

correr

4. Encuadernación bidireccional de formularios

wxml

<view class="title">表单双向绑定</view>
<input 
value="{
     
     {msg}}"
bindinput="changeMsg"
type="text"
style="border:1rpx solid #ccc; margin:15rpx; padding:15rpx;"/>
<view>{
   
   {msg}}</view>

js

 changeMsg(e){
    
    
    // 通过setData的方式更新msg,并更新视图
    // e.detail.value获取表单的值
      this.setData({
    
    msg:e.detail.value})
  }

correr

5. Iniciar sesión

1. getUserProfile solo puede obtener el avatar y el apodo del usuario, que no se pueden usar como un identificador único para interactuar con el backend

01.wx.login() Obtenga el código y envíelo a su propio servidor (también puede agregar información de usuario)

02. Su propio servidor envía código+appid+AppSecret al servidor de WeChat a cambio del identificador único openid

03. El inicio de sesión, el registro, el permiso y otras funciones se pueden realizar a través de openid

6. volver arriba

wx.pageScrollTo({
    
    
      duration: 500, //时间
      scrollTop:0, //位置
    })
 
 wx.pageScrollTo({
    
    
      duration: 500,
      selector:".share"       

7. Sube fotos

wx.chooseMedia({
    
    
      count:1})
 
 wx.uploadFile({
    
    
          filePath: res.tempFiles[0].tempFilePath
          )}

8. Subcontratación

1. Subcontratación

"subpackages": [
    {
    
    
      "root": "news",
      "pages": [
        "pages/detail/detail"
      ]
    }
]

2. Precarga

"preloadRule": {
    
    
    "pages/jok/jok": {
    
    
      "network": "all",
      "packages": [
        "news"
      ]
    }
  }