有奖捉虫:办公协同&微信生态&物联网文档专题 HOT
文档中心 > 腾讯云微搭低代码 > 最佳实践 > 实现移动端和 PC 端显示不同首页
在搭建应用时我们可能会遇到不同端显示不同内容的需求,例如在移动端希望显示 A 页面,在 PC 端希望显示 B 页面,下面实践示例将对此类情况进行说明。
1. 创建一个应用,在应用中创建三个页面,分别是首页、移动端页面、PC 端页面。



2. 在移动端页面添加一个文本组件,内容标注成移动端页面,在 PC 端页面添加一个文本组件,内容标注成 PC 端页面,这样可以区分不同页面。
移动端:



PC 端:



3. 打开代码编辑器,在首页 lifecycle 的 onPageLoad(query)中添加判断应用端的代码。



4. 代码内容:
const isMobile = $w.wedaContext.platforms.includes("MOBILE");
if (isMobile) {
app.navigateTo({
pageId: 'u_yi_dong_duan_ye_mia', // 页面 Id
params: { key: 'value' },
});
} else {
app.navigateTo({
pageId: 'pc_duan_ye_mian', // 页面 Id
params: { key: 'value' },
});
}
这段代码的功能逻辑是先通过 $w.wedaContext.platforms获取应用运行终端方法判断当前应用端是否是移动端,然后根据判断结果进行不同页面的跳转。通过 JS 判断当前应用是什么端的方法有很多,用户也可以自行查询替换。
5. 设置完成以后发布该应用,通过不同端的切换可以看到不同的页面。
移动端:



PC 端: