Introduction détaillée pour démarrer avec le développement du mini-programme WeChat

Cette fois, je vais vous apporter une introduction détaillée au développement et à l'utilisation des mini-programmes WeChat. Quelles sont les précautions à prendre pour démarrer le développement de mini-programmes WeChat. Voici des cas pratiques, jetons un coup d'œil.

Les mini-programmes WeChat sont populaires depuis un certain temps, et j'y ai déjà prêté attention. À en juger par le développement des six derniers mois, la plupart des entreprises ne sont toujours pas disposées à convertir leurs. activité principale aux applications natives. Mettez-le sur la plate-forme WeChat pour éviter d'être restreint par Tencent. Cependant, les scénarios d'application des mini-programmes (activation et désactivation et distribution de codes QR, etc.) valent toujours la peine d'être appris. techniquement, vous constaterez qu'ils se composent de composants. Il y a beaucoup de similitudes ci-dessus. Pour parler franchement, les mini-programmes sont des applications légères H5 basées sur la plateforme WeChat. WeChat encapsule les fonctions sous-jacentes du système (appareil, emplacement, média, fichiers, etc.) et les propres fonctions de WeChat (connexion, paiement, partage, etc.) en correspondant L'API est appelée par de petits programmes.

J'ai écrit un DOME basé sur des documents officiels, en utilisant l'interface API Zephyr Weather Open pour implémenter les prévisions météorologiques. C'est uniquement pour l'apprentissage et la communication, merci~

1. Concepts de base du mini programme

1. Outils de développement : Afin de coopérer au développement de mini programmes, WeChat est spécialement équipé de ses propres outils de développement, et vous pouvez choisir la version correspondante pour installer.

2. Créez une application de projet : Une fois l'installation terminée, ouvrez-la et scannez le code QR pour vous connecter. La publication de mini-programmes nécessite un compte public certifié au niveau de l'entreprise, de sorte que les comptes d'abonnement personnels ne peuvent pas être publiés. Je ne choisis donc aucun AppID ici, sélectionne un dossier local vide pour créer le projet et coche pour créer un projet à démarrage rapide pour générer une démo.

3. Écrivez un petit programme : la démo est initialisée et contient quelques fichiers de code simples, dont app.js, app.json et app.wxss sont essentiels. au minimum, l'applet lira ces fichiers pour initialiser l'instance.

App.js est le script d'initialisation du mini programme. Vous pouvez surveiller le cycle de vie du mini programme, demander des variables globales et appeler des API dans ce fichier.

app.json est. la vue globale du mini programme,

