HBuilderX
標準バージョンを選択するHBuilderXのインストール時間は、APPの開発版をダウンロードしないように、ユニ-アプリのエディタについては、プラグインの標準バージョンにインストールするか、直接プロジェクトを作成するvue - cliのコマンドラインを介して、私の個人的な使用に加えて、アプレットのコンパイルのAPP開発版は、時にはアプレットページのコンパイルにつながる空白。
プロジェクトの作成
公式で提供されているHBuilderXのビジュアルインタフェースとvue-cliのコマンドラインの2つの方法でプロジェクトを作成できますが、cli版ではless、scss、tsなどのコンパイラをインストールしたい場合、手動でnpmのインストールを行う必要があります。HBuilderXのプラグイン管理インターフェイスでのインストールは無効で、HBuilderXで作成されたプロジェクトでのみ機能します。
コードカタログ
HBuilderXビジュアル・インターフェースで作成されたプロジェクト：
- components: コンポーネントファイル、宣言を導入する必要はありません。
- pages
- index
- static静的リソース
- 店舗：グローバルステータス管理センター
- unpackageパッケージファイル
- .gitignore: ファイルを無視し、アンパッケージファイルを一時的に無視します。
- APP.vue：アプリのグローバルなスタイルやリスニングの設定に使用します。
- main.js: Vue初期化エントリファイル
- manifest.json: アプリ名、アプリID、ロゴ、バージョンなどのパッケージング情報を設定します。
- pages.json: ページルーティング、ナビゲーションバー、タブ、その他のページクラス情報を設定します。
- uni.scss：アプリケーションのスタイルを全体的にコントロールします。uniapp.dcloud.io/collocation...
- mixins
- utils: ツール、uni.request、uni.uploadFileメソッドのラッパー
- config: 設定ファイル
- index.js：vue.config.jsに似ています。
- package-lock.jsonnpm関連
- sitemap.json：インデックスされるかどうかを設定します。
- package.json：npm関連は、直接対応するライブラリをインストールし、Webの使用の導入と同じように
- package-lock.json: npm関連
全コードはgithub.com/un...
コードのカプセル化
config -> index.js 設定情報
export default {
loginExpiredCode: '', // ユーザー情報の有効期限が切れたコード
token: 'token', // ユーザー情報を使用し、トークンを格納する必要がある場合は、トークンのキーを示すために、このトークンの値を設定する。
origin: process.env.NODE_ENV === 'development' ? '' : '', // 要求されたドメイン名を設定する
origin1: process.env.NODE_ENV === 'development' ? '' : '' // 複数のドメイン名を設定する
}
utils -> request.js uni.request とユニ.uploadFile メソッドのカプセル化
// uni.request とユニ.uploadFile メソッドのカプセル化
// 使用する：
// this.$request({
// url: '',
// origin: 1, // オプションのパラメータは、プロジェクトの設定/インデックスの使用を設定するために使用される.js アプリに設定されているオリジンの値は、対応する番号であり、設定されていない場合は、デフォルトのオリジンが使用される。
// method: 'POST',
// data: {}
// }).then(res => {
// console.log(res)
// }).catch(err => {
// console.log(err)
// }).finally(_ => {})
import store from '../store'
import config from '../config'
export function request(options) {
let origin
if (typeof options.origin === 'number' && !isNaN(options.origin)) {
origin = config[`origin${options.origin}`]
} else {
origin = config.origin
}
return new Promise((resolve, reject) => {
uni.request({
url: `${origin}${options.url}`, // ドメイン名情報の統一された構成
method: options.method,
header: options.header || {
'content-type': 'application/json',
'token': store.state.token
},
data: options.data || {},
success(res) {
/**
* https://...//////..ml
* uni.showLoading とユニ.showToast 同時にのみ表示することができる
* 一般的に、リクエストを開始するときに、ユニ.showLoading ，ここでは、統一する必要がある.hideLoading() ，後のプロンプトメッセージを容易にする！
*/
uni.hideLoading()
if (res.statusCode === 200) {
// code 会社と個人の定義に依存する
if (res.data.code === 0) {
resolve(res.data)
} else {
// 返された情報は、ユニのエラーエラーメッセージを報告する必要がある.showToast
uni.showToast({
title: res.data.msg,
icon: 'none'
})
// ここで再びコードによると、ログインの有効期限やその他の操作など、いくつかの関連処理を行うために統一された
if(res.data.code === config.loginExpiredCode) {
// ローカルストレージトークンを削除する
uni.removeStorageSync(config.token)
// uni.showToast デフォルトの表示は1500ミリ秒であり、その後、ログインページにジャンプする。
setTimeout(() => {
uni.reLaunch({
url: 'pages/login/index'
})
}, 1500)
}
reject(res.data)
}
} else {
// statusCode それが200でない場合は、まずネットワークエラーを報告し、statusCodeを追加する。
uni.showToast({
title: `ネットワークエラー: ${res.statusCode}`,
icon: 'none'
})
reject(res.data)
console.log(`ネットワークエラー：${res.data.path} -> ${res.data.status}`)
}
},
fail(err) {
uni.hideLoading()
uni.showToast({
title: 'ネットワークエラー',
icon: 'none'
})
reject(err)
}
})
})
}
export function upload(options) {
let origin
if (typeof options.origin === 'number' && !isNaN(options.origin)) {
origin = config[`origin${options.origin}`]
} else {
origin = config.origin
}
return new Promise((resolve, reject) => {
uni.uploadFile({
url: `${origin}${options.url}`,
filePath: options.filePath,
name: options.name,
formData: options.formData || {},
header: {
'content-type': 'multipart/form-data',
'token': store.state.token
},
success(result) {
uni.hideLoading()
if (result.statusCode === 200) {
/**
* https://..///-le
* data String デベロッパサーバーリターンデータ
*/
const res = JSON.parse(result.data)
if (res.code === 0) {
resolve(res)
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
if(res.code === config.loginExpiredCode) {
uni.removeStorageSync(config.token)
setTimeout(() => {
uni.reLaunch({
url: 'pages/login/index'
})
}, 1500)
}
reject(res)
}
} else {
uni.showToast({
title: `ネットワークエラー: ${result.statusCode}`,
icon: 'none'
})
reject(res.data)
console.log(`ネットワークエラー：${res.data.path} -> ${res.data.status}`)
}
},
fail(err) {
uni.hideLoading()
uni.showToast({
title: 'ネットワークエラー',
icon: 'none'
})
reject(err)
}
})
})
}
ネットワーク監視
ネットワーク監視をグローバルに配置し、切断時刻になると切断ポップアップをポップアップして操作を無効にし、再びインターネット接続時刻になるとポップアップを閉じます。
App.vue ：
<script>
export default {
onLaunch: function() {
console.log('App Launch');
uni.onNetworkStatusChange(({isConnected}) => {
if (isConnected) {
uni.hideToast()
} else {
uni.hideToast()
uni.showToast({
title: 'あなたは切断される',
icon: 'none',
mask: true,
duration:
})
}
})
},
onShow: function() {
console.log('App Show');
},
onHide: function() {
console.log('App Hide');
}
};
</script>
更新のヒント
onLaunch: function() {
// アップデートバージョンのヒント
if (uni.canIUse('getUpdateManager')) {
const updateManager = uni.getUpdateManager()
updateManager.onCheckForUpdate(function (res) {
if (res.hasUpdate) {
updateManager.onUpdateReady(function () {
uni.showModal({
title: '更新のヒント',
content: '新しいバージョンの準備ができたので、アプリを再起動してください！',
showCancel: false,
confirmColor: theme.showModalConfirmColor,
success: function (res) {
if (res.confirm) {
updateManager.applyUpdate()
}
}
})
})
updateManager.onUpdateFailed(function () {
uni.showModal({
title: 'すでにヨーヨーの新しいバージョンがある~',
content: '新バージョンは、オンラインになった！~，現在のアプレットを削除し、再度開く。~',
showCancel: false,
confirmColor: theme.showModalConfirmColor
})
})
}
})
} else {
uni.showModal({
title: ' ',
content: '現在のバージョンが低すぎる、この機能を使用することはできません、最新バージョンにアップグレードし、再試行してください！',
showCancel: false,
confirmColor: theme.showModalConfirmColor
})
}
}
テストに関しては、Add Compile Modeで設定できます：
