微信小程序的了解和使用

微信小程序

微信小程序的项目组成

pages 文件夹 用于存放所有的小程序页面

logs 文件夹 用于存放所有的日志文件

utils 文件夹 用于存放工具性质的模块 js

app.js 小程序的入口文件

app.json 小程序的全局配置文件

app.wxss 全局样式文件

project.config.json 项目配置文件

project.private.config 项目的私有配置文件

sitemap.json 用于配置小程序及页面是否允许被微信所索引

window 当前窗口的配置

pages 所有页面 第一位的是首页

请求

出于安全的考虑 小程序要求对数据的接口请求限制：

1.只能请求HTTPS类型的接口

2.必须将接口的域名添加到信任列表中

本地请求测试

wx.request({

url string 是 开发者服务器接口地址

data string/object/ArrayBuffer 否 请求的参数

header Object 否 设置请求的 header，header 中不能设置 Referer。

content-type 默认为 application/json

method string GET 否 HTTP 请求方法

success function 否 接口调用成功的回调函数

fail function 否 接口调用失败的回调函数

complete function 否 接口调用结束的回调函数（调用成功、失败都会执行

})

跨域

跨域是指基于浏览器Web开发中，由于小程序的宿主环境 是微信客户端

不是浏览器，所以小程序不存在跨域问题

上拉刷新 下拉触底

wxs （WeiXin Script）是小程序独有的一套脚本语言 结合WXML 可以构建页面结构

wxml中无法调用页面的js定义的函数 但是wxml中可以调用到wxs中定义的函数。

所以小程序中的wxs应用的场景就是过滤器

wxs JavaScript的关系

两种完全不同的语言

1.wxs有自己的类型

​ number 数值类型 string 字符串类型 boolean 布尔类型 object 对象类型

function 函数类型 array数组类型 date事件类型 regexp正则类型

2.wxs 不支持 es6 以及以上的语法形式

​ 不支持 let const 解构解析 展开运算 箭头函数 对象属性简写…

支持 var 定义变量 普通的function函数 ES5

内嵌wxs脚本

wxs代码可以在wxml中定义wxs标签，编写业务逻辑

wxml文件中每个< wxs>< /wxs> 标签 必须提供 module 属性 指定模块名称

定义外联的wxs脚本

可以创建.wxs为后缀名的文件，类似js文件一样 定义wxs文件

性能好 在IOS设备上 小程序中的wxs会比JavaScript代码块2- 20倍

组件和页面的区别

从表面看 组件和 页面都是由js json wxml wxss租场

但是组件和页面的js 与 JSON 是明显不同的

组件json文件中需要声明"component": true, 属性

组件js文件中调用的是Component({})函数

组件的事件需要定义在 methods中

引用组件

全局引用

局部引用

组件的样式隔离

​ app.wxss 中的全局样式 对组件无效的

只有class选择器会有样式的隔离效果 id选择器 属性选择器 标签选择器 不受样式隔离限制

“styleIsolation”: “isolated” 样式隔离

• isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
• apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
• shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）

type：类型 value：默认值

properties 与 data 的区别

在小程序 properties 和 data 的数据用法相同 都是可以读写的 但是

data更倾向于私有数据

properties 更倾向于存储对外接收到的数据

本质上没有区别

组件数据监听器

数据的监听 用于监听和响应任何的属性和数据字段的变化 ，从而执行特定的操作。

纯数据字段

不需要渲染到页面的data字段

纯数据字段 有助于提升页面的更新性能

组件生命周期函数

生命周期	参数	描述	最低版本
created	无	在组件实例刚刚被创建时执行	1.6.3
attached	无	在组件实例进入页面节点树时执行	1.6.3
ready	无	在组件在视图层布局完成后执行	1.6.3
moved	无	在组件实例被移动到节点树另一个位置时执行	1.6.3
detached	无	在组件实例被从页面节点树移除时执行	1.6.3
error	Object Error	每当组件方法抛出错误时执行