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