从零学习微信小程序（一）—— 基础知识

这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战

最近在学习微信小程序，以前也有学过一些，前面的忘的差很少了，写个文档复习一下这些基础知识

1、小程序配置文件

小程序有两种配置文件，全局的app.json和页面单独的page.json

注意：配置文件中不能出现注释

1.1 全局配置 app.json

官方文档

小程序的全局配置，包括全部页面路径、界面表现、网络超时时间、底部tab。

举个例子

这是以前学的项目的配置文件的一部分

各字段的含义

1. pages字段 —— 用于描述当前小程序所用页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪一个目录
2. window字段 —— 定义小程序全部页面的顶部背景颜色，文字颜色定义，导航文字
3. tabBar字段 —— 定义小程序的底部导航栏样式

tabBar 配置属性

1.2 页面配置 page.json

每个小程序页面也可使用 .json 文件来对本页面的窗口表现进行配置。

能够独立定义每一个页面的一些属性，如顶部颜色、下拉刷新等等

注意：若是有与app.json文件相同的配置项，页面中的配置项将会覆盖app.json中window中的配置项

1.3 sitemap.json 配置

⼩程序根⽬录下的 sitemap.json ⽂件⽤于配置⼩程序及其⻚⾯是否容许被微信索引。

2、wxml语法

2.1 数据绑定

2.1.1 普通写法

wxml文件中的模板语法

在同页面下的js中传入模板数据

2.1.2 组件属性

模板语法

<view id="item-{{id}}"> </view>
复制代码

数据传递

Page({
  data: {
    id: 0
 }
})
复制代码

2.1.3 bool 类型

不能直接写 checked = "false"，该计算结果为字符串

<checkbox checked="{{false}}"> </checkbox>
复制代码

2.2 运算

2.2.1 三元运算

2.2.2 算数运算

2.2.3 逻辑判断

采用wx:if 来判断是否须要渲染该代码块：

<view wx:if="{{length > 5}}"> </view>
复制代码

也能够采用wx:elif和wx:else来添加一个else块

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
复制代码

注意：若是须要控制多个组件标签，可使用block标签将多个组件包装起来，给block加上控制属性

注意： <block/> 并非一个组件，它仅仅是一个包装元素，不会在页面中作任何渲染，只接受控制属性

2.2.4 字符串运算

<view>{{"hello" + name}}</view>
复制代码

//page中的js文件
Page({
  data:{
    name: 'MINA'
 }
})
复制代码

注意：花括号和引号之间若是有空格，将最终被解析成为字符串

2.3 列表渲染

2.3.1 wx:for

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
复制代码

array: [{
  message: 'foo',
}, {
  message: 'bar'
}]
复制代码

因为未设置wx:key属性所以会有警告，提示采用wx:key来提升性能

wx:key绑定的值有几种选择

1. string类型，表示循环项中的惟一属性
2. 保留字*this，表示item自己，表明惟一的字符串和数组

2.4 条件渲染

2.4.1 hidden

<view hidden="{{condition}}"> True </view>
复制代码

相似wx:if，频繁切换用hidden，不常使用wx:if

3、事件绑定

经过bind关键字来实现。如 bindtap 、bindinput 、bindchange 等

给input绑定输入事件

<input type="text" bindinput="handleInput"/>
复制代码

事件处理函数，将这个数据映射到 data 数据中

handleInput(e) {
    this.setData({
      num: e.detail.value
    })
}
复制代码

3.1注意事项

1. 绑定事件时不能带参数，不能带括号，如下错误示范

<input bindinput="handleInput(100)" />
复制代码

2. 事件传值，经过标签自定义属性的方式和value

<input bindinput="handleInput" data-item="100" />
复制代码

3. 事件触发时获取数据

 handleInput: function(e) {
    // {item:100}
   console.log(e.currentTarget.dataset)
    // 输入框的值
   console.log(e.detail.value);
 }
复制代码

4、wxss 样式

wxss 扩展特性

• 响应式长度单位rpx
• 样式导入

4.1 尺寸单位

rpx : 能够根据屏幕宽度进⾏⾃适应

使⽤步骤：

1. 肯定设计稿宽度 pageWidth

2. 计算⽐例 750rpx = pageWidth px ,所以 1px=750rpx/pageWidth

3. 在 less ⽂件中，只要把设计稿中的 px => 750/pageWidth rpx 便可。

4.2 样式导入

使⽤ @import 语句能够导⼊外联样式表，只⽀持相对路径。

@import "common.wxss";
.middle-p {
  padding:15px; 
}
复制代码

4.3 选择器

不支持通配符选择器*

仅支持如下选择器

好忙，好忙，好忙~