文章目錄

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

1.什么叫做微信小程序

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

2.微信小程序開發(fā)功能特點

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

3.微信小程序開發(fā)流程

3.1 微信公眾平臺注冊

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

進(jìn)入如下頁面，再點擊小程序

然后完成小程序注冊

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

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

3.2 微信開發(fā)者工具下載

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

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

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

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

3.3.1 開發(fā)環(huán)境背景設(shè)置

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

完成新建項目后會進(jìn)入以下界面，系統(tǒng)默認(rèn)黑色背景，方便代碼更加清晰

可以在設(shè)置里點擊外觀設(shè)置，設(shè)置背景顏色、調(diào)試器主題顏色、模擬器位置

設(shè)置淺色的話，代碼顏色不容易區(qū)分，建議使用系統(tǒng)默認(rèn)的深色

3.3.2 小程序開發(fā)工具

微信開發(fā)者工具分為三個模塊：模擬器、調(diào)試器、編輯器

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

右上方的編輯器，負(fù)責(zé)編譯寫代碼的地方

下面屬于調(diào)試器的內(nèi)容，有問題就會在下面報錯

3.3.3 開發(fā)界面基本工具介紹

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

這里可以修改調(diào)試器的機(jī)型、顯示比例、字體大小的功能

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

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



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

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

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

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

3.4實現(xiàn)一些小程序入門基本功能

3.4.1 文件夾的基本功能

先介紹logs.json吧，將text內(nèi)容改為微信授權(quán)

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

app.json里面包含兩個屬性pages和window
window下面的是關(guān)于界面外觀屬性進(jìn)行調(diào)整

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

3.4.2 實現(xiàn)分欄模塊化

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

這樣就完成了分欄的效果

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 實現(xiàn)登錄界面設(shè)定

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

logs.js代碼

// pages/login/login.js const app = getApp() Page({/*** 頁面的初始數(shù)據(jù)*/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' // 默認(rèn)值},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: '服務(wù)器出現(xiàn)錯誤',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; }/*表單內(nèi)容*/ .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 }

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


補(bǔ)充一點，新手教程這四個字需要在Index.wxml在如圖所示中加入以下代碼，然后點擊保存就能夠?qū)崿F(xiàn)了，還需添加就如圖所示繼續(xù)添加注釋，還是比較容易的


這里大概就完成了小程序開發(fā)的一些入門的基礎(chǔ)功能吧

3.5上傳小程序開發(fā)

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


然后進(jìn)入小程序首頁，完成小程序基本信息填寫

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

填寫完個人信息后，然后點擊版本發(fā)布旁邊的前往發(fā)布進(jìn)入開發(fā)界面

然后提交版本就好了，點擊確認(rèn)就好了

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

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


到這里微信小程序開發(fā)基礎(chǔ)教程差不多就結(jié)束了，入門到此就介紹完畢！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。