2021-05-13 微信小程序

微信小程序

1、Json（全局配置）配置App.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容
 

2、页面配置 page.json

这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

 

3、目录结构

目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件	必需	作用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式表

一个小程序页面由四个文件组成，分别是：

文件类型	必需	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式表

 

4、常用的指令

1、if判断 在微信小程序中为 wx：if  else if 为 wx：elif  else为 wx：else

wx:for-item="item1"  wx:for-index 来改变for循环默认值 wx：key来绑定index值

2、for循环为 wx：for

3、点击事件为 bindtap="事件名"

4、要用事件传输变量的话需要用data-变量名来传输 接受的话需要在当前文件夹下的js文件下用 

click(e){

    console.log(e,e.target.dataset);

  },

e.target或currentTarget来接收

5、微信小程序的父传子 需要定义一个变量名挂载要传输的变量 在子组件中通过properties来接收数据

子传父 需要在父组件上自定义一个事件和事件名 在子组件上定义一个事件写入事件名 在当前文件夹下的methods方法中通过truggerEvent来触发在父组件上自定义的事件 挂载传世的变量 挂在后需要在父组件文件夹下的js文件中 通过在父组件上自定义的方法来通过obj.tetail.calll来接收数据

6、自定义组件需要在compoents下创建一个文件夹 还需要在当前文件夹下的json文件中写入 component：true

7、引入ui框架需要先下载框架下载好后点击node_moudels使用工具 构建npm来构建一个minprogram——npm 这个文件夹放的就是我们要用的组件和css样式

使用组件的话需要在app.json中的usingComponents下注册

 

8、使用图标的话需要将css粘贴复制到wxss下中引入再在app.wxss中引入

9、

定义生命周期方法

生命周期方法可以直接定义在 Component 构造器的第一级参数中。

自小程序基础库版本 2.2.3 起，组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）。

代码示例：

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})

在 behaviors 中也可以编写生命周期方法，同时不会与其他 behaviors 中的同名生命周期相互覆盖。但要注意，如果一个组件多次直接或间接引用同一个 behavior ，这个 behavior 中的生命周期函数在一个执行时机内只会执行一次。

 

10、应用生命周期

App() 必须在 app.js 中调用，必须调用且只能调用一次，app.js中定义了一些应用的生命周期函数
（1）onLaunch: 初始化小程序时触发，全局只触发一次
（2）onShow: 小程序初始化完成或用户从后台切换到前台显示时触发
（3）onHide: 用户从前台切换到后台隐藏时触发
（4）onError: 小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
后台： 点击左上角关闭，或者按了设备 Home 键离开微信，并没有直接销毁，而是进入后台
前台：再次进入微信或再次打开小程序，相当于从后台进入前台。

11、页面生命周期

js文件中定义了一些页面生命周期函数，下面简述下这些生命周期函数的方法作用
（1）onLoad：首次进入页面加载时触发，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
（2）onShow：加载完成后、后台切到前台或重新进入页面时触发
（3）onReady：页面首次渲染完成时触发
（4）onHide：从前台切到后台或进入其他页面触发
（5）onUnload：页面卸载时触发