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

·  阅读 7108
强烈推荐的微信小程序开发总结

遇到过的坑

小程序页面栈最多十层

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

require的路径不支持绝对路径

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

// in page.js
const util = 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这种格式

image组件使用webp图片时,IOS需要设置webp属性

Android手机在onShow内调用wx.showModal,如果不关闭弹窗(直接点击右上角退出小程序),弹窗不会销毁,再次进入页面触发onShow时会出现两次弹窗,IOS正常

小程序中使用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
复制代码

预览

qrcode-201808101114.jpeg

可能使用到的插件

微信同声传译

介绍

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

体验

translator.d16d41ab.jpg

性能优化

图片渲染优化

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

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

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

减小代码包体积

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

npm install -g miniprogram-slim
复制代码

分包加载

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

  • 整个小程序所有分包大小不超过 20M
  • 单个分包/主包大小不能超过 2M

对小程序进行分包,可以优化小程序首次启动的下载时间,以及在多团队共同开发时可以更好的解耦协作。 ​

参考文章:

  1. 如何打造小程序体验评分满分 - 京喜小程序优化实践
  2. 强烈推介的几个微信小程序开发小技巧,简单又实用

作者其他文章:

  1. 微信小程序app.onLaunch与page.onLoad异步问题
  2. 手把手,带你撸小程序商城

分类:
前端
分类:
前端