0、微信小程序 App.Json\Page.Json 配置

参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

1、数据交互：

wx.request(OBJECT) 方法，类似于 JQ 的 AJAX 方法，使用方法如下：

var that = this; // 这个地方非常重要，重置data{}里数据时候setData方法的this应为以及函数的this, 如果在下方的sucess直接写this就变成了wx.request()的this了
wx.request({
  url: 'test.php', // 仅为示例，并非真实的接口地址
  data: {
    name: '张三',
    age: '18'
  },
  method: 'GET', // （需大写）有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
  dataType: 'json', // 如果设为json，会尝试对返回的数据做一次 JSON.parse
  responseType: 'text', // 设置响应的数据类型。合法值：text、arraybuffer
  header: {
    'content-type': 'application/json', // 默认值
    'content-type':  'application/x-www-form-urlencoded', // 如果使用 POST 请求，请使用此 header
  },
  success: function(res) {
    // 收到开发者服务成功返回的回调函数
    console.log(res.data);
    that.setData({
      // 数据绑定
      'result': res.data.result
    });
  },
  fail: function(err) {
    // 接口调用失败的回调函数
    console.log(err);
  },
  complete: function() {
    // 接口调用结束的回调函数（调用成功、失败都会执行）
  }
});

<button bindtap="clickMe1">Hello World 按钮</button>
<button bindtap="clickMe2">网络请求按钮</button>
<view wx:for="{{result}}" wx:for-item="value" style='text-align:center; padding-top:10px'>
    {{value.name}}
</view>

页面结果：

SUCCESS 返回参数说明：

data:{ // 开发者服务器返回的数据 (Object/String/ArrayBuffer)
  name: "张三",
  age: "18",
  result: {
    0:"刘强东夫妻下午茶"
    1:"微信外链分享新规"
    2:"iOS 11.4发布"
    3:"首座跨断裂带大桥"
    4:"要求员工活100岁"
    5:"星巴克停业半天"
    6:"要求员工活100岁"
  },
  errMsg:"request:ok",
  header: { // 开发者服务器返回的 HTTP Response Header (Object), 最低版本:1.2.0
    Cache-Control:"no-store, no-cache, must-revalidate, post-check=0, pre-check=0"
    Connection:"Keep-Alive"
    Content-Type:"text/html"
    Date:"Wed, 30 May 2018 07:54:50 GMT"
    Expires:"Thu, 19 Nov 1981 08:52:00 GMT"
    Keep-Alive:"timeout=5, max=100"
    Pragma:"no-cache"
    Server:"Apache/2.4.27 (Win32) OpenSSL/1.0.2l mod_fcgid/2.3.9"
    Set-Cookie:"ZDEDebuggerPresent=php,phtml,php3; path=/,PHPSESSID=t1p9nh3udiciim88cjie3fo8n5; path=/"
    Transfer-Encoding:"chunked"
    X-Powered-By:"PHP/5.4.45"
  },
  statusCode: 200, // 开发者服务器返回的 HTTP 状态码 (Number)
}

2、数据绑定：

this.setData() 使用方法如下：

this.setData({
    name: 'hello world'
});

动态数据绑定方法：
<view> {{name}} </view>

获取全部数据：
var data = this.data;

3、标签调用 JS 函数

原生 H5 + JS 写法：
<botton onclick='clickMe'>点击我</botton>

微信小程序写法
<botton bindtap='clickMe'>点击我</botton>

4、bindtap 传值方式

通过 data-* 的方式传递参数。然后从相应函数的参数 event 中获取对应的值。此处使用 data-imgs 传递将要预览的图片的地址数组。则在相应函数中则通过 event.currentTarget.dataset.imgs 即可获得相应的值。同理 data-currentimg。则是通过 event.currentTarget.dataset.currentimg 获取传入的值。

5、微信小程序之数组操作：push 与 concat 的区别 

var arr = [];  
arr.push(1);  
arr.push(2);  
arr.push([3, 4])  
arr.push(5, 6);  
arr = arr.concat(7);  
arr = arr.concat([8, 9]);  
arr = arr.concat(10, 11);  
for(var i in arr){  
  console.log(i+"-----"+arr[i]);  
}

打印结果如下：
index.js [sm]:180 0-----1
index.js [sm]:180 1-----2
index.js [sm]:180 2-----3,4
index.js [sm]:180 3-----5
index.js [sm]:180 4-----6
index.js [sm]:180 5-----7
index.js [sm]:180 6-----8
index.js [sm]:180 7-----9
index.js [sm]:180 8-----10
index.js [sm]:180 9-----11

区别：1、push 遇到数组参数时，把整个数组参数作为一个元素；而 concat 则是拆开数组参数，一个元素一个元素地加进去。  2、push 直接改变当前数组；concat 不改变当前数组。

6、使用 scroll-view 做上拉加载 

参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

7、解决微信小程序组件 scroll-view 中 bindscrolltolower 事件无法触发的问题

解决方案一：

<scroll-view scroll-y="true" bindscrolltolower="ScrollLower" style="position: absolute; bottom: 0; left: 0; right: 0; top: 0;" lower-threshold="200">
<view>111111111111111111111111111</view>
<view>111111111111111111111111111</view>
......
<view>111111111111111111111111111</view>
<view>111111111111111111111111111</view>
</scroll-view>

Page({
    /**
     * 滚动到底部/右边，scrolltolower 事件
     */
    ScrollLower: function() {
        console.log(1111);
    },
})

解决方案二：

<scroll-view scroll-y="true" bindscrolltolower="ScrollLower" style="height:{{scrollHeight}}px;" lower-threshold="200">
<view>111111111111111111111111111</view>
<view>111111111111111111111111111</view>
......
<view>111111111111111111111111111</view>
<view>111111111111111111111111111</view>
</scroll-view>

Page({
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
        var that = this;
        wx.getSystemInfo({
            success: function (res) {
                that.setData({
                    scrollHeight: parseInt(res.windowHeight)
                });
            }
        });
    },
    /**
     * 滚动到底部/右边，scrolltolower 事件
     */
    ScrollLower: function() {
        console.log(1111);
    },
})

8、页面传值

参考文档：https://www.jianshu.com/p/0135769db89c

9、微信小程序----组件之textarea

参考文档：https://blog.csdn.net/zhaihaohao1/article/details/77882207

10、Page.JS 函数介绍

Page({
    /**
     * 页面的初始数据
     */
    data: {
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
    },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
    }
})

App({
    /**
     * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
     */
    onLaunch: function () {
    },
    
    /**
     * 当小程序启动，或从后台进入前台显示，会触发 onShow
     */
    onShow: function (options) {
    },
    
    /**
     * 当小程序从前台进入后台，会触发 onHide
     */
    onHide: function () {
    },
    
    /**
     * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
     */
    onError: function (msg) {
    }
})