跳到主要内容

微信小程序开发笔记

程序分包

根据官方文档,小程序分包限制1说明如下:

  1. 单个分包/主包大小不能超过 2M
  2. 整个小程序所有分包大小不超过 20M
  3. 分包数量没有限制

异步加载分包

可以使用 require 加载分包模块2

require.async 链式调用

require
.async('path/to/mod')
.then((mod) => {
console.log(mod)
})
.catch(({ errMsg, mod }) => {
console.error(`path: ${mod}, ${errMsg}`)
})

同一包内调用

// common.js
function sayHello(name) {
console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye
var common = require('common.js')
Page({
helloMINA: function() {
common.sayHello('MINA')
},
goodbyeMINA: function() {
common.sayGoodbye('MINA')
}
})

跨分包异步调用

// subpackage/common.js 分包 common 文件
export const sayHello = () => console.log("hello")
// pages/index.js 主包页面
let common;
require('../../subpackage/common.js', (mod) => {
common = mod
}, ({ errMsg, mod }) => {
console.error(`path: ${mod}, ${errMsg}`)
})

Page({
sayHello() {
common && common.sayHello()
}
})

小程序助手

搜“小程序助手”小程序3,开发必备

"小程序助手" 是微信公众平台发布的官方小程序,旨在帮助小程序相关成员在手机端更方便、及时地管理小程序。

小程序横屏

设置全局横屏:待补充

设置单个页面横屏:待补充

小程序视频播放

多次请求问题(目前至少两次)

同一个页面多次视频请求:控制最多同时只显示一个视频组件(只触发一次请求),不显示的用图片替换

解决播放速度问题:不支持引用第三方视频链接,要么实现流播放,要么用视频号,要么压缩视频(用 HandBrake)

参考文章:从天猫某活动视频不必要的3次请求说起 « 张鑫旭-鑫空间-鑫生活

设置全屏播放:待补充

背景设置

小程序不支持复杂的背景设置:待补充

点击事件

text 标签没有 @click 事件,改用 view 标签或改用 @tap 事件

chooseMessageFile

如果设置为:extension: ['.pdf', '.docx', '.doc'],在 iOS 端无法读取文件

应改为:extension: ['pdf', 'docx', 'doc']

scroll-view

第一个子元素不能设置 overflow: auto

webview 页面复制粘贴

如果在 webview 页面实现复制粘贴,可以使用 document.execCommand4(可以跳过浏览器权限要求)

下载文件名称

默认用小程序下载的文件都是随机命名,需要手动设置文件名,待补充

获取用户昵称和头像

通过 wx.getUserInfo() 接口已不支持返回用户头像和昵称,目前微信平台会统一返回默认灰色头像,昵称统一返回“微信用户”。

当小程序需要让用户完善个人资料时,可以通过微信提供的头像昵称填写能力5快速完善。

小程序预览体积过大

项目开启压缩或 npm run build,同时在微信开发者工具开启限制最大为4M,基本可以解决分包体积过大问题

如何调试 Webview?

如何在模拟器上调试?如何在真机上调试?webview 缓存问题,阁下又是如何应对?

小程序登录规范

小程序登录规范要求,不登录页也能体验小程序,所以一打开界面就跳转登录,不登录没发用的小程序是不符合规范的

参考:小程序帐号登录规范要求与修改指引 | 微信开放社区: https://developers.weixin.qq.com/community/develop/doc/000ea46d08898015317b956c65fc09

Footnotes

  1. https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html

  2. https://developers.weixin.qq.com/miniprogram/dev/reference/api/require.html

  3. https://developers.weixin.qq.com/miniprogram/dev/devtools/mydev.html

  4. https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

  5. https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html