communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > Applet WeChat > Développement de mini-programmes > Présentation d'entreprise du développement de petits programmes

Présentation d'entreprise du développement de petits programmes

Y2J
Libérer： 2017-05-08 10:44:30
original
3312 Les gens l'ont consulté

Dans ce didacticiel de développement du mini-programme WeChat, nous présenterons comment utiliser le mini-programme WeChat pour développer des fonctions telles que la promotion et l'affichage internes de l'entreprise.

1. La partie principale du mini programme

La partie principale d'un mini programme est constituée de trois fichiers, qui doivent être placés dans le répertoire racine du projet, comme suit :

1. Logique du mini-programme

App({
  onLaunch: function() { 
    // Do something initial when launch.  },
  onShow: function() {      // Do something when show.  },
  onHide: function() {      // Do something when hide.  },
  globalData: 'fangbei'})
Copier après la connexion

2. Paramètres publics du mini-programme

Enregistrez principalement cinq pages, configurez la fenêtre et afficher trois pages dans la barre d'onglets

{  "pages": [    "pages/index/index",    "pages/news/news",    "pages/news/news-details",    "pages/product/product",    "pages/contact/contact"
  ],  "window": {    "navigationBarTextStyle": "black",    "navigationBarTitleText": "盛世华安",    "navigationBarBackgroundColor": "#fbf9fe",    "backgroundColor": "#fbf9fe"
  },  "tabBar": {    "color": "#dddddd",    "selectedColor": "#459ae9",    "borderStyle": "black",    "backgroundColor": "#ffffff",    "list": [{      "pagePath": "pages/index/index",      "iconPath": "images/index.png",      "selectedIconPath": "images/index_selected.png",      "text": "公司盛况"
    }, {      "pagePath": "pages/product/product",      "iconPath": "images/product.png",      "selectedIconPath": "images/product_selected.png",      "text": "产品服务"
    }, {      "pagePath": "pages/contact/contact",      "iconPath": "images/contact.png",      "selectedIconPath": "images/contact_selected.png",      "text": "联系我们"
    }]
  },  "networkTimeout": {    "request": 10000,    "connectSocket": 10000,    "uploadFile": 10000,    "downloadFile": 10000
  },  "debug": true}
Copier après la connexion

3. Feuille de style publique

@import 'style/weui.wxss';
@import "/utils/wxParse/wxParse.wxss";


page {
  background-color: #fbf9fe;
  height: 100%;
}.container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  justify-content: space-between;
}.page-header {
  display: flex;
  font-size: 32rpx;
  color: #aaa;
  margin-top: 50rpx;
  flex-direction: column;
  align-items: center;
}.page-header-text {
  padding: 20rpx 40rpx;
}.page-header-line {
  width: 150rpx;
  height: 1px;
  border-bottom: 1px solid #ccc; 
}.page-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  overflow-x: hidden;
}.page-body-wrapper {
  margin-top: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}.page-body-wrapper form {
  width: 100%;
}.page-body-wording {
  text-align: center;
  padding: 200rpx 100rpx;
}.page-body-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  margin-bottom: 50rpx;
  width: 100%;
  padding: 50rpx 0 150rpx 0;
}.page-body-title {
  margin-bottom: 100rpx;
  font-size: 32rpx;
}.page-body-text {
  font-size: 30rpx;
  line-height: 26px;
  color: #ccc;
}.page-body-text-small {
  font-size: 24rpx;
  color: #000;
  margin-bottom: 100rpx;
}.page-body-form {
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid #eee;
}.page-body-form-item {
  display: flex;
  align-items: center;
  margin-left: 30rpx;
  border-bottom: 1px solid #eee;
  height: 88rpx;
  font-size: 34rpx;
}.page-body-form-key {
  width: 180rpx;
  color: #000;
}.page-body-form-value {
  flex-grow: 1;
}.page-body-form-value .input-placeholder {
  color: #b2b2b2;
}.page-body-form-picker {
  display: flex;
  justify-content: space-between;
  height: 100rpx;
  align-items: center;
  font-size: 36rpx;
  margin-left: 20rpx;
  padding-right: 20rpx;
  border-bottom: 1px solid #eee;
}.page-body-form-picker-value {
  color: #ccc;
}.page-body-buttons {
  width: 100%;
}.page-body-button {
  margin: 25rpx;
}.page-body-button image {
  width: 150rpx;
  height: 150rpx;
}.page-footer {
  text-align: center;
  color: #1aad19;
  font-size: 24rpx;
  margin: 20rpx 0;
}.green{
    color: #09BB07;
}.red{
    color: #F76260;
}.blue{
    color: #10AEFF;
}.yellow{
    color: #FFBE00;
}.gray{
    color: #C9C9C9;
}.strong{
    font-weight: bold;
}.bc_green{
    background-color: #09BB07;
}.bc_red{
    background-color: #F76260;
}.bc_blue{
    background-color: #10AEFF;
}.bc_yellow{
    background-color: #FFBE00;
}.bc_gray{
    background-color: #C9C9C9;
}.tc{
    text-align: center;
}.page input{
    padding: 20rpx 30rpx;
    background-color: #fff;
}checkbox, radio{
    margin-right: 10rpx;
}.btn-area{
    padding: 10px 30px;
}.btn-area button{
    margin-top: 20rpx;
    margin-bottom: 20rpx;
}.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
    overflow: hidden;
}.pagehd{
    padding: 50rpx 50rpx 100rpx 50rpx;
    text-align: center;
}.pagetitle{
    display: inline-block;
    padding: 20rpx 40rpx;
    font-size: 32rpx;
    color: #AAAAAA;
    border-bottom: 1px solid #CCCCCC;
}.pagedesc{
    display: none;
    margin-top: 20rpx;
    font-size: 26rpx;
    color: #BBBBBB;
}page{
    background-color: #F8F8F8;
    font-size: 16px;
    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
}.pagehd {
    padding: 40px;
}.pagebd {
    padding-bottom: 40px;
}.pagebd_spacing {
    padding-left: 15px;
    padding-right: 15px;
}.pageft{
    padding-bottom: 10px;
    text-align: center;
}.pagetitle {
    text-align: left;
    font-size: 20px;
    font-weight: 400;
}.pagedesc {
    margin-top: 5px;
    color: #888888;
    text-align: left;
    font-size: 14px;
}.swiper {
    width: 100%;
    height: 400rpx;
}.slide-image {
    width: 100%;
}.news {
    padding: 26rpx 40rpx 26rpx 40rpx;
}.news-title {
    color: #AAAAAA;
}.news-item {
    margin: 10rpx 0 10rpx 0;
    
    background-color: #fff;
}.news-item-pic {
    padding: 20rpx 0 10rpx 20rpx;
    width: 160rpx;
    
    float: left;
}.news-item-image {
    width: 100%;
}.news-item-words {
    width: 450rpx;
    height: 65px;
    float: right;
    overflow-y: hidden;
    padding: 20rpx 10rpx;
}.news-item-title {
    font-size: 11pt;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}.news-item-content {
    font-size: 8pt;
    line-height: 13pt;
    text-overflow:ellipsis; 
    color: #a9a9a9;
}.news-more {
    color: #AAAAAA;
    font-size: 14px;
    
}.news-more-line {
    padding-left: -26rpx important;
}.news-details-content {
    padding: 0 40rpx 100rpx 40rpx;
}.video {
    
}.video-input {
    border: 1px solid #CCCCCC;   
}.contact {
    padding: 40rpx 40rpx 40rpx 40rpx;
}image {
    height: auto;
}
Copier après la connexion

