如何擁有一款屬于你自己的小程序，驚喜就在下面！

前言

目前，小程序行業(yè)已經(jīng)成為互聯(lián)網(wǎng)營銷的熱門黑馬之一，依托于各大流量平臺，小程序行業(yè)具有天然的用戶基礎(chǔ)和得天獨厚的資源優(yōu)勢，憑借其方便快捷的操作以及簡單通俗的模式，僅短短一年的時間，就迎來了爆發(fā)性的增長。目前市場上開發(fā)一款小程序幾千到幾萬不等，以騰訊云為例，由騰訊官方團隊設(shè)計，上線立即投入運營的一款小程序以每年680~3680的價格出售。復(fù)雜的小程序設(shè)計的暫且不談，從最簡單的說起。

小程序的開發(fā)方式分兩種，一種是定制開發(fā)，一種是第三方平臺開發(fā)。定制開發(fā)價格較高，幾萬甚至十幾萬不等，并且開發(fā)周期較長；
第三方平臺開發(fā)價格較低，根據(jù)功能幾千就可以開發(fā)好，最主要是開發(fā)周期短,一個星期左右就可上線運營。

一、微信小程序開發(fā)必備技術(shù)

一、HTML語言

HTML就是超文本標(biāo)記語言的簡寫，HTML主要負責(zé)網(wǎng)頁的骨架，就如同動物的骨架一樣，HTML語言就是支撐網(wǎng)頁布局的骨架。

二、CSS

CSS，是層疊樣式表的簡寫，主要負責(zé)網(wǎng)頁樣式，網(wǎng)頁內(nèi)容如何分布，板塊背景，顏色等外觀問題可以有CSS控制。

三、JavaScript

簡稱js，是一種動態(tài)的腳本語言。在以前js僅僅是用于網(wǎng)頁交互的腳本語言，隨著Google v8引擎、angular、react等前端框架使得前后端分離的趨勢愈加明顯以及node、js等技術(shù)的開發(fā)使得js在服務(wù)器端也迸發(fā)出非凡的活力，成為當(dāng)前非?；钴S的語言之一。

四、服務(wù)器語言

如果不是專業(yè)的后端開發(fā)者，可能后端有一定的難度其學(xué)習(xí)曲線較陡。但是，仍然建議開發(fā)者學(xué)習(xí)一下后端語言，至少需要了解大致的原因框架，能夠看懂其代碼邏輯，這樣不僅可以很好的實現(xiàn)前后端的配合，也能夠在小程序出現(xiàn)bug的時候扯皮用。服務(wù)器的語言有很多比較常用的是PHP、Java、Python、ASP等技術(shù)，建議初學(xué)者根據(jù)具體需求挑選進行學(xué)習(xí)。

五、數(shù)據(jù)庫語言

如果你開發(fā)的小程序數(shù)據(jù)量不大，架構(gòu)不復(fù)雜的話數(shù)據(jù)庫語言相對來說是比較簡單的，一般學(xué)會一些常用的命令以及常出現(xiàn)的問題就能夠應(yīng)付使用。常用的數(shù)據(jù)庫有免費的MySQL、msSQL、MongoDB、Oracle等數(shù)據(jù)庫。若數(shù)據(jù)量非常龐大，很容易導(dǎo)致小程序首屏白頁，這時就要考慮優(yōu)化。

注：具體落實到開發(fā)軟件上，大同小異，每款軟件都有他們的特點，語言標(biāo)準(zhǔn)規(guī)則有些不同，常見的開發(fā)工具有：微信開發(fā)者工具、字節(jié)跳動開發(fā)者工具、Sublime Text 3。這里我們使用微信開發(fā)者工具。

二、微信開發(fā)者工具

一、下載安裝

百度“微信公眾平臺”，選擇小程序

在開發(fā)者工具中選擇相應(yīng)的版本下載

推薦安裝64位穩(wěn)定版

二、新建項目

在啟動頁填寫項目名稱、目錄、AppID（選擇測試號）

這是基礎(chǔ)框架

工具自帶的啟動日志，下面開始了解小程序開發(fā)的框架

三、程序框架

