uniapp H5端实现PC端适配

1.创建pc.js, PC端样式就可以实现1upx = 1rpx = 1px;这样非常方便的1:1还原设计图了
当然如果你的设计图不是1920,比如是1366,那下面就改成这样window.innerWidth = 750*(w / 1366);

(function (){
	var u = navigator.userAgent,
		w = window.innerWidth;
	if (!u.match(/AppleWebKit.*Mobile.*/) || u.indexOf('iPad') > -1) {
		window.innerWidth = 750*(w / 1920);
		window.onload = function() {
			window.innerWidth = w;
		}
	}
})();

2.注意,pc.js一定要在App实例引入前引入,不然无效!!!

import '@/static/js/pc'
import Vue from 'vue'
import App from './App'
Uniapp实现微信分享,可以通过以下步骤进行: 1.在 manifest.json 文件中配置微信分享所需的权限: ``` { "mp-weixin": { "appid": "你的微信公众号appid", "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" }, "scope.userInfo": { "desc": "你的用户信息将用于小程序内部展示" }, "scope.record": { "desc": "你的录音功能将用于小程序内部展示" }, "scope.writePhotosAlbum": { "desc": "你的相册将用于小程序内部展示" }, "scope.camera": { "desc": "你的摄像头将用于小程序内部展示" }, "scope.userLocationBackground": { "desc": "你的位置信息将用于小程序位置接口的效果展示" }, "scope.werun": { "desc": "你的微信运动数据将用于小程序展示" }, "scope.invoice": { "desc": "你的发票信息将用于小程序展示" }, "scope.invoiceTitle": { "desc": "你的发票抬头信息将用于小程序展示" }, "scope.record": { "desc": "你的录音功能将用于小程序展示" }, "scope.writePhotosAlbum": { "desc": "你的相册将用于小程序展示" } }, "window": { "navigationBarBackgroundColor": "#ffffff", "navigationBarTitleText": "uni-app", "navigationBarTextStyle": "black", "backgroundTextStyle": "dark", "backgroundColor": "#F7F7F7" }, "networkTimeout": { "request": 60000, "downloadFile": 60000 }, "tabBar": { "selectedColor": "#007AFF", "backgroundColor": "#ffffff", "color": "#999999", "borderStyle": "black", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "static/tabbar/home.png", "selectedIconPath": "static/tabbar/home-active.png" }, { "pagePath": "pages/my/my", "text": "我的", "iconPath": "static/tabbar/my.png", "selectedIconPath": "static/tabbar/my-active.png" } ] }, "plugins": { "myPlugin": { "version": "1.0.0", "provider": "wxidabcdefg" } }, "preloadRule": { "async": "networkFirst", "sync": [ "pages/index/index" ], "custom": { "name": "my-custom-name", "path": "path/to/my/custom-module" } }, "sitemapLocation": "sitemap.json", "debug": true, "workers": { "path": "static/js/worker.js", "clear": true }, "requiredBackgroundModes": [ "audio", "download", "location", "fetch", "video" ], "navigateToMiniProgramAppIdList": [ "wx1234567890abcdef", "wx0987654321zyxwvu" ], "usingComponents": { "my-custom-component": "/static/my-custom-component" }, "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" }, "scope.userInfo": { "desc": "你的用户信息将用于小程序内部展示" }, "scope.record": { "desc": "你的录音功能将用于小程序内部展示" }, "scope.writePhotosAlbum": { "desc": "你的相册将用于小程序内部展示" }, "scope.camera": { "desc": "你的摄像头将用于小程序内部展示" }, "scope.userLocationBackground": { "desc": "你的位置信息将用于小程序位置接口的效果展示" }, "scope.werun": { "desc": "你的微信运动数据将用于小程序展示" }, "scope.invoice": { "desc": "你的发票信息将用于小程序展示" }, "scope.invoiceTitle": { "desc": "你的发票抬头信息将用于小程序展示" }, "scope.record": { "desc": "你的录音功能将用于小程序展示" }, "scope.writePhotosAlbum": { "desc": "你的相册将用于小程序展示" } } } } ``` 2.在需要分享的页面中调用微信分享的 API: ``` export default { onShareAppMessage() { return { title: '分享标题', path: '/pages/index/index', imageUrl: 'http://example.com/share.png' } } } ``` 其中,`title` 表示分享的标题,`path` 表示分享的路径,`imageUrl` 表示分享的图片链接。根据需要进行修改即可。 3.在微信公众平台中配置网页授权域名和JS接口安全域名。 以上就是实现 Uniapp h5微信分享的步骤。
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值