uniapp嵌入小程序
uniapp 嵌入小程序的方法
使用小程序原生组件
在 pages.json 中配置 usingComponents，引入小程序原生组件。示例：
{
"pages": [
{
"path": "pages/index/index",
"style": {
"usingComponents": {
"custom-component": "/components/custom-component"
}
}
}
]
}通过条件编译实现平台差异
在代码中使用 #ifdef MP-WEIXIN 和 #endif 包裹小程序专用逻辑。例如：
#ifdef MP-WEIXIN
wx.requestPayment({
timeStamp: '',
nonceStr: '',
package: '',
signType: 'MD5',
paySign: '',
success(res) {}
});
#endif调用小程序API
通过 uni.getSystemInfoSync() 获取运行环境后，动态调用小程序API。示例：
const systemInfo = uni.getSystemInfoSync();
if (systemInfo.platform === 'mp-weixin') {
const wx = require('weixin-js-sdk');
wx.miniProgram.navigateTo({ url: '/pages/subpage' });
}注意事项
- 小程序有体积限制（主包2MB，总包20MB），需通过分包加载优化
- 部分uniapp组件在小程序中需特殊处理，如
scroll-view的滚动事件差异 - 真机调试时必须开启微信开发者工具的"不校验合法域名"选项
性能优化建议
减少setData调用频率
将多次数据更新合并为一次，避免频繁触发渲染。示例：
// 不推荐
this.setData({ a: 1 });
this.setData({ b: 2 });
// 推荐
this.setData({
a: 1,
b: 2
});使用自定义组件
将复杂页面拆分为多个自定义组件，利用小程序自身的组件化机制提升性能。配置方法：
{
"component": true,
"usingComponents": {
"sub-component": "../sub/sub"
}
}预加载关键数据
在 onLoad 生命周期中提前请求必要数据，利用小程序后台页面预渲染特性。示例：
onLoad() {
uni.request({
url: 'https://api.example.com/data',
success: (res) => {
this.cachedData = res.data;
}
});
}
