Pequeño el desarrollo de aplicaciones de micro-canales - resumen personal

Pequeño resumen de micro-canales desarrollo de programas

基础的配置及视图层、逻辑层自己看文档  [微信小程序文档][1]

这里只说一下自己的经验总结

recordar

Pequeño programa de micro-canales no se ejecuta en un navegador, no se puede operar Dom, no hay ningún documento, objetos de ventana

Cada página de ruta hasta cinco

eg:页面A->页面B->页面C->页面D->页面E->(页面F是跳转不出来的)
注:不经过redirect,redirect后的页面算是第一层,但是没有-返回-按钮

No fuera de la cadena, sólo se puede utilizar en el encaminamiento de configuración app.json, filtra automáticamente una etiqueta cuando se compila

WX: Cuando la prestación de bucle para agregar WX: llave, de lo contrario informe de alerta

Cuando se utiliza <scroll-ver> do de desplazamiento del eje x, para establecer la propiedad de altura, o comprar las herramientas de desarrollo, los teléfonos celulares no le entregan

Cuando se une a datos de vista, la unión único evento, WX: llave, WX: Con fines de índice, WX: a-punto, la unión directa, no necesita {{}}, {{En todos los demás en la unión}} encuadernación

app.json dentro de las páginas, preferiblemente configurado de acuerdo con, orden jerárquico, o de lo contrario puede no Salto

Al utilizar touchstart, touchend, lo mejor es no burbujeo parada es, afectará caso del grifo del niño, TouchMove mejor para evitar el burbujeo, prevenir los efectos de la matriz de desplazamiento vista

Al utilizar la entrada, el mejor valor de ajuste dinámico en bindinput, de lo contrario la oportunidad de ir realmente mal Andrews

unidad de vista de los elementos

设计时最好让ui做成750px,开发中,ui是多少px,你写成多少rpx就OK了,原理,自己查文档去

Página de paso de parámetros

<navigator url="/pages/detail/detail?id=2"></navigator>

Page({
    onLoad (opositions) {
        // 看看是不是你想要的
        console.log(opositions.id)
    }
})

Ver respuesta

每个页面都有一个Page实例,响应就是该实例的setData方法触发的,
*直接给绑定数据赋值,数据会改变,但是视图不会渲染

js文件

    let config = {
        data: {}
    }
    Page(config)

de enlaces de sucesos

wxml文件

    <view bindtap="tapHandler"></view>

js文件

    let config = {
        data: {},
        tapHandler () {
            console.log('i am a handler')
        }
    }

La final se analiza en bindtap nombre del método de unión, por lo bindtap =, el ---- no encuentra 'tapHandler (parámetros)' este método, "tapHandler (parámetro)", se le está dando
al Afortunadamente, la función de unión evento , pasará un parámetro, el parámetro puede tomar años para, identificación, los datos ajustados, se les puede utilizar ambas propiedades de unión, no trate de encontrar el nombre, clase y otros atributos, inútil, sin

Los componentes comunes

Componente tres documentos, wxml, js, css

wxml文件定义template模版,页面里以import方式引入,这样能控制传入模版的数据
js文件exports一个对象,页面里以require方式引入,并且合并到Page实例化的配置对象中

    let tempateConfig = require('url')
    let mergeConfig = require('url/wxTools.js')['mergeConfig']

    let config = {
        data: {}
    }
    config = mergeConfig(config, templateConfig)
    Page(config)

mergeConfig objeto simple se define por su función combinada, soporta múltiples, multi-objeto consolidación
Object.assign () método se ejecuta en una máquina real Andrews dado, no se pueden utilizar

wxTools.js
    
    function merge (con, mcon) {
        for (var key in mcon) {
            if (typeof mcon[key] == 'object' && con[key]) {
                merge(con[key], mcon[key])
            } else {
                con[key] = mcon[key]
            }
        }
    
        return con
    }
    
    function mergeConfig () {
        let config = {}
        for (var i = 0, len = arguments.length; i < len; i++) {
            config = merge(config, arguments[i])
        }
        return config
    }
    
    module.exports = {
        mergeConfig: mergeConfig
    }
css文件以@import方式导入

habilidades de desarrollo

1. ancla
<navegador> app.json la única ruta URL en la configuración sólo el apoyo de la cadena de consulta, no son compatibles con el hash, no puede hacerse vinculando el ancla.
Algunos micro-canal proporcionado <scroll-view>, implementado como sigue:

wxml文件

    <view>
        <button data-hash="hash1" bindtap="goHash">点击定向hash1</button>
        <button data-hash="hash2" bindtap="goHash">点击定向hash2</button>
    </view>
    <scroll-view scroll-y="true" scroll-into-view="{{toView}}">
        <view id="hash1"></view>
        <view id="hash2"></view>
    </scroll-view>

js文件

    Page({
        data: {
            toView: 'hash1'
        },
        goHash (e) {
            let hash = e.currentTarget.dataset.hash
            this.setData({
                toView: hash
            })
        }
    })

Pero esta es una manera, sólo haga clic en un botón, ancla salto, deslice la pantalla para el anclaje correspondiente, propiedades toView no se cambian en consecuencia, por supuesto, si se puede llegar a los datos de eventos relacionados con bindscroll dinámicos, y en última instancia será capaz de toView calcula, en el otro dijo, pero no quiere conseguir elemento DOM amplia operativo lo alto, lo siento, Dom micro-canales agotado, sin

2. Vaya carga
micro-letras ningún documento, al objeto de ventana, por lo que no onscroll a su uso, cómo lo hace?
Algunos micro-canal proporcionado <scroll-view>, implementado como sigue:

wxml文件

    <scroll-view scroll-y="true" scroll-into-view="{{toView}}" bindscrolltolower=“loadMovies”>
        <view wx:for="{{movies}}" wx:key="index">
            {{item.name}}
        </view>
    </scroll-view>

js文件

    Page({
        data: {
            movies: []
        },
        getMovies () {
            let _self = this
            wx.request({
              url: 'https://......',
              data: {},
              success: function(res) {
                // res.data才是你后端返回的真实数据
                _self.setData({
                    movies: res.data
                })
              }
            })
        },
        loadMovies () {
            // 得到要更新的数据,setData重置movies
        }
    })

Puede hacer la carga diferida, puede también no pre-cargado, la lógica específica que lo deseen


Estos amigos temporales. . . Por último, se quejó un, vosotros no la apoyan fuera de la cadena, componente de plomo compartir vosotros tantos problemas que

Supongo que te gusta

Origin www.cnblogs.com/jlfw/p/12570898.html
Recomendado
Clasificación