[TOC]
> 更多封裝，參考倉鼠源碼：https://ext.dcloud.net.cn/plugin?id=2641
> 以及5年uniapp源碼：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 滾動視圖