微信小程序开发基础知识

一、WXML

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

• 事件绑定

<!--wxml-->
<view> {{message}} </view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

• 列表渲染

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

• 条件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})

 

二、WXSS

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

尺寸单位

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

• style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view style="color:{{color}};" />

• class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。 

<view class="normal_view" />

选择器

选择器	样例	样例描述
.class	.intro	选择所有拥有 class="intro" 的组件
#id	#firstname	选择拥有 id="firstname" 的组件
element	view	选择所有 view 组件
element, element	view, checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
::after	view::after	在 view 组件后边插入内容
::before	view::before	在 view 组件前边插入内容

• WXSS样式及属性

• 基础样式

width: 200px;        /*设置宽度*/ 
height: 200px;        /*设置高度*/ 

color:red;               /*设置文字颜色*/
font-size:20px;      /*设置文字字号*/
font-weight:bold;      /*设置字体加粗*/
font-family:"宋体";         /*设置字体为宋体*/
font-style:italic;               /*文字排版--斜体*/
text-decoration:underline;        /*文字排版--下划线*/
text-decoration:line-through;     /*文字排版--删除线*/
text-align:center / right / left ;    /*文字排版--居中  靠左  靠右*/
text-indent:2em;             /*段落排版--缩进*/
line-height:1.5;           /*段落排版--行间距（行高）*/
letter-spacing:5px;         /*段落排版--文字间距*/
word-spacing:5px;           /*字母间距*/

border:1px solid red;      //边框：粗细  样式  颜色
border-style（边框样式）常见样式有： dashed（虚线）| dotted（点线）| solid（实线）
border-bottom border-top border-right border-left      //边框的上下左右线单独设置

box-shadow: 0 2px 3px red;      //盒子阴影：x偏移 y偏移 模糊 颜色      
padding-top padding-right padding-bottom padding-left    //内边距
margin-top margin-right margin-bottom margin-left        //外边距

display：block 块元素 / inline 行内元素 / inline-block 行内块元素

• 弹性布局

概念：  display:flex

容器属性：

• 定位 

层级：z-index

1.只对定位元素起作用；

2.取值越大，其元素越显示在最上面。

三、js逻辑

• 网络请求

• 下拉刷新

• 上拉触底

• 数组合并

• 本地存储

 

四、页面跳转功能

navigator标签

js跳转

配置app.json文件

 

五、小程序生命周期

 

六、小程序页面缓存

 

 

 

 

 

记录一下老师上课讲的知识点

参考文档：https://developers.weixin.qq.com/miniprogram/dev/framework/

                  https://www.cnblogs.com/liujun1128/p/7767123.html