微信小程序 - 核心

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、<block wx:for="{{post_key}}" wx:for-item="item"  wx:for-index="idx"></block>整体中间的代码视为一个整体，为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下，创建模板<template name="postItem（模板名字）"></template>

8.6.3、post.wxml中，引用模板：<import src="文件路径（绝对或相对）" />,

在具体地方引用：<template is="模板名字（name)"  data="{{item（数据传递）}}" />，形如{{...item}}中的三个点表示数据平铺，即之后调用其属性不必是item.attr而可以直接attr，类似Java中的静态引入。

8.6.4、post.wxss中，样式引入：@import "相对路径";

8.6.5、js不支持template 模板化。

8.6.6、模板嵌套中的样式引用：由里至外，在上一级中逐层 @import 下一级的样式。

8.6.7、在模板嵌套中，常用前缀控制样式的区分。

9、组件自定义属性及获取属性

template只是个占位符，提高了代码的复用性，但是在程序编译之后的代码中是不包含template标签的。所以不能再template标签加上响应属性。在<template />上绑定事件是不行的，他只是一个占位符，想要绑定事件，在<template>外面包一层<view catchtap="onPosttap"></view>。

自定义属性： data-开头，后加字母和"-"符号的组合。

例如： data-custom-data

点击事件发生后，自定义属性可以在事件对象中找到，event.currentTarget.dataset.customData

event：事件对象；currentTarget：当前点击的对象；dataset：所有自定义属性的集合

注意，前面是data-custom-data，但在后面data-没了，先把“-”分割后的单词全部变为小写，并且后面的"-"也没了而且“-”后的首字母变成大写。

10、数据传递（一）

1、列表页跳转链接绑定id，url:"路径？XXX"+postId

2、接收postId参数

onLoad:function (option) {
    var postId= option.XXX;
})

3、详情页获取数据，引用数据文件

var postsData = require('../../../data/posts-data.js');

4、获取postId对应的文章数据

var postData=postsData.postList[postId];

（这里不能写成postsData[postId]，为undefined,postsData.postList才是数组）

5、AppData可以查看所有数据绑定的情况

6、绑定数据统一使用this.setData({postData:postData})可忽视同步异步差别，而且在新版本中this.data已失效

10、数据传递（二）

在html的属性中添加 data-xxx="yyy" ，则xxx将会是一个值为yyy的变量，通过事件传递给逻辑层,然后逻辑层用event.currentTarget.dataset.xxx来获取。

11、缓存

小程序的缓存上限不能超过10MB，缓存不清除，将永久存在。

在Storage页面查看缓存的情况。

共有4类操作，8种方法，每类操作，同时具有同步和异步两种方法，

1.设置缓存：setStorageSync(key,value);

2.获取缓存：getStorageSync(key);

3.删除缓存：removeStorageSync(key);

4.清除所有缓存：clearStorageSync();

同步后缀Sync，如clearStorage()异步，clearStorageSync()同步。

12、同步 & 异步

简单来说，success，fail，complete里面有this基本要换成that代替，因为这里的this上下文环境变了。缓存能用同步最好用同步的方法.异步的选择最好根据业务的逻辑来选择，契合业务来写代码，双耦合。

（1）同步的缺陷是如果在这里执行不了，整个UI会在此处卡住，后面的代码走不了，这段时间耗时会非常长；

（2）在小程序中，能用同步用同步，尽量少用异步；

（3）京东订单系统用的是异步操作。

13、音乐播放器

13.1、关于调用音乐的组件方法其音乐和封面的图片需要用网络地址来调用。

13.2、进入页面监听音乐播放事件：

wx.onBackgroundAudioPlay(function callback)
wx.onBackgroundAudioPause(function callback) 重新播放会继续上次暂停的时刻
wx.onBackgroundAudioStop(function callback) 重新播放会真的从头开始

13.3、BUG：在模拟器上暂停监听——重新播放时会从头开始，但是真机上是正常的，会在上次暂停的时刻开始。

14、事件驱动思想

14.1. 事件驱动思想, 使用事件驱动来实现模块之间传递参数与解耦.比如在A模块发射一个事件，在B模块监听这个事件，中间使用数据来进行传递即可，像这里就是在总模块里面监听子模块里面的音乐播放状态；

