記事ディレクトリ
過去のレビュー
uniapp が uni.$on を記録するためにピットを踏む データ内のデータを変更できないのはなぜですか
uniapp sqlite データベース操作パッケージ
uniapp sqlLite データベース操作パッケージ 2: データベースの操作方法
uniapp sqlite3 時間クエリ オブジェクト指向
uniapp sqlite データベース パッケージ設計の概要 (終わり)
文章
この記事の目標
新しいページのフレームを完成させる
環境のインストール
必要がある
- サスコンパイル:
- npm i sass -D またはyarn add sass -D
- uView:
新しいテンプレートページを作成する方法
推奨されるページレイアウト
ページを vue、js、scss に分割します。ページの複雑なロジックを簡略化するのに適しています。
新しいテンプレートファイルを作成する
新しいページを作成すると、右上隅にテンプレートファイルが表示されます
カスタム テンプレート ファイルをクリックすると、フォルダーが表示されるので、
必要なテンプレート ファイルを保存するだけです
新しいテストを作成する
ページをグループ化しているため、完全にインポートされておらず、該当するファイルが見つからない場合はエラーが表示されます。
js および css ファイルをインポートします。ここでのファイル名はデフォルトで new_file であることに注意してください。テンプレートファイルの名前により変更されません
ヒント: 新しく作成したページが見つからない場合があります。もう一度実行してください。
これが私自身のデフォルトファイルです
vue文件
<template>
<view>
</view>
</template>
<script src="./index.js">
</script>
<style src="./index.scss" lang="scss">
</style>
jsファイル
const pageName = 'pageName'//每个页面对应一个触发器的key
export default {
data() {
return {
}
},
methods: {
UniOn(res) {
//路由响应
console.log(res)
var that = this
var myFunction = {
test() {
//测试函数
console.log('Hello World!')
},
SetValue(data) {
//设置值
that[data.key] = data.value
},
}
myFunction[res.method](res.data)
},
ShowMsg(msg) {
uni.showToast({
title: msg, icon: 'none' })
console.log(msg)
}
},
mounted() {
},
onLoad() {
var that = this
uni.$on(pageName, res => {
that.UniOn(res)
})
that.ShowMsg('Hello World!')
},
unLoad() {
uni.$off(pageName)//移除触发器
}
}
scss ファイル、空
要約する
さらに、uniapp はインタラクティブなフィードバックをそれ自体でカプセル化するので、インタラクティブなフィードバックが必要になることが多いので、これをお勧めします。
データベースのカプセル化が必要な場合は、私の以前の記事を参照してください。
uniapp sqlite データベース パッケージ設計の概要 (終わり)
フォローアップアップデート
2023 年 6 月 12 日
以前設計していた時にコードのスペルが間違っていたり、メソッドがUniOnメソッドとメソッドメソッドに分かれていたり、名前が重複していたりすることに気づきました。そして、それはコードの単純化に役立ちません
新しいjsファイルテンプレート
const pageName = 'pageName'
export default {
data() {
return {
}
},
methods: {
SetValue(data) {
//设置值
this[data.key] = data.value
},
ShowMsg(msg) {
//展示值
uni.showToast({
title: msg, icon: 'none' })
console.log(msg)
}
},
mounted() {
},
onLoad() {
var that = this
uni.$on(pageName, res => {
try {
that[res.method](res.data)
} catch (e) {
//TODO handle the exception
console.log(e)
}
})
},
onUnload() {
uni.$off(pageName)//移除触发器
}
}
新しい js テンプレートでは、ページの通信はメソッド指向であるべきだと思います。これはページ通信であり、ページを呼び出す方法である必要があります。特定のビジネス ロジックはお客様が処理します。私の責任はメソッドとパラメータを伝えることだけです
アップデート前
更新しました