根目錄下兩個文件夾
pages是用于存放頁面文件的文件夾；
utils是用于存放公共js的文件夾；

小程序大致分兩塊，首頁和分頁。首頁即登錄后展示的第一個頁面，首頁和分頁分別占一個文件夾，且都包含在pages文件夾下，很顯然，初始化的小程序只有兩個頁面（首頁index和日志頁logs）

index下又包含首頁界面設(shè)計所需要的文件（index.js、index.json、index.wxss、index.wxml）
index.js即首頁面的邏輯文件，類似于js文檔；
index.json即首頁面的配置文件，比如標(biāo)題字，背景之類；
index.wxss即首頁面的樣式表文件，類似于CSS文檔；
index.wxml即首頁面的結(jié)構(gòu)文件，類似于HTML文檔。

同樣，日志文件logs與index基本類似（若添加新的頁面，需在pages文件下新增文件夾）

而根目錄下的app.js、app.json、app.wxss、project.config.json、sitemap.json即小程序的全局設(shè)置。

app.js即項目的入口文件，用于創(chuàng)建應(yīng)用程序?qū)ο?，啟動小程序時首先調(diào)用；
app.json即當(dāng)前小程序的全局變量，包括了小程序的頁面路徑、界面表現(xiàn)、底部tab等；
app.wxss即小程序的公共樣式表，開發(fā)者可在頁面組件的class屬性上直接使用app.wxss中聲明的樣式規(guī)則；
project.config.json即項目配置文件，通俗來說就是最開始開發(fā)項目時的個性化配置，其中會包括編輯器的顏色、代碼上傳時自動壓縮等等一系列選項。
sitemap.json用于配置小程序及其頁面是否允許被微信索引，文件內(nèi)容為一個JSON對象，如果沒有sitemap.json，則默認(rèn)為所有頁面都允許被索引；

開發(fā)者工具在創(chuàng)建項目后自動將一些公共的代碼抽離成為一個單獨的 js (utils.js)文件，作為一個模塊;也就是utils文件夾，用來放自己封裝的工具類函數(shù)，是一個共享的方法。

四、程序調(diào)試區(qū)

在程序調(diào)試區(qū)有幾種常用的調(diào)試模式

1.Console

Console就是控制臺，可以顯示錯誤信息和打印變量的信息等

2.Wxml

Wxml相當(dāng)于HTML+CSS，左側(cè)的區(qū)域是HTML語言+CSS的一些標(biāo)簽屬性。右側(cè)可以便捷的設(shè)置CSS的屬性

3.Sources

Sources顯示了當(dāng)前項目的所有腳本文件，微信小程序框架會對這些腳本文件進行編譯

4.Network

Network用來顯示與網(wǎng)絡(luò)相關(guān)的信息，此處暫無網(wǎng)絡(luò)請求

5.AppData

AppData顯示當(dāng)前項目顯示的具體數(shù)據(jù)，可以在這里編譯，并且會在頁面實時顯示

三、項目實戰(zhàn)（附核心代碼）

一、項目介紹

利用微信開發(fā)者工具制作了一個最基礎(chǔ)的小程序“太行精靈”（微信直接搜索），功能僅為展示，無任何商業(yè)功能。

首頁效果圖如下

二、項目框架

“太行精靈”小程序設(shè)有6個頁面，分別是首頁index、內(nèi)容頁discovery、個人主頁setting、登錄注冊頁login、打卡頁Calendar、掃碼支付頁please

1.index

1)index.js

