微信小程序
微信小程序(以下简称小程序)是微搭支持的一等公民,在微搭中开发的应用可以直接发布成微信小程序。微搭的绝大部分能力都能在小程序中使用,同时小程序的原生 API 也大部分能在微搭中使用。
扩展使用微信原生能力
微搭封装提供了很多小程序能力,比如大部分组件和 API 都能在小程序和 WEB 中正常使用。对于微搭没有封装的小程序能力,微搭中也能正常使用。比如当我们想在小程序直接获取用户的收货地址,我们可以简单的在事件 handler 中调用 wx.chooseAddress
:
export default async function ({ event, data }) {
const res = await wx.chooseAddress();
console.log(res);
// 使用收货地址逻辑
}
我们也可以直接调用微信云开发的能力,比如可以直接在前端代码中调用小程序云开发云函数:
export default async function ({ event, data }) {
const r = await wx.cloud.callFunction({
name: "myFunction",
});
console.log(res);
}
使用微信云开发能力需要注意的是微信云开发和微搭底座腾讯云云开发的差异,如果小程序账号和腾讯云账号没有绑定关联的话,微信云开发中资源和微搭中的资源会是完全独立的,并且微搭中的资源不能通过微信云开发的方式使用。
限制:
- 需要注意的是小程序 API 仅在小程序运行环境中有效,在 WEB 环境(包括微搭的编辑区和预览形态)都不能正常的执行。
- 当前微信原生组件还无法在微搭中简单的使用,必须通过自定义组件来使用。
OpenID / UnionID
小程序场景中获取 openid 和 unionid 是常见的使用场景,这里分别介绍下微搭中获取 openid/unionid 的方式:
openid:
应用前端可以直接通过 $w.auth.currentUser
获取用户信息,小程序登录的话就会包含 openid
unionid:
微搭中暂时没有提供对 unionid 的获取封装,但开发者任然可以通过小程序原有的方式来获取 unionid。比如最简单的在微信云开发环境中新建一个云函数并且在云函数中调用 cloud.getWXContext()
获取 unionid 等信息。
如,先在小程序云开发环境中新建一个云函数 getMPUserInfo
:
const cloud = require("wx-server-sdk");
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV,
});
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext();
return {
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
};
};
然后在微搭应前端调用该云函数即可:
export default async function ({ event, data }) {
const r = await wx.cloud.callFunction({
name: "getMPUserInfo",
});
console.log(res);
}
如果小程序云函数环境和微搭环境不是同一个,则需要独立初始化小程序云开发:
wx.cloud.init({
env: "xxxx", // 调用小程序云开发前初始化
});
Page path
原生小程序中分享、转发、跳转等 api 需要提供页面绝对路径,在微搭体系内,绝对路径获取可以参照如下规则:
主包页面路径为:
/pages/${page.id}/index
子包页面路径为:
/packages/${packageName}/${page.id}/index
,其中 packageName 即为子包标识,可在子包列表及详情中获取。
小程序包大小
微信小程序目前对小程序主包的大小有所限制,超过 2M 的情况会导致小程序不能正常上传发布。当出现小程序包超限而不能发布的时候可以考虑小程序分包和删减代码,在微搭中有几种途径来解决小程序主包大小超限而导致的应用不能发布问题:
- 在应用设置中开启“小程序异步加载组件库”,将微搭运行时的内容放到分包中异步加载,代价是小程序会增加首屏加载时间
- 使用子应用来实现小程序分包,将部分页面逻辑放到子应用中实现
- 分析并优化应用代码逻辑