uniapp h5分享封装

  1. 新建 share.js
async function shareWx(title, desc, imgUrl) {
	var title = arguments[0] ? arguments[0] : '';
	var desc = arguments[1] ? arguments[1] : '';
	var imgUrl = arguments[2] ? arguments[2] : '';
	var link = window.location.href;
		
	await this.$api.shareWx({
		url: window.location.href
	}).then(res => {
		var wxshare = require('weixin-js-sdk'); //调用微信集成的方法

		wxshare.config({
			debug: false, //是否打开调试
			appId: res.data.appId, // 必填,公众号的唯一标识
			timestamp: res.data.timestamp, // 必填,生成签名的时间戳
			nonceStr: res.data.noncestr, // 必填,生成签名的随机串
			signature: res.data.signature, // 必填,签名

			jsApiList: [
				"updateAppMessageShareData",
				"updateTimelineShareData",
			]
		});

		this.$store.dispatch('set_systemData', res.data.data)

		title = title == '' ? res.data.data.gzhname : title;
		desc = desc == '' ? res.data.data.gzhdesc : desc;
		imgUrl = imgUrl == '' ? (res.data.data.apihost + res.data.data.gzhlogo) : imgUrl;

		wxshare.ready(function() {
			//分享给朋友
			wxshare.updateAppMessageShareData({
				title: title, // 分享标题  
				desc: desc, // 分享描述  
				link: link, // 当前页面链接  
				imgUrl: imgUrl, // 分享图标                                
				success: function() { //分享成功回调
				},
				cancel: function() { //取消分享回调
				}
			});
			//分享到朋友圈
			wxshare.updateTimelineShareData({
				title: title, // 分享标题
				desc: desc, // 分享描述  
				link: link, // 当前页面链接  
				imgUrl: imgUrl, // 分享图标                       
				success: function() {},
				cancel: function() {}
			});
		})
	});
}
export default {
	shareWx
}; //暴露出这个方法

  1. main.js 中引入
import share from './common/share.js'
Vue.prototype.shareWx = share.shareWx;
  1. 需要引入的文件中调用
// 微信分享
this.shareWx('标题', '简介''封面图')
### 使用 UniAppH5 页面封装成 Android 应用 #### 准备工作 为了使用 UniApp 把现有的 H5 网页转换并打包成为适用于 Android 设备的应用程序,开发者需先安装 Node.js 及 NPM 工具环境。接着,在本地计算机上通过命令行工具全局安装 `@vue/cli` 和 `uni-app-cli` 插件[^1]。 ```bash npm install -g @vue/cli npm install -g @dcloudio/uni-cli ``` #### 创建项目结构 利用官方提供的模板快速创建一个新的 UniApp 项目: ```bash vue create my-project-name --preset dcloudio/uni-preset-vue cd my-project-name ``` 这一步骤会初始化一个基础的工程目录树,并自动配置好必要的依赖项和编译设置。 #### 配置平台特定参数 编辑项目的根目录下的 manifest.json 文件来定义应用程序的基础信息(如名称、图标路径等),同时指定目标平台为 android 并适当调整一些选项以适应移动操作系统的要求。 #### 编写业务逻辑代码 按照 Vue 单文件组件的方式实现各个页面的功能模块;对于那些已经在 Web 版本中存在的功能,则可以尽可能重用现有资源而不需要完全重构整个应用架构。 #### 测试与调试 借助于内置模拟器或连接真实设备来进行实时预览和测试,确保所有交互操作都能正常运作并且性能表现良好。如果遇到任何问题可以通过 Chrome DevTools 或者 WeChat Developer Tools 进行远程调试。 #### 构建 APK 文件 当确认无误之后就可以执行构建指令生成最终产物——APK 安装包了: ```bash # 执行此命令前请确保已正确设置了 keystore 相关的信息 npx hbuilderx build app-release.apk ``` 上述过程即完成了从 H5 到原生 Android 应用的一次完整迁移流程概述。 #### 处理软键盘高度变化事件 考虑到实际应用场景中的特殊需求,比如输入框聚焦时可能引起界面布局变动的情况,建议采用如下方式监听软键盘弹起落下状态的变化以便及时作出响应措施[^2]: ```javascript import { onKeyboardHeightChange } from '@dcloudio/uni-app'; onMounted(() => { const keyboardHandler = (res) => { console.log(`当前键盘高度为 ${res.height}px`); // 根据实际情况更新样式或其他属性... }; onKeyboardHeightChange(keyboardHandler); return () => offKeyboardHeightChange(keyboardHandler); }); ``` 这段代码展示了怎样注册回调函数用于捕捉到软键盘尺寸改变的通知消息,并据此动态调整视图元素的位置关系从而提供更好的视觉效果体验给用户。 #### 解决网络请求跨域难题 针对可能出现的数据交换障碍现象,特别是涉及到前后端分离部署模式下产生的 CORS 错误提示,推荐参照以下做法完成 request 请求方法的二次加工改造,使其能够满足多场景下的通信要求[^3]: ```javascript const httpConfig = require('./config/httpUrl'); export default function fetch(url, options={}) { if(process.env.NODE_ENV === 'development'){ url = '/api' + url; } Object.assign(options.headers || {}, {'Content-Type': 'application/json'}); return new Promise((resolve, reject)=>{ uni.request({ ...options, url: `${httpConfig.HTTP_REQUEST_URL}${url}`, success(res){ resolve(res.data); }, fail(err){ reject(err.errMsg); } }); }) } ``` 这里实现了根据不同运行时期切换 API 接口基址的能力,并且统一管理了默认头部携带的内容类型声明字段,进而提高了整体系统的灵活性与稳定性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值