Bibliothèque de composants tiers - prise en charge de npm - rappelez-vous que le package de nœud de l'applet ne peut pas être utilisé directement
Et construisez npm dans l'outil ! ! ! ! ! ---Sinon une erreur sera signalée
miniprogram-computed - npm --- Ceci est la documentation pour les calculs
-------------------------------------------------- -------------------------------------------------- -------------------------------------
prise en charge de npm - versions personnalisées
1. Créer un nouveau projet de mini programme
2. Créer un dossier : miniprogramme
3. Déplacer les fichiers correspondants du projet dans le fichier
`pages、app.js、app.json、app.wxss`
4. Configurez dans `project.config.json` : **`"miniprogramRoot": "miniprogram/",`**, cette étape consiste à réinitialiser son répertoire racine
5. Configurez dans project.config.json :
"setting": {
...
// 开启手动构建
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram"
}
],
}- `packNpmManually` active la configuration manuelle de la construction de npm
- `packNpmRelationList` construit manuellement les détails de la configuration de npm
- `miniprogramRoot` personnalise le répertoire racine du mini programme
Après la configuration, vous pouvez télécharger la bibliothèque d'interface utilisateur du plug-in, etc. Après avoir téléchargé la bibliothèque d'interface utilisateur, vous pouvez voir comment elle est configurée dans d'autres documents. Une fois que tout est déployé, nous appuyons sur l'outil ci-dessus, puis sur créer npm, il y aura une telle erreur
La solution consiste à redémarrer l'outil de développement d'applet WeChat. À ce stade, vous pouvez cliquer pour créer npm. Après la création, une erreur sera signalée. À ce stade, il vous suffit de recréer npm pour résoudre le problème.
-------------------------------------------------- -------------------------------------------------- -------------------------------------
Interface du cadre - getApp
wx n'est pas nécessaire lorsque getApp est utilisé.
1. Il s'agit de l'objet public, de la méthode, etc. écrits dans app.js. Quelle page ou quel composant voulez-vous utiliser ? Appelez simplement getApp() ici pour obtenir les choses dans app.js,,,,, par exemple - - const app = getApp() console.log(app.name) obtient la valeur du nom dans app.js
Le code dans app.js doit être écrit dans App({中})
-------------------------------------------------- -------------------------------------------------- -------------------------------------
Interface du cadre - getCurrentPages
getCurrentPages peut être utilisé pour obtenir le contenu de la pile de pages
-------------------------------------------------- -------------------------------------------------- -------------------------------------
API intégrée - Stockage local
Il y a : wx.setStorageSync--stocker une donnée localement
wx.getStorageSync--lire une donnée locale
wx.removeStorageSync --- supprimer une donnée stockée localement
wx.clearStorageSync --- effacer les données stockées localement
Le stockage local dans l'applet peut directement stocker des données de type objet ou tableau, sans JSON.stringify pour le traitement
存入数据
page({
存入本地数据
点击事件(){
wx.setStorageSync('name','小明') 前面的是存储的命名，后面的是存储的值
wx.setStorageSync('user',{name:'小明',age:18}) 也可以直接存储对象且不用JSON....处理
}
})读取数据
page({
读取本地数据
const name = wx.getStorageSync('name') 就可以拿到 本地存储名为name里面的值
const obj = wx.getStorageSync('user') 就可以拿到 本地存储名为 user对象里面的数据
})Supprimer les données de stockage spécifiées ---wx.removeStorageSync('name')
Effacer toutes les données de stockage ---wx.clearStorageSync()
- Dans l'applet, l'API à la fin de Sync fait référence à l'exécution synchrone. L'API synchrone est plus concise lorsqu'elle est utilisée, mais l'inconvénient est que la synchronisation bloquera l'exécution du programme et l'efficacité de l'exécution est pire que la version asynchrone.
-------------------------------------------------- -------------------------------------------------- -------------------------------------
API intégrée - obtenir un avatar
1. La première étape consiste à définir un bouton bouton
2. La deuxième étape consiste à définir l'attribut du bouton : la valeur de type ouvert est chooseAvatar--<button open-type="chooseAvatar" />
3. La troisième étape consiste à ajouter l'événement d'écouteur chooseavatar event --<button bindchooseavatar="getAvatar"/>
Résumé : La méthode combinée est : <button open-type="chooseAvatar" bindchooseavatar="getAvatar">Obtenir l'avatar de l'utilisateur</button>
Surveillance des événements - vous pouvez obtenir l'adresse de l'avatar dans getAvatar, ou stocker l'avatar et d'autres opérations
// pages/06-getuseInfo/index.js
Page({
/**
* 页面的初始数据
*/
data: {
src: ''
},
// 获取微信用户的头像
getAvatar (res) {
console.log(res)
// 保存头像信息
this.setData({
src: res.detail.avatarUrl
})
}
})-------------------------------------------------- -------------------------------------------------- -------------------------------------
API intégrée - télécharger l'avatar
L'adresse de l'avatar obtenue ci-dessus est une adresse temporaire et ne peut être utilisée qu'à l'intérieur de l'applet. Pour obtenir un stockage permanent, vous devez télécharger cette image sur votre propre serveur. Le téléchargement du fichier utilisera 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 intégrée - obtenir un surnom
1, la première étape : définissez un composant d'entrée, ajoutez la valeur du type d'attribut à surnom-<input type="surnom">
2. La deuxième étape : écoutez l'entrée, le flou, le changement et d'autres événements du composant d'entrée pour obtenir la valeur sous la forme
总结：<input type="nickname" bindchange="inputhandler"/>
-------------------------------------------------- -------------------------------------------------- -------------------------------------
sous-traitance - utilisation de base
Remarque : La division d'un petit programme en plusieurs parties est appelée sous-paquet. Ce n'est que lorsque les pages du sous-paquet sont accessibles que le petit programme télécharge le paquet de code correspondant. Les pages TabBar ne peuvent être placées que dans le paquet principal. Le paquet n'est pas complètement illimité sur la taille du code : la taille de tous les sous-paquetages de l'applet entière ne dépasse pas 20 M
Fonction : Il peut réaliser le chargement automatique de la partie actuellement requise du code de l'applet, ce qui peut améliorer la vitesse de chargement de l'applet dans un certain programme, et peut également résoudre la limitation selon laquelle la taille du paquet de code de l'applet ne peut pas dépasser 2M.
utiliser :
Étape 1 : Accédez à n'importe quel emplacement du fichier app.json (mais entre parenthèses) et écrivez le code suivant
{
分包
"subPackages": [
{
"root": "subpack1", 分包对应的代码根目录，即分包的代码放在哪个文件夹中
"name": "subpack1", 分包的名称，可以省略
"pages": [ 分包中所包含的页面路径
"pages/001-sub/index"
]
}
],
}Étape 2 : Écrivez le code ci-dessus et appuyez sur Enregistrer pour générer automatiquement les sous-contrats
Utiliser le sous-package :
Si vous utilisez un sous-paquet, vous pouvez vous lancer et l'utiliser
<navigator url="/subpack1/pages/07-sub/index">to07</navigator>
-------------------------------------------------- -------------------------------------------------- -------------------------------------
sous-package - pré-téléchargement
