前端学习——微信小程序

2018年3月12日开始学习微信小程序。这是对于今天学习的一个总结。

下载方法...略

安装方法...略

创建第一个小程序的方法...略

略略略......

创建的时候要记得点QuickStar。

文件结构

一个小程序主体部分由三个文件组成，必须放在根目录下，如下：

文件	必填	作用
app.js	是	小程序逻辑
app.json	是	小程序公共设置
app.wxss	否	小程序公共样式

1.app.json

先来说一下app.json，app.json文件用来对微信小程序进行全局配置，决定文件的路径、窗口表现、设置网络超时时间等。

以下是一个包含了部分配置项的app.json

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

1.在这一项中

"pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],

pages数组下面的第一个元素，代表微信小程序启动时第一个页面。

2.每次新建一个页面都需要在pages里面声明的。

如图，我新建了一个welcome的页面。

所以我需要在app.json>>pages里面声明welcome

{
  "pages":[
    "pages/index/index",
    "pages/welcome/welcome"
  ]
}

这样便可以声明成功。在微信小程序中不用带后缀名如：.js .json .wxml .wxss 前面的名一样，会自动识别。

组件

一、swiper组件

详情请见官方文档。

1.这是注意事项：

    在这个图里面，对image设置宽高但是不起作用，是因为其外部父元素需要设置宽高。

因为在官方文档里有说明，swiper-item仅可放在<swiper>组件中，宽高自动设置为100%；

2.swiper的vertical属性。

    vertical属性是定义滑块方向是否为纵向。默认为false。但是如果直接将其设置为false会怎么样？

按理来说应该横向滑动，但是并不。

解决方法 vertical：{{false}};给其加双括号。

列表渲染

1.wx:for 在组件上使用wx:for控制属性绑定一个数组，即可以使用数组中的各项的数据重复渲染该组件。