微信小程序个人技术总结 .pdfVIP

微信⼩程序个⼈技术总结

这个作业属于哪个课程

这个作业要求在哪⾥

这个作业的⽬标相关技术博客

参考⽂献⽆

⽬录

技术概述

微信⼩程序是类似于Vue的较于Vue的更简单的开发前端代码。新版微信⼩程序，增加了数据响应，模板语法，也就使得开发变得更加便

捷，更加类似Vue，但上⼿更简单，更好理解。学习这些技术可以更好的开发。当涉及到页⾯布局，页⾯响应，页⾯渲染，页⾯响应时间，

页⾯引⽤组件，页⾯跳转时，这些技术就必不可少

技术详述

flex布局

容器组件

//flex布局

.container{

display:flex;

flex-direction:column;

align-items:center;

//align-items:baseline;//按照容器基线对齐

justify-content:center;

//justify-content:space-between两端

//justify-content:space-around等距

//flex-wrap:wrap超过就换⾏

}

align-items:center

交叉轴居中

justify-content:center;

主轴居中

主轴：row排列，x轴就是主轴

column排列，y就是主轴

交叉轴：另外⼀条轴

微信⼩程序的数据绑定

数据流向

单向数据绑定

JS从服务器获取数据

JS通过setData将数据绑定到视图

简易双向数据绑定，实现数据同步（类似Vue）

单向数据绑定

js⽂件

onload

页⾯加载时执⾏的代码

data

data下定义的变量，可以在wxml上⽤

data，setData

js⽂件当中

data{

a:123

}

onLoad{

this.setData({

b:2021

})

}

应⽤

text{{a+b}}/text

数据优先

原⽣jsDOM优先

js当中函数

onReachBottom触底时

onPullDownRefrash下拉刷新时

Mustache语法解析

{{}}

多层json就直接什么.什么

也可以加表达式

渲染

条件渲染

wx:if={{flag}}

wx:else

列表渲染

content内容多时，⽤数组[{},{}]显⽰

此时this.setData({posts:content})

wx:for放在要循环的内容外

⽤包裹

同时内部的数据取时

⽤item.content

是因为默认的wx:for-item=item

也可以修改成其他的，就可以⽤不同的内容开头了

blockwx:for={{posts}}

viewclass=post-container

viewclass=post-author-date

imagesrc={{item.headImgSrc}}class=post-author/image

textclass=post-date{{item.date}}/text

/view

textclass=post-title{{item.title}}/text

imagesrc={{item.imgsrc}}class=post-image/image

textclass=post-content{{item.content}}/text

viewclass=post-like

li-iconname=favorclass=post-like-imagesize=32color=#666/

textclass=post-like-font{{item.dataNum.collection}}/text

li-iconname