微信小程序开发

文档：https://www.w3cschool.cn/weixinapp/weixinapp-scroll-view.html

app.json全局布局显示

{
    //小程序页面配置，可以直接在该配置中新建一个页面路径，然后编译，可以快速构建一个页面文件夹
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/login/index",
    "pages/my/my"
  ],
  "tabBar": {
    "position": "bottom",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "selectedColor": "#000000",
    "list": [
    ]
  },
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "networkTimeout": {
    "connectSocket": 10000,
    "uploadFile": 10000,
    "downloadFile": 10000
  },
  "sitemapLocation": "sitemap.json"
}

微信小程序生命周期

object参数：

属性 类型 描述 触发时机
onLaunch Function 生命周期函数–监听小程序初始化 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onShow Function 生命周期函数–监听小程序显示 当小程序启动，或从后台进入前台显示，会触发 onShow
onHide Function 生命周期函数–监听小程序隐藏 当小程序从前台进入后台，会触发 onHide
onError Function 错误监听函数 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
onPageNotFound Function 页面不存在监听函数 当小程序出现要打开的页面不存在的情况，会带上页面信息回调该函数，详见下文
其他 Any 开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问

应用生命周期：

1、用户首次打开小程序，触发 onLaunch（全局只触发一次）。

2、小程序初始化完成后，触发onShow方法，监听小程序显示。

3、小程序从前台进入后台，触发 onHide方法。

4、小程序从后台进入前台显示，触发 onShow方法。

5、小程序后台运行一定时间，或系统资源占用过高，会被销毁。

前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。需要注意的是：只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁

页面生命周期：

1、小程序注册完成后，加载页面，触发onLoad方法，一个页面只会调用一次。

2、页面载入后触发onShow方法，显示页面，每次打开页面都会调用一次。

3、首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。

4、当小程序后台运行或跳转到其他页面时，触发onHide方法。

5、当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。

6、当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload

wx.navigateTo跳转状态下，页面A和页面B的生命周期逻辑

1、进入A页面：A执行onLoad()–>onShow()–>onReady()；

2、A页面navigateTo B页面：A执行onHide()，B执行onLoad()–>onShow()–>onReady()；

3、B页面返回A页面：B执行onUnload()，A执行onShow()；

4、退出A页面：A执行onUnload()。

应用生命周期影响页面生命周期

1、小程序初始化完成后，页面首次加载触发onLoad，只会触发一次。

2、当小程序进入到后台，先执行页面onHide方法再执行应用onHide方法。

3、当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法。

app.js全局数据和全局方法

1. App()函数注册一个小程序，接受一个object参数，其指定小程序的生命周期函数等
   ，在别的页面的js文件中可以通过getApp()获取小程序的，可以调用全局数据和方法。

config.js 小程序通信配置

在该文件中配置通用的请求方法和服务器方法路径

/**
 * 小程序通信配置文件
 */
var host = '*********'
var schem = "https"
var base = `${schem}://${host}/api`;
var config = {
  getJson: function (url, data, callback) {
    var token = wx.getStorageSync('token')
    console.log("token", token);
    wx.request({
      url: url,
      method: 'GET',
      header: {
        token: token,
      },
      data: data,
      success: function (res) {
        if (res.data.errcode == 401) {
          //登陆态过期了
          wx.navigateTo({
            url: '/pages/login/index',
          })
        } else {
          if (res.data.errcode == 0) {
            callback(res.data.res);
          }
        }
      }
    })
  },
  postJson: function (url, data, callback) {
    var token = wx.getStorageSync('token')
    wx.request({
      url: url,
      method: 'POST',
      header: {
        token: token,
      },
      data: data,
      success: function (res) {
        if (res.data.errcode == 401) {
          //登陆态过期了
          wx.navigateTo({
            url: '/pages/login/index',
          })
        } else {
          if (res.data.errcode == 0) {
            callback(res.data.res);
          }
        }
      }
    })
  },
 
  service: {
      //从这里开始是新接口
    signUp: `${schem}://${host}/api/user/login`, //注册获取token
    update_user_info: `${schem}://${host}/api/user/update_user_info`, //更新用户信息
  }
}
module.exports = config;

app.wxss配置全局样式导入weui.wxss

页面.wxml编写html页面原型

使用{{页面data数据}} wx:for 循环 要是用wx:key , wx:if 条件

catchtap绑定点击事件并阻止冒泡时间

bindtap绑定普通点击事件

页面.wxss页面样式

主要使用display:flex用来编写样式,标准单元rpx

页面.js页面数据和方法

data：{}定义页面数据

getApp（）获取全局数据和方法

require(’…/…/config’)获取全局配置

this.setData({

}),动态的绑定数据并返回给前端页面

通过data-参数绑定参数

e.currentTarget.dataset获取点击事件传递过来的参数

onLoad：function（options）{

}

options：及从上个页面携带过来的参数。