雅荷心语博客
雅荷心语
心之所向便是光
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 关注本站
    • 微信
    • 微博
    • 腾讯微博
    • Twitter
    • Facebook
    • RSS订阅
Hi, 请登录     我要注册     找回密码

关于 PC 端微信小程序开发的尝试

2021-07-15 分类:前端之旅 阅读(2818) 评论(0)

在之前, 自动 Pc 端电脑可以打开小程序之后, 就留意到了 Pc 端使用小程序的场景, 奈何之前一直体验不好, 近期, 又做了一次尝试, 感觉比之前好多了,

首先在使用之前, 我们需要先 在 pages.json 里面加入配置项让小程序支持横屏显示, 否则就一个手机这么大的区域也不好操作~

"resizable": true 可使小程序在PC上横屏窗口展示

“pageOrientation”: “auto”

手机端设置 "pageOrientation": "auto" 或 iPad 上设置 "resizable": true 时会允许屏幕旋转,此时使用 Page 的 onResize 事件或者 wx.onWindowResize 方法可对该操作进行监听,进而判断是使用横屏还是竖屏布局。

如果是 uniapp 开发, 则需要在: manifest.json 里配置

1
2
3
4
5
6
"mp-weixin": {
     /* 微信小程序特有相关 */
    "usingComponents": true,
    "resizable": true,
    "pageOrientation": "auto"
},

配置成功之后, 我们在预览打开小程序就可以看到横屏

具体文档介绍: https://developers.weixin.qq.com/miniprogram/dev/framework/ability/adapt.html

小程序也新增了

match-media

属性

media query 匹配检测节点。可以指定一组 media query 规则,满足时,这个节点才会被展示。

通过这个节点可以实现“页面宽高在某个范围时才展示某个区域”这样的效果。

具体文档: https://developers.weixin.qq.com/miniprogram/dev/component/match-media.html

我们也可以简单的使用媒体查询加match-media来做个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
@media (min-width: 480px) {
  .content {
    width: 100%;
    height: 100vh;
    background: #dd524d;
  }
}
@media (max-width: 480px) {
  .content {
    width: 100%;
    height: 100vh;
    background: #007aff;
  }
}
</style>

XHTML
1
2
3
4
5
6
7
8
9
10
11
<template>
  <view class="content" @click="toView">
    <match-media min-width="300" max-width="600">
      <view>当页面宽度在 300 ~ 500 px 之间时展示这里</view>
    </match-media>
    <match-media min-height="400" orientation="landscape">
      <view>当页面高度不小于 400 px 且屏幕方向为纵向时展示这里</view>
    </match-media>
    <h1>当前 UA: {{ua}}</h1>
  </view>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
  export default {
    data() {
      return {
        ua: "",
      };
    },
    components: {},
    methods: {
      toView() {
        wx.navigateTo({
          url: "/pages/index/web",
        });
      },
    },
    onLoad() {
      this.ua = wx.getSystemInfoSync().platform;
    },
  };
</script>

之后我们在机型里面选择大于 480px 的宽度,则显示不一样颜色

iShot2021-07-15 16.42.40

我们启动真机调试, 选择电脑端调试,即可看到正常显示的界面了;

通过这些, 我们就可以和正常开发 h5 的响应式网页一样正常开发小程序了~

主要注意:

小程序如何判断是 PC 平台?
通过 getSystemInfo 官方接口(platform 是 windows)
通过 UA(PC UA 包含 MiniProgramEnv/Windows)

这里实际上, 如果是 mac 电脑, 则 platform 是 mac

分享到:更多 ()

相关推荐

  • AI 编辑器 cursor 如何禁止自动更新
  • AI 编辑器 cursor 工具栏改成和 vscode 一样的左侧 竖向展示
  • nodejs 脚本打包为可执行文件
  • 初学 python 笔记
  • nodejs 同时运行多个脚本
  • 让你的照片动起来
  • vue工程项目动态加载umd.js实践
  • 使用 shell 检测目标服务器是否异常
关于我

小天明 北京·朝阳 前端搬砖工程师

碎碎念):(来自公众号)

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • 百度你个大毒瘤 - 吐糟博客这几天打不开事情-雅荷心语博客百度你个大毒瘤 – 吐糟博客这几天打不开事情2015-12-28评论(2)
  • PHP 非对称加密 openssl 加密及解密方法-雅荷心语博客PHP 非对称加密 openssl 加密及解密方法2016-05-17评论(2)
  • PHPStorm10 下载安装破解汉化-雅荷心语博客PHPStorm10 下载安装破解汉化2015-12-15评论(2)
2025年7月
一 二 三 四 五 六 日
« 六    
 123456
78910111213
14151617181920
21222324252627
28293031  

最新评论

  • 前端小武 8年前 (2017-04-06)说:
    我看到了layer
  • 丁艳平 8年前 (2017-03-03)说:
  • Dawn 9年前 (2016-09-16)说:
    call_user_func_array最后的例子是错哦,你用bc方法去调用类里 另外一个方法就知道问题所在了。情况1.调用非静态方法 第一个参数应该传[类的实例,调用方法] (既然有类实例了直接-&
  • Dawn 9年前 (2016-06-21)说:
    tp框架设置了全局捕获异常的,这也没什么。坑的是 他捕获了异常。然后全部返回404。。。不知道的 还以为自己网站被删除了
  • Dawn 9年前 (2016-05-17)说:
    构造函数里的判断 用异常机制可能更好一些

其他类型

  • 芊云全景
  • 配音兔AI配音神器

博客类型

  • 芊云全景
  • 配音兔AI配音神器

左邻右舍

  • 易水寒
  • 楼教主
  • 芊云全景
  • 贤心
  • 配音兔AI配音神器

雅荷心语博客 -心之所向便是光

联系我们关于我们

© 2025 雅荷心语博客   网站地图