强烈推荐的微信小程序开发总结-一一网

遇到过的坑

小程序页面栈最多十层

问题：假设小程序内有12个问题页面，答完上一个问题后wx.navigateTo到下一个问题页面，那么到第十题时，你会发现wx.navigateTo跳转不到下一个页面。这是因为使用wx.navigateTo跳转会把当前页面保存到页面栈中，而小程序页面栈最多十层。

require的路径不支持绝对路径

问题：在嵌套比较深的目录层级里，引用utils/request.js，需要慢慢../到根目录

// in page.js
const util = app.require('../../../../utils/util.js');
复制代码

解决：在App绑定require，Page里获取app，直接app.require引入

// in app.js
App({
  onLaunch() {
    
  },
  require(path) {
    return require(`${path}`)
  },
})

// in page.js
const app = getApp()
const util = app.require('./utils/util.js');
复制代码

一些兼容问题

IOS 的 Date 构造函数不支持2018-04-26这种格式的日期，必须转换为2018/04/26这种格式
IOS 系统不支持webp
小程序中使用web-view打开pdf, IOS 可以正常打开，Android 打开为空白

解决：使用wx.downloadFile和wx.openDocument

wx.downloadFile({
  url: 'https://.../XXX.pdf', //要预览的 PDF 的地址
  success: function (res) {
    if (res.statusCode === 200) { //成功
      var Path = res.tempFilePath //返回的文件临时地址，用于后面打开本地预览所用
      wx.openDocument({
        fileType: 'pdf', // 文件类型
        filePath: Path, //要打开的文件路径
        success: function (res) {
          console.log('打开 PDF 成功');
        }
      })
    }
  },
  fail: function (err) {
    console.log(err); //失败
  }
})
复制代码

常用的库

miniprogram-api-promise 扩展小程序api支持promise

安装

npm install --save miniprogram-api-promise
复制代码

使用（开源项目中使用）

在小程序入口（app.js）调用一次promisifyAll，只需要调用一次。
示例:

import { promisifyAll, promisify } from 'miniprogram-api-promise';

const wxp = {}
// promisify all wx's api
promisifyAll(wx, wxp)

// 使用
wxp.login().then(res => {
  // do something
})
复制代码

wx-promise-pro扩展小程序api支持promise

安装

npm i wx-promise-pro -S
复制代码

使用

在小程序入口（app.js）调用一次promisifyAll，只需要调用一次。
示例:

import { promisifyAll, promisify } from 'wx-promise-pro'

// promisify all wx‘s api
promisifyAll()

// 使用
wxp.login().then(res => {
  // do something
})
复制代码

Vant Weapp 小程序 UI 组件库

安装

npm i @vant/weapp -S --production
复制代码

预览

可能使用到的插件

微信同声传译

介绍

微信同声传译插件是微信自研的语音输入，文本翻译等功能的插件封装，用于提供给第三方小程序调用。

体验

translator.d16d41ab.jpg

性能优化

图片渲染优化

利用压缩技术对图片进行压缩，在图片显示质量不受太大影响的情况下，可以对图片进行适度压缩，png 推荐tinypng.com/
小程序Image组件支持通过配置lazy-load参数来实现懒加载懒加载
利用cdn服务商（阿里云OSS）提供的能力获取适当的图片,支持格式转换、质量变换、尺寸处理
安卓手机使用webp格式的图片

// 获取用户手机操作系统
let supportWebp = false
const res = wx.getSystemInfoSync()
if (res.platform.toLocaleLowerCase() !== 'ios') {
  supportWebp = true
} else {
  supportWebp = false
}

// in app.wxs 利用阿里云oss提供的服务转换图片格式
var wrapUrl = function (supportWebp, url) {
  var fConfig = ''
  if (supportWebp) {
    fConfig = '?x-oss-process=image/format,webp'
  }
  return url + fConfig
}

// in wxml
<image src="{{ tools.wrapUrl(supportWebp, url) }}"  />
复制代码

减小代码包体积

使用小程序瘦身工具，通过剔除无用文件、压缩图片、复用代码等方式减少小程序代码包体积

npm install -g miniprogram-slim
复制代码

某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。
在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。
在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。
目前小程序分包大小有以下限制：