* [util.js](https://www.kancloud.cn/wangking/uniapp/1898427#utiljs_4)
* [main.js 中注册该方法](https://www.kancloud.cn/wangking/uniapp/1898427#mainjs__261)
* [客户端调用](https://www.kancloud.cn/wangking/uniapp/1898427#_279)
> 更多封装，参考仓鼠源码：[https://ext.dcloud.net.cn/plugin?id=2641](https://ext.dcloud.net.cn/plugin?id=2641)
> 以及5年uniapp源码：[https://ext.dcloud.net.cn/plugin?id=2009](https://ext.dcloud.net.cn/plugin?id=2009)
## util.js
> 存放路径 /common/util.js
~~~
import cache from './cache.js'
let util = {}
// 淘宝的appid，根据业务逻辑封装或删除
util.getTaoBaoAppid = function() {
return cache.get('taobaoId')
}
// 淘宝的Secret，根据业务逻辑封装或删除
util.getTaoBaoSecret = function() {
return cache.get("taobaoSecret")
}
// 登录流程，根据业务逻辑封装
util.login = function (){
console.log('进入登录流程')
}
// 退出登录流程，根据业务逻辑封装
util.logout = function (){
// 删除保留的缓存数据
console.log('进入退出流程')
this.remove("token");
this.remove("userId");
this.remove("mobile");
}
// 跳转页面，业务逻辑自行补充
util.navigateTo = function (url, isRequireLogin=false) {
if (isRequireLogin == true) {
// 进行判断是否用户已登录，如果未登录，则弹出要求登录框，并return false进行截断
return false;
}
uni.navigateTo({
url: url
});
}
/**
* 显示加载框
*/
util.showLoading = function(title, type) {
// #ifdef APP-PLUS
var w = plus.nativeUI.showWaiting(title || "", {
width: '80px',
height: '80px',
loading: {
type: type || 'snow',
height: '40px'
},
background: 'rgba(0,0,0,0.9)'
});
// #endif
// #ifndef APP-PLUS
uni.showLoading({
title: title || '',
});
// #endif
}
/**
* 隐藏加载框
*/
util.hideLoading = function() {
// #ifdef APP-PLUS
plus.nativeUI.closeWaiting();
// #endif
// #ifndef APP-PLUS
uni.hideLoading();
// #endif
}
util.getDeviceInfo = function() {
// #ifdef APP-PLUS
return new Promise((succ, error) => {
plus.device.getInfo({
success: function(e) {
e.imei = e.imei.split(",");
e.uuid = e.uuid.split(",");
succ(e)
},
fail: function(e) {
error(e)
}
});
})
// #endif
}
/**
* 获取IOS平台 idfa
*/
util.getIdfa = function() {
var idfa = '';
// #ifdef APP-PLUS
try {
if ('iOS' == plus.os.name) {
var manager = plus.ios.invoke('ASIdentifierManager', 'sharedManager');
if (plus.ios.invoke(manager, 'isAdvertisingTrackingEnabled')) {
var identifier = plus.ios.invoke(manager, 'advertisingIdentifier');
idfa = plus.ios.invoke(identifier, 'UUIDString');
plus.ios.deleteObject(identifier);
}
plus.ios.deleteObject(manager);
}
} catch (e) {
console.error('exception in getIdfa@dc-idfa!!');
}
// #endif
return idfa;
}
/**
* 提示消息
* @param {Object} msg
*/
util.showToast = function (msg){
uni.showToast({
title: msg,
mask: false,
duration: 2000,
icon: "none"
});
}
/**
* 打开应用市场
* @param {Object} options 应用市场参数
* ios: appstore中应用的id标识，应用的页面地址（如https://apps.apple.com/cn/app/id682211190）的id后面的数字
* android: 应用的包名，apk文件中AndroidManifest.xml中的package字段值
* key: 为设置id标识或包名时，打开搜索页面使用的关键词
* 如果未设置参数，则打开应用市场的搜索页面
market.open({
ios:'414478124',
android:'com.tencent.mm'
});
*/
util.openMarket = function(options) {
// #ifdef APP-PLUS
try {
var os = plus.os.name;
options = options || {};
if ('iOS' == os) {
if (options.ios && '' != options.ios) {
//itms-apps://itunes.apple.com/app/id682211190
plus.runtime.openURL('itms-apps://itunes.apple.com/app/id' + options.ios);
} else {
//itms-apps://itunes.apple.com/WebObjects/MZStore.woa/wa/search?q=helloh5
plus.runtime.openURL('itms-apps://itunes.apple.com/WebObjects/MZStore.woa/wa/search?q=' + options.key);
}
} else {
if (options.android && '' != options.android) {
//io.dcloud.helloh5
var uri = plus.android.invoke('android.net.Uri', 'parse', 'market://details?id=' + options.android);
var Intent = plus.android.importClass('android.content.Intent');
var intent = new Intent(Intent.ACTION_VIEW, uri);
intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
var main = plus.android.runtimeMainActivity();
main.startActivity(intent);
} else {
//market://search?q=helloh5
plus.runtime.openURL('market://search?q=' + options.key);
}
}
} catch (e) {
console.error('error @openMarket!!');
}
// #endif
}
/**
* 要复制的内容
* NJS设置剪切板
*/
util.setClipboardData = function(string, callback) {
const appPlatform = uni.getSystemInfoSync().platform
// #ifdef APP-PLUS
if (appPlatform == "ios") {
var UIPasteboard = plus.ios.importClass("UIPasteboard");
var generalPasteboard = UIPasteboard.generalPasteboard();
// 设置
generalPasteboard.setValueforPasteboardType(string, "public.utf8-plain-text");
callback && callback({
code: 1
});
} else {
var Context = plus.android.importClass("android.content.Context");
var main = plus.android.runtimeMainActivity();
var clip = main.getSystemService(Context.CLIPBOARD_SERVICE);
plus.android.invoke(clip, "setText", string);
callback && callback({
code: 1
});
}
// #endif
}
/**
* njs 获取剪切板
*/
util.getClipboardData = function(callback) {
const appPlatform = uni.getSystemInfoSync().platform
// #ifdef APP-PLUS
if (appPlatform == "ios") {
var UIPasteboard = plus.ios.importClass("UIPasteboard");
var generalPasteboard = UIPasteboard.generalPasteboard();
// 获取
var value = generalPasteboard.valueForPasteboardType("public.utf8-plain-text");
callback && callback({
code: 1,
data: value
});
} else {
var Context = plus.android.importClass("android.content.Context");
var main = plus.android.runtimeMainActivity();
var clip = main.getSystemService(Context.CLIPBOARD_SERVICE);
var value = plus.android.invoke(clip, "getText");
callback && callback({
code: 1,
data: value
});
}
// #endif
}
/**
* APP内嵌网页 -- 安卓IOS交互
* 交互区分名称：shangChengView
* 示例：appMutual("方法名称", "传递的参数")
* 相当与安卓交互：window.shangChengView["方法名称"]("传递的参数");
*/
util.appMutual = (name, query = null, errCallback) => {
if (/android/i.test(navigator.userAgent)) {
if (window.shangChengView) {
if (typeof(query) == "object") {
query = JSON.stringify(query);
}
window.shangChengView[name](query);
} else {
errCallback && errCallback();
}
} else if (/ios|iphone|ipod|pad/i.test(navigator.userAgent)) {
if (window.webkit) {
window.webkit.messageHandlers[name].postMessage(query)
} else {
errCallback && errCallback();
}
}
};
export default util;
~~~
## main.js 中注册该方法
> 路径 /main.js
~~~
import Vue from 'vue'
import App from './App'
import util from './common/util.js'
Vue.config.productionTip = false
Vue.prototype.$util = util
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
~~~
## 客户端调用
~~~
<template>
<view>
<button type="default" @tap="dotest">请求数据</button>
</view>
</template>
<script>
export default {
onLoad() {
this.$cache.set('taobaoId', 'xxxx212');
},
methods: {
dotest: function(e) {
let that = this;
// loading 展示
this.$util.showLoading('加载中');
setTimeout( function(){
that.$util.hideLoading();
}, 5 * 1000 );
// 获取本地存储数据
console.log(this.$cache.get('taobaoId'));
// 获得设备信息
that.$util.getDeviceInfo().then(res => {
console.log(res)
});
}
}
}
</script>
~~~
- 基础知识
- UNI核心介绍
- flex布局
- 生命周期
- 全局方法
- 组件定义
- 自定义组件
- 全局组件
- 组件之间的数据传输
- 条件编译
- 自定义头部
- 节点信息 (SelectorQuery)
- vuejs基础语法
- 页面跳转以及参数传递
- 事件的监听注册以及触发
- css3动画
- block的妙用
- mixin (混入)
- uniapp快捷键
- vuex状态管理
- 实用功能
- 获取服务提供商
- 启动页 / 启动界面
- 引导页
- tabbar配置
- 头部导航栏基础设置
- 上拉下拉（刷新/加载）
- 第三方登录
- 第三方分享
- 推送通知 之 unipush
- scroll-view双联动
- 配置iOS通用链接（Universal Links）
- 本地缓存操作
- 升级/更新方案
- 热更新
- 图片上传
- 搜索页实现
- canvas绘图助手
- 地图定位
- 第三方支付————todo
- 分类轮播
- 清除应用缓存
- uniapp与webview的实时通讯
- 视频-----todo
- 聊天----todo
- 长列表swiper左右切换
- 第三方插件
- uview
- mescroll
- uCharts (图表)
- 无名 (更新插件)
- 第三方模版
- 自定义基座
- 打包发行
- 要封装的方法
- 缓存 cache.js
- 请求接口 request.js
- 工具类 util.js
- 小程序登录 xcxLogin.js
- 版本更新 update.js
- 优质插件
- 更新插件----todo
- 语音
- 语音识别 (含上传)
- 百度语音合成播报接口
- 官方常用组建
- input 输入框
- image 图片
- audio 音频
- picker 选择器
- video 视频
- scroll-view 滚动视图
- uni-app 地图全解析+事件监听