2. Partie page Business

La page applet est principalement composée des fichiers suivants. .

Ce programme de projet est divisé en 4 pages : page d'accueil, page de détails de l'actualité, page de service produit et page de contact.

Partie page d'accueil

Le rendu de la page d'accueil est le suivant

Structure de la page

Ci-dessus

se trouve un. image Graphique carrousel, avec une liste d'actualités au milieu et une vue ci-dessous pour en savoir plusNavigation

Le code de structure de la page est le suivant

<!--index.wxml--><view class="index">
    <view class="slider">
        <swiper class="swiper" indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
            <block wx:for="{{swipers}}">
                <swiper-item>
                    <navigator url="/pages/news/news-details?id={{item.id}}" class="widget">
                        <image mode="widthFix" src="{{item.thumbnail_images.medium_large.url}}" class="slide-image" width="" height=""></image>
                    </navigator>
                </swiper-item>
            </block>
        </swiper>
    </view>
    <view class="news">
        <text class="news-title">新闻动态</text>

        <block wx:for="{{news}}">
        <navigator url="/pages/news/news-details?id={{item.id}}">
        <view class="news-item line">
            <view class="news-item-pic">
                <image mode="widthFix" src="{{item.thumbnail}}" class="news-item-image" width="" height=""></image>
            </view>
            <view class="news-item-words">
                <view class="news-item-title"><text>{{item.title_plain}}</text></view>
                <view class="news-item-content"><text>{{item.excerpt_plain}}</text></view>
            </view>
        </view>
        </navigator>
        </block>

        <view class="widgetslist widgetslist_show">
            <navigator url="/pages/news/news?cat={{cat}}" class="widget_more">
                <text class="news-more">查看更多</text>
                <image class="widgetarrow" src="/images/arrowright.png" mode="aspectFill" />
                <view class="widgetline widgetline_first"></view>
            </navigator>
        </view>
    </view></view>