var api = require('../../utils/api.js')
var app = getApp()
Page({
  data: {
    lists: [
      {
        'id': '1',
        'image': '/img/1.jpg',
        'title': '太行領(lǐng)秀| 長治·上黨郡 【深度了解長治紅色旅游景點】',
        'num':'304',
        'state':'進行中',
        'time': '4月21日 17:59',
        'address': '長治市·潞州區(qū)'
        
      },
      {
        'id': '2',
        'image': '/img/2.jpg',
        'title': '長治·武鄉(xiāng)·革命圣地',
        'num':'380',
        'state':'已結(jié)束',
        'time': '4月15日 17:39',
        'address': '長治市·武鄉(xiāng)縣'
      },
      {
        'id': '3',
        'image': '/img/3.jpg',
        'title': '沁源之美·靈空山',
        'num':'500',
        'state':'進行中',
        'time': '2月04日 17:31',
        'address': '長治市·沁源縣'
      },
      {
        'id': '4',
        'image': '/img/4.jpg',
        'title': '革命太行邀您“與世界對話”',
        'num':'150',
        'state':'進行中',
        'time': '5月09日 17:21',
        'address': '長治市·潞州區(qū)'
      },
      {
        'id': '5',
        'image': '/img/5.jpg',
        'title': '紅色太行 · 太行山革命區(qū)',
        'num':'217',
        'state':'進行中',
        'time': '10月09日 16:59',
        'address': '長治市·潞州區(qū)'
      }
    ],
    list: [
      {
        'id': '1',
        'image': '/img/1.jpg',
        'title': '太行領(lǐng)秀| 長治·上黨郡 【深度了解長治紅色旅游景點】',
        'num':'304',
        'state':'進行中',
        'time': '10月09日 17:59',
        'address': '長治市·潞州區(qū)'
      },
      {
        'id': '2',
        'image': '/img/2.jpg',
        'title': '長治·武鄉(xiāng)·革命圣地',
        'num':'380',
        'state':'已結(jié)束',
        'time': '10月09日 17:39',
        'address': '長治市·武鄉(xiāng)縣'
      },
      {
        'id': '3',
        'image': '/img/3.jpg',
        'title': '沁源之美·靈空山',
        'num':'500',
        'state':'進行中',
        'time': '10月09日 17:31',
        'address': '長治市·沁源縣'
      },
      {
        'id': '4',
        'image': '/img/4.jpg',
        'title': '革命太行邀您“與世界對話”',
        'num':'150',
        'state':'已結(jié)束',
        'time': '10月09日 17:21',
        'address': '長治市·潞州區(qū)'
      },
      {
        'id': '5',
        'image': '/img/5.jpg',
        'title': '紅色太行 · 太行山革命區(qū)',
        'num':'217',
        'state':'進行中',
        'time': '10月09日 16:59',
        'address': '長治市·潞州區(qū)'
      }
    ],
    imgUrls: [
        '/img/26.jpg',
        '/img/13.jpg',
        '/img/28.jpg',
        '/img/14.jpg',
        '/img/24.jpg',
        '/img/15.jpg',
        '/img/27.jpg',
        '/img/27.jpg',
        '/img/16.jpg'
    ]
  },
  onLoad () {
    var that = this
    app.getSystemInfo(function(res) {
    	that.setData({
        	systemInfo: res
      	})
    })

    that.setData({
    _api: api
    })

    this.getSwipers()
    this.pullUpLoad()
  },

  /**
   *
   */
   getSwipers () {
     api.get(api.SWIPERS)
       .then(res => {
         this.setData({
           swipers: res.data.ads
         })
       })
   },

  scrollR: function(e){
    this.setData({
      lists: this.data.lists.concat(this.data.list),
    });
  },

  onLoad: function (e) {
    this.scrollR(e);
  },

  scroll: function(e){
    this.scrollR(this.data.offset);
  },
  //頁面跳轉(zhuǎn)函數(shù)（wxml中找bindtap="go2detail）
  go2detail: function(param){
    wx.navigateTo({
 
      url: '/pages/discovery/discovery',
 
      })
  }
})

2)index.json

{
  "usingComponents": {}
}

3)index.wxml

<scroll-view scroll-y="true" bindscroll="scroll">
  <view class="swiper">
    <swiper indicator-dots="true" autoplay="true" interval="5000" duration="1000">
      <block wx:for="{{imgUrls}}" wx:key="item.id">
        <swiper-item>
          <image src="{{item}}" class="slide-image"/>
        </swiper-item>
      </block>
    </swiper>
  </view>
  <view class="mobi_title">
    <text class="mobi_icon"></text>
    <text>太行精靈為你推薦</text>
  </view>
  <block wx:for-items="{{lists}}" wx:for-item="list" wx:key="list.id">
    <view class="list" data-id="{{list.id}}">
      <view class="list-img">
        <image class="video-img" bindtap="go2detail" mode="scaleToFill" src="{{list.image}}"></image>
      </view>

      <view class="list-detail">
        <view class="list-title" bindtap="go2detail"><text>{{list.title}}</text></view>
        <view class="list-tag"><view class="state">{{list.state}}</view><view class="join"><text class="list-num">{{list.num}}</text>人報名</view></view>
        <view class="list-info"><text>{{list.address}}</text>|<text>{{list.time}}</text></view>
      </view> 
    </view>
  </block>
