微信小程序开发流程

开发流程

1. 在微信公众平台上注册小程序，获取appId
2. 下载安装"微信开发者工具"，下载地址
3. 打开软件，点击文件=> 新建项目，创建小程序。

结构介绍

1. 基本结构由三大部分组成：主体部分（app.js、app.json、app.wxss）、页面（pages）、自定义工具（utils）
2. app.json: 小程序全局配置,pages配置所有页面路径,windows配置顶部,全局的默认窗口表现
3. app.wxss: 整个小程序的公共样式表, 具有 CSS 大部分特性
4. app.js：app.js文件中 APP() 函数用来注册小程序，onLaunch()应用程序开始，会在打开应用时执行，监听小程序初始化, onShow()监听小程序显示，onShow()监听小程序隐藏

小程序中安装插件

1. npm init 初始化项目生成package.json
2. npm install 安装

路由

wx.switchTab(); // 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
wx.reLaunch(); // 关闭所有页面，打开到应用内的某个页面。
wx.redirectTo(); // 关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面
wx.navigateTo(); //保留当前页面，跳转到应用内的某个页面(如：跳转到子页面)，但是不能跳到 tabbar 页面
wx.navigateBack(); // 关闭当前页面，返回上一页面或多级页面,默认返回上一级。

页面生命周期

Page({
  onLoad() {} // 页面加载时触发，一般在onLoad中发送异步请求来初始化页面数据
  onShow() {}  // 页面显示时触发
  onHide() {} // 是页面隐藏时触发
  onUnload() {} //页面卸载（关闭）时触发
})

组件生命周期

Component({
  // 组件自身
  lifetimes: {
    attached() {} // 在组件实例进入页面节点树时执行
    detached () {} // 在组件实例被从页面节点树移除时执行
  },
  // 组件所在的页面
  pageLifetimes: {
    show () { } // 页面被展示
    hide () { } // 页面被隐藏
    resize (size) { } // 页面尺寸变化
  }
})

后台请求

wx.request({
  header: object,
  url: "https://baidu.com",
  data:string/object,
  method: "GET/POST",
  dataType: "json",
  success () {},
  fail () {}
});

注意事项：

1. 背景图片：只支持线上图片和base64图片,不支持本地图片。（建议小图片用base64，大图片存储在数据库，或者以image形式显示）
2. tabbar: icon不能用svg,要用png 或者 jpg。