App生命周期

• onLaunch - 初始化
• onShow - 显示时
• onHide - 隐藏时
• onError - 异常时

全局变量

在app.js的globalData对象里面定义:

// app.js
App({
  globalData: {
    userInfo: null
  }
})

页面生命周期

页面的生命周期钩子函数都必须放在Page函数里面。

• onLoad - 页面加载时
• onReady - 初次渲染时
• onShow - 页面显示时
• onHide - 页面隐藏时
• onUnload - 页面卸载时

页面事件回调钩子

• onPullDownRefresh - 页面下拉时
• onReachBottom - 页面上拉触底时
• onShareAppMessage - 点击右上角分享时

组件内更新页面数据使用 setData方法

Page({
  data: {
    logs: []
  },
  onLoad() {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(log => {
        return {
          date: util.formatTime(new Date(log)),
          timeStamp: log
        }
      })
    })
  }
})

组件内使用require引入js文件

const util = require("../../utils/util")
Page({})

小程序跳转

• wx.navigateTo 入栈跳转，页面未销毁，可以使用wx.navigateBack 返回来源页面

• wx.redirectTo 重定向跳转，关闭当前页面

• wx.switchTab tab页面跳转方式

• wx.reLaunch 关闭所有页面，可以携带参数跳转任意页面

• 使用 navigator 类似于a链接跳转

小程序获取html数据

html通过data-自定义属性设置动态参数，在事件里面通过e.currentTarget.dataset.url 获取url属性。

<view  data-url="{{itme.path}}"></view>
e.currentTarget.dataset.url

页面路径传参

页面传参

wx.navigateTo({
     url: '../list/index?md='+files,
})

接收页面

onLoad(options) {
      const {md} = options
}

image 的mode类型

缩放

scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来

aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。

widthFix 宽度不变，高度自动变化，保持原图宽高比不变

裁剪

top 不缩放图片，只显示图片的顶部区域

bottom 不缩放图片，只显示图片的底部区域

center 不缩放图片，只显示图片的中间区域

left 不缩放图片，只显示图片的左边区域

right 不缩放图片，只显示图片的右边区域

top left 不缩放图片，只显示图片的左上边区域

top right 不缩放图片，只显示图片的右上边区域

bottom left 不缩放图片，只显示图片的左下边区域

bottom right 不缩放图片，只显示图片的右下边区域

常见问题

1.小程序体积不得超过2M，超过如何处理？

超过2M，上传打包会失败！

解决办法：在项目配置里排除指定目录（静态资源目录）project.config.json (注意：排除后的文件不会上传)

"packOptions": {
    "ignore": [
        {"type": "folder","value": "assets/uploads"}
    ],
},

2.bindtap和catchtap的区别是什么?

相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分 不同点：他们的不同点主要是bindtap是不会阻止冒泡事件的，catchtap是阻值冒泡的

3.小程序页面之间传递参数的方法有哪些？

• 1.使用全局变量
• 2.页面跳转或者重定向使用url传参数
• 3.父组件通过属性传递数据，子组件通过 properties 对象接收父传参属性。子组件也可以通过 triggerEvent 方法触发父组件方法传递参数（类似vue emit)。

4.小程序关联微信公众号如何确定用户的唯一性

使用 wx.getUserInfo 方法 withCredentials 为 true 时 可获取 加密信息encryptedData，里面有 union_id。后端需要进行对称解密。

5.小程序对wx:if 和 hidden使用的理解？

• wx:if 有更高的切换消耗。

• hidden 有更高的初始渲染消耗。

  因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

6.webview中的页面怎么跳回小程序中？

引入 jweixin.js 文件，然后再通过 miniProgram调用navigateTo跳转方式。

wx.miniProgram.navigateTo({
	url: '/pages/login/login'+'$params'
})

如果跳转到tab标签页面，需要配合 switchTab 跳转。

7.如何实现下来刷新

首先在全局 config 中的 window 配置 enablePullDownRefresh ，在 Page 中定义 onPullDownRefresh 钩子函数,到达下拉刷新条件后，该钩子函数执行，发起请求方法 请求返回后，调用wx.stopPullDownRefresh 停止下拉刷新。