微信小程序学习笔记

此文主要总结一下对小程序开发的一些认识，本人非专业前端开发，主要是写给自己看的。

小程序开发阶段主要使用到两个工具

1：微信开发者工具

主要用于代码编写和效果预览，还可以进行 “真机调试“

2：云开发控制台

这可以看作是微信提供的小型服务器，通过可视化控制台能够查看数据库和文件存储情况等，轻度需求完全可以省去自备服务器。

小程序的几种文件格式

WXML：对应HTML，提供很多常用的组件。
WXSS：对应CSS，基本没差别，目前体会最深的是尺寸单位rpx替代像素单位px，能很方便的适配各种分辨率的手机。
JS：同JS。
JSON：同JSON。

小程序的目录结构很简单

pages:一个页面对应一个文件夹，一个文件夹一般都包含wxml、wxss、js、json，开发过程非常顺手。

 1. wxml确定好大致的页面元素
 2. wxss对每个元素进行样式调整
 3. js按照样板，确定好要绑定的数据，以及绑定的函数
 4. json主要是配置文件的作用，也可以存放一些数据源。

app.js\app.json\app.wxss：顾名思义，他们主要是app的全局配置，需要注意的是新建的pages需要在app.json中注册。

下面是常用接口的调用方法示例

1：加载框的show和hide

wx.showLoading({
      title: '加载中',
      icon: 'loading',
    })
wx.hideLoading()  

2：http请求

wx.request({
  url: 'http://xxx.com',
  data: {
    current_page: 1,
    page_size: 10        
  },
  header: {
    'content-type': 'application/x-www-form-urlencoded' //默认值是json
  },
  method: 'POST', //请求方式
  success: res => {
    if (res.data.list.length == 0) {
      //提示框
      wx.showToast({
        title: '没有更多',
        duration: 500
      })
    }
    Array.prototype.push.apply(this.data.list, res.data.list)
    this.setData({
      'list': this.data.list
    });
  }
})

3：切换tabBar时的监听

onShow: function() {
    //TO DO
}

4：调用自定义云函数

wx.cloud.callFunction({
      name: 'sum',
      data: {
        a: 5,
        b: 3
      },
      success: res => {
        console.log('sum:', res.result.sum)
      }
})

---

目前正在研究其他技术，小程序方面的笔记再后续有投入时再更新。

---