1. Le code du programme constituant le petit
Grâce à la mise au point d'outils pour créer rapidement un projet wechatdemo. Projet généré à l'intérieur des différents types de fichiers:
.json pour le profil
.wxml un fichier modèle, l'équivalent de modèles HTML
.wxss comme un fichier de style, ce qui équivaut à la feuille de style HTML CSS
.js fichier logique de script pour le JS, HTML équivalent de script js
Une description du programme global de l'application
Plusieurs pages décrivant chaque page
Un fichier de configuration IDE projet project.config.json
Un utils logique du programme de bibliothèque commune
2. Une petite partie du programme principal (application du nom) trois fichiers, doit être placé dans le répertoire racine du projet
Fichiers Rôle requis
app.js petite logique de programme est
applet app.json configuration commune est
applet app.wxss feuille de style commun Non
2.1 une description du programme global de l'application fichier app.js (projet applet d'inscription)
2. Ne pas défini dans l'App (fonction) dans l'appel getapp (), vous pouvez utiliser cette application pour obtenir l'instance.
3. Ne pas appeler getCurrentPages quand onLaunch de (), puis la page n'a pas été généré.
4. Par getapp () après l' acquisition par exemple, ne pas tenter d'appeler les méthodes du cycle de vie.
correspond à la ApplicationContext, l'ensemble du contexte applet sont à l' utilisation, à savoir toute la portée de l' applet de service.
app.js couche de corps de programme est formé en utilisant cette logique d'accès, en utilisant getapp () .js page dans la couche logique. nom de propriété peut être consulté.
// app.js
App ({
onLaunch (options) {
// Faire quelque chose initial lors de son lancement.
},
OnShow (options) {
// faire quelque chose quand show.
},
OnHide () {
// faire quelque chose quand cacher.
},
onError (msg) {
console.log (msg)
},
GlobalData: 'Je suis des données globales'
})
onLaunch (objet Object)
applet est déclenchée lorsque l'initialisation est terminée, le déclencheur global qu'une seule fois. Les paramètres peuvent également être utilisés wx.getLaunchOptionsSync get.
Paramètres: Conformément à wx.getLaunchOptionsSync
onShow (objet Object)
applet démarrer ou déclencher l'affichage de l'arrière - plan au premier plan. Vous pouvez également utiliser la liaison wx.onAppShow écouter.
Paramètres: Conformément à wx.onAppShow
OnHide ()
applet est déclenchée à partir du premier plan à l'arrière plan. Vous pouvez également utiliser wx.onAppHide liaison écouter.
onError (erreur String)
applet est déclenchée lorsqu'une erreur de script ou API erreur d'appel se sont produits. Vous pouvez également utiliser wx.onError liaison écouter.
Paramètres: Conformément à wx.onError
onPageNotFound (objet Object)
fondation a commencé à soutenir la bibliothèque 9.1.90, version basse est compatible avec le traitement à faire.
Page Applet pour ouvrir quand il n'y a pas de déclencheur. Vous pouvez également utiliser wx.onPageNotFound liaison écouter. Remarque Reportez - vous wx.onPageNotFound.
Paramètres: Conformément à wx.onPageNotFound
App portail de documentation pour le développement
2.2 une description du programme global de fichier application app.json (projet applet de configuration)
Rôle: le chemin du petit programme de configuration globale micro-canal, la décision du fichier de page, vitrine, définissez le délai d'attente du réseau, mis en place un multi-onglet et ainsi de suite.
Toutes les options de configuration Pages et, fenêtre, barre d' onglets, NetworkTimeout, Debug
configuration App.json liste des éléments:
Attribut Type Description Obligatoire
pages Chaîne tableau est définie Chemin
fenêtre Objet Non Définir la page par défaut de la performance de la fenêtre
tabBar Objet Non Régler le fond de la performance de l' onglet
networkTimeout objet Pas de délai d' attente du réseau fixe
débogage booléen Non activer ou désactiver le mode de débogage
"pages": [
// Voici la première page est affichée comme une maison
"pages / index / index",
"pages / logs / logs"
],
// applet pour ajouter / réduire la page, vous avez besoin d' un tableau de pages éditer
"fenêtre": {
"backgroundTextStyle": " la lumière",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "演示",
"navigationBarTextStyle": "noir"
},
Type de propriété par défaut Description Version minimale
navigationBarBackgroundColor HexColor # 000000 navigation couleur de fond de la barre, comme # 000000
navigationBarTextStyle cordes blanc Barre de navigation couleur de titre, soutenir seulement Noir / Blanc
navigationBarTitleText Chaîne WeChat texte du titre de la barre de navigation
chaîne navigationStyle style barre de navigation par défaut, prend en charge uniquement les éléments suivants valeurs: par défaut le style par défaut, la barre de navigation personnalisée sur mesure, ne laissant que le coin supérieur droit de la capsule bouton micro-canal client 7.0.0
la HexColor couleur de fond de la fenêtre backgroundColor #ffffff
chaîne backgroundTextStyle chargement sombre du pull-down motif, ne supporte que sombre / lumière
chaîne backgroundColorTop top #ffffff couleur d'arrière - plan de la fenêtre, seul support iOS client micro-canal 05.06.16
couleur de fond backgroundColorBottom chaîne #ffffff bas de la fenêtre, seul le support de canal iOS micro-client 6.5.16
Sont enablePullDownRefresh Boolean false pour ouvrir la rafraîchir déroulante la page en cours. Voir Page.onPullDownRefresh
distance du bas de la page, l'unité est px traction sur le nombre onReachBottomDistance bas 50 événement page est déclenchée. Voir Page.onReachBottom
PageOrientation Chaîne paramètres de rotation de l' écran Portrait, le soutien pour la zone d'affichage auto / portrait / paysage en réponse aux changements détaillés (Paysage) 2.4.0 (Auto) / 2.5.0
booléen faux disableScroll true alors la page entière ne peut pas défiler vers le haut et vers le bas. Valable uniquement dans la mise en page, vous ne pouvez pas régler le app.json dans
usingComponents objet Aucune page ne 1.6.3 configuration composant personnalisé
style par défaut String permis une nouvelle version de styles composants 2.10.2
fenêtre de configuration du portail
"tabBar": {
"color": "# 7A7E83",
"selectedColor": "# 3cc51f",
"borderStyle": "noir",
"backgroundColor": "#ffffff",
"liste": [
{
"pagePath": " la page / composante / index",
"ICONPATH": "image / icon_component.png",
"selectedIconPath": "image / icon_component_HL.png",
"texte": "组件"
},
{
"pagePath": « la page / weui / exemple / index "
"ICONPATH": "image / icon_component.png",
"selectedIconPath ": "image / icon_component_HL.png",
"texte": "扩展组件"
},
{
"pagePath": " la page / API / index",
"ICONPATH": "image / icon_API.png",
"selectedIconPath": "image / icon_API_HL.png",
"texte": "接口"
},
{
"pagePath": " la page / nuage / index",
"ICONPATH": "image / icon_cloud.png",
"selectedIconPath": "image / icon_cloud_HL.png",
"texte": "云开发"
}
]
},
Si l'applet est une patte multi-applications (en bas ou en haut de la fenêtre de client comporte une barre d'onglet pour changer la page), la performance de l'onglet de la barre d'élément spécifié et l'onglet correspondant à la page pour le transfert intercellulaire peut être configuré via tabBar.
la réception d' un tableau de liste peut être configuré avec un minimum de 2 et un maximum de 5 Tab . tableau d'onglet ordre de tri, chaque élément est un objet.
tabBar configurer le portail , le portail en détail plus que moi ici. . .
3. Description pluralité de pages chaque page (pages de catalogue toutes les pages stockées dans l'applet)
Action fichier requis
Nom de la page .js Cette logique de page est la logique
nom de la page .json cette page pour configurer si
la structure de .wxml nom de la page de cette page est
le nom de la page .wxss cette feuille de style page Non
couche logique js 3.1 Page (page de référence)
La couche logique de la page: sa fonction principale est la « page d'inscription », chaque répertoire page / Nom de la page
pages utiliser l' enregistrement: enregistrement avec app.js fonction de projet applet App (Object) une utilisation similaire
page (Object); Object {} représente les paramètres d'objet, les données initiales des fonctions du cycle de vie désigné page, gestionnaires d'événements et similaires.
//index.js
page ({
Data: {
text: "Ceci est la page de données"
},
onLoad: function (Options) {
// exécuté lorsque la page est créée
},
function () {: onShow
lorsque // page apparaît au premier plan exécution
},
la onReady: function () {
exécutée lorsque la page est d' abord rendu // complet
},
OnHide: function ({)
exécute // la page de premier plan devient arrière - plan
},
onUnload: function () {
exécutée lorsque la page // détruit
} ,
onPullDownRefresh: function () {
exécuter la gâchette refresh déroulant //
},
onReachBottom: function () {
exécutée lorsque le bas de la page //
},
onShareAppMessage: function () {
// page est exécutée lorsque la part des utilisateurs
},
onPageScroll: function ({)
exécutés lorsque la page défile //
},
onResize: function () {
exécuté lorsque les modifications de la taille de la page //
},
onTabItemTap (point) {
// exécuter lorsque vous cliquez sur l' onglet
console.log (item.index)
Console. log (item.pagePath)
le console.log (item.Text)
},
// fonction de réponse de l' événement
viewTap: function () {
this.setData ({
text: ' les données pour une mise à jour de l'ensemble View'
}, function () {
/ / est le cela le setData le rappel
})
},
// données sans
customData: {
Salut: 'MINA'
}
})
3.2 page de configuration JSON (page nom .json)
Chaque page peut également être utilisé pour configurer le fichier .json performances de la fenêtre de cette page.
page de configuration est beaucoup plus simple que la configuration globale app.json, il suffit de définir la fenêtre du contenu des éléments de configuration app.json, les éléments de configuration de la page couvriront les mêmes éléments de configuration app.json dans la fenêtre.
la page .json peut être définie que les éléments de configuration liés à la fenêtre pour déterminer la performance de la fenêtre de cette page, il n'y a pas besoin d'écrire la clé de la fenêtre.
Résumé: Chaque page .json (configuration de la page), en fait, la fenêtre des éléments de configuration app.json Hériter Ecraser
Application: app.json configuré pour permettre le menu déroulant rafraîchir, mais certaines pages ne ont pas besoin, vous pouvez réécrire désactivé sur le nom de la page .json. Un autre exemple est le titre de chaque page, mais doit aussi être réécrite.
{
"NavigationBarBackgroundColor": "# ffffff",
"navigationBarTextStyle": "noir",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "# CORUB",
"backgroundTextStyle": "light"
}
Tous app.json les éléments de configuration de la fenêtre dans le nom de la page dans tous .json être Écrasé,
mais la configuration .json de nom de la page a ses propres caractéristiques est app.json configuration globale qui n'est pas petite.
Type de propriété Valeur par défaut Description
disableScroll Boolean false Définie sur true alors la page entière ne peut pas faire défiler de haut en bas,
valable uniquement dans page.json, vous ne pouvez pas mettre cela en app.json dans.
couche de vue (.wxml nom de la page et le nom de la page .wxss) 3.3 pages
WXML (weixin Markup Language) est un cadre conçu de langage de balisage, combiné avec le composant de base, le système d'événements peut être construit la structure de la page.
liaison de données
<! - wxml -> < vue > {{message}} </ vue >
// page.js
page ({
données: {
message: 'Bonjour! MINA'
}
})
liste de rendu
<! - wxml -> < vue WX: pour = "{{array}}" > {{item}} </ vue >
// page.js
page ({
data: {
matrice: [1, 2, 3, 4, 5]
}
})
conditions dans lesquelles
<! - wxml -> < vue WX: si = "{{vue == 'WebView'}}" > WebView </ vue > < vue WX: Elif = "{{vue == 'APP'}}" > APP </ vue > < vue WX: else = "{{vue == 'MINA'}}" > MINA </ vue >
// page.js
page ({
données: {
vue: 'MINA'
}
})
Modèles personnalisés
WXML fournir un modèle (modèle), peut alors faire appel à différents endroits dans le fragment de code des modèles définis.
<- - pages / item / item.wxml!>
< modèle nom = "msgItem" > < vue > < texte > {{index}}: {{msg}} </ texte > < texte > Heure: {{ temps}} </ texte > </ voir > </ modèle >
Utilisation des modèles
L'utilisation de la propriété, l'utilisation d'une déclaration de modèle requis modèle et faites passer les données requises, telles que:
<! - pages / index / index.wxml ->
< import src = "../ article / item.wxml" /> < modèle est - = "msgItem" données = "{{...}} item" / >
<! - pages / index / index.js ->
page ({
données: {
item: {
index: 0,
msg: 'c'est un modèle', le
temps: '15.09.2016'
}
}
})
Modèle de portée
Modèle a sa propre portée, vous ne pouvez utiliser les données ainsi que le fichier de définition de modèle de données entrantes définies dans le module <wxs />.
3.4 WXS
(Weixin Script) est un petit programme de langage de script, combiné avec WXML, vous pouvez construire la structure de la page.
WXS et JavaScript est une autre langue, ont leur propre syntaxe, et JavaScript ne sont pas compatibles.
4. Dans le répertoire racine project.config.json
1) Le fichier de configuration du projet ou d'un fichier de configuration appelé projet IDE
Sur les « outils de développement des micro-lettres » pour faire toute la configuration est écrite dans le fichier.
2) Scénario:
En général, lors de l'utilisation d'un outil de développement IDE, vous allez faire quelque chose pour votre propre configuration personnalisée de conception,
Telles que l'interface couleur, la configuration du compilateur, etc., lorsque vous modifiez un autre ordinateur pour réinstaller les outils, vous devez être reconfiguré.
3) La solution: est ce fichier de configuration project.config.json IDE du projet
Lorsque vous réinstallez l'outil ou de travail pour l'ordinateur, aussi longtemps que vous chargez le même paquet de code du projet,
Outils de développement vous aidera à revenir automatiquement à la configuration personnalisée du temps lorsque vous développez le projet,
Qui comprendra l'éditeur de couleurs, le code est automatiquement compressé lors de l'envoi d'une série d'options, etc.
4). L'idée
Cela étant dit, chaque projet peut être personnalisé ensemble de leur configuration IDE favori
5. Une logique de programme bibliothèque partagée (util)
Ce répertoire peut personnaliser le nom
Fonction publique fichiers js, chaque page dans les pages en utilisant l'exposition par le biais de module.exports
Chaque page n'a pas besoin d'écrire du code en double Js.