微信小程序

1、安装

官网链接 https://mp.weixin.qq.com/wiki

2、目录结构介绍

框架程序包括一个描述整体程序的app 和多个描述各自页面的page

3、app.json配置项列表

3.1pages配置

接受一个数组，每一项都是字符串，来指定小程序有哪些页面组成。每一项代表对应页面的路径，
数组的第一项代表小程序的初始页面。小程序中新增或减少页面，都需对pages数组进行修改

{
 "pages":[
    "pages/index/index"//初始页面拓展名不用写
    "pages/logs/logs"  //拓展名不用写,新建页面时在这里注册后保存，即会在项目目录下生成该页面文件了
  ]
}

3.2 window配置

用于设置小程序的状态栏、导航条、标题、窗口背景颜色等

3.3 tabBar

数组，最少2个，最多5个，按数组的序列排列

还可以通过position属性来设置tabBar的位置，有bottom和top两种
list参数是一个数组，数组中每一项都是一个对象，其属性值如下

3.4 networkTimeout

可以设置各种网络请求的超时时间

3.5 debug

4 page.json

5 app.js

定义App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等
生命周期函数有

一般在onHide时要添加一个提示框 确认是否要退出

6 注册页面

onShareAppMessage在api中查看用法

7 路由

页面跳转页面有api和组件两种方式
navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。

8 模块化开发

在根目录新建js文件夹或文件，在里面定义复用性较高的函数采用以下方式暴露出去

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye
在需要的地方采用以下方式定义并且使用

var common = require('common.js') // 此处暂不支持绝对路径
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

6 点击事件 https://my.oschina.net/kaiyuanlong/blog/1620098

事件处理函数 点击是 bindtap (阻止冒泡事件的发生，其实很简单，直接把bindtap改为catchtap即可)
场景：最近开发微信小程序时候遇到了点击页面中的元素，js捕捉点击事件，并获取该元素的一些属性（比如我自定义了一个author="季兰兰"）,那么如何快速获取这个属性呢？其实首先要改变一下写法，用【data-】开头，元素属性即为data-author="季兰兰"，并且绑定一个点击事件，bindtap='getAuthor'。
wxml部分

<view data-author='季兰兰' bindtap='getAuthor'>获取作者名称</view>

接下来重点来了 js部分

getAuthor : function(e){

console.log(e.currentTarget.dataset.author);//打印季兰兰

//看一下e对象的值

console.log(e);

注意：里面有两个对象存在我们要获取的内容 一个是target一个是currentTarget 区别简单来说是

e.target 指向触发事件监听的对象。
e.currentTarget 指向添加监听事件的对象。

MDN中对target的解释为，一个触发事件的对象的引用， 当事件处理程序在事件的冒泡或捕获阶段被调用时。
而对于currentTarget，它指的是当事件遍历DOM时，标识事件的当前目标。它总是引用事件处理程序附加到的元素，而不是event.target，它标识事件发生的元素。

7 swiper 滑块视图容器

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
注：current属性 表示当前所在滑块的 index
bindchange属性 当current 改变时会触发 change 事件，event.detail = {current: current, source: source} 通过e.detail.current取到新的current值
其中只可放置<swiper-item/>组件，否则会导致未定义的行为。

8 scroll-view组件

小程序编辑的页面有时候能整体随着手的滑动而左右偏移，这样体验不好，可以在最外面套一个scroll-view组件（如果竖向要滚动须设置他的高度） 再在外面套一个相对定位top bottom left right 都为0的盒子 页面就不会左右动了

9 微信小程序使用navigateTo数据传递json的实例（坑）

https://blog.csdn.net/a690197843/article/details/78567556
http://www.jb51.net/article/124573.htm

10小程序在数据绑定中取整

后面加|Int 过滤就可以了
<view>{{aaa/bbb|Int}}</view>

11小程序遇到push问题

arr1.push(arr2)
当中arr1需要缓存并且是动态获取到的 第一次没有缓存记录 所以它不是数组，arr2是字符串
只需在获取缓存数据时判断得到的是不是数组
例如

var History = wx.getStorageSync('history')||[]

通过 ES6 的 模板字符串 和 属性名表达式，注意在项目配置里面开启ES6 转 ES5。

12小程序遇到无法更改data里单个数组的问题

13下拉刷新 上拉加载

下拉刷新
1、调用系统的API，系统有提供下拉刷新的API接口 onPullDownRefresh/
2、监听scroll-view,自定义下拉刷新，还记得scroll-view里面有一个bindscrolltoupper属性吗？当滚动到顶部/左边，会触发 scrolltoupper 事件，所以我们可以利用这个属性，来实现下拉刷新功能。

上拉加载
1、调用系统的API onReachBottom
2、监听scroll-view，bindscrolltolower滑动到底部的监听

注意：在小程序中,scroll-view组件 与 onPullDownRefresh不能同时使用，一起使用，下拉scroll-view不能触发onPullDownRefresh事件。