</scroll-view>
<include src="../layout/footer.wxml"/>

4)index.wxss

/**index.wxss**/
page{
	height: 100%;
	background-color: #efeff4;
}
scroll-view{
  height: 100%;
}
.swiper{
  top: 0px;
  width: 100%;
  height: 240px;	
}
.swiper swiper{
	height: 240px;
}
.slide-image{
  width: 100%;
}
.mobi_title{
	font-size: 15px;
	color: #777;
  line-height: 110%;
  font-weight: normal;
	width: 100%;
  padding: 10px;
  background-color: #f3f3f3;
  position: relative;
}
.mobi_icon{
	padding: 0px 1.5px;
  border-radius: 1.5px;
  background-color: #ff7777;
  position: relative;
  margin-right: 5px;
}
/*list*/
.list{
	overflow: hidden;
	width: 100%;
	padding: 0 20px 0 0;
	border-top: 1px solid #eeeeee;
	background-color: #fff;
  margin-bottom: 15px;
}
.list-img{
  position: relative;
	float: left;
	width: 120px;
}
.list-img .video-img{
	width: 120px;
	height: 120px;
}
.list-detail{
	position: absolute;
  margin-top: 15px;
  margin-left: 135px;
  margin-right: 10px;
}
.list-title text{
	word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
	font-size: 17px;
  color: #333;
	font-weight: bold;
  line-height: 120%;
}
.list-tag view.state{
    display: block;
    font-size: 11px;
    color: #81aaf7;
    width: 50px;
    padding: 2px;
    border: 1px solid #93b9ff;
    border-radius: 2px;
    text-align: center;
    margin-top: 10px;
		float: left;
}
.list-tag .join{
	font-size: 13px;
  line-height: 120%;
  color: #bbb;
  position: absolute;
  display: inline;
  margin: 10px 0 0 20px;
}
.list-tag .list-num{
	font-size: 16px;
  color: #ff6666;
}
.list-info{
	font-size: 13px;
  color: #bbb;
  line-height: 110%;
  font-weight: normal;
	margin-top: 40px;
}

2.app.json

{
  "pages": [
    "pages/index/index",
    "pages/setting/setting",
    "pages/login/login",
    "pages/please/please",
    "pages/Calendar/Calendar",
    "pages/discovery/discovery"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "太行精靈",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#a0a0a0",
    "selectedColor": "#ec5c30",
    "backgroundColor": "#f2f2f2",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁",
        "iconPath": "img/shouye.png",
        "selectedIconPath": "img/shouye1.png"
      },
      {
        "pagePath": "pages/setting/setting",
        "text": "我的",
        "iconPath": "img/me.png",
        "selectedIconPath": "img/me1.png"
      }
    ]
  },
  "debug": true,
  "sitemapLocation": "sitemap.json"
}

以上代碼僅供參考，可以參照以下文檔
鏈接:
微信小程序官方文檔
小程序框架

三、項目上線

微信公眾平臺，進入小程序進行注冊

注冊完成后會有AppID，將之前的測試號用新ID代替，再次打開微信開發(fā)者工具，編輯區(qū)上方會出現(xiàn)上傳按鈕

上傳成功后進入微信公眾平臺，會看到開發(fā)版本，提交審核，半小時左右，通知審核通過之后提交審核版本，10分鐘左右，就能看到自己上線的小程序。
文章來源地址http://www.zghlxwxcb.cn/news/detail-501542.html

到了這里，關(guān)于【小程序】零基礎(chǔ)微信小程序開發(fā)+實戰(zhàn)項目的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！