Copier après la connexion

2. Le code de style de la feuille de style

est le suivant 

.index{
    background-color: #FBF9FE;
    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
    flex: 1;
    min-height: 100%;
    font-size: 32rpx;
}.head{
    padding: 80rpx;
    line-height: 1;
}.body{
    padding-left: 30rpx;
    padding-right: 30rpx;
    overflow: hidden;
}.title{
    font-size: 52rpx;
}.desc{
    margin-top: 10rpx;
    color: #888888;
    font-size: 28rpx;
}.widgetsitem{
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    background-color: #FFFFFF;
    overflow: hidden;
    border-radius: 4rpx;
    cursor: pointer;
}.widgetsinfo{
    display: flex;
    padding: 40rpx;
    align-items: center;
    flex-direction: row;
}.widgetsinfo_show{
}.widgetsinfo_show .widgetsinfo-img{
    transform: rotate(-90deg);
}.widgetsinfo-name{
    flex: 1;
}.widgetsinfo-img{
    width: 32rpx;
    height: 32rpx;
    transition: transform .4s;
    transform: rotate(90deg);
}.widgetslist{
    display: none;
}.widgetslist_show{
    display: block;
}.widget{
    position: relative;
    padding-top: 26rpx;
    padding-bottom: 26rpx;
    padding-left: 40rpx;
    padding-right: 40rpx;
}.widget_more{
    position: relative;
    padding-top: 26rpx;
    padding-bottom: 26rpx;
    padding-left: 0rpx;
    padding-right: 40rpx;
}.widgetarrow{
    position: absolute;
    top: 28rpx;
    right: 44rpx;
    width: 32rpx;
    height: 32rpx;
}.widgetline{
    content: " ";
    position: absolute;
    left: 40rpx;
    top: 0;
    right: 0;
    height: 2rpx;
    background-color: #F0F0F0;
}.widgetline_first{
    left: 0;
    right: 0;
    background-color: #D8D8D8;
}
Copier après la connexion

3. Traitement logique de la page

La logique de la page passe également par l' interface Obtenez les données du site Web et enregistrez-les dans un swipet, des actualités et d'autres données pour l'affichage frontal

var CONFIG = require('../../utils/config.js')

Page({
  data: {
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    swipers: [],
    news: [],
    cat: '17',
  },

  onLoad: function () {    var that = this;
    wx.request({
      url: CONFIG.API_URL.GET_INDEX,
      method: 'GET',
      data: {},
      header: {        'Accept': 'application/json'
      },
      success: function(res) {
        console.log(res);        if (res.statusCode == 200 && res.data.status == 'ok') {          var data = res.data;          var swipers = [];          var news = [];
          
          console.log(data);          for (var i = 0; i < data.count; i++) {            if (i < 3) {
              swipers.push(data.posts[i]);
            }            else {              var excerpt_plain = data.posts[i].excerpt.replace(/<[^>].*?>/g, "");
              data.posts[i].excerpt_plain = excerpt_plain.replace(/\[[^\]].*?\]/g, "");
              news.push(data.posts[i]);
            }
          }
          that.setData({swipers: swipers});
          that.setData({news: news});
        } else {
          
        }
      }
    })
  },
  onShareAppMessage: function () {   // return custom share data when user share.
   console.log('onShareAppMessage')   return {
      title: '盛世华安',
      desc: '小程序',
      path: '/pages/index/index'
    }
  },
});
Copier après la connexion

