| 小程序

小程序开发

面试常见

生命周期

  • 小程序app生命周期（app.js）
    • onLaunch 小程序初始化完成时触发；同wx.getLaunchOptionsSync()；参数包括：
      • path 小程序路径
      • scene 场景值
      • query 启动参数
      • 其他的一些来源信息
    • onShow 小程序启动或从后台切入前台显示触发；同wx.onAppShow()绑定监听；参数同上
    • onHide 小程序从前台进入后台时触发；同wx.onAppHide()；参数同上
  • 小程序页面生命周期
    • onLoad(options) 页面加载时触发；可获取当前页面路径参数
      • options
    • onShow 页面显示或切入前台时触发
    • onReady 页面初次渲染完成时触发；可以和视图层进行交互
    • onHide 页面隐藏/切入后台时触发
    • onUnload 页面卸载时触发
    • onRouteDone 路由动画完成时触发
  • 组件生命周期
    • lifetimes 组件生命周期
      • created 组件实例刚刚被创建时
      • attached 组件实例进入页面节点树时
      • ready 组件在视图层布局完成后
      • moved 组件实例被移动到节点树另一个位置时
      • detached 组件实例被从页面节点树移除时
      • error 每当组件方法抛出错误时
    • pageLifetimes 组件所在页面生命周期
      • show 组件所在的页面被展示时
      • hide
      • resize
      • routeDone
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        Component({
            lifetimes: {
                attached: function() {
                // 在组件实例进入页面节点树时执行
                },
                detached: function() {
                // 在组件实例被从页面节点树移除时执行
                },
            },
            pageLifetimes: {
                show: function() {
                // 页面被展示
                },
                hide: function() {
                // 页面被隐藏
                },
                resize: function(size) {
                // 页面尺寸变化
                }
            }
        })

路由跳转

  • wx.switchTab() 跳转tabBar页面, 其他跳转不能跳转tabBar页
  • wx.reLaunch() 关闭所有页面，跳转应用内某个页面
  • wx.redirectTo() 关闭当前页，跳转应用内其他页
  • wx.navigateTo() 保留当前页面，跳转应用内其他页。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
  • wx.navigateBack() 关闭当前页，返回上级或多级页

页面传参

  • globalData 全局变量 
    1
    2
    3
    4
    5
    6
    7
    // app.js
    App({
        globalData: {}
    })
    // a.js
    const app = getApp()
    //app.globalData
  • stroage
  • 路由地址传参 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 上述跳转方式都能传参
    wx.navigateTo({
        url: '/a?id=1'
    })
    // 在onload中获取路由传参
    Page({
        onLoad(options) {
            //options.id
        }
    })
  • 事件通道: 双向通信 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    // wx.navigate()独有，通过自定义事件 emit和on 触发和监听事件
    wx.navigateTo({
        url: 'test?id=1',
        events: {
            // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
            someEvent: function(data) { // someEvent 自定义事件名称
                console.log(data)
            }
        },
        success: function(res) {
            // 通过eventChannel向被打开页面传送数据
            res.eventChannel.emit('sendSomThing', { data: 'test' })
        }
    })

    Page({
        onLoad: function(option){
            console.log(option.query)
            const eventChannel = this.getOpenerEventChannel()   // 获取事件通道
            eventChannel.emit('someEvent', {data: 'test'});
            // 监听sendSomThing事件，获取上一页面通过eventChannel传送到当前页面的数据
            eventChannel.on('sendSomThing', function(data) {
                console.log(data)
            })
        }
    })
  • 页面栈：页面栈最多十层 
    1
    2
    3
    4
    5
    //获取当前页面栈
    const pages = getCurrentPages();
    //获取上一页面对象
    let prePage = pages[pages.length - 2];
    console.log(prePage.data.name) // 上一页中的数据

组件间传参

  • dataset
  • properties == props
  • triggerEvent == $emit

请求封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import { baseUrl } from './http.js'
 
module.exports = {
/*
 * url:请求的接口地址
 * methodType:请求方式
 * data: 要传递的参数
*/
  request : function(url, methodType, data){
    let fullUrl = `${baseUrl}${url}`
    let token = wx.getStorageSync('token') ? wx.getStorageSync('token')  : ''
    wx.showLoading({ title: "加载中"  });
    return new Promise((resolve,reject)=>{
      wx.request({
        url: fullUrl,
        method:methodType,
        data,
        header: {
          'content-type': 'application/json', // 默认值
          'x-api-key': token,
        },
        success: (res) => {
          if (res.data.status == 200) {
            resolve(res.data)
          }else{
            wx.showToast({
              title: res.data.msg,
              icon:'none'
            })
            reject(res.data.message)
          }
        },
        fail: () => {
          wx.showToast({
            title: '接口请求错误',
            icon:'none'
          })
          reject('接口请求错误')
        },
        complete: () => {
          setTimeout(() => {
            wx.hideLoading()
          }, 100)
        }
      })
    })
  }
}

优化启动加载速度

  • 减小默认data大小
    • 小程序新开页面时会深拷贝page对象，所以数据量大的话会影响速度
  • 分包加载
    • 在app.json中preloadRule字段配置，预加载实现加速
  • 压缩代码
  • 减少图片等资源或压缩大小
  • 及时清理无用资源、代码
  • 组件化一定程度也能提高速度

webview

  • 需后台配置合法业务域名才能加载
  • 网页使用微信JSSDK 1.3.2以上提供返回小程序接口
    • wx.miniProgram.navigateTo 参数和小程序里跳转一样
    • 。。。其他跳转方法和小程序里一样
  • webview环境下JSSDK部分接口能用，不是全部能用

事件

  • 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

    • 用bind绑定事件
      • bindtap
      • bindtouchstart
      • bindtouch…

  • 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

    • catch绑定事件
      • catchtap

双向绑定

1
<input model:value="{{value}}" />
1
2
3
4
5
6
7
8
9
10
11
12
// 自定义组件中双向绑定
// custom-component.js
Component({
  properties: {
    myValue: String
  }
})

// <!-- custom-component.wxml -->
<input model:value="{{myValue}}" />

<custom-component model:my-value="{{pageValue}}" />

授权认证过程

支付实现

  • 小程序注册，要以公司的身份去注册一个小程序，才有微信支付权限
  • 绑定商户号
  • 在小程序填写合法域
  • 调用wx.login()获取appid
  • 调用wx.requestPayment()

文件描述

  • app.json
    • 当前小程序的全局配置，包括所有页面路径、界面表现、网络超时时间、底部 tab 、组件注册等。
  • project.config.json
    • 开发者工具配置文件
  • sitemap.json
    • 小程序内搜索配置

发布流程

  • 注册微信小程序账号
  • 获取微信小程序的AppID
  • 下载微信小程序开发者工具
  • 创建demo项目
  • 去微信公众号配置域名
  • 手机浏览
  • 代码上传
  • 提交审核
  • 小程序发布
ESC