サードパーティのコンポーネント ライブラリ - npm サポート - アプレットのノード パッケージは直接使用できないことに注意してください
そしてツールでnpmをビルドしてください！！！！！---それ以外の場合、エラーが報告されます
miniprogram-computed - npm --- これは、computed のドキュメントです。
-------------------------------------------------- -------------------------------------------------- ----------------------------
npm サポート - カスタム ビルド
1. 新しいミニ プログラム プロジェクトを作成します。
2. フォルダーを作成します: miniprogram
3. プロジェクトの対応するファイルをそのファイルに移動します。
`ページ、app.js、app.json、app.wxss`
4. `project.config.json`: **`"miniprogramRoot": "miniprogram/",`** で設定します。この手順ではルート ディレクトリをリセットします。
5. project.config.json で設定します。
"setting": {
...
// 开启手动构建
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram"
}
],
}- `packNpmManually` は npm ビルドの手動構成を有効にします
- `packNpmRelationList` は npm 構成の詳細を手動でビルドします
- `miniprogramRoot` はミニ プログラムのルート ディレクトリをカスタマイズします
設定後はプラグインのuiライブラリ等をダウンロードすることができ、uiライブラリのダウンロード後は他のドキュメントでどのように設定されているかを確認することができます。すべてがデプロイされた後、上記のツールを押してから create npm を押すと、このようなエラーが発生します
解決策は、WeChat アプレット開発ツールを再起動することです。この時点で、クリックして npm を作成できます。作成後、エラーが報告されます。この時点で、問題を解決するには npm を再度作成するだけで済みます。
-------------------------------------------------- -------------------------------------------------- ----------------------------
フレームワークインターフェース - getApp
getApp を使用する場合、wx は必要ありません。
1. app.js で書かれたパブリック オブジェクト、メソッドなどです。どのページまたはコンポーネントを使用しますか? そこで getApp() を呼び出すだけで、app.js 内の内容を取得できます。const app = getApp() console.log(app.name) は app.js の名前の値を取得します
app.js のコードは App({中}) に書き込む必要があります。
-------------------------------------------------- -------------------------------------------------- ----------------------------
フレームワーク インターフェイス - getCurrentPages
getCurrentPages を使用してページ スタックの内容を取得できます
-------------------------------------------------- -------------------------------------------------- ----------------------------
組み込み API - ローカル ストレージ
wx.setStorageSync -- データをローカルに保存します。
wx.getStorageSync -- ローカル データの読み取り
wx.removeStorageSync --- ローカルに保存されているデータを削除します
wx.clearStorageSync --- ローカルに保存されているデータをクリアします
アプレットのローカル ストレージには、処理用の JSON.stringify を使用せずに、オブジェクトまたは配列型のデータを直接保存できます。
存入数据
page({
存入本地数据
点击事件(){
wx.setStorageSync('name','小明') 前面的是存储的命名，后面的是存储的值
wx.setStorageSync('user',{name:'小明',age:18}) 也可以直接存储对象且不用JSON....处理
}
})读取数据
page({
读取本地数据
const name = wx.getStorageSync('name') 就可以拿到 本地存储名为name里面的值
const obj = wx.getStorageSync('user') 就可以拿到 本地存储名为 user对象里面的数据
})指定されたストレージデータを削除します ---wx.removeStorageSync('name')
すべてのストレージ データをクリア ---wx.clearStorageSync()
- アプレットでは、Sync の最後の API が同期実行を指します。同期 API を使用するとより簡潔になりますが、欠点は、同期によってプログラムの実行がブロックされ、実行効率が非同期バージョンよりも劣ることです。
-------------------------------------------------- -------------------------------------------------- ----------------------------
組み込み API - アバターの取得
1.最初のステップはボタンボタンを設定することです
2. 2 番目のステップは、ボタン属性を設定することです。open-type 値はchooseAvatar--<button open-type="chooseAvatar" />です。
3. 3 番目のステップは、リスナー イベントchooseavatar イベント --<button bindingchooseavatar="getAvatar"/> を追加することです。
概要: 結合されたメソッドは次のとおりです: <button open-type="chooseAvatar" bindingchooseavatar="getAvatar">ユーザー アバターを取得</button>
イベント監視 - getAvatar でアバターのアドレスを取得したり、アバターやその他の操作を保存したりできます
// pages/06-getuseInfo/index.js
Page({
/**
* 页面的初始数据
*/
data: {
src: ''
},
// 获取微信用户的头像
getAvatar (res) {
console.log(res)
// 保存头像信息
this.setData({
src: res.detail.avatarUrl
})
}
})-------------------------------------------------- -------------------------------------------------- ----------------------------
組み込み API - アバターのアップロード
上記で取得したアバター アドレスは一時的なアドレスであり、アプレット内でのみ使用できます。永続的な保存を実現するには、この画像を自分のサーバーにアップロードする必要があります。ファイルのアップロードには wx.uploadFile({} )を使用します。
// pages/06-getuseInfo/index.js
Page({
/**
* 页面的初始数据
*/
data: {
src: ''
},
// 获取微信用户的头像
getAvatar (res) {
console.log(res)
// 保存头像信息
this.setData({
src: res.detail.avatarUrl
})
// 上传临时文件
wx.uploadFile({
url: 'http://ajax-api.itheima.net/api/file', 这里是上传的服务器地址
filePath: res.detail.avatarUrl, 这里是头像地址
name: 'avatar', 这里要和后端给的东西一致
success: result => { 这里是上传成功后的的一些处理
// 返回的数据在：result.data 中，是一个 json 格式的字符串
const res = JSON.parse(result.data)
console.log(res)
}
})
}
})-------------------------------------------------- -------------------------------------------------- ----------------------------
組み込み API - ニックネームの取得
1、最初のステップ: 入力コンポーネントを設定し、属性タイプの値を Nickname-<input type="nickname"> に追加します。
2. 2 番目のステップ: 入力コンポーネントの入力、ブラー、変更、その他のイベントをリッスンして、フォーム内の値を取得します。
总结：<input type="nickname" bindingchange="inputhandler"/>
-------------------------------------------------- -------------------------------------------------- ----------------------------
下請け - 基本的な使用法
注: 小さなプログラムをいくつかの部分に分割することをサブパッケージと呼びます。サブパッケージ内のページにアクセスした場合にのみ、小さなプログラムは対応するコード パッケージをダウンロードします。TabBar ページはメイン パッケージにのみ配置できます。パッケージは完全に無制限ではありませんコードのサイズ: アプレット全体のすべてのサブパッケージのサイズは 20M を超えない
機能: アプレット コードの現在必要な部分の自動ロードを実現でき、特定のプログラムでのアプレットのロード速度を向上させることができ、アプレット コード パッケージのサイズが 2M を超えてはいけないという制限も解決できます。
使用:
ステップ 1: app.json ファイル内の任意の場所 (ただし括弧内) に移動し、次のコードを記述します。
{
分包
"subPackages": [
{
"root": "subpack1", 分包对应的代码根目录，即分包的代码放在哪个文件夹中
"name": "subpack1", 分包的名称，可以省略
"pages": [ 分包中所包含的页面路径
"pages/001-sub/index"
]
}
],
}ステップ 2: 上記のコードを記述して保存を押し、サブコントラクトを自動的に生成します。
サブパッケージを使用します。
サブパッケージを使用している場合は、そのまま使用できます
<navigator url="/subpack1/pages/07-sub/index">to07</navigator>
-------------------------------------------------- -------------------------------------------------- ----------------------------
サブパッケージ - 事前ダウンロード