14.2. 数据优先思想, 改变UI, 只需要改变该数据绑定的对应的数据就可以. 这点和angular，iOS中的RAC, 响应式编程思想类似；

14.3.数据绑定优势还有，一个数据可以绑定多个事件，这样只需要在js文件里面写上对应的多个事件即可，不用像jQuery一样要获取多个dom元素才能进行多个事件描述；

14.4.可能利于做单元测试。

15、APP生命周期

15.1、app.js里面定义全局变量和方法，格式为App({});

15.2、全局变量字段globalData

15.3、App只有三个生命周期函数

onLaunch(启动)，onShow(启动后和隐藏后的显示)，onHide(后台隐藏)

其他函数onError

15.4、page.js 中获取app.js：getApp()

16、taget & currentTarget

taget指的是当前点击的组件，例如swiper里的image，而currentTarget指的是事件捕获的组件，例如整个swiper滚动条，而swiper里并不存在id，所以程序并不能得到一个id参数，无法显示页面和数据。

17、路由

跳转到一个带tab选项卡的页面，必须使用wx.switchTab这个方法，但要跳转到一个不带tab选项卡的页面，也还是需要redirect或者navigate。如果使用navigate,redirect则页面跳转不了。

18、tabBar

如果你想让哪个页面出现tabBar，那么这个页面的页面文件路径，必须把它放到list数组下面成为list的子元素。

19、前端 & 后端衔接

19.1、wx.request

请求中header一定要填写，但是“content-type”后面不能写“application/json”和空字符串。建议写成“content-type”：“json”，这并不是小程序的问题，可能是该api对应的服务器的问题。

20、高级数据绑定

var obj={

     a=1,

     b=2

  }

this.setData(obj)与this.setData({

      objData:obj

})的区别：

第一种的结果就相当于直接平铺

data:{

a:1,

b:2

}

第二种相当于给data对象新增一个key,结果是

data:{

objData:{

a:1,

b:2

}

}

上面动态绑定数据结构，可以理解为

readyData[settedkey] = { movies:movies },

等价与

{

inTheaters ：{movies(字符串):movies(数据结构)}，

comingSoon ：{movies(字符串):movies(数据结构)}，

top250：{movies(字符串):movies(数据结构)}

}

21、异步函数回调

22、等待加载

wx.showNavigationBarLoading(Object object) // 代码执行前

wx.hideNavigationBarLoading(Object object) // 代码执行完

23、下拉刷新

page.json 配置"enablePullDownRefresh":"true"

scroll-view组件不能和onPullDownRefresh同时使用，上拉加载可使用onReachBottom页面上拉触底事件的处理函数。改用view 替换scroll-view，默认页面方法：

onPullDownRefresh 下拉刷新

onReachBottom 触底加载更多

（下拉刷新的时候，记得先清空数据，不然逻辑上会合并数据）

Ps：json文件里面配置的background-color是最低层的，就是下拉刷新露出来的那部分背景。

24、图片预览功能

24.1、在图片上增加绑定事件：data-src="{{movie.movieImg}}" catchtap="viewMoviePostImg"

24.2、在js中调用api：

  /*查看图片*/
  viewMoviePostImg: function (e) {
    var src = e.currentTarget.dataset.src;
    wx.previewImage({
      current: src, // 当前显示图片的http链接
      urls: [src] // 需要预览的图片http链接列表
    })
  }

25、登录授权获取用户信息

wx.login:不需要授权，静默登陆，登陆状态有时效性，多久失效由微信服务器决定；

wx.checkSession：可查看是否失效；

wx.getUserInfo：获取用户信息（明文信息，加密信息）；

加密信息：包含unionID（可判断在同一主体下的公众号、服务号、企业号、小程序中用户是否时同一个人）；

用户拒绝授权之后下次登陆不会弹出授权框，可主动引导用户到授权页。

26、用户设置界面

API：wx.openSetting

如果获取用户信息第一次拒绝过，再点击获取用户信息就直接失败，解决方案：通过用户设置界面，可以重新设置用户权限

27、动态设置分享按钮

28、场景值