微信小程序 基本操作

建立项目：

https://developers.weixin.qq.com/miniprogram/dev/

一、首页的tab效果：

目录.png

1、如图，建立相应的文件夹及其中的 js文件，wxml文件及wxss文件。将图片放入images文件夹中。

2、在app.json中：

 "tabBar": {
    "color": "#bfbfbf",
    "selectedColor": "#d81e06",
    "list": [
      {
        "selectedIconPath": "images/icon_index.png",
        "iconPath": "images/index.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "selectedIconPath": "images/icon_type.png",
        "iconPath": "images/type.png",
        "pagePath": "pages/part/part",
        "text": "分类"
      },
      {
        "selectedIconPath": "images/icon_cart.png",
        "iconPath": "images/cart.png",
        "pagePath": "pages/shop/shop",
        "text": "购物车"
      },
      {
        "selectedIconPath": "images/icon_person.png",
        "iconPath": "images/person.png",
        "pagePath": "pages/person/person",
        "text": "个人"
      }
    ]
  }

如图：

app.json.png

二、调用API接口：

1. js中：

Page({
  data: {
     data:''
  },
  onLoad: function (options) {
    var that = this;
    wx.request({
      url: '接口地址',

     // POST方式      
     method: 'POST',
      data: {
        //传参
      },
      header: {
        'content-type': 'application/json'
      },

      success: function (res) {
        // console.log(res)
        that.setData({
          data: res.data.data
        })
      }
    })
  }
})

2. wxml中：

<view wx:for-items="{{data}}" wx:key="index">{{item.name}}</view>

三、返回上一页：

1. wxml中：

<view bindtab="bindFocus"></view>

2. js中：

bindFocus: function () {
    var pages = getCurrentPages(); // 当前页面  
    var beforePage = pages[pages.length - 2]; // 前一个页面  
    // console.log("beforePage");  
    // console.log(beforePage);  
    wx.navigateBack({
      success: function () {
        beforePage.onLoad(); // 执行前一个页面的onLoad方法  
      }
    });
  },

四、轮播图

可参考：
https://blog.csdn.net/X8i0Bev/article/details/78883631