【从零开始搭建uniapp开发框架】（十五）—— 常用方法类封装

框架开源地址：https://gitee.com/yunhaotian/uniapp_mobileFrame

目前在常用方法类里封装了几个方法：检测小程序更新、px转upx、upx转px、字符掩码、获取链接参数、判断是否在微信内置浏览器、小程序的原生菜单中显示分享按钮。

在common文件夹下新建 sju.ools.js 文件

sju.tools.js源码：

/**
 * 常用工具方法类
**/
import base from './sju.base.js'

let tools = {
	/*
	 * @description 检测小程序更新
	*/
	VersionUpdate() {
	    // 获取小程序更新机制兼容 
	    if (uni.canIUse('getUpdateManager')) {
	        const updateManager = uni.getUpdateManager()
	        // 检查是否有新版本发布
	        updateManager.onCheckForUpdate(function(res) {
	            if (res.hasUpdate) {
	                //小程序有新版本，则静默下载新版本，做好更新准备
	                updateManager.onUpdateReady(function() {
	                    uni.showModal({
	                        title: '更新提示',
	                        content: '新版本已经准备好，是否重启应用？',
	                        success: function(res) {
	                            if (res.confirm) {
	                                //新的版本已经下载好，调用 applyUpdate 应用新版本并重启
	                                updateManager.applyUpdate()
	                            } else if (res.cancel) {
	                                //如果需要强制更新，则给出二次弹窗，如果不需要，则这里的代码都可以删掉了
	                                uni.showModal({
	                                    title: '温馨提示',
	                                    content: '我们已经做了新的优化，请及时更新哦~',
	                                    showCancel: false, //隐藏取消按钮，也可显示，取消会走res.cancel，然后从新开始提示
	                                    success: function(res) {
	                                        //第二次提示后，强制更新           
	                                        if (res.confirm) {
	                                            // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
	                                            updateManager.applyUpdate()
	                                        } 
											// else if (res.cancel) {
	                                            // 重新回到版本更新提示
	                                            // autoUpdate()
	                                        // }
	                                    }
	                                })
	                            }
	                        }
	                    })
	                })
	                  // 新的版本下载失败
	                updateManager.onUpdateFailed(function() {
	                    uni.showModal({
	                        title: '温馨提示',
	                        content: '新版本已经上线，请您删除当前小程序，重新搜索打开',
	                    })
	                })
	            }
	        })
	    } else {
	        // 提示用户在最新版本的客户端上体验
	        uni.showModal({
	            title: '温馨提示',
	            content: '当前微信版本过低，可能无法使用该功能，请升级到最新版本后重试。'
	        })
	    }
	},
	
	/**
	* @description px转upx
	* @param {string} val 要处理的数据
	**/
	px2upx(val){
		return val/(uni.upx2px(val)/val);
	},
	
	/**
	* @description upx转px
	* @param {string} val 要处理的数据
	*/
	upx2px(val){
		return uni.upx2px(val);
	},
	/**
	* @description 字符掩码
	* @param {string} val 要处理的数据
	* @param {int} start 掩码开始位置
	* @param {int} end	掩码结束位置
	*/
	strFilter(val,start,end){
		var str=val.trim()	//去除空格
		var maskCode=str.replace(str.substring(start, end), "****")
		return maskCode;
	},
	/**
	* @description 获取链接参数
	* @param {string} path 网址链接Url路径
	* @param {string} name 参数名
	*/
	getUrlParam(path,name) {
		if(base.isNull(path))
		{
			path=window.location.search
		}
	    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
	    var r = path.substr(1).match(reg);
	    if (r != null) return unescape(r[2]);
	    return null;
	},
	/**
	* @description 判断是否在微信内置浏览器
	*/
	isWechat(){
		let ua = navigator.userAgent.toLowerCase();
		if (ua.match(/MicroMessenger/i) == "micromessenger") {
			return true;  
		}else{
		    return false;  
		}
	},
	/**
	* @description 小程序的原生菜单中显示分享按钮
	*/
	showShareMenu(){
		// 小程序分享功能
		uni.showShareMenu({
			withShareTicket:true,
			//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
			menus:["shareAppMessage","shareTimeline"]//不设置默认只能发送给朋友
		})
	}
	
	
}

export default tools;

main.js引入封装类代码：

import jsTools from './common/sju.tools.js'

Vue.prototype.sjuTools = sjuTools;

小程序调用检测小程序更新方法 App.vue：

	// 引入常用方法类
	import tools from "./common/tools.js"

	// #ifdef MP 
	tools.VersionUpdate() //小程序模式下检测小程序更新
	// #endif

小程序分享功能实现：

在main.js设置分享参数

// 设置小程序分享参数全局变量
// #ifdef MP
Vue.prototype.$shareAppMessage = {
	title: '分享标题',
	path: '页面路径',
	imageUrl: '分享图片路径'
};
Vue.prototype.$shareTimeline = {
	title: '分享标题',
	query:'id=11&code=userCode',//自定义query参数
	imageUrl: '分享图片路径'
};
// #endif

页面实现分享代码：

<template>
	<view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		components: {
			
		},
		onLoad() {
			this.jsTools.showShareMenu()
		},
		//发送给朋友
		onShareAppMessage(res) {
			return this.$shareAppMessage
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return this.$shareTimeline
		},
		methods: {

		}
	}
</script>

<style>
	
</style>