微信小程序基础

生命周期简介

上拉加载 下拉刷新

上拉加载

触底函数 onReachBottom 与onLoad onShow同级

下拉刷新

下拉监听函数 onPullDownRefresh
在page中配置相应的json里面配置 "enablePullDownRefresh": true,

页面的其他函数

新建界面

在pages节点点击右键新建page 推荐先创建同名文件夹，因为新建界面会创建四个文件.json .js .wxml .wxss
.json 页面的配置文件例如标题、标题颜色等
.js 就是js文件
.wxml 就是html 页面文件 只是div都变成了view
.wxss 就是css文件

页面配置在其对面的json文件

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

底部导航栏tabBar配置

在app.json中配置tabbar即可 官方文档

页面跳转

传值

wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

页面接收

//test.js
Page({
  onLoad: function(option){
    console.log(option.query)
    
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
})

网络请求

/**
 * @param {String} url 
 * arguments下标从0开始  arguments[0]其实就是url
 * 第一个参数url为必填参数
 * 第二个参数定义请求方式 GET POST ...可不传
 * 第三个参数定义data对象{}//可不传
 * 第四个参数 默认为application/json
 */
function requestUtil(url) {
  var arg1 = (typeof arguments[1] == 'undefined') || arguments[1] == null || arguments[1] == "" ? "GET" : arguments[1]
  var arg2 = arguments[2] == null ? {} : arguments[2];
  var arg3 = arguments[3] == null ? {
    'content-type': 'application/json',
  } : arguments[3];

  return new Promise((resolve, reject) => {
    wx.request({
      url: url,
      method: arg1,
      header: arg3,
      data: arg2,
      success: (result) => {
        resolve(result);
      },
      fail: (res) => {
        reject(res);
      },
    })
  });
}

全局参数globalData

全局属性，哪个界面都能拿到
使用方法

//在app.js中定义globalData
App({
    globalData: {
        name: '张三',
        age: 18
    }
})

随便哪个页面使用

//由于这个是以app为实例的所以使用时需要getApp()
getApp().globalData.name;//这是获取
getApp().globalData.name = '李四';//这是修改