微信小程序开发笔记

 

1.页面控件

view、text、image、button

<button bindtap="testClick">我是一个按钮</button>

 

2.监听事件：

bindtap

 

3.下拉刷新

.json声明："enablePullDownRefresh": true

.js方法：

//下拉

onPullDownRefresh: function(){

wx.showToast({

title: '你在刷新我吗？',

})

}

 

4.弹出框：

wx.showToast

 

5.类似onCreate方法：

Page({

data: {}

})

 

6.数组的表示方法：

<!-- array 是一个数组 -->

<view wx:for="{{array}}">

{{index}}: {{item.message}}

</view>

 

<!-- 对应的脚本文件

Page({

data: {

array: [{

message: 'foo',

}, {

message: 'bar'

}]

}

})

-->

 

7.跳转新的page：两种方式

wx.navigateTo({

url: '../wxml/index',

})

 

<navigator class="player" url="../details/details">

 

8.打印log：console.log('进入详情页'),

 

9.数据绑定：小胡须语法

 

10.布局的使用：flex伸缩布局

 

11.tabBar：

"tabBar": {

"list": [

{

"pagePath": "pages/index/index",

"text": "首页"

},

{

"pagePath": "pages/logs/logs",

"text": "日志"

}

]

}

 

-------------------------------------------------------------------------------------------------------------------------------------

CSS学习

 

文本相关：

字体居中：text-align: center;

 

图片相关：

图片居中：margin: 0 auto;

 

布局相关：

横向满屏（前提是父容器是满屏，此处只是充满父容器）：width: 100%;

添加边框：border: 1rpx solid #333;

 

CSS常用属性：

color: #ff0000

font-family: "sans serif"

text-align:center

background: #fff

margin: 0

padding: 0

font-style: italic

font-weight: normal

line-height: 1.5

border: 1px dotted #000

width:150px

display:block

 

background：

background 简写属性，作用是将背景属性设置在一个声明中。

background-attachment 背景图像是否固定或者随着页面的其余部分滚动。

background-color 设置元素的背景颜色。

background-image 把图像设置为背景。

background-position 设置背景图像的起始位置。

background-repeat 设置背景图像是否及如何重复。

 

text：

color 设置文本颜色

direction 设置文本方向。

line-height 设置行高。

letter-spacing 设置字符间距。

text-align 对齐元素中的文本。

text-decoration 向文本添加修饰。

text-indent 缩进元素中文本的首行。

text-shadow 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。

text-transform 控制元素中的字母。

unicode-bidi 设置文本方向。

white-space 设置元素中空白的处理方式。

word-spacing 设置字间距。

 

font：

font 简写属性。作用是把所有针对字体的属性设置在一个声明中。

font-family 设置字体系列。

font-size 设置字体的尺寸。

font-size-adjust 当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）

font-stretch 对字体进行水平拉伸。（CSS2.1 已删除该属性。）

font-style 设置字体风格。

font-variant 以小型大写字体或者正常字体显示文本。

font-weight 设置字体的粗细。

 

border：

border 简写属性，用于把针对四个边的属性设置在一个声明。

border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。

border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。

border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。

border-bottom-color 设置元素的下边框的颜色。

border-bottom-style 设置元素的下边框的样式。

border-bottom-width 设置元素的下边框的宽度。

border-left 简写属性，用于把左边框的所有属性设置到一个声明中。

border-left-color 设置元素的左边框的颜色。

border-left-style 设置元素的左边框的样式。

border-left-width 设置元素的左边框的宽度。

border-right 简写属性，用于把右边框的所有属性设置到一个声明中。

border-right-color 设置元素的右边框的颜色。

border-right-style 设置元素的右边框的样式。

border-right-width 设置元素的右边框的宽度。

border-top 简写属性，用于把上边框的所有属性设置到一个声明中。

border-top-color 设置元素的上边框的颜色。

border-top-style 设置元素的上边框的样式。

border-top-width 设置元素的上边框的宽度。

 

对齐方式：

.center

{

margin-left:auto;

margin-right:auto;

width:70%;

background-color:#b0e0e6;

}

 

.right

{

position:absolute;

right:0px;

width:300px;

background-color:#b0e0e6;

}

 

.right

{

float:right;

width:300px;

background-color:#b0e0e6;

}

 

 

-------------------------------------------------------------------------------------------------------------------------------------

总结：

 

1.wxml中的变量不需要声明，只需要在js文件中的data方法中声明即可

 

学习模板：

C:\language\Wechat\weui-wxss-master\weui-wxss-master\dist

 

-------------------------------------------------------------------------------------------------------------------------------------

如何使用list，包括数据的获取和重置；

使用简单的控件

使用数据存储