Partie de la page produit et service

La page des produits et services est similaire à la page de liste d'actualités sur la page d'accueil

1 Structure de la page

Le code de structure de la page est le suivant 

<view class="news">
        <text class="news-title">产品服务</text>

        <block wx:for="{{news}}">
        <navigator url="/pages/news/news-details?id={{item.id}}">
        <view class="news-item line">
            <view class="news-item-pic">
                <image mode="widthFix" src="{{item.thumbnail}}" class="news-item-image" width="" height=""></image>
            </view>
            <view class="news-item-words">
                <view class="news-item-title"><text>{{item.title_plain}}</text></view>
                <view class="news-item-content"><text>{{item.excerpt_plain}}</text></view>
            </view>
        </view>
        </navigator>
        </block>
    </view>
Copier après la connexion

. 2. Feuille de style

Utiliser une feuille de style publique .

3. Traitement logique de la page

Demander les données et l'affichage de l'interface du site officiel

var CONFIG = require('../../utils/config.js')

Page({
  data: {
  },
  onLoad: function () {    var that = this;
    wx.request({
      url: CONFIG.API_URL.GET_CATEGORY + '14',
      method: 'GET',
      data: {},
      header: {        'Accept': 'application/json'
      },
      success: function(res) {
        console.log(res);        if (res.statusCode == 200 && res.data.status == 'ok') {          var data = res.data;          var news = [];
          
          console.log(data);          for (var i = 0; i < data.count; i++) {            var excerpt_plain = data.posts[i].excerpt.replace(/<[^>].*?>/g, "");
            data.posts[i].excerpt_plain = excerpt_plain.replace(/\[[^\]].*?\]/g, "");
            news.push(data.posts[i]);
          }
          that.setData({news: news});
        } else {
          
        }
      }
    })
  },
  onReady:function(){    // 页面渲染完成  },
  onShow:function(){    // 页面显示  },
  onHide:function(){    // 页面隐藏  },
  onUnload:function(){    // 页面关闭  },
  go: function(event) {
    wx.navigateTo({
      url: '/pages/news/news-details?id=' + event.currentTarget.dataset.type
    })
  }
})
Copier après la connexion

Contactez-nous partie de la page

1 .Structure de la page

Le code de structure de la page est le suivant.

<import src="../../utils/wxParse/wxParse.wxml"/> <view class="page">
  <view class="pagehd">
    <text class="pagetitle"></text>
    <text class="pagedesc"></text>
  </view>
    <view class="news-details-content wxParse">
    <template is="wxParse" data="{{wxParseData:content.nodes}}"/>
    </view></view>
Copier après la connexion

2. La feuille de style

utilise une feuille de style publique.

3. Traitement logique de la page

Demander les données et l'affichage de l'interface du site officiel

var CONFIG = require('../../utils/config.js')var WxParse = require('../../utils/wxParse/wxParse.js');

Page({
  data: {
  },
  onLoad: function () {    var that = this;
    wx.request({
      url: CONFIG.API_URL.GET_PAGE + '36',
      method: 'GET',
      data: {},
      header: {        'Accept': 'application/json'
      },
      success: function(res) {
        console.log(res);        if (res.statusCode == 200 && res.data.status == 'ok') {          var data = res.data;
          
          that.setData({page: data.page});
          WxParse.wxParse('content', 'html', data.page.content, that, 25)
        } else {
          
        }
      }
    })
  },
  onReady:function(){    // 页面渲染完成  },
  onShow:function(){    // 页面显示  },
  onHide:function(){    // 页面隐藏  },
  onUnload:function(){    // 页面关闭  },
  go: function(event) {
    wx.navigateTo({
      url: '/pages/news/news-details?id=' + event.currentTarget.dataset.type
    })
  }
})
Copier après la connexion

3. Rendus du programme

[Recommandations associées]

1.Téléchargement complet du code source du mini-programme WeChat

2.Mini-programme WeChat démo ：Yangtao

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!

Étiquettes associées：
小程序开发，企业展示
source：php.cn
Article précédent：Films populaires pour le développement de petits programmes Article suivant：API Little Yellow Chicken développée par la plateforme publique WeChat
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2305
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2434
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
2050
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1932
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
2003
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal