微信小程序端与PC端体验切换的实践

前端

2023-07-10 17:53:11

微信小程序与 PC 端体验无缝切换的未来展望

随着微信小程序的蓬勃发展，越来越多的人开始使用小程序来满足他们的日常生活需求。然而，小程序原本只能在移动端使用，这让许多希望在 PC 端享受小程序便利的用户感到不便。

为了解决这一问题，微信官方推出了小程序 PC 端体验功能。该功能允许用户通过 PC 端的微信客户端或浏览器访问小程序，在电脑的大屏幕上进行操作。这极大地促进了微信小程序的推广和普及。

在 uni-app 中实现小程序与 PC 端体验切换

开发环境搭建

安装 HBuilderX 3.1.0 及以上版本。
安装 uni-app 开发工具。

代码编写

在 uni-app 项目的 manifest.json 文件中添加以下配置：

{
  "platform": "all",
  "appid": "your appid",
  "version": "1.0.0",
  "name": "your app name",
  "description": "your app description",
  "author": "your author",
  "icon": "path/to/icon.png",
  "categories": [],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置功能"
    }
  }
}

在 pages.json 文件中，为小程序端和 PC 端配置不同的入口页面：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "小程序端首页"
      }
    },
    {
      "path": "pages/pc/index",
      "style": {
        "navigationBarTitleText": "PC 端首页"
      }
    }
  ]
}

在 app.vue 文件中，根据不同的平台进行页面跳转：

export default {
  data() {
    return {
      platform: uni.getSystemInfoSync().platform
    }
  },
  methods: {
    跳转小程序端首页() {
      if (this.platform === 'ios' || this.platform === 'android') {
        uni.navigateTo({
          url: '/pages/index/index'
        })
      }
    },
    跳转PC端首页() {
      if (this.platform === 'windows') {
        uni.navigateTo({
          url: '/pages/pc/index'
        })
      }
    }
  }
}