文章目錄

• • 1.什么叫做微信小程序
  • 2.微信小程序開發功能特點
  • 3.微信小程序開發流程
  • • 3.1 微信公眾平臺注冊
    • 3.2 微信開發者工具下載
    • 3.3 微信開發者工具界面上的基本功能介紹
    • • 3.3.1 開發環境背景設置
      • 3.3.2 小程序開發工具
      • 3.3.3 開發界面基本工具介紹
    • 3.4實現一些小程序入門基本功能
    • • 3.4.1 文件夾的基本功能
      • 3.4.2 實現分欄模塊化
      • 3.4.3 實現登錄界面設定
    • 3.5上傳小程序開發

1.什么叫做微信小程序

微信小程序（Wechat Mini Program）簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。這次微信小程序的推出，應該更會激發客戶對微信公號的開發熱情。
所以從長遠講，不管是APP還是網站建設類技術公司，利還是大于弊的。因為微信小程序在很多方面，確實比網站，以及APP更有優勢。
傳統的電腦上看的網站，自然不方便在手機上看了。而且手機用戶花在手機頁面上的時間并不多。他們大量的時間都花在于 APP 上。但我們都知道，手機的屏幕是有限的。我不可能一個應用，一個需求，就裝一個 APP。
于是要么把自己最急需的，最常用的一些需求的 APP 裝上，看新聞，裝一個今日頭條，網易新聞啥的。那些不急，不常用的，就讓超級 APP 來代替。比如看看八卦，學習下行業知識等，訂閱一些公眾號就行了。
從目前來講，APP 比手機網頁好，手機網頁比電腦網頁好。手機網頁在電腦上看起來還行，但需要我們輸入網址域名，這在電腦上還好操作，在手機上，簡單是讓人抓狂。
雖然 APP在體驗上非常突出，但需要安裝，需要消耗流量，占用手機有限的桌面空間。這種麻煩程序，甚至超出了APP的優勢本身。

2.微信小程序開發功能特點

1、無需經歷繁瑣的下載過程，直接搜索打開運用。
一般情況下大家在使用APP之前，都會經歷四個過程，也就是下載、安裝、注冊賬號、使用，小程序則是打開微信、小程序搜索、打開應用、使用，雖然同樣是四個步驟，但是小程序確要快許多，主要原因是因為它不需要進行繁瑣的下載過程，在搜索了某個小程序之后，就能夠直接進入，沒有任何的條款設置，也不需要大家進行申請注冊賬號，非常的方便。
2、觸手可及。
小程序只要在剛開始開發的時候將一些特定的選項設計進去，那么大家在日常生活中就可以享受到觸手可及的功能，簡單的來講就是大家想要了解某一項植物的屬性和品種，大家利用小程序直接掃描查看，所有的信息都可以完整的展示出來，當然APP也具備這樣的功能，但是APP是別的效果較慢，小程序不用托載大能量的復核，所以識別起來更加的快捷。
3、用完就走。
這種情況主要在一些線下的店鋪中比較常見，我們舉例說大家進入到一家干果零食店鋪，大家可以直接掃描點店鋪中的二維碼進入到小程序中進行挑選，也可以在上面一鍵支付訂單，讓店員幫你挑選并且直接遞送給大家，不同自己排隊或擁擠的進入店鋪中去篩選，小程序則可以幫助大家一鍵完成這些操作，在購買買零食之后，大家就可以直接不予理會小程序，它也不會打擾到大家，真正的實現用完就走的狀態。
4、無需專程去卸載。
小程序是一種輕應用，它靜靜地待在微信里面，不會發信息給你，需要使用時直接進去微信里面搜索使用。你訪問過它的服務，卻并不需要程序管理器去管理它，我們不需要卸載的過程。而且在大家使用下一個小程序時，他就會自動的往后排，不會打擾到各位用戶的操作，這也是它比較明顯的一個功能特色之一。
正是因為微信小程序具備這么多的功能特點，所以現在很多公司乃至商家都加入了微信小程序開發的隊伍中，想要借助小程序開發的這波紅利中，為自己帶來更多的收益。如果大家也想開發小程序，歡迎到魚爪網進行詳細的了解，魚爪網為了滿足更多客戶的不同需求，不斷推出適應市場的小程序，并實現可視化拖拽的操作，以滿足客戶對不同模板的個性化創作。

3.微信小程序開發流程

3.1 微信公眾平臺注冊

先百度搜索：微信公眾平臺，進行賬號注冊，如果已經注冊好了的話就不需要注冊了，直接點擊登錄即可

進入如下頁面，再點擊小程序

然后完成小程序注冊

注冊好了之后會給你填寫的郵箱發送一個激活小程序的信息

點擊下面那個網址，就能夠完成小程序的注冊了

3.2 微信開發者工具下載

先在微信官方文檔，找到工具欄，點擊微信開發者工具，根據自己軟件下載不同的版本，點擊下載即可，本文下載穩定版Windows64位為例

下載完成后點擊安裝完成即可

用微信掃描二維碼就可以完成登錄

3.3 微信開發者工具界面上的基本功能介紹

3.3.1 開發環境背景設置

我們需要完成的是一個小程序開發的界面，所以點擊小程序新建項目，先填寫項目名稱，目錄默認存儲在C盤，可以更改目錄位置，APPID可以選擇注冊或者測試號，現在學習可以直接點擊測試號即可，或者點擊注冊完成小程序APPID號注冊，本文直接采用的測試號完成新建項目

完成新建項目后會進入以下界面，系統默認黑色背景，方便代碼更加清晰

可以在設置里點擊外觀設置，設置背景顏色、調試器主題顏色、模擬器位置

設置淺色的話，代碼顏色不容易區分，建議使用系統默認的深色

3.3.2 小程序開發工具

微信開發者工具分為三個模塊：模擬器、調試器、編輯器

模擬器可以實時更新我們所寫的，比較人性化的

右上方的編輯器，負責編譯寫代碼的地方

下面屬于調試器的內容，有問題就會在下面報錯

3.3.3 開發界面基本工具介紹

這個是編寫代碼的文件夾，每個文件夾的功能都是不同的

這里可以修改調試器的機型、顯示比例、字體大小的功能

編譯：對模擬器頁面重新編譯一次；
預覽：點擊預覽會出現一個二維碼，可以在手機上觀察到自己的開發的小程序，點擊自動閱覽可以與手機連接自動進入小程序，但是這個二維碼只能開發者閱覽，在沒有發布體驗版或正式版時其他用戶是不能被觀察到的；
真機調試：功能實際上和預覽很相似，實現在手機上觀察自己開發的小程序，但是會出現一個調試器，打印我們在運行時出現的錯誤信息的，這個是預覽沒有的功能；
切后臺：能夠在模擬器上顯示一些小程序主入口、收藏、掃描二維碼等很多功能；
清緩存：這個功能的話就是快速清除系統數據、文件、編譯、授權、網絡、登錄狀態等信息緩存，可以單個清除也可以全部清除

點擊詳情里出現接口的基本信息，APPID在上傳之前要經過修改才能上傳，需要在微信公眾平臺上的小程序，點擊小程序的開發，然后再點擊開發設置，把開發者ID復制粘貼進去就生成了APPID號了



點擊確定之后你會發現現在的界面有些變化，增加了云開發，測試號按鈕被上傳按鈕替代

pages為頁面，index表示首頁，utils為公共文件可以存放一些公共文件

app.js是一個入口文件，包括一些必要信息，一定要存在，實現一些交互動效，是我們小程序的邏輯層
app.json是配置項，配置標題名、頁面顏色什么的
app.wxss代表css，設置顏色和寬高等一些功能
index.js是邏輯層，所有交互信息都放在這里面
index.json是配置項
index.wxml代表html,沒有區別
index.wxss代表css，也是沒有區別

大體上，界面上的主要基本功能就已經介紹完畢了。

3.4實現一些小程序入門基本功能

3.4.1 文件夾的基本功能

先介紹logs.json吧，將text內容改為微信授權

點擊頭像，這里就可以看到變化了

app.json里面包含兩個屬性pages和window
window下面的是關于界面外觀屬性進行調整

修改text改為“微信小程序”，保存查看效果，WeChat就作出了改變，效果如下

3.4.2 實現分欄模塊化

首先在app.json里輸入以下代碼
這幾個地方是可以修改的，里面內容可以根據自己的需要進行修改，如果不止兩個任務欄的話仿照text內容再去進行添加，好像之多只能添加五個，任務欄上的標簽可以修改，具體效果如下

這樣就完成了分欄的效果

app.json里代碼如下所示

{ "pages": ["pages/index/index","pages/logs/logs" ], "window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "微信小程序","navigationBarTextStyle": "black","enablePullDownRefresh": true }, "debug": true, "tabBar": {"color": "#444","selectedColor": "#219bf3","backgroundColor": "#e0e0e0","borderStyle": "white","position": "top","list": [{"text": "工作欄","pagePath": "pages/index/index"},{"text": "查看啟動日志","pagePath": "pages/logs/logs"}] }, "sitemapLocation": "sitemap61.json" }

3.4.3 實現登錄界面設定

主要是logs.js、logs.wxml和logs.wxss三個代碼的配置

logs.js代碼

// pages/login/login.js const app = getApp() Page({/*** 頁面的初始數據*/data: {disabled:false,no:'',pwd:'',noinput:false,pwdinput:false,},noinput:function(e){this.setData({no:e.detail.value});this.setData({noinput:true});if(this.data.noinput==true && this.data.pwdinput==true){this.setData({ disabled: false });}},pwdinput: function (e) {this.setData({ pwd: e.detail.value });this.setData({ pwdinput: true });if (this.data.noinput == true && this.data.pwdinput == true) {this.setData({ disabled: false });}},formSubmit: function (e) {wx.showLoading({title: '登錄中...',})console.log(e);this.setData({ disabled: true});wx.request({url: app.globalData.url.login, //僅為示例，并非真實的接口地址data: {no: e.detail.value.no,pwd: e.detail.value.pwd},header: {'content-type': 'application/json' // 默認值},success: function (res) {console.log(res);if (res.statusCode == 200) {if (res.data.error == true) {wx.showToast({title: res.data.msg,icon: 'none',duration: 2000})} else {wx.setStorageSync('student', res.data.data);wx.showToast({title: res.data.msg,icon: 'success',duration: 2000})setTimeout(function(){wx.switchTab({url: '../teacher/teacher',})},2000)}}else{wx.showToast({title: '服務器出現錯誤',icon: 'none',duration: 2000})}}})},onLoad: function (options) {this.setData({disabled:false});var student = wx.getStorageSync('student');if (typeof (student) == 'object' && student.no != '' && student.classid != '') {wx.switchTab({url: '../teacher/teacher',})}},onReady: function () {},onShow: function () {if(this.data.no=='' || this.data.pwd==''){this.setData({ disabled: true });}else{this.setData({ disabled: false });}},onHide: function () {},onUnload: function () {},onPullDownRefresh: function () {},onReachBottom: function () {},/*** 用戶點擊右上角分享*/onShareAppMessage: function () {} })

logs.wxml代碼如下

<!--pages/login/login.wxml--> <view class="container"> <view class="login-icon"> <image class="login-img" src="/images/logo.png"></image> </view> <view class="login-from"> <form bindsubmit="formSubmit" class='form'><view class="myno"><!-- 賬號 --><view class="weui-cell weui-cell_input"><image class="nameImage" src="/images/name.png"></image><!-- <view class="weui-cell__hd"><view class="weui-label">賬號</view></view> --><view class="weui-cell__bd"><input class="weui-input" name="no" bindinput="noinput" value='{{no}}' placeholder="請輸入賬號" /></view></view></view><view class="mypwd"><!-- 密碼 --><view class="weui-cell weui-cell_input"><image class="nameImage" src="/images/key.png"></image><!-- <view class="weui-cell__hd"><view class="weui-label">密碼</view></view> --><view class="weui-cell__bd"><input class="weui-input" type="password" name="pwd" bindinput="pwdinput" placeholder="請輸入密碼" value='{{pwd}}'/></view></view></view><!--按鈕--> <view class="loginBtnView"> <button class="loginBtn" size="{{primarySize}}" form-type='submit' disabled='{{disabled}}'>登錄</button> </view> </form></view> </view>

logs.wxss代碼如下

/* pages/login/login.wxss */ page{height: 100%;background-size:100%;background-image: url('http://songlijuan.top/bk2.jpg'); }.container {height: 100%;display: flex;flex-direction: column;padding: 0;box-sizing: border-box;/* background-color: #f2f2f2; */ } /*登錄圖片*/ .login-icon{flex: none;margin: 0 auto;margin-top: 200rpx; } .login-img{width: 220rpx;height: 220rpx;border-radius: 110rpx;opacity: 0.6; }/*表單內容*/ .login-from {margin-top: 90px;flex: auto;height:100%; }/* 輸入框 */ .myno{width: 90%;height: 80rpx;margin: 0 auto;border:1px solid #ccc;border-radius: 50rpx;} .mypwd{width: 90%;height: 80rpx;margin: 0 auto;border:1px solid #ccc;border-radius: 50rpx;margin-top: 20rpx; } /*按鈕*/ .loginBtnView {margin-top: 0px;margin-bottom: 0px;padding-bottom: 0px; }.loginBtn {width: 90%;height: 80rpx;line-height: 80rpx;margin-top: 35px;color: #fff;background-color:#7e8ef0;border: 0.1rpx solid #ccc;border-radius: 40rpx; }.nameImage, .keyImage {margin-right: 10px;width: 14px;height: 14px }

點擊保存，然后模擬器面板就能夠顯示以下界面，然后點擊頭像就能夠進入登錄界面


補充一點，新手教程這四個字需要在Index.wxml在如圖所示中加入以下代碼，然后點擊保存就能夠實現了，還需添加就如圖所示繼續添加注釋，還是比較容易的


這里大概就完成了小程序開發的一些入門的基礎功能吧

3.5上傳小程序開發

然后點擊上傳按鈕，會彈出下面界面，填寫完版本號和項目備注，完成上傳即可
但是需要注意的是一定要先完成APPID的添加，不然沒有這個按鈕，所以要在小程序開發設置那里復制過來，然后粘貼到APPID上才能完成顯示上傳按鍵，直接想上傳實現不了


然后進入小程序首頁，完成小程序基本信息填寫

進行小程序名稱、小程序簡稱、小程序頭像、介紹和服務類型填寫完成提交才能去正式發布開發的微信小程序。
有個小地方注意一下，小程序頭像要求144*144而且大小小于2M以內，但是一般相機的原圖都是會大于2M的，不滿足要求，所以這里我這里沒有采用原圖，原圖基本都大于2M，只能先進行圖片壓縮去滿足小程序頭像要求

填寫完個人信息后，然后點擊版本發布旁邊的前往發布進入開發界面

然后提交版本就好了，點擊確認就好了

但是注意一點，提交給微信團隊審核要確保功能完整可以正常打開和運行起來，不能是測試版或者是Demo小程序的調試和 預覽可在開發者工具上進行的，不然提交之后也會被打回來，要看一下提交平臺的具體要求，這要才能確保提交的正確性。

補充一點
小程序體驗版是并未上線向公眾開放的版本，只是給被授權的開發人員看的，并且支持調試模式。上線的小程序面向公眾開放，不支持調試模式。
通過小程序體驗版確認小程序無誤后提交代碼審核，通過后需要開發者手動點擊發布，小程序才會發布，成為上線小程序，并面向公眾用戶提供服務。
所以在審核期間，如果需要給別人分享你的成果就需要進行如下操作了
在小程序中點擊成員管理，然后你會看到下面有個成員體驗，點擊添加就好了，輸入微信號完成添加信息，一共可以添加15個，這十五個可以在審核期間可以觀看你的小程序，其他人員就不能看到，所以給別人看時需要添加進去才能完成觀看。


到這里微信小程序開發基礎教程差不多就結束了，入門到此就介紹完畢！

總結

以上是生活随笔為你收集整理的微信小程序开发基础教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。