微信小程序从入门到弃坑

一，调试工具

1）console面板

代码执行有错误时，错误信息将显示在这个面板上，通过以下代码可将信息输出到console面板

console.log("信息");

2)Network面板

用于观察和显示网络请求request和socket情况，通过这个面板对网络请求进行调试

3）Storage面板

用于显示当前项目使用本地存储的情况，在小程序中使用wx.setStorage或者wx.setStorageSync将数据保存到手机本地存储中。

---

小程序的文件结构

一个小程序首先有四个应用入口文件：

---app.js:设置一些项目的全局变量

---app.json 每一个新页面都必须在这个地方注册，项目的导航栏和窗口界面设置有关的（注意：小程序新增或减少页面，都需要对pages数组进行修改，如果没有将页面的路径添加到pages数组中，即使小程序中的代码导航到该页面，仍然不能打开该页面）

---app.wxss:项目全局样式

---project.config.json 项目配置文件

一个页面主要包含以下四个文件，这四个文件的名字应该都是一样的，最好以页面所在的文件夹名字为标准

• .js 页面的逻辑文件，在里面编写javascript代码控制页面逻辑，每个页面中必须有这个文件
• .wxml    页面的描述文件（类似html页面中的描述文件）用来设计布局，进行数据绑定
• wxss 页面的样式表文件，用来定义本页面使用到的各类样式表
• .json 页面的配置文件

---

app.json中配置窗口底部tabBar

注意：iconpath和selectediconpath中的图片大小限制为40kb

---

生命周期函数

页面的生命走起函数有以下几个：

1. onLoad:页面加载完嗲用该函数，一个页面只会调用一次，该函数的参数可以获取wx.navigateTo和wx.redirectTo
2. onShow 页面显示时调用该函数，每次打开页面都会调用一次
3. onReady：页面初次渲染完成调用该函数，代表页面已经准备妥当，可以与视图层进行交互
4. onHide：页面隐藏时调用该函数，当navigateTo或底部tab切换时调用该函数
5. onUnload：页面卸载时调用该函数（当redirectTo或navigateBack的时候调用该函数）
6. onPullDownRefresh：下拉刷新时调用该函数

---

条件渲染

1，wx：if条件渲染

2,wx:for列表渲染

注解：在wx:for列表渲染中，默认当前下标变量名为index，默认当前元素变量名为item

重命名下标和变量名，使用wx：for-item可以指定数组当前元素的变量名。使用wx：for-index可以指定数组当前下标的变量名

例如：九九乘法

 

---

页面事件

通过定义事件来完成页面与用户的交互同时通过事件将视图层（wxml页面文件）与逻辑层（js逻辑文件）进行通信

事件类型，分为两大类型：

1. 冒泡事件：当组件上的时间被触发时，该事件会想父节点传递
2. 非冒泡事件，当一个组件上的事件被触发后，该事件不会向父节点传递

小程序中提供的冒泡事件拥有以下几个：

• touchstart：手指触摸
• touchmove：手指触摸后移动
• touchcancel：手指触摸动作被打断，如来电提醒，弹窗
• touchend：手指触摸动作结束
• tap：手指触摸后离开
• longtap：手指触摸后，超过350ms再离开

除上面列出的事件之外，其他组件自定义事件都是非冒泡事件。

---

事件绑定

事件的绑定，在组件属性中定义一个绑定事件的属性，并设置该属性的值即可

作为组件的属性，是以bind或catch开头，再加上事件类型字符串，如要为组件的触摸离开设置绑定，则在该组件中增加一个名为bindtap或catchtap的属性。而该属性的值则是在js中定义的处理该事件的事件处理函数的名称。如果js中不存在该函数名称，触发事件后将会报错

提示：

bind开头的事件绑定不会阻止冒泡事件向上冒泡，catch开头的事件绑定可以阻止冒泡事件向上冒泡

 

其中event会返回一个target属性，target中的dataset集合使用较多。通过这个集合可以获取组件中自定义数据的值

js中

例如：

wxml中

 

---

页面样式文件wxss

样式引入（将外部的wxss文件引入到wxml中，，内部的wxss会自动关联到wxml）：使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用；表示语句结束。

例如：

在.wxss样式文件中导入：@import  "common.wxss";

---

正文：

第一章：快速开发UI界面

1.1组件的属性

1）id属性，与html中的id属性类似，这是组件的唯一标识，在同一页面中id属性必须保持唯一。

2）class属性，class属性为字符串类型，与html相同，通过class属性来设置组件的样式类

3）style属性，与html相同，通过style属性可设置组件的内联样式。

4）hidden属性：属性是一个逻辑值，用来决定该组件是否显示。

5）data-*属性：可为任何类型，可用来为组件设置任意的自定义属性值。见前面的例子

6）bind*/catch*属性,见上面的介绍

1.2，flex布局

注意使用flex布局时一定要注意开启：display：flex

【1】flex-direction  弹性容器的布局方向

flex-direction:row 横向布局

flex-direction:column：列布局

【2】justify-content  定义了项目在主轴上的对其方式

justify-content：flex-start  从左边

justify-content：flex-end  从右边

justify-content：conter 从中间

justify-content:space-between 均匀分布

justify-content: space-around     在最左边和最右边留一些空挡

【3】align-items表示在伸缩容器中的布局情况

align-item:flex-start 放在视图的顶部

align-item:flex-center 放在视图的中间

flex-end    ,stretch

---

hover-class属性俩指定元素的点击态效果，但是在使用时要注意，目前支持hover-class苏醒的组件有三个：view，button，navigator

使用方法：

<view hover-class="bg_red">点击变红</view>

..bg_red{

   background:red;

}

icon自带的图标：

icontype:['success','info','warn','waiting','safe_success','safe_warn','success_circle','success_no_circle','waiting_circle','circle','download','info_circle','cancle','search','clear']