pages définit la composition du chemin de la page (le premier est la page d'accueil par défaut), window définit les performances de la fenêtre de la page par défaut, etc.

App.wxss est la feuille de style commune pour l'ensemble du mini-programme.

Similaire à common.css dans le développement de sites Web

4. Créer une page : Dans le répertoire pages, elle est constituée de quatre fichiers de types différents portant le même nom dans un dossier. .js est un fichier script, .json est un fichier de configuration, .wxss est un fichier de feuille de style, .wxml est un fichier de structure de page , parmi lesquels les fichiers json et wxss sont facultatifs ( sera par défaut Hériter des paramètres par défaut json et wxss de l'application ).

2. Cadre du mini programme

1. Configuration du mini programme

app.json est principalement divisé en cinq parties : pages : groupe de pages, fenêtre. : style de cadre (barre d'état, barre de navigation, titre, couleur d'arrière-plan de la fenêtre), tabBar : menu du bas, networkTimeout : paramètre de délai d'expiration du réseau, debug : activer le mode débogage

page.json est défini individuellement pour la page, en cascade Supprimez les paramètres globaux de app.json

"pages""pages/index/index""pages/logs/logs""window""backgroundTextStyle":"light""navigationBarBackgroundColor": "#000""navigationBarTitleText": "WeChat""navigationBarTextStyle":"white"

2. Mini programme La logique de

Utiliser App() pour enregistrer un petit programme doit être enregistré dans app.js, et plusieurs

App({//如下为小程序的生命周期
  onLaunch: function() { },//监听初始化
  onShow: function() {  },//监听显示（进入前台）
  onHide: function() {  },//监听隐藏（进入后台：按home离开微信）
  onError: function(msg) {  },//监听错误
  //如下为自定义的全局方法和全局变量  
  globalFun:function(){},
  globalData: 'I am global data'})

Utilisez Page() pour enregistrer une page et inscrivez-vous

Page({
  data: {text: "This is page data."},//页面数据，用来维护视图，json格式
  onLoad: function(options) {  },//监听加载
  onReady: function() {  },//监听初次渲染完成
  onShow: function() {  },//监听显示
  onHide: function() {  },//监听隐藏
  onUnload: function() {  },//监听卸载
  onPullDownRefresh: function() {  },//监听下拉
  onReachBottom: function() {  },//监听上拉触底
  onShareAppMessage: function () {  },//监听右上角分享
  //如下为自定义的事件处理函数（视图中绑定的）
  viewTap: function() {//setData设置data值，同时将更新视图
    this.setData({text: 'Set some data for updating view.'})
  }
})

3. Vue et liaison d'événement du mini programme

Dans le fichier wxml de chaque page, effectuez des données sur les données du fichier wxml. liaison page js et liaison d'événement personnalisée

<!--{{}}绑定data中的指定数据并渲染到视图--><view>{{text}}</view><!--wx:for获取数组数据进行循环渲染，item为数组的每项--><view> {{item}} </view><!--wx:if条件渲染--><view> WEBVIEW </view><view> APP </view><view> MINA </view><!--模板--><template>
  <view>FirstName: {{firstName}}, LastName: {{lastName}}</view></template><template></template><template></template><!--bindtap指定tap事件处理函数为ViewTap--><view> 点我点我 </view>

4. Style de mini programme

Page({
  data: {//data数据主要用于视图绑定
    text:"我是一条测试",
    array:[0,1,2,3,4],
    view:"APP",
    template:{
        staffA: {firstName: 'Hulk', lastName: 'Hu'},
        staffB: {firstName: 'Shang', lastName: 'You'}
    }
  },
  ViewTap:function(){console.log('额，点到我了了~')}//自定义事件，主要用于事件绑定})

Dans le fichier wxss de chaque page, stylisez la structure dans les paramètres wxml, équivalent à css, étendre les unités rpx. Parmi eux, app.wxss utilise par défaut le style global et affecte toutes les pages.

三、小程序实战-天气预报（利用和风天气API）

先看看完成后的效果，一共三个页面，测试demo不求美观，不喜勿喷~

1、设置底部菜单和页面

我们就在quick start生成的demo基础上进行修改即可，因为涉及图标icon，我们新建一个images文件夹来存放图片

在原先pages文件夹中，删除index和log页面文件夹，新建weather、city、about三个页面文件夹，及三个页面对应的四个文件类型，文件结构如下图

接下来配置app.json文件

/*app.json,该文件不能含有任何注释，所以正式应用需删除所有注释内容*/{  "pages":[//小程序的页面路径数组，第一条默认为首页，所有页面均需写在这里，否则不能加载
    "pages/weather/weather",    "pages/about/about",    "pages/city/city"
  ],  "window":{//小程序框架设置
    "navigationBarBackgroundColor": "#000",    "navigationBarTitleText": "天气预报",    "navigationBarTextStyle":"#fff",    "backgroundColor":"#666",    "backgroundTextStyle":"light",    "enablePullDownRefresh":true
  },  "tabBar": {//小程序底部菜单设置
    "color": "#666",    "selectedColor": "#56abe4",    "backgroundColor": "#ddd",    "borderStyle":"black",    "list": [{      "pagePath": "pages/weather/weather",      "iconPath": "images/tabbar/weather1.png",      "selectedIconPath": "images/tabbar/weather2.png",      "text": "天气预报"
    }, {      "pagePath": "pages/city/city",      "iconPath": "images/tabbar/city1.png",      "selectedIconPath": "images/tabbar/city2.png",      "text": "设置城市"
    }, {      "pagePath": "pages/about/about",      "iconPath": "images/tabbar/about1.png",      "selectedIconPath": "images/tabbar/about2.png",      "text": "关于我"
    }],    "position":"bottom"
  }
}

2、注册小程序和整体样式

修改app.js和app.wxss两个文件如下

//app.jsApp({  //1、系统事件部分
  onLaunch: function () {//小程序初始化时执行
    var that=this;
    that.curid = wx.getStorageSync('curid') || that.curid;//API：获取本地缓存，若不存在设置为全局属性
    that.setlocal('curid', that.curid);//调用全局方法  },  //2、自定义全局方法部分
  setlocal:function(id,val){
    wx.setStorageSync(id, val);//API：设置本地缓存  },  //3、自定义全局属性部分
  curid:"CN101010100",
  version:"1.0"})

/**app.wxss**/.container {margin: 0; padding: 0;}.title{font-size: 14px; font-weight: bold;}

3、页面的结构（wxml）、样式（wxss）、逻辑（js）和配置（json）

小程序中的wxml摒弃了HTML标签， 改用view（类似p）、text（类似span）、icon等等，class同html指定样式，bindtap绑定事件（类似onclick），该页面无特殊配置，json文件内容为空（非必须文件）

  
    当前城市：{{basic.city}}
    {{basic.update.loc}}

/**weather.wxss**/.city {padding: 3% 5%; background: #ddd;}.city text{font-size: 16px; color: #666;}.city .update{ font-size: 12px; float: right;}

 app = getApp();
  data:{cur_id:app.curid,basic:"",now:""},
  
  onShow: that = '加载中',icon: 'loading',duration: 10000})
    that.getnow((d){="http://files.heweather.com/cond_icon/"+d.now.cond.code+".png"
  getnow:
      url: 'https://free-api.heweather.com/v5/now''01a7798b060b468abdad006ea3de4713''Content-Type': 'application/json'(res) {fn(res.data.HeWeather5[0]);}
  bindViewTap:(){wx.switchTab({url: '../city/city'})}})

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎样使用react内swiper方法

怎样使用seajs在require书写约定

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!