2018-06-09

小程序知识点整理

Typora 无法实时保存。。。。死了噜

数据绑定

让框架根据映射自动地对视图进行更新。

数据需要在 .js中的 Page（{}）函数里面定义

data: {

weeklyMovieList: [

     {

name:"Bob",

comment:"室内设计",

imagePath:"/images/bob.png",

isHighlyRecommended:false,

     },

     {

name:"Tan",

comment:"服装搭配",

imagePath:"/images/tan.png",

isHighlyRecommended:false,

     },

     {

name:"kalamo",

comment:"文化",

imagePath:"/images/kalamo.png",

isHighlyRecommended:true,

     }

   ],

count:123,

score:61

  }

将 Data 中的数值绑定

{{name}}

专长：{{comment}}

强烈推荐

在 console 里面的Appdata里面可以对数据进行查看和直接调试

小程序运行环境与基本架构

分为视图层（渲染层  wxml wxss）和逻辑层（.js文件）两层架构。这两层都是运行在各自独立的进程中，逻辑层的代码运行在一个统一的 Jscore 进程中，视图层的每一个 page 都是在每一个独立的 webview 进程之中进行渲染。 webviewid 用来记录是在几号进程中渲染的

两层架构通信：数据绑定  事件机制

条件渲染：wt:if  vs  hidden

强烈推荐   //wt:if

区别 ：使用 hidden 元素总要被渲染生成， wt:if  条件满足才生成  对可见性需要频繁切换的时候不建议使用 wt:if

列表渲染 wx：for

我们可以通过一个名为 item 的内置的循环控制变量来遍历到本次访问到每一个数据，并对每一个对象的各个分量属性进行绑定输出

列表中会内置一个循环控制变量 index ，数组值的下标

{{item.name}}

专长：{{item.comment}}

强烈推荐

使用 SWIPER 组件

swiper 元素用来表示一个华东容器，幻灯片轮播效果

注意事项 swiper 元素默认的高度是150 像素高，显示的时候需要设定 swiper 的高度

应该将 swiper-item 的宽高设置为和容器大小一样。

实现将所有请求到的元素变成幻灯片展示

通过 indicator-dots 让幻灯片的点显示出来

previous-margin="50rpx"next-margin="50rpx"

>

{{item.name}}

专长：{{item.comment}}

强烈推荐

iokokodsad

asaaAaasasafs

sasas