微信小程序 - 核心

1、Web页面

 

2、项目结构

Ps1：应用程序的三个文件app.js、app.json、app.wxss在整个小程序中是唯一的，是全局的；页面级别的会覆盖全局的样式和json（配置）,就近原则。

Ps2：project.config.json是自动生成的, 老版没有，不需要改；utils文件是帮助文件、pages（可改名字）下放页面文件；目录结构中可增减文件。

Ps3：小程序规定pages数组下第一个元素代表你要启动显示的第一个页面，每新建一个页面，则在 pages 下注册添加路径目录。

Ps4：因为app.json全局配置类型很多，但是普通的页面配置只针对“window”，所以可以省略“window”字。

 

3、页面层级

Ps：小程序页面层级限定根据小程序现状而定（推荐不要超过5级）。

 

​​​​4、缓存

微信小程序缓存最大10M 需要用户自己清除。

 

5、页面生命周期

page生命周期：

执行顺序：onload（页面初始化）——onshow（页面显示）——onready（页面渲染完成）——onhide(页面隐藏)——onunload（页面关闭）。

JS文件结构：小程序的所有脚本都需要放在page结构体系里面完成。

 

6、初级数据绑定

6.0、语法：{{数据绑定}}

6.1、小程序没有dom节点，也不需要获取dom可以直接做数据绑定。

6.2、小程序的数据绑定使用{{ }}，单向数据绑定。

6.3、从服务器上请求的数据放在onload里面，加上 this.setData(接收服务器数据的变量。名)，相当于把数据写入data{}里面，然后只需要将对应的数据变量用{{ }}绑定到wxml文件中相应位置即可。

6.4、绑定的数据是放到标签的属性里面的话，应该有引号，例如src="{{}}"； 如果是绑定在标签内容里的话，如text元素，则不需要引号。

6.5、如果面向布尔值时，如果是“true”的话，无所谓，但如果是“false”的话，必须要加“{{}}”，因为小程序解析的true或false时，是看是否有值，所以这里的“true”也可以写成“任意字符，甚至是false都可以”。

6.6、控制标签元素的显示和隐藏   wx:if="{{true/false}}";也可设置成wx:if="{{变量名}}"，从脚本文件js控制 变量名:true/false 来动态变化 (这里true/false为布尔值，不加引号)，但如果该变量没有定义，就是false的效果。

6.7、能进行字符串运算{{“hello”+ date}}，数值运算{a+b+c}（a:1,b:2,c:3==>6）。

6.8、如果{{img.pic1}}，则需要在var变量里面定义img{pic1:…,pic2:…}。

6.9、循环列表

6.9.1、把数据整合成数组，var post_content=[{},{}]

6.9.2、this.setData{{post_key:posts_content}}

6.9.3、整体中间的代码视为一个整体，为for循环。

6.9.4、wx:for-item="item"指代子元素，代码中可加可不加，小程序默认是item，使用时用item.xxx。形如{{...item}}中的三个点表示数据平铺，即之后调用其属性不必是item.attr而可以直接attr，类似Java中的静态引入。

6.9.5、  wx:for-index="idx" 指代子元素的索引，小程序默认是index， 使用时用 {{idx}}。

6.10、多参数绑定语法：{{a:b, c:d}}

 

7、事件机制

7.0、bind/catch

7.1、从启动页跳转到文章列表：点击事件和导航API。

7.2、tap事件，但是要写成bindtap或者catchtap，默认规定。

7.3、bug：点击一次执行事件两次，解决方法：关闭程序重新打开即可。

7.4、wx.navigateTo({ url: '../posts/post', })是跳到下一子级的页面，有对应的返回按钮，当前页面触发的是onHide（）事件。（限制五级跳转！！！）

7.5、wx.redirectTo({ url: '../posts/post', })是平行页面跳转（关闭当前页面），无返回按钮，触发的是onUnload（）事件。

7.6、冒泡 & 非冒泡

冒泡：子节点触发事件时，父节点也触发自身事件。

非冒泡：子节点触发事件时不牵涉父节点。

bind绑定：允许冒泡。

catch绑定：不允许冒泡。

Ps：可以在每个img中添加catch，但可以运用冒泡机制，直接在父组件swiper中添加catch。

 

​​​​​8、模板化 & 模块化

8.1、业务与数据分离，从业务中访问数据，理解数据绑定的生命周期，对以后做复杂的业务逻辑处理是很有帮助的。将业务中的数据分离到单独的数据文件中，数据放在data/data-json.js中，是js文件不是json文件。

8.2、this.data做数据绑定的方法已经失效，请在以后所有数据绑定的地方，使用this.setData,

如：

this.setData({
  posts_key:postsData.postList
});

8.4、小程序总会去访问js文件中的data对象，而且这个访问动作是在onLoad()方法后执行的。

8.5、数据分离读取流程

在数据文件中，使用module.exports作为出口对象，然后在需要用到数据的js文件中使用require函数接收该对象并获取数据。

数据文件中：

module.exports = {a : data};

其中data是数据，将其作为一个属性赋值给module.exports对象。

require方法加载js模块文件：

var data = require("....");

var postsData = reuqire('../../data/posts-data.js') ,只能是相对路径。

执行之后，data对象即是前面的module.exports对象，于是，使用data.a即可获取数据。

8.6、template模板化使用

8.6.0、小程序使用的template模板化技术，而不是组件化技术。

8.6.1、template文件只需要wxml、wxss文件即可

8.6.2、temp.wxml下，创建模板

8.6.3、post.wxml中，引用模板：,

在具体地方引用：